HTML 各种标签的使用说明书
HTML 各种标签的使用说明书
1. HTML 简介
HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它使用一系列标签来描述网页的结构和内容,这些标签被浏览器解释并渲染成用户看到的网页。HTML是构建Web的基础,通常与CSS(层叠样式表)和JavaScript一起使用,以创建丰富多彩的交互式网页。
基本特点
- 由一系列标签组成,标签通常成对出现(开始标签和结束标签)
- 标签可以包含属性,提供额外的信息
- 不区分大小写,但推荐使用小写
- 是一种标记语言,不是编程语言
- 由万维网联盟(W3C)维护和标准化
2. HTML 文档结构
一个标准的HTML文档具有以下基本结构:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>页面标题</title><!-- 其他头部信息,如CSS、JavaScript等 -->
</head>
<body><!-- 页面内容,如文本、图像、链接等 -->
</body>
</html>
<!DOCTYPE html>
:声明文档类型,告诉浏览器这是一个HTML5文档<html>
:HTML文档的根元素<head>
:包含文档的元数据,如标题、字符集、样式等<body>
:包含用户可见的页面内容
3. 基本结构标签
3.1 <!DOCTYPE>
标签
<!DOCTYPE>
声明位于HTML文档的第一行,用于告诉浏览器文档使用的HTML版本。
语法:
<!DOCTYPE html> <!-- HTML5 文档类型声明 -->
说明:在HTML5中,<!DOCTYPE>
声明非常简单,不区分大小写,但推荐使用上面的格式。
3.2 <html>
标签
<html>
标签是HTML文档的根元素,所有其他HTML元素都应该包含在<html>
标签内。
语法:
<html lang="zh-CN"><!-- 文档内容 -->
</html>
属性:
lang
:指定文档的主要语言,有助于屏幕阅读器和搜索引擎
3.3 <head>
标签
<head>
标签包含文档的元数据,这些信息不会显示在网页上,但对于浏览器和搜索引擎很重要。
语法:
<head><!-- 元数据内容 -->
</head>
3.4 <title>
标签
<title>
标签定义文档的标题,显示在浏览器的标题栏或标签页上,也是搜索引擎结果中的页面标题。
语法:
<head><title>我的第一个HTML页面</title>
</head>
3.5 <meta>
标签
<meta>
标签提供关于HTML文档的元数据,如字符集、描述、关键词等。
语法:
<head><meta charset="UTF-8"><meta name="description" content="这是一个HTML教程页面"><meta name="keywords" content="HTML,教程,标签"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
常用属性:
charset
:设置文档的字符编码name
:定义元数据的名称content
:定义元数据的值viewport
:用于响应式网页设计,控制页面在移动设备上的显示
3.6 <body>
标签
<body>
标签包含HTML文档的可见内容,如文本、图像、链接、表格等。
语法:
<body><!-- 可见内容 -->
</body>
常用属性:
bgcolor
:设置背景颜色(HTML5已废弃,推荐使用CSS)text
:设置文本颜色(HTML5已废弃,推荐使用CSS)
4. 文本标签
4.1 标题标签 <h1>
到 <h6>
标题标签用于定义HTML文档中的标题,从 <h1>
到 <h6>
,重要性依次递减。
语法:
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
说明:
<h1>
是最重要的标题,一个页面最好只使用一个<h1>
标签- 标题标签有助于SEO(搜索引擎优化)和文档结构
4.2 段落标签 <p>
<p>
标签用于定义段落。
语法:
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
常用属性:
align
:设置段落文本的对齐方式(HTML5已废弃,推荐使用CSS)
4.3 换行标签 <br>
<br>
标签用于插入一个换行符,是一个空标签(没有结束标签)。
语法:
<p>这是第一行<br>这是第二行</p>
4.4 水平线标签 <hr>
<hr>
标签用于插入一条水平线,也是一个空标签。
语法:
<p>这是一段文字。</p>
<hr>
<p>这是另一段文字。</p>
常用属性:
width
:设置水平线的宽度size
:设置水平线的高度color
:设置水平线的颜色(HTML5已废弃,推荐使用CSS)
4.5 文本格式化标签
加粗标签 <strong>
和 <b>
<strong>这段文字会被加粗显示(强调重要性)</strong>
<b>这段文字也会被加粗显示(仅视觉加粗)</b>
斜体标签 <em>
和 <i>
<em>这段文字会以斜体显示(强调)</em>
<i>这段文字也会以斜体显示(仅视觉斜体)</i>
下划线标签 <u>
<u>这段文字会有下划线</u>
删除线标签 <del>
<del>这段文字会有删除线</del>
上标和下标标签 <sup>
和 <sub>
2<sup>3</sup> = 8
H<sub>2</sub>O 是水的化学式
大号和小号标签 <big>
和 <small>
<big>这段文字会大一些</big>
<small>这段文字会小一些</small>
5. 链接标签
5.1 超链接标签 <a>
<a>
标签用于创建超链接,可以链接到其他网页、文件、同一页面的位置等。
语法:
<a href="https://www.example.com">访问示例网站</a>
常用属性:
href
:指定链接的目标地址target
:指定在何处打开链接文档_blank
:在新窗口或标签页中打开_self
:在当前窗口中打开(默认)_parent
:在父框架中打开_top
:在整个窗口中打开
title
:设置鼠标悬停时显示的提示文本download
:指定链接的目标将被下载而非导航
示例:
<!-- 在新窗口打开链接 -->
<a href="https://www.example.com" target="_blank">在新窗口打开</a><!-- 链接到同一页面的特定位置 -->
<a href="#section1">跳转到第一部分</a>
...
<h2 id="section1">第一部分</h2><!-- 下载链接 -->
<a href="document.pdf" download="我的文档.pdf">下载PDF文档</a>
6. 图像标签
6.1 图像标签 <img>
<img>
标签用于在HTML页面中嵌入图像,是一个空标签。
语法:
<img src="image.jpg" alt="描述图像的文本" width="300" height="200">
常用属性:
src
:指定图像的URL(路径)alt
:指定图像无法显示时的替代文本,对SEO和可访问性很重要width
:设置图像的宽度height
:设置图像的高度title
:设置鼠标悬停时显示的提示文本loading
:指定图像的加载方式(lazy
表示延迟加载)
示例:
<!-- 基本图像 -->
<img src="cat.jpg" alt="一只可爱的猫" width="400" height="300"><!-- 带有标题的图像 -->
<img src="dog.jpg" alt="一只快乐的狗" title="这是我家的宠物狗"><!-- 延迟加载的图像 -->
<img src="large-image.jpg" alt="一张大图" loading="lazy">
6.2 图像映射 <map>
和 <area>
<map>
和 <area>
标签用于创建图像映射,即将图像分成多个可点击区域,每个区域链接到不同的目标。
语法:
<img src="image.jpg" alt="图像映射示例" usemap="#imagemap"><map name="imagemap"><area shape="rect" coords="0,0,100,100" href="page1.html" alt="矩形区域"><area shape="circle" coords="150,150,50" href="page2.html" alt="圆形区域"><area shape="poly" coords="200,200,250,250,200,300" href="page3.html" alt="多边形区域">
</map>
说明:
<img>
标签的usemap
属性必须与<map>
标签的name
属性匹配<area>
标签的shape
属性定义区域形状(rect
、circle
、poly
或default
)<area>
标签的coords
属性定义区域的坐标
7. 列表标签
7.1 无序列表 <ul>
<ul>
标签用于创建无序列表,每个列表项使用 <li>
标签定义。
语法:
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ul>
常用属性:
type
:设置列表项标记的类型(disc
、circle
、square
,HTML5已废弃,推荐使用CSS)
7.2 有序列表 <ol>
<ol>
标签用于创建有序列表,每个列表项使用 <li>
标签定义,列表项前会自动添加数字。
语法:
<ol><li>第一步</li><li>第二步</li><li>第三步</li>
</ol>
常用属性:
type
:设置列表项标记的类型(1
、A
、a
、I
、i
)start
:设置有序列表的起始值reversed
:指定列表顺序为降序
示例:
<!-- 从5开始的有序列表 -->
<ol start="5"><li>第五步</li><li>第六步</li><li>第七步</li>
</ol><!-- 字母顺序的有序列表 -->
<ol type="A"><li>第一项</li><li>第二项</li><li>第三项</li>
</ol><!-- 降序的有序列表 -->
<ol reversed><li>最后一步</li><li>倒数第二步</li><li>倒数第三步</li>
</ol>
7.3 定义列表 <dl>
、<dt>
和 <dd>
定义列表用于展示术语及其定义,<dl>
是定义列表的容器,<dt>
用于定义术语,<dd>
用于定义术语的描述。
语法:
<dl><dt>HTML</dt><dd>超文本标记语言,用于创建网页结构。</dd><dt>CSS</dt><dd>层叠样式表,用于描述网页的呈现方式。</dd><dt>JavaScript</dt><dd>一种编程语言,用于实现网页的交互功能。</dd>
</dl>
8. 表格标签
8.1 表格基本结构
表格由 <table>
标签定义,包含行(<tr>
)、表头单元格(<th>
)和数据单元格(<td>
)。
语法:
<table><tr><th>姓名</th><th>年龄</th><th>职业</th></tr><tr><td>张三</td><td>28</td><td>工程师</td></tr><tr><td>李四</td><td>32</td><td>设计师</td></tr>
</table>
8.2 常用表格标签
<table>
:定义表格<tr>
:定义表格行<th>
:定义表头单元格(默认加粗居中)<td>
:定义数据单元格<thead>
:定义表格的表头部分<tbody>
:定义表格的主体部分<tfoot>
:定义表格的页脚部分<caption>
:定义表格的标题<col>
:定义表格列的属性<colgroup>
:定义表格列的分组
示例:
<table border="1"><caption>员工信息表</caption><thead><tr><th>姓名</th><th>年龄</th><th>部门</th></tr></thead><tbody><tr><td>张三</td><td>28</td><td>技术部</td></tr><tr><td>李四</td><td>32</td><td>市场部</td></tr></tbody><tfoot><tr><td colspan="3">总计:2名员工</td></tr></tfoot>
</table>
8.3 单元格合并
通过 colspan
和 rowspan
属性可以合并单元格:
colspan
:横向合并单元格(跨列)rowspan
:纵向合并单元格(跨行)
示例:
<table border="1"><tr><th colspan="2">个人信息</th><th>联系方式</th></tr><tr><td>姓名</td><td>张三</td><td rowspan="2">13800138000</td></tr><tr><td>年龄</td><td>28</td></tr>
</table>
9. 表单标签
9.1 表单基本结构
表单由 <form>
标签定义,用于收集用户输入的数据并提交到服务器。
语法:
<form action="submit.php" method="post"><!-- 表单控件 --><input type="submit" value="提交">
</form>
常用属性:
action
:指定表单数据提交的目标URLmethod
:指定提交方法(get
或post
)target
:指定在何处显示提交表单后的响应enctype
:指定表单数据的编码类型(用于文件上传)
9.2 表单控件
输入框 <input>
<input>
标签是最常用的表单控件,通过 type
属性可以创建不同类型的输入字段。
常用类型:
text
:单行文本输入框password
:密码输入框(输入内容会被隐藏)number
:数字输入框email
:电子邮件输入框(会进行基本验证)tel
:电话号码输入框url
:URL输入框date
:日期选择器checkbox
:复选框radio
:单选按钮file
:文件上传控件submit
:提交按钮reset
:重置按钮button
:普通按钮hidden
:隐藏字段
示例:
<form><div><label for="username">用户名:</label><input type="text" id="username" name="username" required></div><div><label for="password">密码:</label><input type="password" id="password" name="password" minlength="6" required></div><div><label for="email">邮箱:</label><input type="email" id="email" name="email" required></div><div><label>性别:</label><input type="radio" id="male" name="gender" value="male"><label for="male">男</label><input type="radio" id="female" name="gender" value="female"><label for="female">女</label></div><div><label>爱好:</label><input type="checkbox" id="reading" name="hobbies[]" value="reading"><label for="reading">阅读</label><input type="checkbox" id="sports" name="hobbies[]" value="sports"><label for="sports">运动</label><input type="checkbox" id="music" name="hobbies[]" value="music"><label for="music">音乐</label></div><div><input type="submit" value="提交"><input type="reset" value="重置"></div>
</form>
下拉列表 <select>
和 <option>
<select>
标签用于创建下拉列表,<option>
标签定义下拉列表中的选项。
语法:
<label for="city">选择城市:</label>
<select id="city" name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shenzhen">深圳</option>
</select>
常用属性:
multiple
:允许选择多个选项size
:指定可见选项的数量selected
:设置选项默认被选中
示例:
<!-- 多选下拉列表 -->
<select name="languages[]" multiple size="3"><option value="html">HTML</option><option value="css" selected>CSS</option><option value="javascript">JavaScript</option><option value="python">Python</option><option value="java">Java</option>
</select>
文本域 <textarea>
<textarea>
标签用于创建多行文本输入框。
语法:
<label for="message">留言:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="请输入您的留言..."></textarea>
常用属性:
rows
:设置文本域的行数cols
:设置文本域的列数placeholder
:设置提示文本readonly
:设置文本域为只读required
:设置为必填项
按钮 <button>
<button>
标签用于创建可点击的按钮,比 <input type="button">
提供了更丰富的功能。
语法:
<button type="button">点击我</button>
<button type="submit">提交表单</button>
<button type="reset">重置表单</button>
常用属性:
type
:设置按钮类型(button
、submit
、reset
)disabled
:设置按钮为禁用状态
示例:
<button type="button" onclick="alert('Hello!')">点击弹出提示</button>
10. 结构标签(HTML5新增)
HTML5引入了一系列新的结构标签,使文档结构更加清晰和语义化。
10.1 主要结构标签
<header>
:定义文档的头部区域,通常包含标题、Logo、导航等<nav>
:定义导航链接的部分<main>
:定义文档的主要内容区域<section>
:定义文档中的一个区域或节<article>
:定义独立的、完整的内容块(如博客文章、评论等)<aside>
:定义文档的侧边栏或附加信息<footer>
:定义文档的页脚区域,通常包含版权信息、联系方式等
示例:
<!DOCTYPE html>
<html>
<head><title>网页标题</title>
</head>
<body><header><h1>网站标题</h1><nav><ul><li><a href="#home">首页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系我们</a></li></ul></nav></header><main><section><h2>最新新闻</h2><article><h3>新闻标题1</h3><p>新闻内容...</p></article><article><h3>新闻标题2</h3><p>新闻内容...</p></article></section><aside><h3>相关链接</h3><ul><li><a href="#">链接1</a></li><li><a href="#">链接2</a></li></ul></aside></main><footer><p>© 2023 网站名称. 保留所有权利.</p></footer>
</body>
</html>
10.2 其他HTML5结构标签
<figure>
:定义自包含的内容(如图像、图表、代码等)<figcaption>
:定义<figure>
元素的标题或说明<details>
:定义用户可以展开或折叠的交互元素<summary>
:定义<details>
元素的可见标题<mark>
:定义需要突出显示或标记的文本<time>
:定义日期或时间
示例:
<!-- figure和figcaption -->
<figure><img src="example.jpg" alt="示例图片"><figcaption>示例图片的说明</figcaption>
</figure><!-- details和summary -->
<details><summary>点击展开更多信息</summary><p>这里是展开后显示的详细内容。</p>
</details><!-- mark和time -->
<p>我们将在<mark><time datetime="2023-12-25">2023年12月25日</time></mark>举行年度大会。</p>
11. 多媒体标签
11.1 音频标签 <audio>
<audio>
标签用于在HTML页面中嵌入音频内容。
语法:
<audio controls><source src="audio.mp3" type="audio/mpeg"><source src="audio.ogg" type="audio/ogg">您的浏览器不支持音频播放。
</audio>
常用属性:
controls
:显示音频控件(播放/暂停、音量等)autoplay
:音频加载后自动播放(请注意:出于用户体验考虑,许多浏览器已不再支持自动播放)loop
:音频循环播放muted
:音频默认静音preload
:指定音频的预加载方式(auto
、metadata
、none
)
11.2 视频标签 <video>
<video>
标签用于在HTML页面中嵌入视频内容。
语法:
<video width="640" height="360" controls><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm">您的浏览器不支持视频播放。
</video>
常用属性:
controls
:显示视频控件width
和height
:设置视频的宽度和高度autoplay
:视频加载后自动播放loop
:视频循环播放muted
:视频默认静音poster
:指定视频播放前显示的图像preload
:指定视频的预加载方式
12. 框架标签
12.1 内联框架 <iframe>
<iframe>
标签用于在当前HTML页面中嵌入另一个HTML页面。
语法:
<iframe src="https://www.example.com" width="800" height="600" title="示例页面"></iframe>
常用属性:
src
:指定要嵌入的页面的URLwidth
和height
:设置iframe的宽度和高度title
:设置iframe的标题,提高可访问性frameborder
:设置是否显示边框(HTML5已废弃,推荐使用CSS)allowfullscreen
:允许iframe中的内容全屏显示sandbox
:启用iframe的沙盒模式,提高安全性
示例:
<!-- 嵌入地图 -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3052.6566404359295!2d116.404444!3d39.915555!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzjCsDU0JzA5LjIiTiAxMTbCsDI0JzE2LjAiVw!5e0!3m2!1szh-CN!2sus!4v1598267890000!5m2!1szh-CN!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe><!-- 嵌入YouTube视频 -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube视频" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
13. 全局属性
全局属性是可以应用于大多数HTML元素的属性。以下是一些常用的全局属性:
属性 | 描述 |
---|---|
id | 为元素指定唯一标识符 |
class | 为元素指定一个或多个类名,用于CSS样式和JavaScript操作 |
style | 为元素指定内联CSS样式 |
title | 设置元素的额外信息,通常显示为工具提示 |
lang | 指定元素内容的语言 |
dir | 指定元素内容的文本方向(ltr 、rtl 、auto ) |
hidden | 隐藏元素 |
accesskey | 设置访问元素的快捷键 |
tabindex | 设置元素的Tab键导航顺序 |
contenteditable | 指定元素内容是否可编辑 |
draggable | 指定元素是否可拖动 |
spellcheck | 指定是否对元素内容进行拼写和语法检查 |
示例:
<!-- 使用id和class属性 -->
<div id="header" class="container"><h1>页面标题</h1>
</div><!-- 使用内联style属性 -->
<p style="color: blue; font-size: 16px;">这段文字是蓝色的,大小为16px。</p><!-- 使用title属性 -->
<img src="image.jpg" alt="示例图片" title="这是一张示例图片"><!-- 使用contenteditable属性 -->
<div contenteditable="true">点击此处编辑此文本...</div>
14. HTML 最佳实践
14.1 语义化HTML
- 使用适当的HTML元素来描述内容的含义,而不仅仅是为了样式
- 优先使用HTML5语义化标签(如
<header>
、<nav>
、<main>
、<section>
、<article>
、<footer>
等) - 避免过度使用
<div>
元素
14.2 可访问性
- 为所有图像添加
alt
属性 - 使用
label
标签与表单控件关联 - 确保表单元素有适当的
name
和id
属性 - 使用标题标签(
<h1>
-<h6>
)创建清晰的文档结构 - 为链接和按钮提供有意义的文本
- 使用
aria-*
属性增强复杂组件的可访问性
14.3 性能优化
- 减少HTML文件的大小,删除不必要的空格和注释
- 使用外部CSS和JavaScript文件,而不是大量内联样式和脚本
- 优化图像大小和格式
- 延迟加载非关键资源
- 减少HTTP请求数量
14.4 SEO优化
- 使用唯一且描述性的页面标题(
<title>
标签) - 为页面添加有意义的元描述(
<meta name="description">
) - 使用语义化HTML结构
- 为重要内容使用适当的标题层级
- 确保所有链接都有描述性的文本
- 使用
alt
属性描述图像内容
15. 常见错误和注意事项
15.1 常见错误
- 忘记关闭标签(如
<p>
没有对应的</p>
) - 使用不兼容的标签嵌套(如在
<p>
标签内放置<div>
标签) - 滥用
<br>
标签来创建间距,而不是使用CSS - 过度使用内联样式,使HTML代码难以维护
- 忽略可访问性考虑,如缺少
alt
属性或label
标签
15.2 注意事项
- HTML标签不区分大小写,但推荐使用小写
- 始终为HTML5文档添加
<!DOCTYPE html>
声明 - 使用UTF-8字符编码(
<meta charset="UTF-8">
) - 避免使用已废弃的HTML标签和属性
- 验证HTML代码以确保符合标准(可以使用W3C Markup Validator)
- 保持代码的缩进和格式一致,提高可读性
16. 扩展学习资源
- W3Schools HTML教程:https://www.w3schools.com/html/
- MDN Web Docs HTML指南:https://developer.mozilla.org/zh-CN/docs/Web/HTML
- HTML Standard:https://html.spec.whatwg.org/
- W3C Markup Validation Service:https://validator.w3.org/
- HTML5 教程 - 菜鸟教程:https://www.runoob.com/html/html5-intro.html