面试之web标准和语义化标签

一、WEB标准

Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。

1 为什么要遵循WEB标准呢？

浏览器不同内核不同，他们显示页面或者排版就有些许差异。

2 Web 标准的好处

遵循web标准可以让不同我们写的页面更标准更统一外，还有许多优点

　　1、让Web的发展前景更广阔

　　2、内容能被更广泛的设备访问

　　3、更容易被搜寻引擎搜索

　　4、降低网站流量费用

　　5、使网站更易于维护

　　6、提高页面浏览速度

3 Web 标准构成

构成： 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

• 结构：用于对网页元素进行整理和分类，通过HTML标签实现。
• 表现：用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
• 行为：是指网页模型的定义及交互的编写，通过Javascript实现。

二、浏览器以及内核

介绍一下你对浏览器内核的理解？常见的浏览器内核有哪些？

浏览器内核包括两部分，渲染引擎和js引擎。渲染引擎负责读取网页内容，整理讯息，计算网页的显示方式并显示页面，js引擎是解析执行js获取网页的动态效果。 后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

• IE：Trident
• firefox：Gecko
• chrom、safari：webkit
• Opera：Presto
• Microsoft Edge：EdgeHTML

1、IE浏览器内核：Trident内核，也是俗称的IE内核；

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4、Safari浏览器内核：Webkit内核；

5、Opera浏览器内核：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

8、百度浏览器、世界之窗内核：IE内核；

9、2345浏览器内核：好像以前是IE内核，现在也是IE+Chrome双内核了；

10、UC浏览器内核：这个众口不一，UC说是他们自己研发的U3内核，但好像还是基于Webkit和Trident，还有说是基于火狐内核。

三、语义化标签

语义化的标签，旨在让标签有自己的含义。

1 HTML5新增的语义化标签

• header --- 头部标签

• nav --- 导航标签

• article --- 内容标签

• section --- 块级标签

• aside --- 侧边栏标签

• footer --- 尾部标签

2 使用语义化标签的注意

• 语义化标签主要针对搜索引擎

• 新标签可以使用一次或者多次

• 在 IE9 浏览器中，需要把语义化标签都转换为块级元素

• 语义化标签，在移动端支持比较友好

3 语义化的优点

• 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
• 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
• 提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
• 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
• 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。