前端面试题-HTML5（02）

quit
137 阅读4分钟

11.label的作用是什么？是怎么用的？

  • label元素不会向用户呈现任何特殊效果，但是它为鼠标用户改进了可用性，当我们在label元素内点击文本时就会触发此控件。即当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
  • 最常用label的地方就是表单中的性别单选框，当点击文字时能够自动聚焦绑定的表单控件
<from>
    <label for="male">男</label>
    <input type="radio" name="sex" id="male">
    <label for="female">女</label>
    <input type="radio" name="sex" id="female">
</from>

12.对于Web标准以及W3C的理解

  • Web标准简单来说可以分为结构、表现、行为。其中结构是由HTML各种标签组成，简单来说就是body里面写入标签是为了页面结构。表现指的是CSS层叠样式表，通过CSS可以让我们的页面结构标签更具美感。行为指的是页面和用户具有一定的交互，这部分主要由JS组成。

  • W3C，全称：world wide web consortium,是一个制定各种标准的非盈利性组织，也叫万维网联盟，标准包括HTML、CSS、ECMAScript等等。

    web标准的制定有很多好处，比如：
（1）可以统一开发流程，统一使用标准化开发工具，方便多人协作
（2）学习成本降低，只需学习标准就行
（3）跨平台，方便迁移不同设备
（4）降低代码维护成本

13.Quirks（怪癖）模式是什么？它和Standards（标准）有什么区别

  • 如果写了文档类型定义(DOCTYPE)，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。没有DOCTYPE的文档用怪异模式，但是有DOCTYPE不一定不一定不用怪异模式。
  • 区别：总体会有布局、样式解析、脚本执行三个方面区别。

14.知道什么是微格式吗？谈谈理解，在前端构建中应该考虑微格式吗？

  • 微格式是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式。 具体表现是把语义嵌入到HTML中，以便有助于分离式开发，，并通过制定一些简单的约定，来兼顾HTML文档的人机可读性，相当于对web网页进行语义注解。
  • 采用微格式的web页面会对信息的语义结构进行注解，有助于处理HTML文档的软件更好的理解HTML文档。微格式可以对网站进行SEO优化。

15.HTML5为什么只需要写!DOCTYPE html？

在HTML4.01中， 声明引用 DTD，因为HTML4.01基于SGML。DTD规定了标记语言的规则，这样浏览器才能正确地呈现内容。而HTML5 不基于SGML，所以不需要引用DTD，但是需要doctype来规范浏览器的行为。

16.HTML5新增了哪些特性？移除了哪些元素？

HTML5新增特性

  1. 语义化标签: 如header、nav、footer、aside、article、section等。
  2. 音频（audio）、视频（video）
  3. 表单属性: placeholder、autofocus、required、maxlenght、minlength、novaildate、autocomplete
  4. 输入框类型: email、url、number、search、range、color、time、date、month

HTML5移除元素

  1. 纯表现的元素：basefont、font、s、strike、tt、u、big、center
  2. 对可用性产生负面影响的元素：frame、frameset、nogrames

17.怎么处理HTML5新标签兼容问题？

主要有两种方式：

  1. IE8/IE7/IE6支持通过document.createElement方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
  2. 使用是html5shim框架
<!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

18.如何实现在一张图片上的某个区域做到点击事件

我们可以通过图片热区技术：

  1. 插入一张图片，并设置好图像的有关参数，在<img>标记中设置参数usemap="#Map"，以表示对图像地图的引用。
  2. 用<map>标记设定图像地图的作用区域，并取名：Map；
  3. 分别用<area>标记针对相应位置互粉出多个矩形作用区域，并设定好链接参数href

应用场景，微信公众号中的长图，是一种可交互的页面

<body>
    <img src="./image.jpg" alt="" usemap="#Map" /><map name="Map" id="Map">
        <map name="Map" id="Map">
            <area alt="" title="" href="#" shape="poly"coords="65,71,98,58,114,90,108,112,79,130,56,116,38,100,41,76,52,53,83,34,110,33,139,46,141,75,145,101,127,115,113,133,85,132,82,131,159,117" />
            <area alt="" title="" href="#" shape="poly" coords="28,22,57,20,36,39,27,61" />
        </map>
</body>

19. a元素除了用于导航外，还有什么作用？

href属性中的url可以是浏览器支持的任何协议，所以a标签可以用来：

手机拨号<a href="tel:110">110</a>，

也可以用来

发送短信<a href="sms:110">110</a>，

还有邮件等等
当然，a元素最常见的就是用来做锚点和下载文件。
锚点可以在点击时快速定位到一个页面的某个位置，而下载的原理在于a标签所对应的资源浏览器无法解析，于是浏览器会选择将其下载下来。

20.你知道SEO中的TDK吗？

在SEO中，TDK其实就是title、description、keywords这三个标签，title表示标题标签，description是描述标签，keywords是关键词标签，这三种属性在seo中是必不可少的内容.

avatar
文章
阅读
粉丝