根据 W3C 标准，一个网页主要由三部分组成：结构、表现还有行为。
结构：HTML用于描述页面的结构
表现：CSS用于控制页面中元素的样式
行为：JavaScript用于响应用户操作
W3C万维网联盟，专门为了定义网页相关的标准成立，定义了网页中的HTML、CSS、DOM、HTTP、XML等标准。
WHATWG网页超文本应用技术工作小组，是一个为推动HTML5标准而成立的组织。2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。
一、HTML概述
HTML(Hypertext Markup Language)超文本标记语言，使用标签的形式来标识网页中的不同组成部分。所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。
发展
如何区分不同的HTML呢，使用文档声明
HTML5的文档声明：
<!DOCTYPE html>
HTML5引入原生多媒体支持，引入可编程内容，引入语义Web
h5的文档声明，声明当前的网页是按照HTML5标准编写的，编写网页时一定要将h5的文档声明写在网页的最上边，如果不写文档声明，则会导致有些浏览器进入怪异模式，解析页面会导致页面无法正常显示。
元素和标签
HTML中的标记指的就是标签。
• HTML使用标记标签来描述网页。
• 结构：
<标签名>标签内容</标签名>
<标签名 />
元素
• 我们还将一个完整的标签称为元素。
• 这里我们可以将元素和标签认为是一个同义词。
<h1>一级标题</h1>
上边的h1我们就称为元素
<p>我是一个<em>段落</em></p>
p也是一个元素，em是p的子元素，p是em的父元素。
I like <code>apples</code> and oranges.
上面的 <code>apples</code> 就是code元素，包括开始标签<code>、结束标签</code>和元素内容(apples)组成。
空元素
没有内容的元素称为空元素，如 <code></code> 。
空元素可以更简洁地只用一个标签表示，如 <code/> ，这被称为自闭和标签或自结束标签。
两种标签
<标签名 >标签内容 </ 标签名 >
<标签名 />
元素属性
元素可以使用属性进行配置，属性只能用在开始标签或单个标签上，不能用于结束标签。
属性值可以使用单引号和双引号
一个元素可以配置多个属性
可以使用布尔属性
可以使用自定义属性
分为全局属性和专有属性
全局属性
accesskey属性 设置快捷键
class属性 将元素规类
contenteditable属性 true
contextmenu属性 为元素设定快捷菜单
dir属性 rtl ltr
draggable属性
dropzone属性
hidden属性
id属性
lang属性
spellcheck属性
style属性
tabindex属性
title属性
HTML文档基本结构
外层结构
包含两个元素：DOCTYPE和html
<!DOCTYPE HTML> <html> <!-- elements go here --> </html>
元数据
包含在head元素内部，比如title元素
<!DOCTYPE HTML> <html> <head> <!-- metadata goes here --> <title>Example</title> </head> <body> <!-- Content and elements go here --> </body> </html>
父元素、子元素、后代元素和兄弟元素
乱码
编码：依据一定的规则，将字符转换为二进制编码的过程
解码：依据一定的规则，将二进制编码转换为字符的过程
编码和解码所采用的规则，我们称为字符集。产生乱码的根本原因是，编码和解码采用的字符集不同。在中文系统的浏览器中，默认都是使用GB2312进行解码的。
二、HTML元素
2.1 元素速览
基础标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>常用标签</title> </head> <body> <!--标题标签 一共有六级标签，h1-h6。 不关心字体大小，因由css控制。 使用HTML标签时，关心的是标签的语义，我们使用的标签都是语义化标签。 六级标题中，h1最重要，表示一个网页中最重要的内容，h2-h6重要性依次降低。 h1重要性对于搜索引擎的重要性仅次于title，检索完title后会立即查看h1。一般一个页面只会写一个h1。 一般只使用h1-h3。 --> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <!--段落标签 段落标签用于表示内容中的一个自然的，使用p标签来表示一个段落。 下面没有p标签的两句会显示在一行。 p标签中的文字默认会独占一行，且不同行之间会有距离。 --> 我是一个段落！ 我是一个段落！ <p>我是一个段落！</p> <p>我是一个段落！</p> <!-- 在HTML中，字符之间写再多空格，浏览器也只会当成一个空格。 换行也会当成一个空行。 --> <p> 锄禾日当午， 汗滴禾下土。 谁知盘中餐， 粒粒皆辛苦。 </p> <!-- 使用br标签表示换行，自结束标签。 --> <p> 锄禾日当午，<br/> 汗滴禾下土。<br/> 谁知盘中餐，<br/> 粒粒皆辛苦。 </p> <!-- hr水平线，自结束标签。 --> <hr/> <hr/> </body> </html>
实体
html中一些如小于号、大于号，往往不能直接使用，会被当成标签。使用一些特殊符号来表示这些特殊符号，这些特殊符号被称为实体（转义字符）。
格式：
&entity_name; 或者 &#entity_number;
实体名称对大小写敏感！
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 日圆 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
<p>a < b > c</p> <p>我是 一个 段落！</p>
结果
a < b > c
我是 一个 段落！
<body> <!--图片标签 img标签来向网页中引入一个外部图片，自结束标签。 src 设置外部图片路径 alt 设置图片不能显示时的描述。搜索引擎可以通过alt属性识别不同的图片。不写alt，搜索引擎不会收录。 width 图片宽度 height 图片高度 当宽度和高度只设置一个，另一个也会等比例调整大小 不建议设置width和height，而是直接调整图片实际大小 --> <img src="assets/1.jpg" alt="小心心" width="200px" height="200px"> <!--图片格式 jpeg 可压缩，颜色多，不支持透明，用来保存照片等颜色丰富的图片 gif 动图，只支持简单的直线透明，颜色少 png 支持颜色多，支持复杂的透明，用来显示颜色复杂的透明的图片 使用原则： 效果不一致使用效果好的，效果一致使用小的。 --> </body>
相对路径
元数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>常用标签</title> <!-- 使用meta标签，可以用来设置网页关键字 --> <meta name="keywords" content="html5,js,css" /> <!-- 使用meta标签，可以用来指定网页描述 给搜索引擎看的，不会影响搜索引擎排名 --> <meta name="description" content="发布h5、js等前端相关信息" /> <!-- 使用meta标签，可以用来请求重定向 content="5;url=http://www.baidu.com" 时间和路径 --> <meta http-equiv="refresh" content="5;url=http://www.baidu.com"/> </head> <body> <h1>5秒后跳转。</h1> </body> </html>
xHTML语法规范
更加严格
1.不区分大小写，一般都使用小写
2.注释不能嵌套
3.HTML标签必须结构完整：成对出现或自结束标签。浏览器尽最大努力解析页面，自动修正，有些情况会修正错误。
4.标签可以嵌套，但不能交叉嵌套
5.标签中属性必须有值，且值必须加引号
内联框架
<!-- 使用内联框架可以引入一个外部的页面 使用iframe来创建 src 指向外部页面路径 name 命名 现实开发中不推荐使用，iframe中内容不会被搜索引擎检索。内网项目可以使用。 --> <iframe src="index.html"></iframe>
超链接
<body> <!-- 超链接 a标签 一个页面跳转到另一个页面 href 指向链接跳转的目标地址，可以写相对路径，也可以写完整地址 target 何处打开链接文档，指定打开链接的位置 _self 当前窗口打开,默认值 _blank 在新的窗口中打开链接 可以设置一个内联框架的name属性值，链接会在内联框架中打开 --> <a href="http://www.baidu.com">我是一个超链接</a><br/><br/> <a href="index.html" target="sina">我是一个超链接</a> <iframe src="https://finance.sina.com.cn/" name="sina"></iframe> <!-- center标签中元素居中显示，不推荐使用 --> <center> <p>我是p</p> </center> </body>
<!-- 跳转到id为bottom的元素所在位置 直接在href中写 #id属性值 --> <center> <a id="top" href="#bottom">去底部</a> <a href="#hello">去指定位置</a> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p id="hello">我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <p>我是p</p> <!-- 发送电子邮件，点击链接后可以自动打开计算机中默认的邮件客户端 mailto:邮件地址 --> <a href="mailto:abc@126.com">联系我们</a> <a id="bottom" href="#top">去顶部</a> </center>
表单
表格