HTML及HTML标签语言

什么是HTML？

HTML（HyperText Markup Language）是超文本标记语言的缩写，是用于创建网页的标准标记语言。HTML描述了网页的结构，浏览器读取HTML文档并将其渲染成可视化或可听的网页。

HTML由一系列元素组成，这些元素可以用来封装、包装或标记文档的不同部分，使其以某种方式显示或工作。

HTML的基本结构

一个典型的HTML文档具有以下基本结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

HTML元素

HTML元素由开始标签、内容和结束标签组成：

1	<标签名>内容</标签名>

有些元素是空元素，没有内容，也没有结束标签，例如：

1
2
3

<img src="image.jpg" alt="图片描述">
<br>
<hr>

HTML元素分类

根据MDN Web Docs的分类，HTML元素可以分为以下几大类：

1. 主根元素

主根元素是HTML文档的顶级容器：

元素	描述
`<html>`	表示HTML文档的根（顶级元素），所有其他元素必须是此元素的后代。

2. 文档元数据

元数据包含页面的配置信息，帮助浏览器和搜索引擎更好地理解页面：

元素	描述
`<base>`	指定文档中所有相对URL的根URL，一份文档中只能有一个。
`<head>`	包含文档的配置信息（元数据），如标题、脚本和样式表。
`<link>`	指定当前文档与外部资源的关系，常用于链接CSS和图标。
`<meta>`	表示不能由其他元相关元素表示的元数据信息。
`<style>`	包含文档的样式信息，会应用于包含此元素的文档。
`<title>`	定义文档的标题，显示在浏览器标题栏或标签页上，只应包含文本。

3. 分区根元素

分区根元素定义了文档的主要内容区域：

元素	描述
`<body>`	表示文档的内容，文档中只能有一个该元素。

4. 内容分区

内容分区元素用于将文档内容从逻辑上组织划分：

元素	描述
`<address>`	表示提供联系信息的区域，如个人、组织的联系方式。
`<article>`	表示文档中独立的、可复用的结构，如论坛帖子、新闻文章等。
`<aside>`	表示与主要内容间接相关的部分，通常以侧边栏形式出现。
`<footer>`	表示最近父分段的页脚，通常包含作者、版权数据或相关链接。
`<header>`	表示页面或区块的头部，包含介绍性内容或辅助导航。
`<h1> - <h6>`	表示6个不同级别的章节标题，`<h1>`级别最高，`<h6>`级别最低。
`<main>`	表示页面的主要内容，每个页面应只有一个`<main>`元素。
`<nav>`	表示导航链接区域，如菜单、目录和索引。
`<section>`	表示文档中一个通用独立章节，通常包含一个标题。

5. 文本内容

文本内容元素用于组织文档中的文本内容：

元素	描述
`<blockquote>`	表示引用内容，通常会有缩进效果。
`<dd>`	用于描述列表中先前术语的描述、定义或值。
`<div>`	通用型流式内容容器，无特定语义。
`<dl>`	包含一组术语（`<dt>`）和描述（`<dd>`）的列表，用于展示词汇表或元数据。
`<dt>`	在描述或定义列表中声明一个术语，仅能作为`<dl>`的子元素。
`<figcaption>`	描述其父元素`<figure>`中内容的标题或图例。
`<figure>`	表示一段独立的内容，可能包含`<figcaption>`定义的标题。
`<hr>`	表示段落级元素之间的主题转换。
`<li>`	表示列表中的一个项目，可以是`<ul>`、`<ol>`或`<menu>`的子元素。
`<main>`	表示页面的主要内容。
`<ol>`	有序列表，列表项的顺序很重要。
`<p>`	表示一个段落。
`<pre>`	表示预格式化的文本，保留空格和换行符。
`<ul>`	无序列表，列表项的顺序不重要。

6. 内联文本语义

内联文本语义元素用于定义文本的特定含义：

元素	描述
`<a>`	创建超链接，指向其他页面或同一页面的不同部分。
`<abbr>`	表示缩写或首字母缩写，可通过`title`属性提供完整扩展。
`<b>`	表示粗体文本，不传达额外的重要性。
`<br>`	插入换行符。
`<cite>`	表示对创造性作品的引用，如书籍、文章等的标题。
`<code>`	表示计算机代码。
`<em>`	表示强调文本，通常会斜体显示。
`<i>`	表示斜体文本，用于表示专业术语、外来语等。
`<mark>`	表示需要突出显示或标记的文本。
`<q>`	表示短引用。
`<s>`	表示不再准确或不再相关的文本，通常会显示删除线。
`<small>`	表示小号文本，如免责声明、版权信息等。
`<span>`	通用行内容器，无特定语义。
`<strong>`	表示重要文本，通常会粗体显示。
`<sub>`	表示下标文本。
`<sup>`	表示上标文本。
`<time>`	表示日期和时间。
`<u>`	表示带下划线的文本，用于表示拼写错误或专有名称。

7. 媒体和嵌入内容

用于嵌入各种媒体资源：

元素	描述
`<audio>`	用于嵌入音频内容。
`<canvas>`	用于通过JavaScript绘制图形和动画。
`<embed>`	用于嵌入外部内容，如插件。
`<iframe>`	用于在当前页面中嵌入另一个HTML页面。
`<img>`	用于嵌入图片。
`<object>`	用于嵌入外部资源，如图像、音频、视频等。
`<source>`	为`<audio>`或`<video>`元素指定媒体资源。
`<svg>`	用于绘制矢量图形。
`<track>`	用于为`</think_never_used_51bce0c785ca2f68081bfa7d91973934>`或`<video>`元素提供字幕或其他文本轨道。
`<video>`	用于嵌入视频内容。

8. 表单元素

用于创建交互式表单：

元素	描述
`<button>`	创建可点击的按钮。
`<datalist>`	为`<input>`元素提供预定义选项列表。
`<fieldset>`	用于对表单中的相关元素进行分组。
`<form>`	表示文档中的一个表单，包含交互式控件。
`<input>`	表示用户可输入数据的控件，类型由`type`属性决定。
`<label>`	为表单控件提供文本标签，提高可访问性。
`<legend>`	为`<fieldset>`元素提供标题。
`<optgroup>`	用于对`<select>`元素中的选项进行分组。
`<option>`	表示`<select>`、`<optgroup>`或`<datalist>`中的一个选项。
`<select>`	创建下拉选择列表。
`<textarea>`	创建多行文本输入控件。

9. 表格元素

用于创建表格结构：

元素	描述
`<caption>`	为表格提供标题或说明。
`<col>`	定义表格中一个或多个列的属性。
`<colgroup>`	用于对表格中的列进行分组，以便应用样式。
`<table>`	表示表格数据。
`<tbody>`	表示表格的主体内容。
`<td>`	表示表格中的数据单元格。
`<tfoot>`	表示表格的页脚内容。
`<th>`	表示表格中的表头单元格。
`<thead>`	表示表格的表头内容。
`<tr>`	表示表格中的一行。

10. 交互元素

用于创建交互式内容：

元素	描述
`<details>`	表示可展开/折叠的内容块。
`<dialog>`	表示对话框或其他交互式组件。
`<menu>`	表示命令菜单，如上下文菜单或工具栏菜单。
`<summary>`	为`<details>`元素提供可见的标题或摘要。

11. Web组件

用于创建自定义HTML元素：

元素	描述
`<slot>`	表示Web组件中的占位符，可由外部内容填充。
`<template>`	表示可重复使用的HTML片段，不会在页面加载时渲染。

常用HTML标签示例

标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落和文本格式化

<p>这是一个段落。</p>

<strong>重要文本</strong>
<em>强调文本</em>
<b>粗体文本</b>
<i>斜体文本</i>
<u>下划线文本</u>
<s>过时文本</s>
<mark>高亮文本</mark>
<sup>上标文本</sup>
<sub>下标文本</sub>
<code>计算机代码</code>
<small>小号文本</small>
<abbr title="HyperText Markup Language">HTML</abbr>

链接

1
2
3

<a href="https://www.example.com">访问示例网站</a>
<a href="https://www.example.com" target="_blank">在新窗口打开</a>
<a href="#section-1">跳转到页面某部分</a>

图片

1 2	<img src="image.jpg" alt="图片描述" width="300" height="200"> <img src="image.webp" alt="WebP图片" loading="lazy">

音频和视频

音频

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持音频元素。
</audio>

视频

视频标签的兼容性写法，确保在不同浏览器中都能正常播放：

<video width="640" height="360" controls poster="video-poster.jpg">
  <!-- MP4格式，支持大多数现代浏览器 -->
  <source src="video.mp4" type="video/mp4">
  <!-- WebM格式，支持Chrome、Firefox、Opera等 -->
  <source src="video.webm" type="video/webm">
  <!-- Ogg格式，支持Firefox、Opera等 -->
  <source src="video.ogg" type="video/ogg">
  <!-- 兼容性文本，当浏览器不支持video标签时显示 -->
  您的浏览器不支持HTML5视频。请升级您的浏览器或使用<a href="video.mp4">下载视频</a>。
</video>

<!-- 带有自动播放、循环和静音的视频 -->
<video autoplay loop muted playsinline width="640" height="360">
  <source src="background-video.mp4" type="video/mp4">
  <source src="background-video.webm" type="video/webm">
</video>

<!-- 带有字幕的视频 -->
<video controls width="640" height="360">
  <source src="video-with-subtitles.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="subtitles-zh.vtt" srclang="zh" label="中文" default>
  您的浏览器不支持HTML5视频。
</video>

列表

<!-- 无序列表 -->
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

<!-- 定义列表 -->
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

表格

<table border="1">
    <caption>学生成绩表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>90</td>
            <td>85</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>88</td>
            <td>92</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>平均分</td>
            <td>89</td>
            <td>88.5</td>
        </tr>
    </tfoot>
</table>

表单

<form action="/submit" method="post">
    <fieldset>
        <legend>个人信息</legend>
        <div>
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" placeholder="请输入姓名" required>
        </div>
        <div>
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
        </div>
        <div>
            <label for="gender">性别：</label>
            <select id="gender" name="gender">
                <option value="male">男</option>
                <option value="female">女</option>
                <option value="other">其他</option>
            </select>
        </div>
        <div>
            <label>爱好：</label>
            <input type="checkbox" name="hobby" value="reading"> 阅读
            <input type="checkbox" name="hobby" value="sports"> 运动
            <input type="checkbox" name="hobby" value="music"> 音乐
        </div>
        <div>
            <label>订阅：</label>
            <input type="radio" name="newsletter" value="yes" checked> 订阅 newsletter
            <input type="radio" name="newsletter" value="no"> 不订阅
        </div>
        <div>
            <label for="message">留言：</label>
            <textarea id="message" name="message" rows="4" cols="50"></textarea>
        </div>
        <div>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <button type="button">普通按钮</button>
        </div>
    </fieldset>
</form>

语义化页面结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义化页面结构</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/about">关于</a></li>
                <li><a href="/contact">联系</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <header>
                <h2>文章标题</h2>
                <time datetime="2024-01-01">2024年1月1日</time>
            </header>
            <section>
                <h3>第一节</h3>
                <p>文章内容...</p>
            </section>
            <section>
                <h3>第二节</h3>
                <p>文章内容...</p>
            </section>
            <footer>
                <p>作者：张三</p>
            </footer>
        </article>
        
        <aside>
            <h3>相关文章</h3>
            <ul>
                <li><a href="#">相关文章1</a></li>
                <li><a href="#">相关文章2</a></li>
            </ul>
        </aside>
    </main>
    
    <footer>
        <p>&copy; 2024 网站名称. 保留所有权利.</p>
    </footer>
</body>
</html>

HTML属性

HTML标签可以包含属性，属性提供了有关元素的更多信息：

1	<标签名属性名="属性值">内容</标签名>

常见的属性包括：

id：元素的唯一标识符
class：元素的类名，用于CSS样式和JavaScript
src：资源的URL，如图片、音频、视频等
href：链接的目标URL
alt：图片的替代文本
title：元素的额外信息，鼠标悬停时显示
width和height：元素的宽度和高度
style：内联CSS样式
lang：元素内容的语言

HTML注释

HTML注释用于在代码中添加说明，不会显示在页面上：

1	<!-- 这是一个HTML注释 -->

HTML版本

HTML有多个版本，目前最新的是HTML5，它引入了许多新特性：

新的语义化标签
音频和视频支持
Canvas绘图
SVG图形
地理位置API
本地存储
表单增强
Web Workers
Web Sockets

编写HTML的最佳实践

使用语义化标签：选择合适的标签来描述内容，提高可访问性和SEO
保持代码简洁：避免不必要的标签和属性
使用正确的嵌套：确保标签正确嵌套，不交叉
使用小写标签和属性：虽然HTML不区分大小写，但小写是通用约定
添加alt属性：为所有图片添加alt属性，提高可访问性
使用合适的标题层级：从<h1>到<h6>，不要跳过层级
使用外部CSS和JavaScript：将样式和脚本与HTML分离，提高可维护性
优化图片：使用合适的图片格式和尺寸，提高加载速度
确保响应式设计：使用viewport元标签和响应式布局技术
测试跨浏览器兼容性：确保在不同浏览器中正常显示

总结

HTML是网页开发的基础，掌握HTML标签和语义化结构对于创建高质量的网页至关重要。随着Web技术的发展，HTML5提供了更多强大的功能，使开发者能够创建更加丰富、交互性更强的网页应用。

通过学习和实践HTML，你可以开始你的Web开发之旅，为后续学习CSS和JavaScript打下坚实的基础。