sockert组成部分_知识整理之HTML篇

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

Doctype作用？标准模式与兼容模式各有什么区别?

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

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

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

HTML5 为什么只需要写 ？

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为(让浏览器按照它们该有的方式来运行)

而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

Doctype的类型有哪些？

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

HTML5

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

HTML4.01 模式

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

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

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

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

XHTML 模式

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

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

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

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

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

区分HTML4.01和HTML5

DOCTYPE声明

新增结构元素

新增功能元素

HTML和XHTML编写区别

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

XML区分大小写：以前很多、

等都用大写或大小写混用如、或、”排版，但是XHTML统一要求需要用、小写。

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

XML属性必须放在引号中。

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

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

元素可提供有关页面的元信息(meta-information)，比如针对搜索引擎和更新频度的描述和关键词。

标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

常用列表如下:

meta viewport

在移动端开发，最常看到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(自动刷新并指向某页面)

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

HTML语义化

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

为什么要语义化？

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

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

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

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

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

语义化标签的推荐使用场景

自然语言表达能力的补充

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

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

漢 (ㄏㄢˋ)

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

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

今天我吃了一个 苹果 。

今天我吃了 一个 苹果。

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

文章标题摘要

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

HTML 语义

balah balah balah balah

弱语义

balah balah

结构性元素

balah balah

......

适合机器阅读的整体结构

随着越来越多的浏览器推出“阅读模式”，以及各种非浏览器终端的出现，语义化的 HTML 适合机器阅读的特性变得越来越重要。

应用了语义化结构的页面，可以明确地提示出页面信息的主次关系，它能让浏览器很好地支持“阅读视图功能”，还可以让搜索引擎的命中率提升，同时，它也对视障用户的读屏软件更友好。例如：

……

……

……

……

……

……

书写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新增了哪些语义标签?

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

header 元素代表“网页”或section的页眉。

通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。

网站标题

网站副标题

header使用注意：

没有个数限制。

如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

footer元素代表“网页”或section的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。

COPYRIGHT@clearlove07

footer使用注意：

没有个数限制，除了包裹的内容不一样，其他跟header类似。

hgroup元素代表“网页”或section的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合。

this is main title

this is sub title

hgroup使用注意：

如果只需要一个h1-h6标签就不用hgroup。

如果有连续多个h1-h6标签就用hgroup。

如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签。

nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

• HTML
• CSS
• Javascript

nav使用注意：

用在整个页面主要导航部分上，不合适就不要用nav元素。

aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。(特殊的section)

在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。

this is content

author decalation

i'm a font-end

aside使用总结：

aside在article内表示主要内容的附属信息。

在article之外则可做侧边栏，没有article与之对应，最好不用。

如果是广告，其他日志链接或者其他分类导航也可以用。

section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。

section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。如下：

section是啥？

关于section

section的介绍

关于其他

关于其他section的介绍

section使用注意：

表示文档中的节或者段。

article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用div。

article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。(特殊的section)

一篇文章

文章内容..

版权：html5jscss网所属，作者：小北

article使用注意：

自身独立的情况下：用article。

是相关内容：用section。

没有语义的：用div。

address 标签定义文档作者/所有者的联系信息。

Written by Jon Doe.

Visit us at:

Example.com

Box 564, Disneyland

USA

address使用注意：

不应该使用 address 标签来描述邮政地址，除非这些信息是联系信息的组成部分。

address 元素通常被包含在 footer 元素的其他信息中。

html5有哪些新特性、移除了那些元素？

新特性

拖拽释放(Drag and drop)API

语义化标签(header、footer、nav、aside、article、section等)

音频、视频API(audio、video)

画布(Canvas)API

地理(Geolocation) API

本地存储：localStorage和sessionStorage

离线应用：manifest

桌面通知：Notifications

增强表单控件：date、time、url、search、email、calendar等

多任务：Web Worker

全双工通信协议: Web Socket

历史管理: History

页面可见性改变事件: visibilitychange

跨窗口通信: PostMeaage

Form Data 对象

新增选择器：document.querySelector、document.querySelectorAll

移除元素

纯表现元素：basefont、big、center、font、s、u、tt、strike

对可用性产生负面影响的元素: frameset、frame、noframes

如何处理HTML5新标签的浏览器兼容问题？

IE8/IE7/IE6支持通过document.createElement方法产生的标签。

使用html5shim框架

Mobile:

name: