HTML基础知识题

①HTML5新特性？优劣势？(https://www.runoob.com/html/html5-intro.html)(https://blog.csdn.net/summer_15/article/details/70244251)

十大新特性：

1. 语义标签(比如 article、footer、header、nav、section)
2. 增强型表单(新的表单 Input 输入类型；新的表单元素<datalist><keygen><output>；新的表单属性placehoder 、required 、pattern、step 、autofocus 等)
3. 视频和音频(<audio><video>)
4. Canvas绘图(

   Canvas 通过 JavaScript 来绘制 2D 图形)

5. SVG绘图(SVG 是一种使用 XML 描述 2D 图形的语言)
6. 地理定位(geolocation)
7. 拖放API(任何元素都能够拖放，drag)
8. Web Worker(当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成，如需终止 web worker，并释放浏览器/计算机资源，使用 terminate() 方法)
   
9. Web Stroage(客户端存储数据的两个对象为：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。)
10. WebSocket(WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。)

优势： 

          a、网络标准统一、HTML5本身是由W3C推荐出来的。

          b、多设备、跨平台 

          c、即时更新。

          d、提高可用性和改进用户的友好体验；

          e、有几个新的标签，这将有助于开发人员定义重要的内容； 

          f、可以给站点带来更多的多媒体元素(视频和音频)；  

          g、可以很好的替代Flash和Silverlight；

          h、涉及到网站的抓取和索引的时候，对于SEO很友好； 

          i、被大量应用于移动应用程序和游戏。 

劣势：

          a、安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。 

          b、完善性：许多特性各浏览器的支持程度也不一样。 

          c、技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战 

          d、性能：某些平台上的引擎问题导致HTML5性能低下。 

          e、浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。

 

②谈谈对WEB标准和W3C的理解？web标准有哪些优点？

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由万维网联盟（起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范，包含如下几点：

对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

　　　　　　     标签字母要小写、标签要闭合标签、不允许随意嵌套

对于css和js来说：尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

　　　　　　        样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版

　　　　　　        不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

WEB标准（结构、表现、行为分离）有哪些优点呢?

易于维护：只需更改CSS文件，就可以改变整站的样式

页面响应快：HTML文档体积变小，响应时间短

可访问性：语义化的HTML（结构和表现相分离的HTML）编写的网页文件，更容易被屏幕阅读器识别

设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式

搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名

 

③浏览器标准模式和怪异模式之间的区别是什么？

盒子模型渲染模式的不同。在标准模式页面按照HTML,CSS的定义渲染，而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计，并未严格遵循W3C标准而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式，如果存在一个完整的DOCTYPE则浏览器将会采用标准模式，如果缺失就会采用怪异模式

1.盒模型的解释不同，在怪异模式下，盒模型为IE盒模型(和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。外边距以内，组成宽高。)

2.元素溢出的处理，标准模式下，overflow取值默认为visible；在怪异模式在，该溢出会被当做扩展box来对待，即元素的大小由内容决定，溢出不会裁剪，元素框自动调整，包含溢出内容。

3.table元素中的字体，CSS中，对于font的属性都是可以继承的。怪异模式下，对于table元素，字体的某些元素将不会从body等其他封装元素继承中的得到，特别是font-size属性。

4.标准模式下:内联元素无法自定的大小，怪异模式下:定义width height 可以影响元素的尺寸。

 

④<img>标签的title与alt属性的区别？

alt是在图片无法加载的时候才会显示的其值，而title是在图片正常加载鼠标划上去显示的值，虽然alt也有后者的功能，但是只是在低版本的ie浏览器才支持，高版本及标准浏览器不支持这个功能了。

 

⑤<label>标签的作用？

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

隐式联系和显式联系

标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 <label> 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。

例如，在 XHTML 中：

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSn" />
<label>Date of Birth: <input type="text" name="DofB" /></label>

第一个标记是以显式形式将文本 "Social Security Number:" 和表单的社会安全号码的文本输入控件 ("SocSecNum") 联系起来，它的 for 属性的值和控件的 id 一样，都是 SSN。第二个标记 ("Date of Birth:") 不需要 for 属性，它的相关控件也不需要 id 属性，它们是通过在 <label> 标签中放入 <input> 标签来隐式地连接起来的。