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> 标签来隐式地连接起来的。

 
原文地址:https://www.cnblogs.com/goforxiaobo/p/12543699.html