一.初识HTML
1.认识网页：网页的基本组成部分为：文字，图片，超链接，视频，音频。
2.五大浏览器和渲染引擎：ie浏览器——trident引擎，火狐浏览器——gecko引擎，谷歌浏览器——blink引擎，safar浏览器——webkit引擎，欧朋浏览器——blink引擎。
3.Web标准：结构（html），样式（css），行为（js）。
4.HTML（超文本标记语言），HTML文件的扩展名为.html,目前主流开发工具为sublime、vsCode。HTML骨架格式如下：
5.HTML语法规范：
a.注释：单行注释，在行前面加“//”，快捷键ctrl+/
多行注释，如下图，通过“<!-- 注释内容-->”方式添加。
b.HTML标签的构成：
双标签，如：<html>和</html>，<table>和</table>等
单标签，如：<br>,<hr>等
c.标签的属性：
例：“<input type="text" value="" placeholder="请输入姓名">”中，type、value和placeholder即为input标签的属性，"="后面的为属性值。
所以，标签的属性写在标签的内部，标签可以同时存在多个属性，属性之间必须通过空格隔开，另外注意：属性之间没有顺序。
d.HTML标签之间的关系：
父子关系（嵌套关系）：如上图，html标签包裹着head标签和body标签，所以html标签与head、body标签的关系为父子关系，也叫嵌套关系。
兄弟关系（并列关系）：如上图，head标签和body标签处于同一级别，所以head标签与body标签为兄弟关系，也叫并列关系。
二.HTML标签学习
1.排版系列标签：
a.标题标签：标题标签即h系列标签，h1~h6,属于双标签，例如<h1>标签内容</h1>，该标签的特点为：文字自带加粗样式，独占一行，文字从h1~h6逐渐减小，需注意：h1标签不能乱用，一般只用于新闻的标题或网站的logo，因为h1标签对SEO比较重要。
b.段落标签（p标签）：代表段落，该标签的特点为：独占一行，并且段落之间有缝隙，段落标签也是双标签。
c.水平线标签（hr标签）：该标签属于单标签，它的作用是在网页中显示一条水平线，此标签用处较少，在编写网页时一般通过css样式来写水平线。
d.换行标签(br标签)：此标签的作用是强制换行，属于单标签。
2.文本格式化标签：
a.第一组：
b标签：能够使标签内的文字加粗。
u标签：能够给标签内的文字添加下划线。
i标签：能够使标签内的文字倾斜。
s标签：能够给标签内的文字添加下划线。
b.第二组：
strong标签：能够使标签内的文字加粗。
ins标签：能够给标签内的文字添加下划线。
em标签：能够使标签内的文字倾斜。
del标签：能够给标签内的文字添加下划线。
两组标签的作用是相同的，单第二组是有语义化的标签，即能够“见名知意”，所以推荐使用第二组标签。
3.媒体标签
a.图片标签（img标签）：作用是在网页中显示一张图片。
图片标签的属性：<img src="./img.png" alt="图片未能加载成功" title="图片标题" width="100" height="100">
src：图片的路径，也就是图片所在地址。
alt：替换文本，即当图片因路径错误，名称错误等原因无法显示时，替换显示的文本。
title：图片的标题，当鼠标放到图片上时显示。
width：图片的宽度
height：图片的高度
注意：图片的宽度和高度一般只设置一项，如只设置宽度，高度同样会按照比例自动变化。如果宽度高度同时设置，可能会导致图片拉伸变形。
b.音频标签（audio标签）：作用是在网页中插入音频
音频标签的属性：<audio src="./music.mp3" controls autoplay loop></audio>
src：音频文件的路径
controls：播放的控件，如果不添加此属性，页面中无法显示播放、暂停等按钮。
autoplay：自动播放，增加此属性后，浏览器会自动播放歌曲，但部分浏览器不支持此属性。
loop：循环播放
c.视频标签（video标签）:作用是在网页中插入视频文件
视频标签的属性：<video src="./video.mp4" controls autoplay muted loop></video>
src：视频文件的路径
controls：文件的播放控件
autoplay：自动播放，部分浏览器不支持自动播放
loop：循环播放
musted：设置视频静音播放
4.链接标签
a标签：<a href="" target=“_self” ></a>
href属性：告诉浏览器点击之后要跳转到哪个页面，可以写外部链接如：href=“http://www.baidu.com”，也可以写本地路径如：href="./index.html"
target属性:设置跳转方式，target的属性值可以填写"_self"（在当前窗口打开）或"_blank"（打开一个新窗口，用来打开链接地址，原网页还在）
5.路径
a.绝对路径：
在个人电脑中，带有盘符的路径，如：“D:\前端学习\练习\index.html”
外部链接：以https://开头的路径，如：“https://www.baidu.com/”
b.相对路径
同级目录：直接写文件的名字，或“./”加文件的名字
下级目录：写目标所在文件夹的名字，进入到文件夹，然后写文件名。
上级目录：通过“../”进入文件上级目录，进入到目标所在文件夹后，写文件的名字。
6.列表标签
应用场景：网页中以行的方式整齐的展示数据，如排行榜，等如下：
a：无序列表，如下图
标签：整体——ul，每一项：li；
<ul>
<li>百度排行榜</li>
<li>QQ排行榜</li>
<li>酷狗排行榜</li>
<li>酷我排行榜</li>
<ul>
显示效果：每一项前面有默认的小圆点，可通过css样式去除。
注意：每一项是没有顺序的，页面显示的顺序是按照html加载的顺序，ul中只能放置li标签，li标签里可以放置任意标签。
b.有序列表，如下图：
标签：整体——ol，每一项li；
<ol>
<li>可可托海的牧羊人</li>
<li>起风了</li>
<li>晴天</li>
<li>雨蝶</li>
</ol>
显示：每一项前面有默认的序号；
注意：每一项都是有顺序的，ol标签中只能放li标签，li标签中可以放其他标签。
c.自定义列表，如下图：
标签：整体——dl，小标题——dt，每一项——dd
<dl>
<dt>购物指南</dt>
<dd>免费注册</dd>
<dd>开通支付宝</dd>
<dd>支付宝充值</dd>
</dl>
注意：dl标签中只能放dt标签或者dd标签，dt标签和dd标签是兄弟关系，dt标签或dd标签中可以放其它任意标签。
7.表格
表格的基本标签：整体——table，每一行——tr，每一个单元格——td
表格的结构标签：表格的头部——thead，表格的身体——tbody，表格的底部——tfoot，用来包裹tr标签。
表格的其它标签：表格的整体大标题——caption，表头标签——th
<table border="1">
<caption>学生表</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
</table>
以上为一个两行三列的表格。
表格的常用属性：
border:表格的边框
width：表格的宽度
height：表格的高度
cellspacing：cellspacing属性规定单元格之间的空间。设置cellspacing="0"可以使table边框与td边框重合，显示一条线。
csllpadding：cellpadding 属性规定单元边沿与其内容之间的空白。
合并单元格：
rowspan:跨行合并
colspan:跨列合并
实现步：首先确认要合并哪几个单元格，如果是上下合并，保留上边的单元格，添加rowspan=“要合并表格的个数（数值）”属性，删除下面多余的单元格。如果是左右合并，保留最左边的单元格，添加colspan=“要合并表格的个数（数值）”属性，，删除右面多余的单元格。
8.表单控件
应用场景：收集用户信息，如注册页面，登录页面等
input标签：
可以通过type属性的不同，表现不同的形式，例如：type=“text”。
text：文本框，用来录入信息。
主要包含属性：value——用户输入的数据，如果提前设置好了value的值，相当于是此文本框的默认值，与后台交互时，会将value的值发送到后台。name——告诉后台发送的数据是什么含义。palceholder——文本框在没有数据时默认显示的提示信息，即value值为空时显示的数据。
password：密码框
主要包含属性：value——用户输入的数据，如果提前设置好了value的值，相当于是此文本框的默认值，与后台交互时，会将value的值发送到后台。name——告诉后台发送的数据是什么含义。palceholder——文本框在没有数据时默认显示的提示信息，即value值为空时显示的数据。
radio：单选框
主要包含属性：name——告诉后台发送的数据是什么含义，有相同name属性的单选框为一组，同一组中只能有一个数据被选中。value——表示用户选择的数据。checked——默认选中，针对于单选框，一组中只能设置一个。
checkbox：多选框
主要包含属性：name——告诉后台发送的数据是什么含义。value——表示用户选中的数据。checked——默认选中，可选择多个。
file：文件选择框
主要包含属性，multiple——多文件选择，此属性为h5新增属性。
button：普通按钮
submit：提交按钮
reset：重置按钮
普通按钮在未绑定事件时，点击无效果。submit按钮点击后会自动获取表单中的数据并进行提交，reset按钮会将表单中所有数据清空。如果想阻止按钮的自动执行事件，需通过js来进行阻止：e.preventDefault（）；
button标签：
button标签与<input type="button">类似，可以给button标签的type属性设置不同的属性值：
button：普通按钮
submit：提交按钮
reset：重置按钮
用法与input中的按钮相同。
附录：Html-button和input的区别
一、定义和用法
<button> 标签定义的是一个按钮
1、在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处；
2、 <button> 控件提供了更为强大的功能和更丰富的内容；
3、<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。
<input> 标签规定了用户可以在其中输入数据的输入字段
1、<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件；
2、输入字段可通过多种方式改变，取决于 type 属性。
二、相同之处
<input> 中 type=“submit” 与 <button> 中 type=“submit” 是一样的
<input> 中 type=“submit” 与 <button> 中 type=“submit” 是一样的
当<button>未处于<form>表单中时，其浏览器默认的type就是button，这个时候与input的type=“button”就是一样的结果
而当<button>处于<form>表单中时，不同的浏览器对 <button> 元素的 type 属性使用不同的默认值，这个时候有所区分了
三、不同之处
如果在 HTML 表单中使用 button 元素，不设置type的情况下，不同的浏览器会提交不同的值。
IE将提交 <button> 与 <button/> 之间的文本；
其他浏览器将提交 value 属性的内容。
四、总结
因此，请始终为 <button> 元素规定 type 属性。因为不同的浏览器对 <button> 元素的 type 属性使用不同的默认值；
如果在 HTML 表单中使用 <button> 元素，不同的浏览器可能会提交不同的按钮值。因此请尽可能使用 <input> 在 HTML 表单中创建按钮
下拉菜单：
标签：select——整体，option——每一项。
<select name="city" id="city">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select>
属性：selected——默认值，默认选中。
textarea文本域标签：
作用：用于输入大段文字。
<textarea name="" id="" cols="30" rows="10"></textarea>
属性：name——告诉后台发送的数据是什么含义。value——表示用户在文本域中填写的数据。cols——文字分多少列，rows——文字分多少行。
label标签：
作用：用于绑定文本和表单标签的关系。
使用方法：1.使用label标签把文本包裹起来，在表单标签上添加id属性，在label标签的for属性中设置id属性值。
2.直接使用label标签把文本和表单标签一起包裹起来（此时需删除label标签的for属性）
9.布局标签
div标签：
特点：独占一行
宽度默认占满一行，高度由内容撑开，没有内容时，高度为0.
span标签：
特点：一行可以显示多个
宽度和高度都是由内容撑开。
10.常用字符实体
其中“空格”，“大于号”，“小于号”较为常用，需记忆，其它了解即可。
写在最后:
以上为html常用标签，目前h5提供了很多语义化标签，能够提高代码的可读性，愿意学习的可以上网找些资料。
