web前端面试题整理（HTML篇）

需要web前端课程工具和电子书，可以加: 33群105601600; 22群120342833
1. h5的改进:
新元素
画布 canvas: HTML5 元素用于图形的绘制，通过脚本 ( 通常是 JavaScript) 来完成
音频 audio
视频 video
语义性 : article,  nav,  footer, section, aside, hgroup 等 .
时间 time

新属性
拖放 : draggable  
可编辑 : contenteditable

新事件
拖放 ondrag ondrop
关闭页面 onunload
窗口大小改变 onresize
取消了一些元素 : font center 等
新的 DOCTYPE 声明    
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用


2. 什么是语义化的html?
what?
根据内容的结构（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

why?
为了在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看；
用户体验：例如 title 、 alt 用于解释名词或解释图片信息、 label 标签的活用；
有利于 SEO ：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循 W3C 标准的团队都遵循这个标准，可以减少差异化。

how?
尽可能少的使用无语义的标签 div 和 span ；
在语义不明显时，既可以使用 div 或者 p 时，尽量用 p, 因为 p 在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如： b 、 font 、 u 等，改用 css 设置。
需要强调的文本，可以包含在 strong 或者 em 标签中（浏览器预设样式，能用 CSS 指定就不用他们）， strong 默认样式是加粗（不要用 b ）， em 是斜体（不用 i ）；
使用表格时，标题要用 caption ，表头用 thead ，主体部分用 tbody 包围，尾部用 tfoot 包围。表头和一般单元格要区分开，表头用 th ，单元格用 td ；
表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途；
每个 input 标签对应的说明文本都需要使用 label 标签，并且通过为 input 设置 id 属性，在 lable 标签中设置 for=someld 来让说明文本和相对应的 input 关联起来。


3. 从前端角度出发谈谈做好seo需要考虑什么?
语义化 html 标签
合理的 title, description,keywords;
重要的 html 代码放前面
少用 iframe, 搜索引擎不会抓取 iframe 中的内容
图片加上 alt


4. 文档类型(DOCTYPE)
作用: 
doctype 声明位于文档中最前面的位置，处于标签之前，告知浏览器使用的是哪种规范。
类型:
三种 : Strict 、 Transitional 以及 Frameset 
如果不声明 : 不写 doctype ，浏览器会进入 quirks mode （混杂模式）。即，如果不声明 doctype ，浏览器不引入 w3c 的标准，那么早期的浏览器会按照自己的解析方式渲染页面。浏览器采用自身方式解析页面的行为称为 "quirksmode （混杂模式也称怪异模式） " ；采用 w3c 方式解析就是 "strict mode （标准模式） " 。 如果完全采用 strictmode 就不会出任何的差错，但这样会降低程序的容错率，加重开发人员的难度

用哪种: 
没有 doctype 声明的采用 quirks mode 解析
对于有 doctype 的大多数采用 standard mord 。

特殊情况：
对于那些浏览器不能识别的 doctype, 浏览器采用 quirksmode ；
没有声明 DTD 或者 html 版本声明低于 4.0 采用 quirks mode ，其他使用 standard mode ；
ie6 中，如果在 doctype 声明前有一个 xml 声明 ( 比如 :) ，则采用 quirks mode 解析

标准模式与怪异模式的区别:
标准模式：浏览器根据规范呈现页面
混杂模式（怪异模式）：页面以一种比较宽松的兼容方式显示。
他们最大的不同是对盒模型的解析。
在 strict mode 中 ： width 是内容宽度 ，也就是说 , 元素真正的宽度 = margin-left +border-left-width + padding-left + width + padding-right + border-right- width+  margin-right;
在 quirks mode 中 ： width 则是元素的实际宽度 ，内容宽度 = width - (margin-left +margin-right + padding-left + padding-right + border-left-width + border-right-width)


5.使用XHTML的局限有哪些?
XHTML 较为严格，标签必须闭合，必须要 body ， head 等
如果页面使用 'application/xhtml+xml' 一些老的浏览器并不兼容


6. 如果网页内容需要多语言,要怎么做?

采用统一编码utf-8模式

需要web前端课程工具和电子书，可以加: 33群105601600;  22群120342833

【内容展示有限，可以加群下载，群文件会定期更新学习资料，以及练手小案例】