摘要：最近关注的重学前端系列文章，也想把已知的前端知识体系梳理一遍，夯实基础的同时，总结提升。标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。模式是目前最常用的模式。严格模式不允许展示型弃用元素和框架集。中空格不会被自动删除。

</>复制代码 
最近关注winter的“重学前端”系列文章，也想把已知的前端知识体系梳理一遍，夯实基础的同时，总结提升。接下来会从HTML、CSS、JS、性能、网络安全、框架通识进行分类总结。

声明位于HTML文档的第一行，处于之前。

声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。Doctype不存在或者格式不正确都会导致文档以兼容模式/混杂模式呈现。

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

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

总体上应该分为三类： HTML5，HTML4.01，XHTML。

HTML5模式是目前最常用的模式。直接在DOCTYPE后面添加html即可。

</>复制代码 

分为三种模式：严格模式(strict)、过度模式(transitional)、Frameset模式。区别在于是否允许使用展示性和弃用元素，以及是否允许使用框架集。

严格模式：不允许展示型、弃用元素和框架集。

</>复制代码 

过度模式：允许使用展示性元素、弃用元素（比如font、color等），不允许使用框架集。

</>复制代码 

Frameset模式：允许展示性元素、弃用元素，允许框架集。

</>复制代码 

XHTML是一种比较严格的模式，所有元素必须以XML格式编写。分类和HTML4.01比较类似，分为严格模式、过渡模式、Frameset模式，同时添加了1.1模式。

严格模式：不允许展示性、弃用元素和框架集

</>复制代码 

过渡模式：允许展示性、弃用元素（比如font，color等）,不允许框架集

</>复制代码 

Frameset模式：允许展示性、弃用元素，允许框架集

</>复制代码 

XHTML 1.1：该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。

</>复制代码 

最后附上各种文档类型支持的元素列表：HTML5/HTML 4.01/XHTML 元素和有效的 DTD

DOCTYPE声明

新增结构元素

新增功能元素

XHTML要求编写符合XML的语法。主要区别在于：

XML区分大小写：以前很多、等都用大写或大小写混用如、或、”排版，但是XHTML统一要求需要用、小写。

XML标签必须闭合，单元素需要以/作为闭合结尾，嵌套不能出错。比如：“ ”像这个标签在html是可行的，但是为了xhtml的标准所以必须关闭如“ ”

XML属性必须放在引号中。

XML属性必须有属性值，不能省略。比如：网页里显示图片img标签里都可加可不加alt属性，但是现在xhtml要求必须加上alt属性,不然xhtml验证将提示错误，哪怕alt的值为空都可以。

XML中空格不会被自动删除。

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
常用列表如下:

</>复制代码 
  
 
    
   
       
      
    
      
 

在移动端开发，最常看到head里面设置了下面这个属性：

</>复制代码 

常用的6个属性：

width ： 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"

initial-scale：设置页面的初始缩放值，为一个数字，可以带小数

minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数

maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数

height：设置layout viewport 的高度，这个属性并不重要，很少使用

user-scalable：是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

特殊说明：（IE6,7,8）支持，需要使用css3mediaqueries.js

</>复制代码 
 

X-UA-Compatible(浏览器采取何种版本渲染当前页面)

说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）举例：

</>复制代码 
  

cache-control(指定请求和响应遵循的缓存机制)

说明：指定浏览器如何缓存某个响应以及缓存多长时间。举例：

</>复制代码 

共有以下几种用法：

</>复制代码 
 - no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
 - no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
 - public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果。
 - private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
 - maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。

关于浏览器缓存，可移步至：浏览器缓存机制

expires(网页到期时间)

说明:用于设定网页的到期时间，过期后网页必须到服务器上重新传输。举例：

</>复制代码 

Pragma(cache模式)

说明：是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出 。举例：

</>复制代码 
＜meta http-equiv="pragma" content="no-cache"＞

Set-Cookie(cookie设定)

说明：如果网页过期。那么这个网页存在本地的cookies也会被自动删除。举例：

</>复制代码 
 
 

refresh(自动刷新并指向某页面)

说明：网页将在设定的时间内，自动刷新并调向设定的网址。举例:

</>复制代码 
 

根据内容的结构，选择合适的标签（代码语义化）恰当地表示文档结构，便于开发者阅读的同时让浏览器的爬虫和机器很好地解析。

在没有css的情况下，也能很好的展示内容结构、代码结构。

提升用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用。

有利于SEO：和搜索引擎建立良好的沟通，有助于爬虫获取更多有效的信息，爬虫以来于标签的上下文和各个关键字的权重。

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备等）以有意义的方式渲染页面。

便于团队开发和维护，语义化更具可读性，减少因为不遵循标准的差异化。

作为自然语言和纯文本的补充

在 HTML5 中，就引入了这个表示 ruby 的标签，它由ruby、rt、rp 三个标签来实现。用于注音或者意思的注解。

</>复制代码 
漢 (ㄏㄢˋ)

用来表达一定的结构或者消除歧义

比如当没有上下文时，如何消除歧义呢？这就要用到我们的 em 标签，em 表示重音：

</>复制代码 
今天我吃了一个  苹果 。
今天我吃了  一个  苹果。

实际上，不仅仅是读音，这里的意思也发生了变化。前一段中，表示我今天吃的是苹果，而不是别的什么东西，后一段中，则表示我今天只吃了一个苹果，没有多吃。

语义化的 HTML 能够支持自动生成目录结构，HTML 标准中还专门规定了生成目录结构的算法，即使我们并不打算深入实践语义，也应该尽量在大的层面上保证这些元素的语义化使用。例如：

</>复制代码 
    
HTML 语义 
    
balah balah balah balah
    
        
 弱语义 
        
balah balah
    
    
        
 结构性元素 
        
balah balah
 
    
......

随着越来越多的浏览器推出“阅读模式”，以及各种非浏览器终端的出现，语义化的 HTML 适合机器阅读的特性变得越来越重要。
应用了语义化结构的页面，可以明确地提示出页面信息的主次关系，它能让浏览器很好地支持“阅读视图功能”，还可以让搜索引擎的命中率提升，同时，它也对视障用户的读屏软件更友好。例如：

</>复制代码 
    
        
            ……
        
    
    
        
            ……
        
    
    
……
    
……
    
……
    
        
……
    

可能少的使用无语义的标签div和span。

在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利。

不要使用纯样式标签，如：b、font、u等，改用css设置。

需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）。具体原因，请移步至：HTML中strong与b,em与i标签的区别

使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td。

表单域要用fieldset标签包起来，并用legend标签说明表单的用途。

每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

注意不要因为html5新标签的出现，而随意用之，错误的使用肯定会事与愿违。所以有些地方还是要用div的，就是因为div没有任何意义的元素，他只是一个标签，仅仅是用来构建外观和结构。因此是最适合做容器的标签。

</>复制代码 
    
        
网站标题
        
网站副标题