本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。 今天的干货多多哦，本篇将带领大家深入的去认识 HTML 的结构语言，还等什么，行动起来吧！
一、HTML 常用标签
HTML 语言呢，主要学的是结构，认识标签是干什么的就可以了，添加样式什么的我们主要用 CSS 语言
1.1 排版标签
- 解释说明: 排版标签主要和 css 搭配使用，显示网页结构的标签，是网页布局最常用的标签。
- 标题标签
h
说明:
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML 提供了 6个等级的标题，即标题标签语义: 作为标题使用，并且依据重要性递减。
格式:
<h1> 一级标题 标题内容 </h1>
<h2> 二级标题 标题内容 </h2>
<h3> 三级标题 标题内容 </h3>
<h4> 四级标题 标题内容 </h4>
<h5> 五级标题 标题内容 </h5>
<h6> 六级标题 标题内容 </h6>
注意:
一行只能放一个标题
效果如下:
- 段落标签
p
说明:
单词全拼: paragraph
作用:
1. 把文本分割为若干段落
2. 文本会在一个段落中根据浏览器窗口大小自动换行
格式:
<p></p>
- 水平线标签
hr
说明:
单词全拼: horizontal
它是一个单标签
作用:
1. 创建一个横跨网页的水平线
2. 将段落与段落之间隔开
3. 使文档结构清晰，层次分明
格式:
<hr />
效果如下:
- 换行标签
br
说明:
单词全拼: break 中文意思是 打断，换行
它是一个单标签
作用: 强制换行
<br />
div和span标签
说明:
单词全拼:
division 中文意思是 分割，分区
span 就是全拼 中文意思是 跨度，跨距，范围
作用：
1. div 和 span 标签是我们网页布局主要的 2个盒子
注意:
1. div 标签 一行只能放一个 div
2. span 标签 一行上可以放好多个 span
1.2 文本格式化标签
- 解释说明：开发网页时，有时需要为文字设置粗体、斜体、下划线和删除线效果，文本格式化标签呢就是用来显示这些的。
| 标签 | 显示效果 | | :--: | :-- | | <b></b>和<strong></strong> | 文字以 粗体 方式显示(XHTML推荐使用strong) | <i></i>和<em></em> | 文字以 斜体 方式显示(XHTML推荐使用em) | | <s></s>和<del><del> | 文字以 加删除线 方式显示(XHTML推荐使用del) | | <u></u>和<ins></ins> | 文字以 加下划线 方式显示(XHTML推荐使用ins) |
1.3 标签属性
说明:
1. 制作网页时，如果想让HTML标签提供更多的信息，就设置属性
2. 所谓属性就是外在特性，就是一种事物的特点
格式:
<标签名 属性1="属性值1" 属性2="属性值2">内容</标签名>
举例:
一个手机，它的颜色是黑色的，尺寸是 8寸
<手机 颜色="黑色" 尺寸="8寸"> </手机>
1.4 图像标签 img
说明:
单词全拼: image 中文意思是 图像
作用: 插入图片
格式:
<img src="图像URL" width="属性值" height="属性值" />
注意:
1. 该语法中 src 属性用于指定图像文件的路径和文件名，它是img 标签的必需属性
2. 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
3. 属性之间不分先后顺序，标签名与属性、属性与属性之间以空格分开
4. 采取 键值对 的格式 key="value" 的格式
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图片不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素(XHTML不支持%页面百分比) | 设置图像的宽度 |
| height | 像素(XHTML不支持%页面百分比) | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
1.5 链接标签
说明:
1. 单词全拼: anchor 中文意思是 锚
2. 若创建超链接，只需用标签把文字包起来就好
格式:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
注意:
1. 外部链接 需要以下这种方式: https://www.baidu.com/
2. 内部链接 直接写内部页面名称即可，比如: <a href="index.html"></a>
3. 如果要定义空链接需这样写，<a href="#"></a>
4. 还可以给网页中各种网页元素添加超链接，如:图像、表格、音频、视频,最常见的就是文本超链接了。
1.6 注释标签
说明:
注释内容不会显示在浏览器窗口中，但是它也会被存储在用户的计算机内存地址中，查看源码时可以看到
作用:
1. 注释是给人看，目的是为了更好的理解这部分的代码是干什么的
2. 一般用于简单的描述，如某些状态描述、属性描述等
格式:
<!-- 注释内容 -->
快捷键: ctrl + / 或者 ctrl + shift + /
注意:
推荐 注释内容位于需要注释代码的上面，单独占一行
1.7 路径
说明:
1. 实际工作中，我们的文件不能随便乱放，否则很难寻找，因此我们需要一个文件夹来管理
2. 目录文件夹；就是普通文件夹，存放我们做页面所需的相关文件和素材，如: html文件，图片等等。
3. 根目录；打开目录文件夹第一层就是根目录，当我们做的页面需要的图片非常多时，通常我们会新建一个文件夹来存放它们，这时插入图片时就需要采用“路径”的方式来获取图片文件的位置
4. 路径分为 相对路径和绝对路径两种
- 相对路径
| 路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 只需输入图像文件的名称即可，如 <img src="小可爱.jpg"> | |
| 下一级路径 | / | 图像文件位于 HTML 文件同级文件夹下，假如图像文件存在 imgs 文件夹下，需这样写 <img src="imgs/小可爱.jpg"> |
| 上一级路径 | ../ | 在文件名之前加入 ../，如果是上两级，使用../../，以此类推，如<img src="../小可爱.jpg"> |
- 绝对路径
说明:绝对路径以 Web 站点根目录为参考基础的目录路径
格式:
"D:Web\imgs\小可爱.jpg" 或者完整的网络地址，例如: "https://imgtu.com/i/5paY5D"
注意:
它的写法，符号 \ 并不是相对路径的 /
二、表格 table
作用:
1. 常见显示、展示表格式数据
2. 可以让数据显示的规整，可读性好
2.1 创建表格
说明:
1. 主要由 table、tr、td这三对标签组成，它们是创建表格的核心，缺一不可
2. table 用于定义一个表格标签
tr标签 用于定义表格中的行，必须嵌套在 table 标签中
td(单词全拼:table data) 中文意思是数据单元格的内容，用来定义表格中的单元格，必须嵌套在 tr 标签中
3. 总结一下，一个完整的表格由表格标签(table)，行标签(tr)，单元格标签(td)组成，没有列的标签，我自己理解是把第一行的 单元格标签 看成表格中的列数。
格式:
<!-- boder 是一个属性，意思的表格的边框是1像素，默认是0像素(无边框) -->
<table border="1px">
<!-- 第一行 -->
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<!-- 第二行 -->
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<!-- 第三行 -->
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
效果如下:
2.2 表格属性
作用：
表格的属性主要用来设置表格的样式
| 属性名 | 含义 | 常用属性值 |
|---|---|---|
| border | 设置表格的边框(默认boder="0"无边框) | 像素值 |
| cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值(默认为2像素) |
| cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值(默认为1像素) |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中的水平对齐方式 | left、center、right |
如图所示:
2.3 表头单元格标签 th
作用: 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
格式:
<table border="1px">
<!-- 第一行 表头 -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<!-- 第二行 -->
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
<!-- 第三行 -->
<tr>
<td>小李</td>
<td>男</td>
<td>20</td>
</tr>
<!-- 第四行 -->
<tr>
<td>小红</td>
<td>女</td>
<td>19</td>
</tr>
</table>
效果图:
2.4 表格标题 caption
说明:
1. caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上
2. caption 标签必须紧随 table 标签之后
格式:
<table border="1px">
<!-- 表格标题 -->
<caption>信息表</caption>
<!-- 第一行 -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<!-- 第二行 -->
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
<td>20</td>
</tr>
<!-- 第三行 -->
<tr>
<td>小红</td>
<td>女</td>
<td>19</td>
</tr>
</table>
效果如下:
2.5 合并单元格
说明:
1. 两种方式
1) 跨行合并: rowspan="合并单元格的个数"
2) 跨列合并: colspan="合并单元格的个数"
2. 顺序
1) 按照 先上后下 先左后右 的顺序
3. 三步曲
1) 先确定是跨行还是跨列合并
2) 根据 先上后下 先左后右 的原则找到目标单元格，然后写上 合并方式 还有要合并的单元格数量
3) 删除多余的单元格
格式:
<table border="1px" width="300px" height="100px">
<!-- 第一行 -->
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<!-- 第二行 -->
<tr>
<td colspan="2"></td>
</tr>
<!-- 第三行 -->
<tr>
<td></td>
<td></td>
</tr>
</table>
效果如下:
2.6 表格划分结构
说明:
对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成了三个部分，分别是题头、正文、脚注，这样可以功能更好的分清表格结构
1) thead: 用于定义表格的头部，用来放标题之类的东西，内部必须拥有标签
2) tbody: 用于定义表格的主体，放数据本体
3) tfoot: 放表格的脚注之类
格式:
<table border="1px">
<!-- 表格标题 -->
<thead>
<caption>信息表</caption>
</thead>
<tbody>
<!-- 第一行 -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<!-- 第二行 -->
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
<td>20</td>
</tr>
<!-- 第三行 -->
<tr>
<td>小红</td>
<td>女</td>
<td>19</td>
</tr>
</tbody>
</table>
注意:
以上标签都是放到 table 标签中，脚注一般用的不多，就不示例了
效果呢还是一样，没变化
三、列表标签
3.1 认识列表
1. 什么是列表？
答: 前面介绍了表格是用来显示数据的，那么列表就是用来布局的，因为非常整齐和自由
2. 概述: 容器里面装载着结构，样式一致的文字或图表的一种形式就是列表
3. 特点: 列表最大的特点就是整齐、整洁、有序，可组合自由度高。
3.2 无序列表 ul
说明: 无序列表的各个列表项之间没有顺序级别之分，是并列的
格式:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
注意:
1. <ul> 标签中只能嵌套 <li>，直接在 <ul> 标签中输入其他标签或者文字，这种做法是不允许的
2. <li>与</li>之间相当于一个容器，可以容纳所有元素
3. 无序列表会带有自己的样式属性
效果如下:
3.3 有序列表ol
说明: 有序列表即为有排列顺序的列表，各个列表项按照一定的顺序排列定义
格式:
<ol>
<li>我是老大</li>
<li>我是老二</li>
<li>我是老三</li>
</ol>
效果如下:
3.4 自定义列表dl
说明: 常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
格式:
<dl>
<dt>我的兴趣爱好</dt>
<dd>游戏</dd>
<dd>乒乓球</dd>
<dd>追剧</dd>
<dt>我喜欢的明星</dt>
<dd>胡歌</dd>
<dd>刘德华</dd>
<dd>自己</dd>
</dl>
效果如下:
3.5 总结
| 标签名 | 定义 | 说明 |
|---|---|---|
ul | 无序列表标签 | 里面只能包含 li 没有顺序 |
ol | 有序列表标签 | 里面只能包含 li 有顺序 |
dl | 自定义列表 | 里面有 2个 兄弟，dt 和 dd |
四、表单标签
1. 表单标签是什么？
答: 我们注册QQ号时往每个选项中填入信息时，每个选项就是用表单标签来做的
2. 说明
1) 表单目的是为了收集用户信息
2) 一个完整的表单通常由表单控件(也叫表单元素)、提示信息和表单域3个部分构成
3) 表单控件包含了具体的表单功能项，分别有单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等
4) 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作
5) 表单域: 相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的 url 地址，以及数据提交到服务器的方法，如果不定义表单域，表单中的数据无法传送到后台服务器
4.1 input 控件
说明:
1. input 输入的意思
2. 它是一个单标签
3. 它有很多属性
格式:
<input type="属性值" value="你好">
只举例了一些常用的属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | text | 单行文本输入框 |
| password | 密码输入框 | |
| radio | 单选按钮 | |
| checkbox | 复选按钮 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像形式的提交按钮 | |
| file | 文件域 | |
| name | 用户自定义 | 控件名称 |
| value | 用户自定义 | input 控件中的默认文本值 |
| size | 正整数 | input 控件在页面中的显示宽度 |
| checked | checked | 定义选择控件默认被选中的项 |
| maxlength | 正整数 | 控件允许输入的最多字符数 |
- type 属性
说明:
1. 这个属性通过改变值，可以决定属于哪种 input 表单
2. 比如 type="text" 就表示 文本框 可以做 用户名，昵称 等
3. 比如 type="password" 就是表示 密码框，用户输入的内容是不可见的
举例:
用户名: <input type="text" />
密 码: <input type="password" />
- value 属性 值
说明:
value 意思是显示默认的文本值
打开网页页面时默认显示指定的文字
举例:
用户名: <input type="text" value="请输入用户名" />
- name 属性
说明:
1. name 意思是表单的名字
2. 主要用于区别不同的表单
3. radio 单选按钮属性，这两者经常搭配，因为 radio 如果是一组，必须命名相同的名字，否则就变成多选了
举例:
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
效果如下:
- checked 属性
说明:
表示定义默认状态
举例:
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex" />女
打开页面时它就会默认先选中了男，就不放图了，和上图一样，只不过上图那个是我打开页面之后选中的
4.2 label 标签
说明:
用于绑定一个表单元素，当点击 label 标签时，被绑定的表单元素就会获得输入焦点
也就是说，点击 label 标签里面的文字时，光标会定位到指定的表单里面
两种写法
1. 用 label 标签直接把 input 表单包起来
<label>用户名:<input type="text" value="请输入用户名"/></label>
2. 用 label 的 for 属性规定与哪个表单元素绑定，for 属性值需要与 表单元素的 id 属性值一样
<label for="name1">用户名:</label>
<input type="text" value="请输入用户名" id="name1"/>
4.3 textarea 控件(文本域)
作用:
通过 textarea 控件可以轻松的创建多行文本输入框
格式:
<textarea>文本内容</textarea>
文本框和文本域区别
| 表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
|---|---|---|---|---|
<input type="text" /> | 文本框 | 只能显示一行文本 | 单标签，通过 value 显示默认值 | 用户名、昵称、密码 |
textarea | 文本域 | 可以显示多行文本 | 双标签，默认值写到标签中间 | 留言板 |
4.4 select 下拉列表
说明:
当有多个选项让用户选择时，就使用 select 控件
优点: 节约空间
格式:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
注意:
1. <select> 中至少包含一对 option
2. 在 <option> 中定义 selected="selected"时，当前项即为默认选中项
效果如下:
4.5 form 表单域
说明:
1. 用于定义表单域，收集和传递用户信息， form 中的所有内容都会被提交给服务器
格式:
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
注意:
每个表单都应该有自己表单域
常用属性:
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的 url 地址 |
| method | get/post | 用于设置表单数据的提交方式，值为 get 或 post |
| name | 名称 | 用于指定表单的名称，方便区分同一个页面中的多个表单 |
结尾
有没有一瞬间感觉 HTML 的标签好多啊，自己的脑瓜子都要装不下了，没关系，多看多写多练就熟系了，闭着眼睛都能写出来，这都是每位前端开发工程师都要具备的基础，加油，你也可以的。
