初识HTML

HTML 概念

一、HTML，全称是超文本标记语言（HyperText Markup Language），在网页中全部的文字图片和组织架构均由 HTML 来编写
二、HTML 并非一种编程语言，它是一种计算机语言，其不具有像 c/c++/java 等编程语言中的变量或函数等东西，它仅仅由标签组成，如 <html></html> 三、因为 HTML 并非编程语言，没有编译过程，所以可用任何可写字的软件来编写好比 txt，不过目前常使用 vscode 软件来编写前端程序
四、HTML 就是文档，万维网的雏形是一个文档共享系统，而如今的万维网则是一个资源共享的网络，包括图片、多媒体等）。万维网就是一个放大版的文档共享系统， HTML 的本质实际上是文档（document）javascript

常见标签

<html></html>css

根标签，其余的东西都要放在这个标签里面编写
能够在根标签里来加属性 lang 来告诉搜索引擎、爬虫网站使用什么语言，zh-cmn 是中文，en 是英文，通常两者一块儿写
```
<html lang=”en, zh-cmn”>
复制代码
```

<head></head> html

根标签次一级的标签
该标签中的内容主要是给浏览器看的，好比 title 用来设置页面的标题、meta、style 设置样式、link 外链 CSS 样式文件、设置移动端的页面显示大小、为网页被搜索时设置关键字等
meta 标签由 name 和 content 两个属性定义，描述一个 HTML 网⻚文档的属性，如做者、日期和时间、网⻚描述、关键词、⻚面刷新等，除了一些 http 标准规定了一些 name 做为你们使用的共识，开发者也能够自定义 name
- charset，用于描述 HTML 文档的编码形式，英文正常显示但中文就会变成一堆乱码，这是因为浏览器不识别中文字符，可经过标签来设置编码格式
```
<meta charset = "utf-8">
复制代码
```
- 常见编码集主要有 gbk、gb23十二、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>html5

最多见的两个结构化标签

结构化标签没有特殊的效果，通常用来当作容器来盛放其余的标签（结构化标签还有另一个做用就是用来为里面的子元素设置样式，通常元素若某一条属性没有被开发者设置样式的话，它会自动继承父级元素的相应属性的样式java

span 标签里面多数状况下盛放文字或小 icon 之类的
div 中间加一些文字，文字会在这个 div 标签的边界处自动换行，即这个 div 标签圈定了一个范围，里面的文字或其余标签都默认在这个范围里面显示
在 div 中书写的是一串英文字符时，这串英文字符在 div 的边界处并无换行而是一直显示下去，这是为何呢？
- 计算机会把每一个汉字认出来是一个单独的单词，每一个汉字都会默认地和其余汉字分隔开，但英文字母却不会默认地分隔开，由于计算机不知道多少个英文字母才算是一个单词，所以须要手动为其添加分隔符（即经常使用的空格），在这一串字符中间加几个空格，则被空格隔开的字符就会被当作是一个单词从而与其余的单词分隔开
空格的做用是当作分隔符来使用，并非那种空白的一个格，怎么在 HTML 中写空白格呢？
- 这里就要提到一个名词叫作编码集了，在书写 HTML 时不少特殊的符号是没法写出来的，这时只能用编码来让浏览器识别所想的符号，编码的格式是 &编码;
- 空格的编码就是  当写多个 时在页面中也就能够看到多个空白格
- 用来当作标签的尖括号 <> 也是没法正常经过符号来显示出来的，一样须要用编码集让浏览器识别出来。< 小于号的编码是<即 less than 的意思；> 大于号的编码时>即 great than 的意思
- 回车也是属于分隔符，在 HTML 中回车是没有做用的，想要在网页上让文字显示出回车换行的效果，须要一个标签叫作
  标签，这个标签的做用就是换行。W3C 标准中提到
  标签是空标签，意味着它没有结束标签，所以这是错误的<br></br>；在 XHTML 中，把结束标签放在开始标签中，即<br />

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

ol li web

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

ul li编程

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

acanvas

其有个必须写的属性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
其实还有第三种标签，这类标签既不属于行级元素也不属于块级元素，它们既不独占一行，又能够随意改变宽高，好比 <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 做为较古老的浏览器不支持 HTML 5 引入的语义化标签，如 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 特性不仅是 IE八、IE6-九、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，开头加入就是标准模式，不加就是兼容混乱的 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 文件与旧的 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？　　