本文链接：https://www.jianshu.com/p/27fa6c3ad56f
作者：西瓜甜
一、初始 HTML
1. 基本介绍
超文本标记语言（英语：Hyper Text Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
HTML常与CSS、JavaScript 一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。
网页浏览器可以读取HTML文件，并将其渲染成可视化网页。
HTML 负责展现网页的内容
CSS 层叠样式表，负责以什么样的样式展现网页的内容，比如字体的大小和颜色，背景图片和内容放在什么位置。
JavaScript 负责用户和网页内容的交互，就是让网页内容动起来。
维护HTML和CSS标准的组织是万维网联盟（W3C）
2. 标记
HTML标记包含标签（及其属性）、基于字符的数据类型、字符引用和实体引用等几个关键部分。
HTML标签是最常见的，通常成对出现，比如与 。
这些成对出现的标签中，第一个标签是开始标签，第二个标签是结束标签。
两个标签之间为元素的内容，有些标签没有内容，如
HTML另一个重要组成部分为文档类型声明这会告诉浏览器改用哪一种标准来渲染。
下面是一个经典的Hello World程序的例子，一个用于比较编程语言、脚本语言和标记语言的不同之处的通用测试。这个例子用9行代码写成：
这是标题
Hello world!
文档标记类型用于表示这是一个 HTML5 类型的文档。
和之间的文本用于描述整个网页部分。
和之间的文本是你真正能在页面上看到的内容，即浏览器的窗口内容。
3. HTML 文档总体结构
千锋教育
页面正文内容
4. HTML5 语法
实际上是沿用了之前的 html 语法，只是做的更加简单、更加人性化。
不区分大小写 （规范化建议小写）
支持布尔值
-
属性的值可以省略引号（规范化考虑，建议使用双引号）
5. 标签和元素的关系
HTML文档由嵌套的HTML元素构成。它们用HTML标签表示，包含于尖括号中，如 在一般情况下，一个元素由一对标签表示：开始标签 我是段落标签，用来表示一段文字 在开始与结束标签之间也可以嵌套另外的标签元素，包括标签与文本的混合。
我是段落标签我是 a 标签，可以被点击，
点我
自闭合标签，只有一个大于号和小于号组合而成，后面的反斜线可以有，也可以没有。建议都有。 主动闭合标签 主动闭合标签都是成对儿出现的,并且后面的必须加反斜线 /,以表名此标签内容结束。 在整个页面上，无论自己内容的多少，自己都会独占一行。 HTML5 源码 常见块级标签有： 常用的内联标签有： 几乎在所有的标签中都可以针对标签的种类，设置自身的属性；如： 这里 widget-controls 是属性的值，也就是类的名字，规范要求用双引号包裹起来。 具体有哪些属性，下面会针对不同的标签来说明。 了解一些浏览器的工作原理是很重要的。以下面这段 HTML 为例： 当浏览器读到这些代码时，它会建立一个“DOM 节点”树来保持追踪所有内容，如同你会画一张家谱树来追踪家庭成员的发展一样。 上述 HTML 对应的 DOM 节点树如下图所示： 每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样，每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。 先下面从一下几个部分对标签分别进行介绍 结构标签 头部标签 功能标签 文本文字 超链接 多媒体 (html5 中新增) 表单 在前面第 1.3 小节 在这里注意是说一下 HTML5 中心增的结构标签，就是有语义化的标签。 也可以是说是一看到标签名称，就知道是啥意思。 示例代码 The article element represents a complete, or self-contained,
composition in a document, page, application, or site and that is,
in principle, independently distributable or reusable, e.g.
in syndication. This could be a forum post,
a magazine or newspaper article, a blog entry,
a user-submitted comment, an interactive widget or gadget,
or any other independent item of content.
Each article should be identified, typically by including
a heading (h1–h6 element) as a child of the article element.
The article element represents a complete, or self-contained,
composition in a document, page, application, or site and that is,
in principle, independently distributable or reusable, e.g.
in syndication. This could be a forum post,
a magazine or newspaper article, a blog entry,
a user-submitted comment, an interactive widget or gadget,
or any other independent item of content.
Each article should be identified, typically by including
a heading (h1–h6 element) as a child of the article element.
The article element represents a complete, or self-contained,
composition in a document, page, application, or site and that is,
in principle, independently distributable or reusable, e.g.
in syndication. This could be a forum post,
a magazine or newspaper article, a blog entry,
a user-submitted comment, an interactive widget or gadget,
or any other independent item of content.
Each article should be identified, typically by including
a heading (h1–h6 element) as a child of the article element.
就是在 首先它是一个块级元素的标签。 现在大部分情况下只是作为一个盒子容器，存放其他功能标签。 h5 中新增了 段落内容一 段落内容二 换行标签： 其实几乎所有的成对儿出现的标签内都可以写文字内容。 示例图片 上面示例中的视频容量稍大，根据网速，需要等待几分钟 可以设置跳转,就是在页面上点击它，会跳转到目标页面（称为重定向） 点击下方图片进行跳转 重点讲解 上传文件/图片，一定要在form标签开头出设置属性: 实现方式把 页面上显示一个边框，里面的有默认的内容，鼠标拉动边框的边缘，可以改变其大小与结束标签
这些嵌套的标签是父与子的关系。6. 标签分类
a. 从书写方式分，标签分为:
b. 从元素(标签) 在页面中所占据的位置空间来分，可分为：
到
7. 认识标签的属性
class 就是这个 a 标签的属
性名，这个属性叫做类属性。
在一个HTML文本中同一个类的名字可给多个标签使用。二、HTML元素之间的关系结构
My title
Some text content
三、 标签及其属性详解
1. 结构标签
HTML 文档总体结构 中，已经介绍了总体结构标签，这里就不再赘述。
标题党1
标题党2
标题党3
2. 头部标签及其属性
标签中定义的标签。
源数据
meta
3. 功能标签
a. 盒子标签
div div 标签通常作为一个盒子或者说容器，可以把其他的标签放在里面，在 html5 之前通常用于网页的布局。 b. 文本文字
h1 到 h6 块元素，主动封闭，用于书写标题内容， 字体有大变小。hgroup 标签，假如网页上出现了连续的 h 标签，可以把这些标题标签放到 hgroup 中。
标题一
标题二
p 表示文章中的一个段落, 块级元素span
我也是比较纯洁的标签，没有太多的限制，比较有利于进行CSS的修饰，同时我是内联标签
我是不会换行的，同时我是内联标签
可以在内联标签中或者在一个块标签内换行
c.多媒体
img 图片 
src 图片文件的本地绝对或者相对路径，通常情况下都是一个 url 地址；alt 假如图片不能显示，则显示这里的文字,跳转功能不受影响；title 当鼠标放在这个图片上时，会出现的内容
audio 音频播放， h5 新增
src 指定文件地址或 urlcontrols 显示播放控件loop 循环播放
video 视频播放， h5 新增
autoplay 是自动播放，谷歌浏览器不支持 解决办法同时加上 `muted` 属性，但是默认是静音状态
d. 超链接
a 标签，同时它是一个内联标签
或者同页面的另一个标签处（称为锚） 新标签打开百度
跳到 id 为 p100 的标签位置
href 指定跳转到地址targe ="_blank" 是在一个新的标签页面打开跳转到目标页面, 默认是在当前页面跳转。e. 表单和表单中的元素
form 用于向后台服务端提交数据，比如注册时候的注册信息等。块级元素，使用频率较高，重点掌握。
action 把 input 标签的数据提交到哪儿，通常是一个 urlmethod 把 input 标签的数据提交的方法：
enctype="mutipart/form-data" 是提交文件或图片专用的属性form 标签中通常会有如下标签，用于获取用户输入的信息。
input 输入普通文本，内联元素
input 用于设置提交表单数据，用于前端用户和后台交互，这个标签也是内联标签。很重要，必须掌握。
type 定义输入内容的类型
name 定义一个 key
value 可以定义一个默认值值
最终后台接收到的数据应该是这种形式:
{"user_name": "shark"}
input 提交文件
enctype="multipart/form-data"
input 单选框
type 属性的值设置为 radio ，并把 name 属性的值设置为相同，就可以实现互斥，这种情况下只能选一个。
checked="checked" 设定选中。value 的值会被提交到后台服务器，比如上例选择了 男 , 后台收到的数据会是： {"gender": "1"}
input 实现多选框,
select 下拉框
城市，按住ctrl键可多选：
textarea 提交多行文本
input 关于提交到类型
submit 点击后会把 form 便签中的所有以上提到的数据提交到后台。button 点击后不会通过 form 提交到后台，通常会绑定一个 javascript 事件。
HTML5 中也新增了
input 标签的属性(自修) 姓名:
邮箱:
网址:
日期:
时间:
数字:
搜索:
f. 列表
ul 和 ol 用于在页面中呈现出一个列表，块级元素。 以 点 标识的菜单
有序列表
h. 表格
table 用于呈现一个表格，块级标签，使用频率较高，重点掌握。 表格
序号
主机名
端口号
1
host1.com
80
2
host2.com
80
j.
label + input 触发获取焦点
当在页面上用鼠标点击 lanbel标签定义的内容时（这里是：用户名），输入框就会被自动选中