一、什么是HTML
HTML是用来描述网页的一种语言。
HTML是指超文本标记语言（不仅包含纯文本，还包含图片、超链接、音频、视频等）。
HTML使用一套标记标签来描述网页。
二、HTML标签的作用
充当网页骨架。
语义化，使网络爬虫更好的抓取网站信息。
三、HTML骨架
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <!-- 作用：配置html文件 -->
5 </head>
6 <body>
7 <!-- 书写标签组成的网页结构 -->
8 </body>
9 </html>1、DOCTYPE是document type(文档类型)的简写，在网页中用来说明当前使用的XHTML或者HTML是什么版本
2、head是对HTML进行一些附加信息，内容不显示在网页中
3、body是HTML的主体部分，显示在网页中的内容
四、head标签中可以放的元素
1、meta标签
<meta charset = "UTF-8" /> 用于声明字符编码级
<meta name="keywords" content = "内容"> 用于提供给搜索引擎关键字
<meta name = "discription" content = "内容"> 用于提供给搜索引擎网页简单描述
2、title标签
标识文档标题，该标题会显示在浏览器的标题栏的标签页上
3、style标签
<style type= "text/css"></style> 编写页面内部样式
4、link标签
<link>:用于引入css样式
<link rel = "stylesheet" href = "index.css">
5、script标签
<script src=index.js"></script>引入外部js文件
五、HTML语法
1、标签之间对空格，缩进，换行不敏感，浏览器只会当做一个空格处理
2、标签名必须使用一对尖括号包裹，标签一般都是成对出现，单标签除外
常见单标签：<img/> <br/> <hr/>
3、标签属性写法： 键值对形势（key="value"）
eg: <img src="1.png" alt="图片" title="我是一张图片"/>
六、HTML中标签分类
1、块级元素：h1-h6、p、div、ol、ul、dl、form、table等
2、行内元素 a、img、span、strong、em等
块级元素特点：
1、独占一行；
2、高度，行高以及外边距和内边距都可控制；
3、宽度缺省是父容器的宽度，除非设定一个宽度；
4、它可以容纳内联元素和其他块元素。（注意：p标签不可包含div）
行内元素特点：
1、设置宽高无效
2、对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
3、不会自动进行换行
七、HTML中常用标签
1、h系列（h1-h6）（headline的缩写）
作用：给文本添加标题语义
注意：h系列的标签不能相互嵌套，网页一般只有一个h1标签2、p（paragragh）段落标签
作用：给文本添加段落语义
注意：p是文本级标签，内部只能书写文本类的内容，比如：文本，图片，表单元素，废弃标签3、img标签（单标签）
<img src="" alt=""/>
src:路径，插入图片所在的位置
alt：图片加载失败时显示的文本
width:设置图片的宽度
height:设置图片的高度 注意：宽度和高度一般只设置一个让图片按比例缩放
<img src="images/01.png" alt="图片加载失败，请刷新" width="200px"/> 4、a标签（超链接）
href: 属性值书写的是要跳转页面的路径（路径可以为相对路径和绝对路径）
target: 属性值设置新页面打开方式
默认值（_self）：在当前窗口打开
_blank: 在新窗口打开
title: 悬停提示文本
<a href="#id"></a> 可以进行页面内锚链接跳转 5、列表
5.1无序列表 ul
作用：给文本添加无序列表语义
ul:unordered list 无序列表
li:list item 列表项
注意：
ul和li是第一个成对出现的标签,出现ul一定有li，有li一定被ul包裹
ul内部只能嵌套li不能出现任何其他标签。
5.2有序列表 ol
作用：给文本添加有序列表语义
ol:ordered list 有序列表
li:list item 列表项
每一个列表项之间有顺序之分
ol,li也是一组成对出现的标签，ol一定嵌套li。
ol内部嵌套一个或者多个li
5.3自定义列表
作用：给文本添加自定义列表语义
dl: definition list 自定义列表
dt: definition title 标题
dd: definition description 描述
dl嵌套dt和dd，dt和dd是同级关系，dt是标题，dd是对标题解释说明（dl>dt+dd） 6、表单元素
6.1form
说明：将所有的表单元素都书写在form标签内部
form标签是功能标签不是结构标签
提交位置：action
提交方式：method
<form action="1.php" method="get"></form>
表单元素：提供给用户进行输入或者选择控件
属性：type，根据type属性值，有不同的表单类型
6.2单行文本框 <input type="text" name="yonghuming" value="用户名" />
6.3密码框 <input type="password" name="mima" />
6.4单选框
<p>
请选择性别：
<input type="radio" name="sex" />男性
<input type="radio" name="sex" checked="checked" />女性
</p>
说明：
type属性值：radio
同一组单选框，必须设置相同的name属性值
checked: 设置表单被选中checked
6.5复选框
请选择爱好：
<p>
<input type="checkbox" name="fav" id="study" checked="checked" /><label for="study">学习</label>
<input type="checkbox" name="fav" id="sing" /><label for="sing">唱歌</label>
</p>
说明：type属性值：checkbox
同一组复选框，必须设置相同的name属性值
也具有checked属性
可以使用label标签
八、HTML中废弃的标签
b,u,i,em,strong（文本级标签）
b: 默认加粗
u: 默认下划线
i: 默认倾斜
em:语义加强，倾斜
strong: 语义加强，加粗
废弃原因：没有语义
九、HTML5中新增API
1、HTML5 Geolocation：获取地理位置
2、HTML 拖放
3、web存储：localStorage、sessionStorage（常用）
4、应用缓存
5、 Web Worker
6、SSE 服务端推送技术（比websocket更轻，有些情况可以替代ws）
来源：oschina
链接：https://my.oschina.net/u/4298384/blog/3360035