第4章 掌握HTML4的常用标签

简晋之
243 阅读25分钟

1 标签语义化

标签语义化

  • 概念：用特定标签表达特定意义。
  • 原则：不要表现效果，重实际含义。
  • 作用：
    1. 代码可读性清晰
    2. 方便阅读设备解析（屏幕阅读器、盲人阅读器）
    3. 便于SEO（百度等搜索引擎内置的爬虫，便于抓取重要内容）

2 排版标签

排版标签案例

  • 概念：排版标签是用来进行内容排版，可以用来排版文章、新闻等。
  • 作用：适用处理大段文字。
  • 分类：排版标签具体类型内容，如下表所示：
标签名称标签含义是否语义化显示类型标签结构备注
h1\~h6页面标题是块级元素双标签
  1. 不互相嵌套h1~h6标签
  2. h1标签最好只写一个（用于新闻标题或者logo）
p段落内容是块级元素双标签
  1. 不嵌套h1~h6标签
  2. 不嵌套p标签
  3. 不嵌套div标签
div布局盒子否块级元素双标签布局(不懂用哪个排版标签时就用它)

3 文本标签

  • 概念：文本标签用来包裹短语、词汇，放置于排版标签中使用。

  • 作用：文本标签处理特定词汇。

  • 标注：只有blockquote标签与address标签是块级元素，其它文本标签都是行内元素。

  • 常用文本标签，如下表所示：

标签名称标签语义是否语义化元素显示标签结构备注
em标签强调较为重要内容是行内元素双标签无
strong标签强调十分重要内容是行内元素双标签无
span标签包裹短语词汇容器否行内元素双标签不懂用什么文本标签就用它

4 文本相关标签

标签名称标签介绍是否语义化元素类型标签写法备注
br标签换行标签是行内元素单标签只为增加文本间隔请使用CSS
hr标签间隔标签是块级元素单标签只增加间隔线请使用CSS
pre标签按原文显示标签是块级元素双标签无

5 元素显示

元素按照显示方式可以划分为块级元素、行内元素以及行内块元素，具体如下表所示：

显示类型特点嵌套元素类型备注
块级元素
  1. 独占一行（不因本身大小而改变）
  2. 宽度继承自父元素
  3. 高度由标签体内容撑开
  4. 宽高以及内外边距可自行设置
块级元素、行内元素
  1. h1~h6标签不互相嵌套
  2. p标签不嵌套块级元素
行内元素
  1. 不独占一行
  2. 宽高由标签体内容撑开
行内元素无
行内块元素
  1. 不独占一行
  2. 宽高由标签体内容撑开
  3. 宽高以及内外边距可以自行设置
行内块元素无

6 文件路径

我们想要从网络或者本地获取文件资源，就得先要找到文件资源的路径。路径指的是查找文件时，从起点到终点经历的路线。查找文件资源的路径被称为文件路径，而文件路径分为两种：一是相对路径，二是绝对路径。

6.1 相对路径

  • 概念：以当前位置为参考点，去建立路径。 相对路径
  • 注意：
    • 相对路径中的./可以省略不写。
    • 相对路径依赖于当前位置，若当前位置变动相对路径也要变动。

6.2 绝对路径

  • 概念：以根位置作为参考点，去建立路径。
    • 本地绝对路径：E:/a/b/c/奥特曼.jpg。（很少使用）
    • 网络绝对路径： http://www.atguigu.com/images/index_new/logo.png 。
  • 注意：
    • 绝对路径依赖于设备的变动而变动。
    • 使用网络绝对地址引入图片时，在开启了防盗链的服务器中，难以引用图片。

7 图片标签

图片标签是用来在HTML中显示网页的，它的语法结构由图片标签结构以及图片属性结构组成。

  • 图片标签，如下表所示：
标签名称标签含义是否语义化元素显示标签结构备注
img标签图片标签是行内块元素双标签无
  • 图片标签属性，如下表所示：
属性名属性含义备注
src图片地址无
alt图片描述
  1. 搜索引擎通过alt搜索图片
  2. 浏览器以alt属性值替代无法展示的图片
  3. 盲人阅读器会朗读alt属性的值
title图片标题无
height图片高度只给高度，会等比例调节宽度
width图片宽度只给宽度，会等比例调节高度
border图片边框被用于设置图片的边框

8 图片格式

图片按照设计的方式具有以下6种格式，不同格式的图片具有不同的效果，具体见下表所示：

图片格式

名称概述主要特点使用场景
jpg扩展名为.jpg 或 .jpeg，是一种有损的压缩格式（把肉眼不容易观察出来的细节 丢弃了）。支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。对图片细节没有极高要求的场景，例如：网站的产品宣传图等 。—— 该格式网页中很常见。
png扩展名为 .png ，是一种无损的压缩格式，能够更高质量的保存图片。支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。①想让图片有透明背景；②想更高质量的呈现图片；例如 ：公司logo图、重要配图等。
bmp扩展名为.bmp，不进行压缩的一种格式，在最大程度上保留图片更多的细节。支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动 态图。对图片细节要求极高的场景，例如：一些大型游戏中的图片 。（网页中很少使用）。
gif扩展名为 .gif ，仅支持256种颜色，色彩呈现不是很完整。支持的颜色较少、支持 简单 透明背景、支持动态图。网页中的动态图片。
webp扩展名为.webp ，谷歌推出的一种格式，专门用来在网页中呈现图片。具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。网页中的各种图片。
base64一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。靠一些工具或网站把图片进行 base64 编码，形成一串文本。直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。一些较小的图片，或者需要和网页一起加载的图片。

9 超链接标签

超链接是用来跳转链接、打开文件资源、下载文件资源以及唤起指定应用的，正是因为超链接的存在，HTML才能成为超文本。

9.1 语法结构

超链接语法结构由超链接标签以及超链接标签属性组成。

  • 超链接标签概念，如下表所示：
标签名称标签概念是否语义化元素显示标签结构备注
a标签超链接标签是行内元素双标签不能嵌套a标签
  • 超链接属性概念，如下表所示：
属性名属性含义属性值备注
href链接地址URL地址无
target跳转打开窗口方式①_self 在本标签页打开
②_blank 在新标签页打开		无
download浏览器让显示资源强制下载下载文件名若未指定下载文件名，
则默认为原文件名。

9.2 应用方式

超链接有4种应用方式，分别为跳转至页面、打开或下载文件、跳转至瞄点以及唤起指定应用。

9.2.1 跳转至页面

可以通过指定a标签的href属性值，跳转到内部链接或者外部链接。

<!-- 外部链接 --> 
<a href="https://www.jd.com/" target="_blank">去京东</a> 
<!-- 跳转内部链接 --> 
<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>

9.2.2 跳转至文件

可以通过指定a标签的href属性值，在浏览器中打开相关文件。浏览器只支持图片（.png、jpg、gif）、视频（.mp4）以及文本（.pdf）等资源，至于不支持的压缩文件（如.zip），将被浏览器请求是否下载至本地。我们如果不想打开文件资源，只想下载它们，也能通过给a标签添加属性download来强制下载图片、视频以及文本等资源。


<!-- 浏览器能直接打开的文件 --> 
<a href="./resource/自拍.jpg">看自拍</a> 
<a href="./resource/小电影.mp4">看小电影</a> 
<a href="./resource/小姐姐.gif">看小姐姐</a> 
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a> 
<!-- 浏览器不能打开的文件，会自动触发下载 -->
<a href="./resource/内部资源.zip">内部资源</a>

<!-- 强制触发下载 -->
<a href="resource/我的自拍.jpg" download>强制下载我的自拍</a>
<hr>
<a href="resource/我的自拍.jpg" download="生活照">指定下载文件名为生活照，强制下载</a>
⚠ 注意

如果href里面地址是一个压缩包，浏览器会下载该压缩包。

9.2.3 跳转至瞄点

  1. 瞄点是指网页的一个标记点，在我们点击链接时，就可以快速定位到页面中的某个位置。
  2. 如何跳转至瞄点？
  • 第1步 设置锚点
<!--方式一：使用a标签的name属性-->
<a  name="wolf"></a>
<p>灰太狼</p>
<img src="resource/灰太狼.jpg" alt="灰太狼" title="灰太狼">

<!--方式二：使用其它标签并配合id属性-->
<p id="wolf">灰太狼</p>
<img src="resource/灰太狼.jpg" alt="灰太狼" title="灰太狼">
  • 第2步 跳转锚点
 <!-- 跳转指定锚点 -->
<a href="#wolf">跳转到灰太狼</a>

 <!-- 跳转到其它页面指定锚点 -->
<a href="15_HTML超链接_跳转锚点.html#atm">15_HTML超链接_跳转锚点_灰太狼</a>

<!--跳到本页面顶点-->
<a href="#">回到顶点</a>

<!--刷新页面-->
<a href="">刷新页面</a>

<!--执行一段javascript代码-->
<a href="javascript:;">无操作</a>
⚠注意
  1. 具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点。
  2. name 和 id 都是区分大小写的，且 id 最好不是数字开头。

9.2.4 唤起指定应用

通过 a 标签，可以唤起设备应用程序，如唤起设备拨号、唤起设备发送邮件以及唤起设备发送短信等。

<!--唤起设备拨号-->
<a href='tel:10010'>电话联系</a> 
<!--唤起设备发送邮件-->
<a href='mailto:10010@qq.com'>邮件联系</a>
<!--唤起设备发送短信-->
<a href='sms:10086'>短信联系</a>

10 列表标签

列表是用来布局的，可以将杂乱无序的事物按照顺序进行排列，将混乱的思绪理清，类似生活中常使用的清单。

10.1 语法结构

列表按照用途可以分为无序列表、有序列表以及自定义列表，具体见下表所示：

标签名称标签含义是否语义化元素显示标签结构缩写备注
ol标签有序列表是块级元素双标签order list只能嵌套li标签
ul标签无序列表是块级元素双标签unorder list只能嵌套li标签
dl标签自定义列表是块级元素双标签define list只能嵌套dt与dd标签

10.2 应用方式

列表按照用途可以分成无序列表、有序列表以及自定义列表共计3类，其中无序列表应用得最为广泛，常被用来做导航区、卡片区以及页脚链接区等。

10.2.1 无序列表

  • 概念：无顺序或不侧重顺序的列表。
  • 语法规则：在无序列表中，某个列表项li要嵌套其它列表时，得用span标签包裹文字，并在同级嵌套列表标签。
  • 适用场景：图标、新闻、导航栏以及卡片区（实际开发要去掉默认样式）。 无序列表适用场景

一个简单的无序列表案例，代码如下所示：

<h2>我想去的几个城市</h2>
<ul>
	<li>成都</li>
	<li>
		<span>上海</span>
		<ul>
			<li>外滩</li>
			<li>东方明珠</li>
			<li>迪士尼乐园</li>
			<li>杜莎夫人蜡像馆</li>
		</ul>
	</li>
	<li>西安</li>
	<li>武汉</li>
</ul>

10.2.2 有序列表

  • 概念：有顺序或侧重顺序的列表。
  • 语法规则：在有序列表中，某个列表项li要嵌套其它列表时，得用span标签包裹文字，并在同级嵌套列表标签。
  • 适用场景：未知。

一个简单的有序列表案例，代码如下所示：

 <h2>要把大象放冰箱拢共分几步？</h2>
 <ol>
	<li>把冰箱门打开</li>
	<li>把大象放进去</li>
	<li>
		<span>把冰箱门关上</span>
		<ol>
			<li>推门</li>
			<li>锁门</li>
		</ol>
	</li>
	<li>
		<a href="https://www.baidu.com">去百度</a>
	</li>
 </ol>

10.2.3 自定义列表

  • 概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。
  • 名词： 一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称，一个 dd 就是术语描述（可以有多 个）。
  • 注意事项：dl 里面只能包含dt 和 dd,dt 和 dd 里面可以包含任何内容。
  • 语法规则：在自定义列表中，一个术语可以使用多个术语描述。
  • 适用场景：用于解释说明中心词。 自定义列表

一个简单的自定义列表案例，代码如下所示：

<h2>如何更好的学习</h2>
<dl>
	<dt>做好笔记</dt>
	<dd>笔记是我们以后复习的一个抓手</dd>
	<dd>笔记可以是电子版，也可以是纸质版</dd>
	<dt>多加练习</dt>
	<dd>只有敲出来的代码，才是自己的</dd>
	<dt>别怕出错</dt>
	<dd>错很正常的，改正后并记住，就是经验</dd>
</dl>

11 表格类标签

表格是用来展示数据的，不是用来布局的。一个完整的表格由：表格标题、表格头部、表格主体以及表格脚注共四部分组成。表格骨架构成，如下图所示： 表格元素构成

而表格头部thead是由各种行tr与各种单元格th构成，具体如下图所示： 表格头部构成元素

表格主体tbody是由各种行tr与各种单元格td构成，具体如下图所示： 表格主体构成元素

表格脚注tfoot是由各种行tr与各种单元格td构成，具体如下图所示： 表格脚注构成元素

一个简单的表格案例，学生信息表格如下所示：

<!--表格标签案例：学生信息表格-->
<table border="1">
<!-- 表格标题 --> 
	<caption>学生信息</caption>
	 <!-- 表格头部 --> 
	 <thead> 
	     <tr> 
		    <th>姓名</th> 
		    <th>性别</th> 
		    <th>年龄</th> 
		    <th>民族</th> 
		    <th>政治面貌</th> 
	     </tr> 
	 </thead> 
	 <!-- 表格主体 --> 
	 <tbody> 
	    <tr> 
	       <td>张三</td> 
	       <td>男</td> 
	       <td>18</td> 
	       <td>汉族</td> 
	       <td>团员</td> 
	   </tr> 
	   <tr> 
		   <td>李四</td> 
		   <td>女</td> 
		   <td>20</td> 
		   <td>满族</td> 
		   <td>群众</td> 
	   </tr> 
	   <tr> 
		   <td>王五</td> 
		   <td>男</td> 
		   <td>20</td> 
		   <td>回族</td> 
		   <td>党员</td>
		</tr> 
		<tr> 
		   <td>赵六</td> 
		   <td>女</td>
		   <td>21</td> 
		   <td>壮族</td> 
		   <td>团员</td> 
	   </tr> 
	 </tbody> <!-- 表格脚注 --> 
	 <tfoot> 
	   <tr> 
		   <td></td> 
		   <td></td> 
		   <td></td> 
		   <td></td> 
		   <td>共计：4人</td> 
	   </tr>              
    </tfoot>  
</table>

11.1 语法结构

表格类标签的语法结构由表格类标签结构以及表格类标签属性结构组成，具体见下表所示：

标签名称标签语义常用属性标签结构
table表格width：设置表格宽度。
height：设置表格最小高度，表格最终高度可能比设置的值大。
border：设置表格边框宽度。
cellspacing：设置单元格之间的间距。		双标签
thead表格头部height：设置表格头部高度。
align：设置单元格的水平对齐方式，可选值如下：
1. left：左对齐
2. center：中间对齐
3. right: 右对齐
valign：设置单元格的垂直对齐方式，可选值如下：
1. top：顶部对齐
2. middle：中间对齐
3. bottom：底部对齐		双标签
tbody表格主体常用属性与thead相同。双标签
tfoot表格脚注常用属性与thead相同。双标签
tr行常用属性与thead相同。双标签
td普通单元格width：设置单元格的宽度，同列所有单元格全都受影响。
height：设置单元格的高度，同行所有单元格全都受影响。
align：设置单元格的水平对齐方式，可选值如下：
1. left：左对齐
2. center：中间对齐
3. right: 右对齐border：设置表格边框宽度。
valign：设置单元格的垂直对齐方式，可选值如下：
1. top：顶部对齐
2. middle：中间对齐
3. bottom：底部对齐
rowspan：指定要跨的行数。
colspan：指定要跨的列数。		双标签
th表头单元格常用属性与td相同。双标签
  1. table标签属性注意事项，如下 注释✏️table标签注意事项 所示：
  • 单元格间距为0与单元格边框合并的区别，如下图所示： table标签cellspacing
  • table标签上的height属性的数值，基本平均分配给了tbody区域 ，而thead以及tfoot区域高度不变。 table标签height属性
  • border属性的属性值大于1时，只对table自身边框产生影响，不再对单元格边框产生影响。
  1. thead标签属性，如下 注释✏️thead标签注意事项 所示：

当thead的高度设置为跟table的高度相同时，table的实际高度将变大。 thead标签height属性

  1. tbody标签属性，如下 注释✏️tbody标签注意事项 所示：

当tbody的height属性值加上thead以及tfoot的height属性值小于table的height属性值时，相差的数值都会平摊至tbody上。 tbody标签的height属性

  1. 单元格标签属性，如下 注释✏️单元格标签注意事项 所示：
  • 表格的宽高
    • 给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了。
    • 给某个th 或 td 设置了高度之后，他们所在的那一行的高度就确定了。
    • 默认情况下，每列的宽度，得看这一列单元格最长的那个文字。
  • 单元格合并：rowspan标签 跨行标签 ，colspan标签 跨列标签。

11.2 应用方式

表格类标签一般就两种应用方式，一种就是用表格类标签制作一个完整的表格，另外一种就是借助单元格的colspan以及colspan进行跨行或跨列，从而完成单元格合并。实现单元格合并的关键，是先找到最多行与最多列，制作一张普通表格，再找到目标单元格，写上合并方式=合并单元格数量。如: <td colspan = "2"></td>。再删除多余的单元格，即可进行跨行与跨列操作。

以制作一张课程表为例：

课程表

第1步 先找到最多行与最多列

课程表

第2步 找到目标单元格，写上合并公式

第3步 删除多余的单元格

案例：小说排行榜

小说排行榜

12 表单标签

表单是一个包含交互的区域，用来收集与用户交互所输入的数据，如日常所使用的登录、注册与搜索就是最简单的表单。表单是由表单域、表单控件以及提示信息组成的，表单的组成如下图所示： 表单的组成结构

表单类标签包括表单域form标签、输入表单元素input标签、按钮button标签、下拉表单元素select标签、文本域表单元素textarea标签以及关联表单控件五个部分组成，如下表所示：

标签名称标签语义标签结构元素显示是否语义化
form表单域双标签行内元素是
input输入表单元素单标签行内元素是
button按钮双标签行内元素是
select下拉表单元素双标签行内元素是
textarea文本域元素双标签行内元素是
label关联表单控件双标签行内元素是

12.1 form表单域

表单域是一个包含表单元素的区域。在 HTML 标签中， <form>标签用于定义表单域，以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器。一个简单的表单案例，代码如下所示：

<form action="https://www.baidu.com/s" target="_blank" method="get"> 
	<input type="text" name="wd"> 
	<button>去百度搜索</button> 
</form>

表单域的语法结构被表单域的属性深深影响，表单域的属性，如下表所示：

属性名称属性含义属性值
action用于指定表单的提交地址（需要与后端人员沟通后确定)。
target用于控制表单提交后，如何打开页面
  • _self ：在本窗口打开。
  • _blank ：在新窗口打开。
method用于控制表单的提交方式。get 或 post

12.2 input输入表单元素

输入表单元素是一种表单控件，可以被用户输入数据，并提交给服务器。在 HTML 标签中，<input>标签用于定义输入框，通过各种属性与属性值，实现各种不同的输入框。例如：输入框以及按钮等。

12.2.1 文本输入框

一个简单的文本输入框实例，代码如下所示：

<input type="text">

文本输入框的属性与属性值，如下表所示：

属性名称属性含义
name数据的名称。
value输入框的默认输入值。
maxlength输入框最大可输入长度。
disabled设置表单控件不可用。

12.2.2 密码输入框

一个简单的密码输入框实例，代码如下所示：

<input type="password">

密码输入框的属性与属性值，如下表所示：

属性名称属性含义
name数据的名称。
value输入框的默认输入值（一般不用，无意义）。
maxlength输入框最大可输入长度。
disabled设置表单控件不可用。

12.2.3 单选框

一个简单的单选框实例，代码如下所示：

<input type="radio" name="sex" value="female">女 
<input type="radio" name="sex" value="male">男

单选框的属性与属性值，如下表所示：

属性名称属性含义备注
name数据的名称。注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
value提交的数据值。注意：不写value获取不了选择的数据值。
checked让该单选按钮默认选中。无
disabled设置表单控件不可用。

12.2.4 复选框

一个简单的复选框实例，代码如下所示：

<input type="checkbox" name="hobby" value="smoke">抽烟 
<input type="checkbox" name="hobby" value="drink">喝酒 
<input type="checkbox" name="hobby" value="perm">烫头

复选框的属性与属性值，如下表所示：

属性名称属性含义备注
name数据的名称。注意：想要多选效果，多个 checkbox 的 name 属性值要保持一致。
value提交的数据值。注意：不写value获取不了选择的数据值。
checked让该复选框默认选中。无
disabled设置表单控件不可用。

12.2.5 隐藏域

隐藏域是用户不可见的一个输入区域。在提交表单的时候，携带一些固定的数据，早期常被用作验证码。一个简单的隐藏域实例，代码如下所示：

<input type="hidden" name="tag" value="100">

隐藏域的属性与属性值，如下表所示

属性名称属性含义
name数据的名称。
value指定的是真正提交的数据。

12.2.6 提交按钮

一个简单的提交按钮实例，代码如下所示：

<input type="submit" value="点我提交表单"> 
<button>点我提交表单</button>
⚠注意
  1. button 标签 type 属性的默认值是 submit 。
  2. button 不要指定 name 属性 。
  3. input 标签编写的按钮，使用 value 属性指定按钮文字。

12.2.7 重置按钮

一个简单的重置按钮实例，代码如下所示：

<input type="reset" value="点我重置"> 
<button type="reset">点我重置</button>
⚠注意
  1. button 不要指定 name 属性。
  2. input 标签编写的按钮，使用 value 属性指定按钮文字。

12.2.8 普通按钮

  • 概念：不让表单提交与重置的按钮。
  • 语法：普通按钮的 type 值为 button ，若不写 type 值，则<button>的type值域将默认为 submit ，此时将引起表单的提交。

一个简单的普通按钮实例，代码如下所示：

<input type="button" value="普通按钮"> 
<button type="button">普通按钮</button>

12.2.9 上传文件

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。

<input type="file" multiple>

12.3 textarea文本域元素

文本域允许用户可以直接输入大段文字，是一种表单控件。在 HTML 中用textarea标签表示文本域。一个简单的文本域实例，代码如下所示：

<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

文本域的属性与属性值，如下表所示：

属性名称属性值
name指定数据名称。
rows指定默认显示的行数，会影响文本域的高度。
cols指定的是真正提交的数据指定默认显示的列数，会影响文本域的宽度。
disabled设置表单控件不可用。

文本域常被用来作为评论模块，如下图所示：

评论区域

12.4 select下拉表单元素

下拉表单元素允许用户可以直接下拉选择内容，是一种表单控件。在 HTML 中用select标签表示文本域。一个简单的下拉框实例，代码如下所示：

<select name="from"> 
	<option value="黑">黑龙江</option>
	<option value="辽">辽宁</option>
	<option value="吉">吉林</option> 
	<option value="粤" selected>广东</option>
</select>

下拉表单元素的属性与属性值，如下表所示：

属性名称介绍备注
name指定数据名称。无
value提交的数据值。如果没有 value 属性，提交的数据是 option 中间的文 字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）
selected表示默认选中.无
disabled设置整个下拉框不可用。无

12.5 禁用表单控件

  • 概念：给表单控件的标签设置 disabled 既可禁用表单控件。
  • 语法：input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性。

12.6 表单控件关联标签

  • 概念： label标签让提示文字与表单控件进行关联，点击提示文字时，与之对应的表单控件获取焦点。
  • 语法：
    • 方法一：让 label 标签的 for 属性的值等于表单控件的 id 。
    • 方法二：把表单控件套在 label 标签的里面。

12.7 表单控件分组

fieldset 可以为表单控件分组、 legend 标签是分组的标题。 一个简单表单控件分组实例，代码如下所示：

<fieldset> 
	<legend>主要信息</legend> 
	<label for="zhanghu">账户：</label> 
	<input id="zhanghu" type="text" name="account" maxlength="10"><br> 
	<label> 密码： <input id="mima" type="password" name="pwd" maxlength="6"></label> <br> 
	性别： <input type="radio" name="gender" value="male" id="nan"> 
	<label for="nan">男</label> 
	<label> <input type="radio" name="gender" value="female" id="nv">女 </label> </fieldset>

13 框架标签

框架标签常用来插播广告，需要搭配a标签或form标签。框架标签语法，如下表所示：

标签名称标签语义常用属性标签结构
iframe框架（在网页中嵌入其他文件）name：框架名字，可以与target属性配合。
width：框架的宽。
height：框架的高度。
frameborder：是否显示边框，值：0或者1。		双标签

在当前窗口打开今日头条，代码如下：

 <!-- form标签与iframe标签联用 -->

    <form action="https://so.toutiao.com/search" target="container">

        <input type="text" name='keyword' placeholder="搜索一下">

        <button>去头条</button>

    </form>

    <iframe name="container" frameborder="0" width="1300" height="800"></iframe>

14 元信息标签

元信息标签是用来配置网页页头部分的相关信息。meta标签主要有charset、name以及http-equiv共3个常用属性。

14.1 配置字符编码

<meta charset="utf-8">

14.2 针对 IE 浏览器的兼容性配置

<meta http-equiv="X-UA-Compatible" content="IE=edge">

14.3 针对移动端的配置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

14.4 配置网页关键字

<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

14.5 配置网页描述信息 值 描述

<meta name="description" content="80字以内的一段话，与网站内容相关">

14.6 针对搜索引擎爬虫配置

<meta name="robots" content="此处可选值见下表">

如meta标签针对搜索引擎爬虫配置所示：

值描述
index允许搜索爬虫索引此页面。
noindex要求搜索爬虫不索引此页面。
follow允许搜索爬虫跟随此页面上的链接。
nofollow要求搜索爬虫不跟随此页面上的链接。
all与index，follow等价
none与noindex，nofollow等价
noarchive要求搜索引擎不缓存页面内容。
nocachenoarchive的替代名称。

14.7 配置网页作者

<meta name="author" content="tony">

14.8 配置网页生成工具

<meta name="generator" content="Visual Studio Code">

14.9 配置定义网页版权信息

<meta name="copyright" content="2023-2027©版权所有">

14.10 配置网页自动刷新

<meta http-equiv="refresh" content="10;url=http://www.baidu.com">

15 基础URL标签

  • 标签：<base>
  • 作用：定义文档内所有链接的基础URL。
  • 语法：<base href="baseURL">

16 HTML全局属性

HTML全局属性是指基本可以用在HTML的任何一个元素内部。（除少数几个。）

属性名称常用属性
id给标签指定唯一标识，注意：id是不能重复的。
作用：可以让label标签与表单控件相关联；也可以与CSS、JavaScript配合使用。
注意：不能在以下HTML元素中使用：<head>、<html>、<meta>、<script>、<style>、<title>
class给标签指定类名，随后通过CSS就可以给标签设置样式。
style给标签设置CSS样式。
dir内容的方向，值：ltr、rtl。
注意：不能在以下HTML元素中使用：<head>、<html>、<meta>、<script>、<style>、<title>。
title给标签设置一个文字提示，一般超链接和图片用得比较多。
lang给标签指定语言。
注意：不能在以下HTML元素中使用：<head>、<html>、<meta>、<script>、<style>、<title>

完整的网页元信息，请参考： 文档级元数据元素 | MDN

17 不常用的文本标签

标签名称标签语义标签结构
cite作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑）双标签
dfn特殊术语 ，或专属名词双标签
del 与 ins删除的文本 【与】 插入的文本双标签
sub 与 sup下标文字 【与】 上标文字双标签
code 一段代码双标签
samp从正常的上下文中，将某些内容提取出来，例如：标识设备输出双标签
kbd键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关 的手册中双标签
abbr缩写，最好配合上 title 属性双标签
bdo更改文本方向，要配合 dir 属性，可选值: ltr （默认值）、 rtl双标签
var 标记变量，可以与 code 标签一起使用双标签
small附属细则，例如：包括版权、法律文本。—— 很少使用双标签
b摘要中的关键字、评论中的产品名称。—— 很少使用双标签
i本意是：人物的思想活动、所说的话等等。 现在多用于：呈现字体图标（后面要讲的内容）。双标签
u与正常内容有反差文本，例如：错的单词、不合适的描述等。—— 很少使用双标签
q短引用 —— 很少使用双标签
blockquote 长引用 —— 很少使用双标签
address 地址信息双标签
avatar
文章
阅读
粉丝