web前端的学习旅程一之HTML

1.  主流的浏览器都有哪些？内核分别是什么？

答：（1）浏览器：谷歌（chrome），火狐（Firefox），IE，欧朋（opera），苹果（safari）

（2）内 核：blink(谷歌/欧朋)，gecko（火狐），trident（IE），webkit（苹果）

注：(1)2013年4月3日，谷歌对外宣布，停止使用webkit作为chrome浏览器的渲染引擎，但是webkit并不会被马上淘汰，而是作为全新渲染引擎”blink”的后台技术。Blink对于webkit来说，精简了代码，在针对DOM框架上更友善，安全性也有所提升。（webkit由谷歌，苹果，Adobe共同开发推动，blink是webkit的升级版）

(2)浏览器内核分为两个部分：1渲染引擎：负责生成DOM树，render，repaint等工作；2js引擎：负责js的解释执行。（渲染引擎是兼容性出现的根本原因）。

2.  前端页面由哪三层构成？其作用分别是什么？

答：（1）结构层（html/超文本标记语言）：从语义的角度搭建网页结构；

（2）表示层（css/层叠式样式表）： 从装饰的角度美化页面；

（3）行为层（javascript）：从交互的角度描述我们的页面行为。

注：什么是web语义化：用含有语义的标签来描述页面结构。

3.  为什么要语义化？基于此，在写页面结构的时候要注意什么？

答：3.1(1)在没有css代码时也可呈现出很好的内容结构，代码结构清晰既可以提高用户体验，也更方便机器读懂代码；

(2)方便其他设备解析（如屏幕阅读器、盲人阅读器等以语义的方式渲染页面；

(3)利于SEO优化，语义能和搜索引擎建立良好的联系，有利于爬虫获取信息；

4)便于团队开发和维护（可以让开发者快速的熟悉代码，使得工作交接更方便），语义化更具有可读性（遵循W3C标准规范化）；

3.2

(1)尽可能少的使用没有语义的（如div）元素;

(2)在对语义要求不明显时，尽量使用有语义的标签（div和p时，尽量使用p，因为p有默认样式，可以兼容不同终端）;

(3)不要使用纯样式标签（如b，font等），要用css设置样式;

(4)使用表格时，标题要用caption，表头thead，等;

4.  Html5骨架

gbk(中文)-->

web前端

注：html版本：(1)strict：严格版，不允许使用废弃标签;

(2)transitional：过度版，可以使用一些废弃标签b,u,i来制作css里的钩子 (标签必须小写，属性值必须用双引号包裹，结束标签必须有”/”);

(3)frameset:框架 。

5.  DOCTYPE是什么，有什么作用？

答：(1)DOCTYPE：Document Type Declaration（文档类型声明，缩写 DTD）。一般位于一个HTML文档的最前面（根元素的起始标签）之前。(2)用来确定当前文档的类型，以决定需要采用的渲染模式（不同的渲染模式会影响到浏览器对于css甚至jsjavaScript脚本的解析）。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现(混杂模式不可取，完全没有兼容可言)。

6.   HTML5为什么只需要写 ？

答：(1)HTML5不基于SGML（Standard Generalized Markup Language 标准通用标记语言），因此不需要对DTD（DTD 文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。

(2)HTML4.01基于SGML，所以需要引用DTD。才能告知浏览器文档所使用的文档类型，如下：

7.  HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？

答：新增元素：

(1)canvas

(2)用于媒介回放的video和audio元素

(3)本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除

(4)语意化更好的内容元素，比如 article footer header nav section

(5)位置API：Geolocation

(6)表单控件，calendar date time email url search

(7)新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket

(8)拖放API：drag、drop

移除的元素：

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

性能较差元素：frame、 frameset 、noframes

8.关于meta标签的seo优化：

答：(1)    查找关键字：

(2)    网页描述：