# HTML 常用标签

# 常用标签

HTML 标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。

# 文档类型 `<!DOCTYPE>`

<!DOCTYPE html>

声明文档类型，告诉浏览器以HTML5的标准去解析页面。

<!DOCTYPE> 标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 标准规范，必需在开头处声明文档类型，只有这样浏览器才能按指定的文档类型进行解析。

# `<meta>` 标签

设置网页的元数据，不同的属性会使<meta>标签具备不同的功能。

<meta charset="utf-8" /> 指定字符集编码 utf-8(优化后的全球码)
用于设置关键字 <meta name="keywords" content="xxx" />
用于设置描述信息 <meta name="description" content="xxxx" />

utf-8 是目前最常用的字符集编码方式，常用的字符集编码方式还有 gbk 和 gb2312。gb2312 包括 6763 个汉字。GBK 包含全部中文字符，是 GB2312 的扩展，加入对繁体字的支持，兼容 GB2312。UTF-8 则包含全世界所有国家需要用到的字符。

字符集编码介绍

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="description"
			content="河南郑州不凡学院开设UI设计培训课程和web前端开发课程。北京一线讲师现场教学，学习就等于工作。做自己擅长的事，分享知识与快乐！"
		/>
		<!-- 网站描述信息 -->
		<meta
			name="keywords"
			content="不凡学院,郑州UI培训,河南郑州UI设计培训,河南郑州前端开发培训,郑州H5培训,郑州WEB前端培训,郑州HTML5前端培训,郑州软件培训"
		/>
		<!-- 网站的关键词,用于搜索引擎优化的 -->
		<title>不凡学院</title>
		<!-- 浏览器的tab栏当中显示 -->
	</head>
	<body>
		<!-- 这里边的内容就是网页真正展示的内容 -->
		欢迎 来到不凡 学院
	</body>
</html>

# 标签的语义化

所谓标签语义化，就是指标签的含义。在合适的地方给一个最为合理的标签。使网页结构组织有序，并且有良好的可读性。

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化

# 标题标签

标题标签：

<hn> 标题文本 </hn>

在 html 中一共有 6 级标题。<h1>、<h2>、<h3>、<h4>、<h5>和<h6>。依据重要性依次递减。<h1>是最大的标题，一般在页面中只能出现一次。其他的无所谓。

# 段落标签

<p>文本内容</p>

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，是 HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

# 水平线标签

<hr />
<!-- 单标签 -->

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr />就是创建横跨网页水平线的标签。

# 换行标签

<br />

在 HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签。

# `div` `span` 标签

<div>这是头部</div>
<span>今日价格</span>

div span 是没有语义的，是我们网页布局常用的 2 个标签。

# 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

斜体/加粗 <em> <strong> 。em 标签用于表示一段内容中的着重点。strong 标签用于表示一个内容的重要性。
斜体/加粗 <i> <b> 单纯的表示斜体/加粗，没有语义化。
上标/下标 <sup> <sub> ，比如: 5<sup>2<sup> H<sub>2</sub>O。
下划线/删除线 <ins> <del>。

<!-- 开发中不常用 -->
<em>这是一个em标签</em>
<i>这是一个i标签</i>
<br />
<strong>这是一个strong标签</strong>
<b>这是一个b标签</b>
<p>H<sub>2</sub>O</p>
<p>5<sup>2</sup>=25</p>
<ins>下划线</ins>
<del>删除线</del>

转义字符
- 空格    
- 小于号 < <
- 大于号 > >
- ...

<p>这是一个 &lt;p&gt;标签</p>
<p>张&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三</p>

# 图像标签

<img src="图像URL" />

HTML 网页中任何元素的实现都要依靠 HTML 标签，要想在网页中显示图像就需要使用图像标签。

src 属性用于指定图像文件的路径和文件名，他是 img 标签的必需属性。

alt 属性用于指定图片未找到时，显示的内容。

jpg png svg gif 是图片的格式。

# 路径

相对路径和绝对路径

相对路径

相对当前文件
同一级目录下，输入图像文件的名称即可 <img src="avatar.jpg" />。
图像文件位于当前文件的下一级目录：输入文件夹名和文件名，之间用/隔开，如<img src="img/avatar.jpg" />。
图像文件位于当前文件的上一级目录：在文件名之前加../ ，如果是上两级，则需要使用 ../ ../，以此类推，<img src="../avatar.jpg" />。

绝对路径

本地绝对路径

D:\web\img\avatar.jpg

网络路径

https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=586984b5572c11dfded1b8255b1c05ed/bd3eb13533fa828b9caedeb5fd1f4134960a5ad2.jpg

<!-- 本地绝对路径 -->
<img src="H:/html+css课程/01-html/mydev/bf.png" alt="sorry,图片未找到" />
<!-- 网络路径 -->
<img
	src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=586984b5572c11dfded1b8255b1c05ed/bd3eb13533fa828b9caedeb5fd1f4134960a5ad2.jpg"
	alt="sorry,图片未找到"
/>

<!-- 相对路径,相对当前文件所在的目录 -->
<!-- 同级目录 -->
<img src="bf.png" alt="sorry,图片未找到" />
<!-- 下级目录 -->
<img src="img/bf.png" alt="sorry,图片未找到" />
<!-- 上一级目录 -->
<img src="../bf.png" alt="sorry,图片未找到" />

<!-- alt 属性 用来表示 图片未找到时 所显示的内容 -->

# 链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

在 HTML 中创建超链接非常简单，只需用链接标签环绕需要被链接的对象即可。

href：用于指定链接目标的 url 地址，当为标签应用 href 属性时，它就具有了超链接的功能。 Hypertext Reference 的缩写，意思是超文本引用。

target：用于指定链接页面的打开方式。

_self 为在当前窗口打开（默认值）。
_blank 为在新窗口中打开方式。

注意：

外部链接直接链接网络路径即可。
内部链接直接链接内部页面名称即可，比如 <a href="index.html"> 首页 </a>。

如果当时没有确定链接目标时，通常将链接标签的 href 属性值定义为href="#"，表示该链接暂时为一个空链接。
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

<!-- 当前窗口跳转 -->
<a href="https://www.baidu.com/">百度</a>
<a target="_self" href="https://www.baidu.com/">百度</a>
<!-- 新窗口跳转 -->
<a target="_blank" href="https://www.baidu.com/">百度</a>
<!-- 点击图片跳转 -->
<a href="https://www.baidu.com/">
	<img src="bf.png" alt="sorry,图片未找到" />
</a>

# 列表标签

# 无序列表 `ul`

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	......
</ul>

比如下面这些，新闻是没有顺序的，不用排队，先到先得，后发布先显示。

注意

列表具有严格的嵌套关系
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li></li>之间相当于一个容器，可以容纳所有元素。
无序列表会带有自己样式属性，但是我们通常不使用自带样式。

# 有序列表 `ol`

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	......
</ol>

所有特性基本与ul一致。但是实际工作中，较少用 ol。

# 自定义列表

自定义列表常用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	...
	<dt>名词2</dt>
	<dd>名词2解释1</dd>
	<dd>名词2解释2</dd>
	...
</dl>

<!-- 无序列表 -->
<!-- 常用 -->
<ul>
	<li>首页</li>
	<li>关于我们</li>
	<li>联系我们</li>
	<li>新闻活动</li>
</ul>

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

<!-- 自定义列表,书籍目录 -->
<dl>
	<dt>第一章</dt>
	<dd>html基础</dd>
	<dd>css基础</dd>
	<dt>第二章</dt>
	<dd>js基础</dd>
	<dd>dom操作</dd>
</dl>

# `HTML` 基本规范(语法规范)

注释不能嵌套
标签必须完整
标签可以嵌套，但要注意语义。
标签的属性必须加双引号
标签属性尽量使用小写

# 表格

表格到现在还是较为常用的一种标签，但不是用来布局，常用于处理表格式数据。

<table>
	<tr>
		<th>表头内的文字</th>
		...
	</tr>
	<tr>
		<td>单元格内的文字</td>
		...
	</tr>
	...
</table>

<table></table>用于定义一个表格。
<tr></tr> 用于定义表格中的一行，必须嵌套在<table></table>标签中，在 <table></table>中包含几对<tr></tr>，就有几行表格。
<td></td>' 用于定义表格中的单元格，必须嵌套在
标签中，一对中包含几对`，就表示该行中有多少列（或多少个单元格）。
<th></th>' 表头一般位于表格的第一行或第一列，必须嵌套在
`标签中。

# 表格属性

这些属性可以修改表格的样式，但是目前很多属性已经废弃不用，我们需要用 CSS 控制表格的样式。

# 表格结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：

<thead></thead>：用于定义表格的头部。

<tbody></tbody>：用于定义表格的主体。

# 合并单元格

rowspan 单元格所占行
colspan 单元格所占列

<table bgcolor="orange" cellspacing="20" cellpadding="10" border="5">
	<!-- 表格标题 -->
	<caption>
		课程表
	</caption>
	<tr>
		<th>周一</th>
		<th>周二</th>
		<th>周三</th>
		<th>周四</th>
	</tr>
	<tr>
		<td rowspan="2">语文</td>
		<td colspan="2">数学</td>
		<!-- <td>语文</td> -->
		<td>体育</td>
	</tr>
	<tr>
		<!-- <td>语文</td> -->
		<td>数学</td>
		<td>语文</td>
		<td>体育</td>
	</tr>
</table>

# 表单

现实中的表单，类似我们去银行办理信用卡填写的单子。目的是为了收集用户信息。

在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。

在 HTML 中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域 3 个部分构成。

表单控件：

包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：

一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：

相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的 url 地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

# `input` 控件

在上面的语法中，<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input />标签还可以定义很多其他的属性，其常用属性如下表所示。

# `label` 标签

label 标签为 input 元素定义标注。

作用：用于绑定一个表单元素, 当点击 label 标签的时候, 被绑定的表单元素就会获得输入焦点。

for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male" />

# textarea 控件(文本域)

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过 textarea 控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

# 下拉菜单

使用 <select></select> 控件定义下拉菜单的基本语法格式如下:

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	...
</select>