一、html基础知识
1、什么是html？
html是超文本标记语言，超文本指得是页面内可以包含图片、文件、链接、音乐、视频、程序等非文字元素。
2、超文本标记语言的结构包括头部（head）和主体（body）两部分，其中头部提供网页信息，主体提供网页的具体内容信息。
3、超文本标记语言可以通过标签语言来标记要显示网页的各个部分内容，而浏览器可以按照标签语言的顺序来解释和显示内容。需要注意的是同一标签语言对不同的浏览器显示的结果可能会不同，兼容性问题。
4、需要注意的是html不是编程语言，而是一种标记语言，它是使用标记标签来描述网页。
5、一般的html静态网页扩展名为.htm或.html
二、html标签格式
1、html结构主体如图所示：
注：html结构大致由两部分组成即头部和主体，头部是提供网页信息的而主体是提供网页内容的
补充：<html lang=''zh-ch''>让其支持中文
2、html主题结构分析。
2.1<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
2.2<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
2.3<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。比如说：
2.3.1<meta charset='utf-8'>告诉浏览器用什么格式来编码解码
2.3.2<title>网页显示内容</title>定义网页标题，在浏览器标题栏显示，不仅可以显示文字也可以显示图片。
2.4<body></body>之间的文本是可见的网页主体内容·
2.5html标签格式注意事项：
2.5.1标签的格式是不区分大小写的，但是一般建议小写
2.5.2html标签是由尖角号包围的关键词，但是一般的标签都是成对出现的（闭合标签或者双边标签）
2.5.3标签可以分为三部分，开始标签，结束标签，两个标签之间的部分叫做标签体
2.5.4标签可以有若干个属性，也可以不带属性。
2.6标签的分类以及语法：
2.6.1闭合标签：需要其他标签帮助完成闭合，必须是成对出现
语法：<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
eg:<h1 style=“colour:red;background:green”>内容部分</h1>
注释：字体颜色为红色，字体背景颜色为绿色
2.6.2子闭合标签：自己就可以完成闭合
语法：<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
三、常用标签介绍
1、<!DOCTYPE >标签
1.1该标签位于html标签之前，该标签可告知浏览器文档使用哪种html或xthml规范。主要作用是声明文档的解析类型避免浏览器的怪异模式。
1.2解析类型的模式即浏览器的模式：
1.2.1BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
1.2.2CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
2、head内部标签说明
2.1<neta>标签之name属性: 主要用于描述网页，与之对应的属性值为content，二者结合使用。
eg:<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
注释：该标签主要是在浏览器中搜索关键字用的，便于搜索引擎机器人搜索信息。
eg:<meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">
注释：该标签主要是在浏览器开始中显示网页的基本信息用的，便于搜索引擎机器人分类信息。
2.2<neta>标签之http-equiv属性：像浏览器传达一些有用信息，可与charset连用。
eg:<meta http-equiv="content-Type" charset=UTF8">
注释：告诉浏览器以什么形式编码解码
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com">
注释：连接上网页后两秒后刷新到别的网页上去，相当于一个重定向功能
2.3<title>标签
eg:<title>oldboy</title>
<link rel="icon" href="http://www.jd.com/favicon.ico">
注释：该标签主要是显示连接网页后的显示的文字和图标
3、body标签
3.1基本标签
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题且换行.
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
<br>:强制换行换行.
<wbr>:安全换行。
<blockquote>:与p标签功能相同的基础上还添加了首尾缩进的功能，但是只能对汉字生效。
<b> <strong>: 加粗标签. 但是不换行，可以与换行标签结合加粗换行。
<strike>: 为文字加上一条中线，但是不换行.
<s>和<del>:为文字加上一条中线,一个是强调一个是重点强调删除。
<u>:不强调式加下划线
<ins>：强调式加下划线
<em>: 文字变成斜体，但是不换行.
<i>:文字倾斜
<sup>和<sub>: 上角标 和 下角标，但是不换行.
<hr>:水平线 内容分割，属于自闭合标签
<pre>:格式化输出内容，但是大体写的内容样式和输出的内容样式相同。
特殊字符：< >；"；©®
注意：只要是换行输出的都是块标签，只要是不换行输出的都是内联标签
3.2<div>和<span>标签
3.2.1<div></div> ：<div>只是一个块级标签，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
3.2.2<span></span>：<span>表示内联行(行内标签),并无实际的意义,主要通过CSS样式为其赋予不同的表现.
3.2.3块级标签是另起一行开始渲染元素，而行内标签是不需要另起一行的，如果单独在网页插入该元素不会对网页产生任何影响
3.3<img>图形标签
3.3.1格式：<img src=''图片路径'' alt=''假如图片没有加载出来显示的提示信息'' title=''鼠标悬浮在图片上时的提示信息''
width=''图片的宽度'' height=''图片的高度''>
注释：图片的高度和宽度是任选其一后图片会自动等比例收缩，图形标签是个行内（内联）标签。
3.4<a></a>超链接标签
3.4.1超链接标签是指从一个网页链接指向另一个目的链接的链接关系，这个目的链接可以是个任意超文本。
3.4.2格式：
<a href=''url'' target=''_blank''>超文本</a>
注释：超链接标签是个行内标签，是可以嵌套行内标签的，但是不能嵌套块标签；而块标签即可以嵌套行内标签也可以嵌套块标签。target=''_blank''则是说当打开另外一个超链接后原超链接不会消失。
3.4.2 a标签抛锚（锚点设置）：用来将网页中的另一个标签功能引入视野
1、<a href=''#id值'' ></a>
<a name=''name值'' ></a>
2、<a href=''#name名 "" ></a>
<a id=''id值'' ></a>
#id:网页内部标签id;name:网页内部标签名称，id和name的用法一样。
3.5列表标签
无序列表:<ul><li>:列表中的每一项</li></ul>
有序列表:<ol><li>:列表中的每一项</li></ol>
注：start表示需要以3开始显示，value表示强制使用某个序号开始显示，type表示的是序列类型。
定义列表（生成列表）:<dl><dt> 列表标题 </dt><dd> 列表项</dd></dl>
注：无论是无序列表还是有序列表都是要和<li></li>连用才可以，而定义列表相当于dt为父dd为子，如图:
3.6使用行内插入图片，必须要和img连用，属于块标签。
3.7<table></table>表格标签
3.7.1表格是由行和列组成，每个表格内的小表格都可以嵌套其他的行内标签。
3.7.2格式：<table> <tr> <th>标题</th> <th>标题</th> </tr>
<tr> <td>内容</td> <td>内容</td> </tr> </table>
注释：<tr>行内容</tr> 该标签定义每一行的内容，<td>列内容</td>该标签定义每一行中每一个列的内容,<th>列内容</h>该标签定义每一行中每一个列的头部内容
table属性：border表示''表格边距''
cellpadding表示''小表格字段的内边距''
cellspacing表示''小表格和大表格直接的外边距''
td th属性：rowspan=''单元格跨多少行'' colspan=''单元格跨多少列''
style属性：表示每个小单元格的长宽颜色等，放在哪里都可以。
thead tfoot tbody:吧每个不同部位的内容放在不同的地方。
caption：表示表格头部信息
colgroup ：是设置列颜色的
3.8文档元素对比。
三、表单标签（由于form很重要所以另起一行开写）
1、什么是表单标签？
1.1功能：表单标签主要是用于向服务器端传输数据，从而实现用户和web服务器端之间的一个交互。
1.2工作原理：访问者在浏览表单页面时可填写必要信息，在某个提交按钮上进行提交，然后把这些信息传输到服务器上，再由服务器上专门的程序进行处理，如果有错误信息就返回错误信息并且让其纠正，如果信息正确则返回正确信息。
1.3表单元素汇总：
2、定义表单元素的form元素属性
2.1 格式：<form action=''url'' method=''post'' name=''name''>内容即表单元素</form>
2.2action: 表单提交到哪里。一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web，就相当于一个路径。
2.3method: 表单的提交方式 post和get默认取值就是get
2.4name:表单名称，以便程序调用，好像该name是不会提交到服务器上的
2.5 target :设置提交时的目标位置，是否打开新的页面等
2.6autocomplete:设置浏览器是否记住用户输入数据的信息，默认为on.
2.7作用： 本身无显示效果，但是其内部是定义表单元素的控件。
3、input标签
3.1input标签格式
<input type=类型值 name=属性值(相当于字典中的key) value=属性值（相当于字典中的value值）>
3.2input元素属性
略：如下所示
3.3type属性所对应的类型值
text:文本输入框，该框主要是让用户输入一些明文的字符
password：密码输入框，该框主要是让用户输入一些密文的字符
radio:单选框，单项选择即只能在多个选择项上选择一个，但是多个选择项的key建（name建）必须一样。
checkbox:复选框，多项选择即可以在多个选择项上选择多个。
submit:提交按钮
file：提交文件
注：如果有上传文件的标签类型值那么form表单标签的提交方式就必须是post.
3.4name属性的作用
3.3.1name属性是表单提交项的键，该键必须要和服务端接收数据时的键一致。
3.3.2注意：name属性是客户端和服务端数据交互时使用的名称，而id属性是客户端使用的名称。
3.5value属性的作用（可不用填写）
3.4.1value属性对应的值是表单提交项的值，对于不同的输入类型，value属性的用法也不同。
3.4.2value属性的用法
eg：<input type=''text'' name=''zhangsan'' value=''123''> 定义文本输入框的初始值
eg:<input type=''button/submit'' value=''name''> 定义提交按钮内的名称
eg：<input type=''checkbox'' name=''info'' value='''image'' >定义与输入相关联的值
3.5input标签中其他属性的用法
3.5.1checked属性：该属性主要应用于CheckBox和radio中，主要是默认的选择框。
3.5.2readonly属性：该属性主要应用于text和password中，主要作用是只读。
3.5.3disabled属性：该属性应用于input的所有属性，主要作用是只读，禁止用户输入。
3.5.4autofocus属性：该属性表示光标默认放在那个位置。
3.5.5autocomplete属性：该属性表示该标签具有自动提示的功能。
3.5.6form属性与form外的元素进行挂钩：
4、select标签（下拉列表标签）
4.1select标签格式：
eg：<select name=''表单提交项的键'' size=''sum'' multiple=''multiple'' >
<option value=''值'' > 内容</option>
<option value=''值'' selected='selected'> 内容</option>
<option value=''值''> 内容</option>
</select>
4.2select标签内的元素：
name：''表单提交项的键'
multiple=''multiple''：下拉列表可以多选
value:表单提交项的值.
size:下拉列表显示的列数
selected: selected下拉列表默认显示的列表
5、textarea多行文本框
5.1多行文本框格式：
eg： <textarea id=“info”cols=“宽度” rows=“高度” name=“名称” placeholder="个人简介"> 默认内容 </textarea>
5.2textarea标签元素详解
placeholder：给用户的提示信息，后面可跟具体的提示信息，这个属性可以用到表单所有标签中。
id:是标签的身份证号，具有唯一性，id后面可以写任意字符串
6、label标签
6.1 label标签格式：
eg：<p><label for="user">姓名：</label>
<input type="text" name="user" placeholder="用户名" id="user"></p>
<p><label >姓名：<input type="text" name="user" placeholder="用户名" ></label>
</p>
6.2label标签元素详解：
该标签主要和其他标签中的id连用，标签内的for对应的值是其他标签的id值，其作用是当点击到这个标签中的名称就会进入标签内,for与id挂钩。
6.3eg:两种类型都可使用
7、fieldset标签，对内容进行分组
7.1标签格式：
<fieldset>内容</fieldset>
7.2标签属性详解：
7.3添加分组说明（分组标签）
8、button按钮
8.1属性值
8.2属性值用法
8.3当值为sumit时：
四、嵌入元素
1、img:嵌入一张图片
2、分布式相应图片
3、嵌入另一个文档
4、嵌入插件
5、其他元素
五、嵌入音频和视频
1、video视频元素属性
1.1嵌入一个视频
1.2附加一些属性
1.3预加载设置
1.4设置预浏览页
1.5兼容多个浏览器的做法
注释：src有多个但是只能是一个视频被播放出来
2、audio音频元素属性
2.1数学
2.2嵌入一个音频
2.3兼容多个浏览器的办法
注释：浏览器会检测支持那种格式的音频会自动跳转。