说明：
- HTML标记是使用特定字符表示不同功能，对于浏览器来说，浏览器解析的是标记代表的功能，如：p--段落，a--超链接
- 下文及后文中提到的标记、标签、元素、节点都是同一个东西，都指HTML标记
一、HTML基本标记
1.1.标题标记
<body>
<h1> 一级标题</h1>
<h2> 二级标题</h2>
<h3> 三级标题</h3>
<h4> 四级标题</h4>
<h5> 五级标题</h5>
<h6> 六级标题</h6>
</body>- 加了标题的文字会变的加粗，字号也会依次变大
- 一个标题独占一行
- h1~h3标题也是网页关键字之一，所以在实际开发时要酌情使用
1.2.段落标记
- <p>段落内容</p>
- 是paragraph的缩写
- 文本在一个段落这种会根据浏览器窗口的大小进行自动换行
- 段落和段落之间保有空隙
- 一组<p></p>代表一段
1.3.换行标记
- <br />实现换行
- <br />是个单标签
- <br />标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
1.4.文本格式化标签：
- <strong></strong>文本加粗，强调文本内容加粗文本，是网页关键字之一，如需要推荐使用
- <b></b>文本加粗，强调视觉效果文本变粗，该效果在CSS中可通过属性使用，所以在HTML5中已被废除不用，不建议使用
- <em></em>文本倾斜，同理<strong>
- <i></i>文本倾斜，同理<b>
- <del></del>删除线(贯穿线)，该效果在CSS中可通过属性使用，所以在HTML5中已被废除不用，不建议使用，了解即可
- <ins></ins>下划线，同理<strong>
- <u></u>下划线，同理<b>
1.5.分块标签(页面布局搭建，内容分块时使用居多，必须掌握)
- <div></div>相当于是一个盒子，建议使用div时务必加上宽高及背景颜色或者border
- <span></span>可以理解为是内容的分块，如一句话中，有几个字是想要单独操作，就可以使用这个标签来单独定义且不影响整句话。
1.6.图片标签
- <img src="xxx.png" alt="xxx" title="xxx" border="xxx" width="xxx" height="xxx" />
- src：是必须要有的属性，它用于指定图像文件的路径和文件
- alt：为了提高网页的语义化和用户的体验，这个属性也是要有的，主要作用是当图片加载失败时，页面中会显示图片相关的提示信息(提示信息自定义)
- title：为了提高网页的语义化和用户的体验，这个属性也是要有的，主要作用是当鼠标悬停到图片上时，会显示图片相关的提示信息(提示信息自定义)
- border：给图片设置边框，可有可无
- width/height：给图片添加宽度属性和高度属性
1.7.常见的图片格式
- jpg：JPEG(.jpg)对色彩的信息保留较好，高清，颜色较多，产品类的图片经常使用jpg格式
- gif：GIF最多只能存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果
- png：png图片给格式，是一种新兴的网络图片格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景
- webp：webp是谷歌推出的一种全新的图片文件格式，与JPEG格式一样，WebP是一种有损压缩格式。不同的是，WebP格式的压缩效率更为出色，在同等质量下，WebP格式图像的体积要比JPEG格式图像小40%。
1.8.相对路径和绝对路径
- 相对路径：
- 同一级路径：图形，文件位于同一级，如<img src="1.png" />
- 下一级路径：“/”，图形文件位于HTML文件的下一级，如<img src="img/1.png" />
- 上一级路径：“../”，图形文件位于HTML文件的上一级，如<img src="../1.png" />
- 绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
1.9.超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>href属性：用于指定链接目标的url地址，必须属性target属性：用于指定链接页面打开的方式，- _self ：默认属性。在当前窗口或者框架中加载目标文档。
_blank ：打开新的窗口或者新的标签页。在使用时，最好添加 rel=“noopener “属性，防止打开的新窗口对原窗口进行篡改。防止 window.opener API 的恶意行为。
_parent ：在 frame 或者 iframe 中使用较多。在父级框架中载入目标文档，当 a 标签本身在顶层时，与 _self 相同。
_top ：在 frame 或者 iframe 中使用较多。直接在顶层的框架中载入目标文档，加载整个窗口。
锚点链接：
作用：点击链接，可以快速定位到页面中的某个位置
在链接文本的href属性中，设置属性值为#名字找到目标位置标签，里面添加一个 id属性=名字<a href = "#two">第二季</a><h3 id = "two">第二季介绍</h3>
1.10 .表格标签：在久远的web前端中表格是用来是实现页面布局的，现在的布局方式特别的多，基础使用DIV+CSS(后期详细的介绍)
定义完成的表结构
<body>
<caption>学员基本信息</caption> -----定义表标题
<table> ------整体表格
<thead> -----定义表头
<th>姓名</th> ----定义表格的列标题
<th>性别</th>
<th>年龄</th>
</thead>
<tbody> -----定义表的正文部分
<tr> ----定义行
<td>一只耳</td> ----定义行中的单元格
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>哪吒</td>
<td>男</td>
<td>17</td>
</tr>
<tr>
<td>图图</td>
<td>男</td>
<td>8</td>
</tr>
</tbody>
<tfooter> -----定义表的结束部分
<tr>
<td>结束</td>
<td>结束</td>
<td>结束</td>
<tr>
</tfooter>
</table>
</body>说明：虽然完整的表结构如上代码那么多，但是实际开发时有如下建议，一定要认真看完哦
*.关于<tbody></tbody>在一个表中可以有多个，务必记住这一点，也可以省略不写，如果神略了浏览器在解析表格时会自动补全这个标签
*.在实际开发时大多人不写<tfooter>标签，个人建议还是写上吧毕竟要考虑所谓的语义化开发(有机会细细讲解)
table属性：
| 属性 | 属性值 | 说明 |
| align | left、center、right | 定义整个表格相对周围元素的对其方式 |
| border | 1或者" " | 定义整个表格是否有边框，默认为" ",表示没有边框 |
| cellpadding | length,像素值 | 定义单元格边沿与其内容之间的距离(空白)，默认1像素 |
| cellspacing | length,像素值 | 定义单元格之间的空白，默认2像素 |
| width | length像素值或者百分比均可 | 定义整个表格的宽度 |
| bgcolor | 颜色值 | 定义整个表格的背景颜色 |
| background | 图片地址 | 定义整个表格的背景图片 |
<table align=center border="1" cellpadding="20" cellspacing="0" width="500">
表格结构属性：
| 属性 | 属性值 | 说明 |
| width | length,像素值 | 定义具体行或者单元格的宽度(会影响到其他相邻单元格的宽度) |
| height | length,像素值 | 定义具体行或者单元格的高度(会影响到其他相邻单元格的高度) |
| bgcolor | 颜色值 | 定义具体行或者单元格的背景颜色 |
| background | 图片地址 | 定义具体行或者单元格的背景图片 |
| align | left、center、right | 定义具体行或者单元格中文本内容的位置 |
rowspan | number | 合并单元格，跨行合并(纵向合并)，合并完成需要删除多余的单元格，删除个数=合并数-1 |
colspan | number | 合并单元格，不跨行合并(横向合并)，合并完成需要删除多余的单元格，删除个数=合并数-1 |
<table border="1px" width="500px">
<thead>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</thead>
<tbody>
<tr>
<!-- 很想合并 -->
<td>1</td>
<td colspan="2">Onion1</td>
<!-- 删除多余的单元格 -->
<!-- <td>17</td> -->
</tr>
<tr>
<td>2</td>
<td>Onion2</td>
<!-- 纵向合并 -->
<td rowspan="3">17</td>
</tr>
<tr>
<td>3</td>
<td>Onion3</td>
<!-- 删除多余的单元格 -->
<!-- <td>17</td> -->
</tr>
<tr>
<td>4</td>
<td>Onion4</td>
<!-- 删除多余的单元格 -->
<!-- <td>17</td> -->
</tr>
</tbody>
</table>1.11.列表标签
无序列表(就没有序号的列表呗)
<ul type="disc"> -----定义列表
<li>列表项</li> ----定义列表项
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
type属性值参考：
"disc"实心圆
"square"正方形
实际网页中常见的无序列表效果如下：
列表之间进行合理的嵌套：
列表之间可以进行嵌套，嵌套之后：
第一级：type属性默认值为"disc"实心圆；
第二级：type属性默认值为"circle"空心圆；
第三级之后(包括第三级)：type属性默认值为"square"正方形。
代码如下：
<ul>
<li>列表项</li>
<li>
列表项
<ul>
<li>子列表项</li>
<li>
子列表项
<ul>
<li>孙列表项</li>
<li>孙列表项</li>
<li>孙列表项</li>
</ul>
</li>
<li>子列表项</li>
</ul>
</li>
<li>列表项</li>
<li>列表项</li>
</ul>嵌套后的显示效果如下：
1.12.有序列表
<ol type="1"> -----定义列表
<li>列表项</li> ----定义列表项
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
type属性值参考：
"A"，大写字母
"a",小写字母
"1",数字
"I",大写罗马数字
"i",小写罗马数字
1.13.自定义列表
<dl> ----定义列表
<dt>游戏</dt> ----列表项
<dd>王者荣耀</dd> ----列表明细
<dd>阴阳师</dd>
<dd>连连看</dd>
</dl>1.14.表单标签
- 一个完整的表单通常由表单域，表单控件（表单元素）和提示信息3部分组成
- 为什么需要表单：
- 使用表单目的是为了收集用户信息。 在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。
- 表单域：一个包含表单元素的区域，
<form></from>标签用于定义表单域，会把它范围内的表单元素信息提交给服务器
| 属性 | 属性值 | 作用 |
| action | url地址 | 指定接受并处理表单数据的服务器程序的url地址 |
| methods | get、post | 用于设置表单数据的提交方式，其取值为get或post |
| name | 名称 | 指定表单名称，用于区分同一个页面中的多个表单域 |
<form action="url地址" method="提交方式" name="表单域的名称"> </form>
1.15. 表单控件(表单元素)
- input元素，输入表单元素，tyle属性设置不同的属性值用来指定不同的控件类型
- type属性值如下：
属性值 描述 button 定义可点击按钮(大多情况下，用于脚本) checkbox 定义复选框(多选框) file 定义输入字段和"浏览"按钮，提供文件上传 hidden 定义隐藏的输入字段，大多用作占位符，结合脚本实现效果 image 定义图像形式的提交按钮 password 密码框，会掩饰输入的字符 radio 定义单选框，想要实现单选，必须加上name属性，同一个name视为同一组，同一组内只能选一个 reset 定义重置按钮，会清除表单中的所有数据 submit 定义提交按钮，带有提交功能，会把表单数据发送到服务器端 text 定义普通文本框，可以输入文本，默认宽度为20个字符 - 除
type属性外，<input>标签还有很多其他很多属性，其常用属性如下：
| 属性 | 属性值 | 描述 |
| name | 自定义 | 定义input的名称 |
| value | 自定义 | 定义input的值，真正往服务器端提交的数据 |
| checked | checked | 多选和单选的属性，表示选中，是个布尔值 |
| maxlength | 正整数 | 规定输入字符的最大个数 |
- name 和 value 是每个表单元素都有的属性值，主要给后端人员使用。
- name 是表单元素的名字，要求 单选框和复选框要有相同的name值
- checked 属性主要针对于单选框和复选框，主要作用是一打开页面，就可以默认选中某个表单元素
文本框与密码框：
- type属性设置为text视为普通文本框
- type属性设置为password视为密码框
<body>
<form>
用户名：<input type="text"> <br/>
密码：<input type="password">
</form>
</body>单选框和复选框：
- type 属性设置为 radio 是单选框
- type 属性设置为 checkbox 是复选框
- name 是表单元素的名字，要求 单选框和复选框要有相同的name值
<form>
用户名：<input type="text"> <br>
密码：<input type="password"> <br />
<!-- radio是单选框，可以多选一 -->
性别：男<input type="radio">
女 <input type="radio">
<!-- checkbox是多选框，可以多选 -->
爱好：吃饭<input type="checkbox" checked="checked">
睡觉<input type="checkbox">
打游戏<input type="checkbox">
</form>name和value属性:
- name属性：当前input表单的名字，后台可以通过这个name属性找到这个表单，name的主要作用就是用于区别不同的表单
<form>
用户名：<input type="text" value="请输入用户名"> <br>
密码：<input type="password"> <br />
<!-- radio是单选框，可以多选一 -->
<!-- name是表单元素的名字，这里的性别单选按钮必须有相同的名字name，才能实现多选一 -->
性别：男<input type="radio" name="sex" value="男">
女 <input type="radio" name="sex" value="女">
<!-- checkbox是多选框，可以多选 -->
爱好：吃饭<input type="checkbox" name="habby" value="吃饭">
睡觉<input type="checkbox" name="habby" value="睡觉">
打游戏<input type="checkbox" name="habby" value="打游戏">
</form>注意：单选框和复选框name必须一致，value可以不一样
checked和maxlength:
- 单选按钮和复选框可以设置checked 属性
- 当页面打开时候就可以默认选中这个按钮
- 单选框只能给其中一个加checked，复选框可以多加
性别:男<input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">- maxlength:规定最多输入多少个字符
submit和reset:
- type 属性设置为submit：提交按钮会把表单数据发送到服务器
- type 属性设置为reset：重置按钮会清除表单中的所有数据
button和文件域:
- type 属性设置为button：是一个按钮
- type 属性设置为file：是一个文件域，可以上传文件
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域：上传文件使用的 -->
上传头像：<input type="file">label：
- label标签用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验
- label标签的 for属性 应当与相关元素的id 属性相同
<label for="sex"> 男 </lable>
<input type="radio" name="sex" id="sex" />1.16.select下拉表单元素
- 下拉表单元素
- <select>中至少包含一对<option>
- 在<option>中定义 selected="selected" 时，当前项即为默认选中项。
<select>
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>1.17.textarea文本域元素
- 用于定义多行文本输入的控件：
<textarea> 文本内容 </textarea> - cols = “每行中的字符数” ， rows = “显示的函数”，我们在实际开发中不会使用，都是用CSS来改变大小
表单综合：
<form action="http://www..." method="get">
<!-- label标签定义表单控件的文字标注，input类型为text定义了一个单行文本输入框 -->
<p>
<label>姓名：</label>
<input type="text" name="username" />
</p>
<!-- input类型为password定义了一个密码输入框 -->
<p>
<label>密码：</label>
<input type="password" name="password" />
</p>
<!-- input类型为radio定义了单选框 -->
<p>
<label>性别：</label>
<label><input type="radio" name="gender" value="0" /> 男</label>
<label><input type="radio" name="gender" value="1" /> 女</label>
</p>
<!-- input类型为checkbox定义了单选框 -->
<p>
<label>爱好：</label>
<label><input type="checkbox" name="like" value="sing" /> 唱歌</label>
<label><input type="checkbox" name="like" value="run" /> 跑步</label>
<label><input type="checkbox" name="like" value="swiming" /> 游泳</label>
</p>
<!-- input类型为file定义上传照片或文件等资源 -->
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<!-- textarea定义多行文本输入 -->
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<!-- select定义下拉列表选择 -->
<p>
<label>籍贯：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</p>
<!-- input类型为submit定义提交按钮
还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
<input type="image" src="xxx.gif">
-->
<p>
<input type="submit" name="" value="提交">
<!-- input类型为reset定义重置按钮 -->
<input type="reset" name="" value="重置">
</p>
</form>总结：以上就是HTML(4)常用的标签，多年经验来说，建议各位在学习的过程中，掌握了基本架构标签和div之后，先学习CSS，盒子模型，浮动等，先练习搭建页面结构(画框框)，熟练之后，再来看这些标签，就能结合实际应用到页面上了，便于记忆和理解！！！
陆续更新中，如果有帮助到您，谢谢点赞，谢谢收藏，谢谢关注，谢谢支持，总之就是谢谢啦各位...........
版权声明：本文为OnionQueen原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。