初识 HTML

HTML 概念

HTML：全称是超文本标记语言（HyperText Markup Language），在网页中所有的文字图片和组织架构均由 HTML 来编写

HTML 并不是一种编程语言，它是一种计算机语言，其不具备像 c/c++/java 等编程语言中的变量或函数等东西，它仅仅由标签组成，如 <html></html>

由于 HTML 并不是编程语言，没有编译过程，因此可用任何可写字的软件来编写，比如 txt，不过目前常使用 vscode 软件来编写前端程序

HTML 就是文档，万维网的雏形是一个文档共享系统，而现在的万维网则是一个资源共享的网络，包括图片、多媒体等。万维网就是一个放大版的文档共享系统， HTML 的本质其实是文档（document）

常见标签

<html></html>

根标签，页面其他东西都要放在这个标签里面编写
可以在根标签里来加属性 lang 来告诉搜索引擎、爬虫网站使用什么语言，zh-cmn 是中文，en 是英文，一般二者一起写
```
<html lang=”en, zh-cmn”>
```

<head></head>

根标签次一级的标签
该标签中的内容主要是给浏览器看的，比如 title 用来设置页面的标题、meta、style 设置样式、link 外链 CSS 样式文件、设置移动端的页面显示大小、为网页被搜索时设置关键字等
meta 标签由 name 和 content 两个属性定义，描述一个 HTML 网⻚文档的属性，如作者、日期和时间、网⻚描述、关键词、⻚面刷新等，除了一些 http 标准规定了一些 name 作为大家使用的共识，开发者也可以自定义 name
- charset 用于描述 HTML 文档的编码形式，英文正常显示但中文就会变成一堆乱码，这是由于浏览器不识别中文字符，可通过 <meta> 标签来设置编码格式
```
<meta charset = "utf-8">
```
  常见编码集主要有 gbk、gb2312、unicode、utf-8
  - gb2312 是国标 2312 条，可以识别简中日韩等亚洲语言
  - gbk 是国标扩展，可以识别繁体中文
  - unicode 是万国码，世界各国语言都包括在内，全称是 unicode transformation format，这个编码格式是公用的，可以识别所有的语言 unicode 的升级版本是 utf-8
- http-equiv，顾名思义相当于 http 的文件头作用，如下面的代码就可以设置 http 的缓存过期日期
```
 <meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">
```
- viewport，移动前端最熟悉不过，Web 开发人员可以控制视口的大小和比例
```
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
```
- apple-mobile-web-app-status-bar-style，开发过 PWA 应用的开发者应该很熟悉，为了自定义评估工具栏的颜色
```
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
```

<body></body>

根标签次一级的标签，与 head 标签平级
是整个页面的主体部分，页面展示出来的内容一般都放在 body 标签下面

<div></div><span><span>

最常见的两个结构化标签

结构化标签没有特殊的效果，一般用来当做容器来盛放其他的标签结构化标签还有另外一个作用就是用来为其里面的子元素设置样式，一般元素若某一条属性没有被开发者设置样式的话，它会自动继承父级元素的相应属性的样式
span 标签里多数情况下盛放文字或小 icon 之类的
div 中间加一些文字，文字会在这个 div 标签的边界处自动换行，即这个 div 标签圈定了一个范围，里面的文字或其他标签都默认在这个范围里面显示
在 div 中书写的是一串英文字符时，这串英文字符在 div 的边界处并没有换行而是一直显示下去，这是为什么呢？

计算机会把每个汉字认出来是一个单独的单词，每个汉字都会默认地和其他汉字分隔开，但英文字母却不会默认地分隔开，因为计算机不知道多少个英文字母才算是一个单词，因此需要手动为其添加分隔符（即常用的空格），在这一串字符中间加几个空格，则被空格隔开的字符就会被当做是一个单词从而与其他的单词分隔开

空格的作用是当做分隔符来使用，并不是那种空白的一个格，怎么在 HTML 中写空白格呢？
- 这里就要提到一个名词叫做编码集了，在书写 HTML 时很多特殊的符号是无法写出来的，这时只能用编码来让浏览器识别所想的符号，编码的格式是 &编码;
- 空格的编码就是  ，当写多个   时在页面中也就可以看到多个空白格
- 用来当做标签的尖括号 <> 也是无法正常通过符号来显示出来的，同样需要用编码集让浏览器识别出来。< 的编码是 < 即 less than 的意思；> 的编码是 > 即 great than 的意思
- 回车也是属于分隔符，在 HTML 中回车是没有作用的，想要在网页上让文字显示出回车换行的效果，可以使用一个标签叫做 <br> 标签，这个标签的作用就是换行。W3C 标准中提到 <br> 标签是空标签，意味着它没有结束标签，因此这是错误的 <br></br>；在 XHTML 中把结束标签放在开始标签中，即<br />

p 标签（独占一行，段落上下都会有一定的间隔距离）、标题标签 h1-h6、strong 标签（文字加粗放大且独占一行，h4 的默认大小是正常的文字大小，不过是加粗的）、 em 标签（文字变成斜体）、del 标签（文字中间画一条横线，一般在打折时使用）、address 标签（内容变成斜体并且独占一行）

ol li

有序列表，ol 是外面的列表框，li 是里面的子项且每一个 li 子项前都会带有序号
ol 有个属性叫做 type 属性，这个属性的作用是用来设置每个子项前的显示内容，默认情况下按照数字来排序的
- type=”a”：序号是按照小写字母来排序
- type 设置成 A：按照大写字母来排序
- 设置成 i：按照 i 的个数来排序（罗马数字）
- 设置成 I：按照大写 I 的个数来排序
- 除此之外，设置成其他的属性均是错误的，而错误的情况下 ol 会按照默认的数字来排序
ol 的第二个属性 reversed，当给 ol 加上 reversed=”reversed” 时子项就会变成倒序来排列，这个属性直接写 reversed 也是可以的，不过写完整才是规范的写法
ol 的第三个属性叫做 start，该属性的意思是让子项从第几个序号开始显示，当写 start=”2″ 时前面的序号就会变成 2、3、4 而不是默认的 1、2、3，字母也是同样的道理

ul li

无序列表，除了前面的序号都变成了点 • 之外，其他的和有序列表基本一样
ul 同样有一个 type 属性，这个属性值设置的是每一个子项前显示的符号的形式，默认的值是 disc 圆点
在使用 ul、li 标签时，一般会先设置 ul 的默认样式 list-style: none
无序列表一般用来当做导航栏之类的、里面的结构样式都一样的部分，像淘宝等网页的导航栏就是用 ul、li 来写的

a

其有个必须写的属性 href（hyperText reference）超文本链接，里面写的是地址
a 的英文单词是 anchor 锚点的意思，因此这个标签的作用主要有以下几点：
- 定点跳转指定的 id 的元素位置，这个用法需要在 href 中写上 id 的值，如 <a href=”#clickme”></a>，这样就会跳转到 id 是 clickme 的元素位置
- 超链接，href 中写一个本地或网上的链接，如 www.baidu.com，这样点击时就会跳转到这个网页上去
- 协议限定符，href 中可书写 JS 代码，如 href=”javascript:while(1){alert(‘你中毒了’)}”，点击这个 a 标签后浏览器就会弹出对话框（通常在移动端都用 a 标签来调用接口，如：href=”phoneto:12234512345″ 调用手机的拨号功能来拨打电话，像美团外卖之类的就是用的这个功能）
a 标签默认的是蓝色的字体且带有下划线，在页面初始化时通常也习惯将 a 标签的颜色和下划线的默认属性都去掉

将图片作为链接下载

<a href="../img/footer.png" download="../img/footer.png">下载图片</a>

img

img 标签是 image 图片的意思，有个必备属性叫 src –-> source，该属性值是图片的地址，一般来说给 src 填写两种值：
- 网上链接
- 本地链接
本地链接分为两种：相对地址 和 绝对地址。而绝对地址通常是不用的，因为当文件上传到服务器上时，凡是用绝对地址写的链接统统都会失效的

相对地址中 ../ 是返回当前文件的上一层目录，./ 是当前文件所在的目录
img 标签还有两个属性：
- alt：该属性为图片设置占位符，即当图片因网速或链接错误等原因加载不出来时就会显示 alt 里面设置的值
- title：图片提示符，当鼠标移入图片时在鼠标旁边会出现一个小方块来显示这个 title 属性里面设置的值
srcset/sizes
- 可以设计响应式图片，可以使用这两个新属性来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源
- srcset 定义了允许浏览器选择的图像集以及每个图像的大小
- sizes 定义了一组媒体条件（如屏幕宽度）且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择
- 有了这些属性，浏览器会
  - 查看设备宽度
  - 检查 sizes 列表中哪个媒体条件是第一个为真
  - 查看给予该媒体查询的槽大小
  - 加载 srcset 列表中引用的最接近所选的槽大小的图像
```
<img 
  src="clock-demo-thumb-200.png" 
  alt="Clock"
  srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
  sizes="(min-width: 600px) 200px, 50vw"
/>
```

<picture>（追加）

能起到上面 srcset 相似作用
通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本
浏览器会选择最匹配的子 <source> 元素，若没有匹配的就选择 <img> 元素的 src 属性中的 URL，然后所选图像呈现在 <img> 元素占据的空间中
picture 同样可以通过不同设备来匹配不同的图像资源

<picture>
  <source 
    srcset="/media/examples/surfer-240-200.jpg" 
    media="(min-width: 800px)"
  >
  <img src="/media/examples/painted-hand-298-332.jpg" />  
</picture>

表单 form

这个元素可实现前端和后台的数据交互，通过 form 表单向后台发送数据，数据都是由两部分组成的：数据名 + 数据内容
- 数据名：就是需要在 input 标签里面写一个 name 属性来告诉浏览器这个数据的名字是什么
- 数据内容：就是给 input 标签设置的 value 属性的值
属性
- action：填写服务器地址，这个属性的意思是把数据传递到哪个服务器
- method：传输方法，通过什么方式来传输数据，一般填写的都是 POST/GET 这两种中的一个，虽然有其他的方式但是用的相对少
表单拥有的子元素
- input 这个标签是一个单标签，不需要闭合，有个 type 属性，该属性值决定了 input 标签的类型是什么
  - type="text"，该 input 标签就是一个输入框，可以在里面输入文字信息
  - type="password"，该 input 标签就是一个密码框，在里面输入的文字信息会以隐藏形式展现
  - type="submit"，该 input 标签是个提交按钮，点击该提交按钮会把整个表单数据发送到后台服务器
  - type="radio"，单选框，当给一个 input 设置 radio 的 type 后，它就会变成一个圆点，可点击选择这个圆点。但写很多单选框时它们似乎都可被选中并没有单选的作用，这是因为还没有为这一组单选框设置名字，当给几个 radio 都设置了同一个 name 时，它们就会变得只能选择一个单选框了
  - type="checkbox"：复选框，当 input 的 type 值设置成这个后和 radio 一样的道理，设置复选框的名字，可以同时选择很多的选项
  - input 的 readonly 与 disabled 属性
    - disabled 指当 input 元素加载时禁用此元素，input 内容不会随着表单提交
    - readonly 规定输入字段为只读，input 内容会随着表单提交
    - 无论设置 readonly 还是 disabled，通过 js 脚本都能更改 input 的 value
  - checked="checked"，在哪个 input 标签里面设置了这个属性，哪个选项就是默认被选择的状态
- select 下拉列表的标签
  - 下拉列表的 name 属性是写在 select 标签上的，里面 option 中间填写的内容就是默认的数据值
  - 若给每个 option 都加一个 value 属性，则 option 中间的文字则不作为传递的数据的值，以 value 的值作为传递的数据的值
  - 同时下拉列表的默认选中的是第一个选项，若要改变默认选项的话，要添加的属性是 selected="selected"
```
<select>
  <option>山东</option>
  <option>黑龙江</option>
  <option>北京</option>
</select>
```

iframe

HTML 内联框架元素，表示嵌套的 browsing context（浏览器上下文），它能够将另一个 HTML 页面嵌入到当前页面中
注意：页面上的每个 <iframe> 都需要增加内存和其它计算资源，这是因为每个浏览上下文都拥有完整的文档环境，虽然理论上来说你能够在代码中写出来无限多的 iframe，但是最好还是先看看这么做会不会导致某些性能问题
缺点：
- iframe 会阻塞主页面的 onload 事件
- 搜索引擎的检索程序无法解读这种页面，不利于 SEO
- iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
  
  使用 iframe 之前需要考虑这两个缺点，若需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题
- 产生多个页面，不易管理
- 页面样式调试麻烦，出现多个滚动条
- 浏览器的后退按钮失效
- 多会增加服务器的 HTTP 请求
- 小型的移动设备无法完全显示框架
- 不易打印
iframe

label

label 标签的作用主要是用来绑定的，它里面有一个 for 属性
通过 for 属性写上要绑定的标签 id，就可把该 label 标签绑定到相对应的标签上
若在 js 代码中要表示 label 标签的 for 属性，不能直接写 for，要写 htmlFor
如下，点击 username 这个 label 标签也可触发 input 的聚焦事件，就好像这两个是一个东西一样，可以提高用户体验
```
<label for="demo">username</lable>
<input type="text" id="demo" />
```

script

详见 script 标签 defer 与 async

标签的分类

行级/内联/行内元素 display: inline，这一类元素的特点是
- 不沾满整行，元素所占空间完全由内容所控制
- 不可以改变宽高
- 标签代表有：a em br select span strong
块级元素 display: block，这一类元素的特点是
- 占满整行，无论内容多还是少
- 可以改变宽高
- 标签代表有：address div form h1-h6 p ul ol li table
其实还有第三种标签 display: inline-block，这类标签既不属于行级元素也不属于块级元素，它们既不独占一行，又可以随意改变宽高，比如 <img> <input> 标签

src 和 href 的区别

src 是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置。在请求 src 资源时会将其指向的资源下载并应用到文档内，如 js 脚本，img 图片和 frame 等元素。当浏览器解析到该元素时会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般 js 脚本会放在底部而不是头部
href 是指向网络资源所在位置(的超链接)，用来建立和当前元素或文档之间的连接，当浏览器识别到它指向的文件时就会并行下载资源，不会停止对当前文档的处理

HTML 语义化

HTML5 的核心思想就是语义，所以不管是什么标签就看表达的意思而不是看展现效果

语义化是指根据内容结构化（内容语义化）来选择合适的标签（代码语义化），让⻚面具有良好的结构与含义，比如 <p> 标签就代表段落， <article> 代表正文内容等

语义化的优点：

增强了可读性，方便团队开发和维护，与 CSS3 的关系更和谐
有利于 SEO，改进搜索引擎的优化
在没有 CSS 的情况下，页面也能呈现出很好的内容结构、代码结构
一般来说可以让 HTML 文件更小
很好的支持屏幕阅读软件，（盲人）会根据结构来读页面

这对于简书、知乎这种富文本类的应用很重要，语义化对于其网站的内容传播有很大的帮助，但是对于功能性的 web 软件的重要性大打折扣，如一个按钮、Skeleton 这种组件根本没有对应的语义，也不需要什么 SEO

让 IE8 支持 HTML5

HTML5 是 HTML 最新的修订版本，于 2014 年 10 月由万维网联盟（W3C）完成标准制定，而 IE8 面世时间为 2009 年 3 月 19 日，时间相差如此之大，所以 IE8 作为较古老的浏览器不支持 HTML5 引入的语义化标签，如 header、nav、menu、section、article 等
虽然默认不支持，但可通过 JS 使用 document.createElement 来“欺骗” IE 的 CSS 引擎，让它知道某个标签的存在，既然元素默认都不支持，就更没有相关默认的样式了，所以还要加上一些重置样式
```
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
```
可借助 html5shiv.js 让 IE8 支持更多的 HTML5 特性。不只是 IE8，IE6-9、Safari 4.x（以及 Iphone3.x）、FireFox3.x 等对 HTML5 的支持都不完善，因此有个库 html5shiv.js 来统一处理（shiv 实际上是个拼写错误，应该为 shim，在机械工程的专业释义中为垫片，比如给那些老旧的浏览器加个垫片，让它们基本能用）
```

```

HTML、XHTML、XML

HTML(超文本标记语言)，在 html4.0 之前 HTML 先有实现再有标准，导致 HTML 非常混乱和松散
XML(可扩展标记语言)，主要用于存储数据和结构且可扩展，JSON 也有相似的作用，但是更加轻量和高效，所以 XML 现在市场越来越小了
XHTML(可扩展超文本标记语言)，基于上面两者而来，W3C 为了解决 HTML 混乱问题而生，并基于此诞生了 HTML5，开头加入 <!DOCTYPE html> 就是标准模式，不加就是兼容混乱的 HTML

XHTML 元素必须合理嵌套、元素必须要有一个相应的结束标记、所有标签的元素和属性的名字都必须使用小写、必须有根元素、给所有属性赋一个值、所有的属性值必须用引号 "" 括起来、把所有 < 和 & 特殊符号用编码表示、不要在注释内容中使“--”、图片必须有说明文字等

Doctype

DOCTYPE 是 HTML5 标准网⻚声明，必须声明在 HTML 文档的第一行，用来告知浏览器的解析器用什么文档标准解析这个文档，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析

文档解析模式有：

标准模式（CSS1Compat）：浏览器使用 W3C 的标准解析渲染⻚面，排版和 JS 运作模式都是以该浏览器支持的最高标准运行
怪异模式（BackCompat）：使用浏览器自己的方式来解析执行代码，因为不同浏览器解析执行的方式不一样（若没有声明 DOCTYPE，默认就是这个模式）
IE8 还有一种介乎于上述两者之间的近乎标准的模式，此模式下会实施一种表单元格尺寸的怪异行为(与 IE7 之前的单元格布局方式一致)，除此之外符合标准定义，基本淘汰了

浏览器解析时到底使用标准模式还是怪异模式，与网页中的 DTD 声明直接相关，DTD 声明定义了标准文档的类型（标准模式解析），会使浏览器使用相应的方式加载网页并显示，忽略 DTD 声明或在 DOCTYPE 前加入 XML 声明，将使网页进入怪异模式

DOCTYPE 三种标准模式写法如下，当还是 HTML 时一般用第三种，但现在一般直接用第一种写法（第一种是 HTML5 规范的标准写法）

<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5 为什么只需要写 <!DOCTYPE html> ？

HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行）
而 HTML 4.01 基于 SGML，所以需要对 DTD 进行引用才能告知浏览器文档所使用的文档类型

SGML：标准通用标记语言（Standard Generalized Markup Language），是现时常用的超文本格式的最高层次标准，是可以定义标记语言的元语言，甚至可以定义不必采用<>的常规方式。但由于它的复杂及非常强大的适应性因而难以普及。HTML 和 XML 同样派生于它：XML 可以被认为是它的一个子集，而 HTML 是它的一个应用 --- 维基百科

HTML 5

为 HTML5 建立的一些规则

新特性应该基于 HTML、CSS、DOM 以及 JavaScript
减少对外部插件的需求，比如 Flash
更优秀的错误处理（优化错误处理的功能点）
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明

HTML5 新特性

用于绘画的 canvas 元素 svg
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持: localStorage、sessionStorage
新的特殊内容元素，如 article、footer、header、nav、section 等
新的表单控件，如 calendar、date、time、email、url、search
input type = text button file radio checkbox
新的技术 webworker、websocket、Geolocation

HTML5 新增标签

Header、Footer、Article -> div、Section -> p、Nav、 Aside、Svg、Canvas、Audio、Video、自定义标签: 行级元素 等

HTML5 新增属性

Contenteditable：用户能否修改页面上的内容
Draggable：支持拖放
Hidden：隐藏
Contextmenu：为元素设定快捷菜单
data-*：自定义属性
- HTML 的数据属性，用于将数据储存于标准的 HTML 元素中作为额外信息，可以通过 js 访问并操作它来达到操作数据的目的，这些属性集可通过对象的 dataset 属性获取，不支持该属性的浏览器可通过 getAttribute 方法获取
- 注：data- 之后的以连字符分割的多个单词组成的属性，获取时使用驼峰风格，所有主流浏览器都支持 data-* 属性

如何区分 HTML 和 HTML5？　　

DOCTYPE 声明、新增的结构元素、功能元素等

HTML5 的离线存储

在用户没有与因特网连接时可以正常访问站点或应用，在用户与因特网连接时更新用户机器上的缓存文件

原理：HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过该文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存了下来，之后当网络在处于离线状态下时浏览器会通过被离线缓存的数据进行页面展示

如何使用？

HTML 头部加入一个 manifest 的属性

<html manifest="example.appcache"> 
  ...
</html>

在 example.manifest 文件编写离线存储的资源

CACHE MANIFEST
# v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ offline.html

在离线状态时操作 window.applicationCache 进行需求实现

浏览器对 HTML5 的离线存储资源进行管理和加载：

在线的情况下，浏览器发现 HTML 头部有 manifest 属性就会请求 manifest 文件
若是第一次访问 APP 则浏览器就会根据 manifest 文件的内容下载相应的资源且进行离线存储
已经访问过 APP 且资源已经离线存储了，则浏览器就会使用离线的资源加载页面，然后浏览器会对比新旧 manifest 文件，若文件没有发生改变则不做任何操作，若文件改变了则会重新下载文件中的资源并进行离线存储
离线的情况下，览器就直接使用离线存储的资源

HTML5 的优点与缺点

优点：

网络标准统一，HTML5 本身是由 W3C 推荐出来的
多设备、跨平台
即时更新
提高可用性和改进用户的友好体验
有几个新的标签，这将有助于开发人员定义重要的内容
可以给站点带来更多的多媒体元素(视频和音频) ......

缺点：

安全：像之前 Firefox4 的 websocket 和透明代理的实现存在严重的安全问题，同时 webstorage、websocket 这样的功能很容易被黑客利用来盗取用户的信息和资料
完善性：许多特性各浏览器的支持程度不一样
技术门槛：HTML5 简化开发者工作的同时代表了有许多新的属性和 API 需要开发者学习，像 webworker、websocket、webstorage 等新特性，后台甚至浏览器原理的知识
性能：某些平台上的引擎问题导致 HTML5 性能低下
浏览器兼容性：最大缺点，IE9 以下浏览器几乎全军覆没

优雅降级、渐进增强

优雅降级：Web 站点在所有新式浏览器中都能正常工作，若用户使用的是老式浏览器则代码会检查以确认它们是否能正常工作。由于 IE 独特的盒模型布局问题，针对不同版本的 IE 的 hack 实践过优雅降级，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面增加无害于基础浏览器的额外样式和功能。当浏览器支持时它们会自动地呈现出来并发挥作用

对 WEB 标准及 W3C 的理解与认识

标签闭合
标签小写
不乱嵌套
提高搜索机器人搜索机率、
使用外链 css 和 js 脚本
结构、行为、表现分离
文件下载与页面速度更快
内容能被更多的用户所访问
内容能被广泛的设备所访问
更少的代码和组件
容易维护、改版方便，不需要变动页面内容
提供打印版本而不需要复制内容
提高网站易用性
......

HTML 基础

初识 HTML

HTML 概念

常见标签

标签的分类

src 和 href 的区别

HTML 语义化

HTML、XHTML、XML

Doctype

HTML 5

为 HTML5 建立的一些规则

HTML5 新特性

HTML5 新增标签

HTML5 新增属性

如何区分 HTML 和 HTML5？

HTML5 的离线存储

HTML5 的优点与缺点

优雅降级、渐进增强

对 WEB 标准及 W3C 的理解与认识

如何区分 HTML 和 HTML5？　　