前端面试题库——HTML

---

1. HTML的元素有哪些（包含H5）？

行内元素 inline a span input button em label strong form br textarea
块级元素 block div p h1-h6 ul ol li table
inline-block img
html5新增
块级元素 header footer section nav article asize
行内元素 video audio canvas

---

2. HTML全局属性（包含H5）？

全局属性：用于任何html元素的属性
class id sytle title data
lang tabindex hidden

---

简述超链接target属性的取值和作用

值	描述
_blank	在新窗口中打开被链接文档
_self	默认，在相同的框架中打开被链接文档
_parent	在父框架集中打开被链接文档
_top	在整个窗口中打开被链接文档，不管嵌套多少层iframe，都会在最顶层打开
framename	在指定的框架中打开被链接文档
‘任意字符’	若该链接不是已打开的页面，则在新窗口中打开，与_blank一致；若该链接已经打开，则跳转到该标签页并刷新页面

---

label都有哪些作用？并举相应的例子说明

• label通常用来关联一个表单控件

<form>
	<label for="male">Male</label>
    <input type="radio" name="sex" id="male" />
    <br />
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" />
</form>

<label for="male" form="nameform">Male</label>

当标签不在表单标签中时，就需要使用form属性来指定所属表单

---

元素的alt和title有什么区别?

• alt是当因为各种原因图片显示不出来时，对图片的替换文字描述
  alt是替代图像作用而不是提供额外说明文字的
  使用alt属性还具有搜索引擎优化效果，因为搜素引擎是无法直接读取图像的信息的
• title是当鼠标悬停在这个标签上时，出现的文字，以达到补充说明或者提示的效果

---

说说你对HTML中置换元素和非置换元素的理解

• 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。 img、input、textarea、select、object
  例如：浏览器根据标签的src属性显示图片。根据标签的type属性决定显示输入框还是按钮。
  他们有自己属性，就算你什么都没设置，他也有自己的宽高样式等。
• 非置换元素：浏览器中的大多数元素都是不可置换元素，即其内容直接展示给浏览器。

---

HTML元素的显示优先级

---

3. 页面导入样式时，使用link和@import有什么区别？

<link href="style.css" rel="stylesheet" type="text/css" />

<style>
    @import url(style.css);
</style>
css
@import url("style.css");

1. 从属关系： link是HTML标签，除了加载css外还可以定义RSS，rel连接属性等 @import是css提供的语法规则

2. 加载顺序： link引入的样式页面加载时同时加载 @import引入的样式需等页面加载完成后再加载

3. 兼容性： link没有兼容性问题 @import只有IE5以上才能被识别

4. DOM操作： 通过js操作DOM，可以插入link标签来改变样式，也可以通过js修改link属性 由于DOM方法是基于文档的，无法使用@import方式插入样式

---

viewport常见属性都有哪些？

主要用于移动端显示

viewport 就是视区窗口，也就是浏览器中显示网页的部分。PC 端上基本等于设备显示区域，但在移动端上 viewport会超出设备的显示区域（即会有横向滚动条出现）

设置	解释
width	定义视口的宽度，单位为像素，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	定义视口的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户手动进行缩放，值为"no"或"yes", no 代表不允许，yes 代表允许

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>

---

HTML5存储方式

cookies、localstorage、sessionstorage、离线缓存、IndexDB

相同点：都存储在客户端
不同点：

存储方式	大小	有效时间	数据与服务器交互的方式
cookies	4KB	设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭	数据会自动的传递到服务器，服务器端也可以写cookie到客户端
localStorage	5M	存储持久数据，浏览器关闭后数据不丢失除非主动删除数据	不会自动把数据发给服务器，仅在本地保存
sessionStorage	5M	数据在当前浏览器窗口关闭后自动删除	不会自动把数据发给服务器，仅在本地保存

cookies 缺陷

• cookies 不够大
• 过多的 cookies 会带来巨大的性能浪费，域名(domain)下所有请求都会携带cookie
• cookie
  s会在请求头上带着数据，这是非常不安全的，容易被外部截取

---

4. HTML5的文件离线储存怎么使用，工作原理是什么？

HTML5离线存储原理

有趣的HTML5：离线存储

简介：

使用HTML5，通过创建cache manifest文件，可轻松创建web应用的离线版本。HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有网络时进行访问。 应用程序缓存为应用带来三个优势：

• 离线浏览–用户可在离线时使用它们。
• 速度–已经缓存的资源加载得更快。
• 减少服务器负载–浏览器将只从服务器下载更改过的资源 -
  原理：
  HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

• 用户清空浏览器缓存
• manifest 文件被修改
• 由程序来更新应用缓存

注意事项

• 站点离线存储的容量限制是5M
• 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
• 引用manifest的html必须与manifest文件同源，在同一个域下

---

iframe框架有哪些优缺点？

iframe是一种框架，也是一种很常见的网页嵌入方式

优点

• 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页
• 可以实现跨域，每个 iframe 的源都可以不相同（方便引入第三方内容）
• 多页面应用时，对于共同的 header, footer 可以使用 iframe 加载，拆分代码（导航栏的应用）

缺点

• 会产生很多页面，不容易管理
• 对浏览器搜索引擎不友好
• 多框架的页面会增加服务器的http请求
• 如果 iframe 内还有滚动条，会严重影响用户体验
• window.onload 事件会在所有 iframe 加载完成后才触发，因此会造成页面阻塞

---

table的作用和优缺点是什么呢？

优点在于样式好控制，特别是居中、对齐 结构简单，布局快速

缺点在于会多处非常多的 DOM 节点，会导致页面加载变慢 不利于 SEO（table 原本就不是用来布局的）

---

浏览器内多个标签页之间的通信方式有哪些

网页消息通信

• WebSocket （可跨域）
• postMessage（可跨域）
• Worker之SharedWorker
• Server-Sent Events
• localStorage
• BroadcastChannel
• Cookies

---

你对标签语义化的理解是什么？为什么要语义话？有什么好处？

• 正确的标签做正确的事，页面的内容结构化，结构更清晰
• 有助于搜索引擎优化SEO
• 也方便读代码，了解代码的意图，方便维护
• 让爬虫更方便地找到想要的信息。
• 方便其他设备解析

---

你对内核的理解？常见的浏览器内核有哪些？

内核主要分为渲染引擎和JS 引擎

前者负责页面的渲染，后者负责执行解析JavaScript
之后，由于 JS引擎越来越独立，现在所说的浏览器内核大都指渲染引擎。

目前主流的内核有以下 4 个：

• Trident: 由微软开发，即我们熟知的 IE 内核
• Gecko: 使用 C++ 开发的渲染引擎，包括了 SpiderMonkey，即我们熟悉的FireFox
• Presto: Opera 使用的内核
• Webkit: 前端使用最多的 Chrome 和 Safari使用的内核
• Blink：Chrome(28及往后版本)、Opera(15及往后版本)

---

HTML5中的表单form怎么关闭自动填充？

默认是开启的，作用是你之前输入过并且提交过的表单，再次输入时会有会有自动补全的下拉

使用属性autocomplete="off"

<form action="/example/html5/demo_form.asp" method="get" autocomplete="on">

	First name:<input type="text" name="fname" /><br />
	Last name: <input type="text" name="lname" /><br />
	E-mail: <input type="email" name="email" autocomplete="off" /><br />
	
	<input type="submit" />
</form>

---

为什么 HTML5 只需要写 DOCTYPE 就可以？

• HTML5 之前基于 SGML，SGML 需要指定DTD解析文档，可通过<!DOCTYPE>指定要使用的 DTD，若不写则会进入怪异模式
• HTML5 不基于 SGML，不需要对DTD进行引用，但是需要 DOCTYPE 来规范浏览器的行为，其<!DOCTYPE>只有一种<!DOCTYPE html>

---

怎样在页面上实现一个圆形的可点击区域？

• 用canvas画布，弧线画圆，在canvas上监听点击事件
• 用一个div,给div添加圆角属性50，在div上添加点击事件
• button 上添加圆角属性
• a标签添加圆角属性
• map+area