HTML高频问题

1、meta标签

1-1 meta标签禁止用户缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
user-scalable=no 可以禁用其缩放
maximum-scale=1.0与user-scalable=no一起使用。
这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

1-2 常用的meta标签

meta标签由name和content属性定义，用来描述网页文档属性（网页作者，描述，关键词等），下面是常用的meta标签

2、行内元素和块级元素的区别

1、块级元素
总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列；
高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
宽度没有设置时，默认为100%；
块级元素中可以包含块级元素和行内元素。
2、行内元素
和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列；
高度、宽度是不可控的，设置无效，由内容决定。
根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。

行内元素只能设置水平方向的边距，margin-left和margin-right

2-1 常见行内元素和块级元素

行内元素：
a - 锚点
select - 项目选择
span - 常用内联容器，定义文本内区块
strong - 粗体强调
img - 图片
input - 输入框
label - 表格标签
textarea - 多行文本输入框
br - 换行

块级元素：
div
ul ,li 非排序列表
form - 交互表单
table - 表格
h1 -h6 标题
hr - 水平分隔线
p - 段落
dl -dt-dd - 定义列表
address - 地址
blockquote - 块引用
fieldset - form控制组

2-2 行内元素和块级元素之间转化

当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、
块状元素和行内块状元素三种。

使用display属性能够将三者任意转换：
display:inline;转换为行内元素；
display:block;转换为块状元素；
display:inline-block;转换为行内块状元素。
行内块状元素综合了行内元素和块状元素的特性：
不自动换行，与其他行内元素都会在一条水平线上排列；
高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
默认排列方式为从左到右

2-3 img是什么元素，为什么可以设置宽高

● img是行内元素，但是可以设置宽高
● 原因是：img不仅是行内元素，同时也是置换元素。
○ 置换元素是根据元素和属性来决定元素具体显示内容。
○ 置换元素区别于一般的inline元素的是：拥有内在尺寸内置宽高，可以设置高度和宽度，性质和行内块级元素一致（inline-block）
○ 常见的置换元素：img、input、select、text area、button、lable

2-4 空元素有哪些

空元素，即没有内容的HTML元素。
● 通常在一个空元素上使用一个闭标签是无效的。
● eg：的闭标签是无效的HTML
● HRML有以下空元素：< br>、< hr>、< img>、< area>、< link>、< meta>、< col>、< track>、< source>等

3、src和href的区别

● 相同：src和href均引用外部资源
● 不同：
a. src：对外部资源的引用，指向的内容会嵌入是src标签所在的位置。src会将其指向的资源进行下载并应用到文档中。eg：请求js脚本，浏览器解析到是src元素时，会暂停其他资源的下载和处理，直到将src的资源加载、编译、执行完毕。所以js脚本一般放在页面的底部
b. href：超文本引用，指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到href指向的文件时，会进行并行下载资源，不会停止对当前文档的处理。常使用在a、link标签上。

4、对HTML语义化理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。即：用正确的标签做正确的事情。
语义化优点：
● 对机器友好，带有语义的文字表现力强适合搜索引擎的爬虫爬取有效信息
● 对开发者友好，使用语义类标签增强可读性

5、DOCTYPE（文档类型）的作用

● 一种标准通用标记语言的文档类型声明
● 目的是：告诉浏览器（解析器）应该按照（html或xhtml）对应的文档类型定义来解析文档。
● 声明需要放在第一行。不同的渲染模式会影响浏览器对CSS代码和JS脚本解析
● 浏览器渲染页面的两种模式可以通过document.compatMode获取
○ CSS1Compat：标准模式（Strick mode），默认模式。浏览器使用W3C的标准解析渲染页面。
○ BackCompat：怪异模式（混杂模式 Quick mode），浏览器使用自己的怪异模式解析渲染页面

6、script标签中defer和async的区别

相同：defer和async属性是异步加载外部的JS脚本文件，不会阻塞页面的解析。
不同：
● 执行顺序：多个带async属性的标签，不能保证加载的顺序。多个带defer属性的标签，按加载顺序执行
● 脚本是否并行执行：
○ async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行
○ defer属性，加载后续文档的过程和js脚本的加载（仅加载不执行）是并行进行的（异步），js脚本需要等到文档所有元素解析完成之后才执行，事件触发执行之前（DOMContentLoaded事件）

7、web worker

在HTML页面中，如果执行脚本时，页面的状态时不可相互的，直到脚本执行完成后，页面才编程可相应。web worker是运行在后台的js，独立于其他脚本，不会影响页面的性能。并且通过postMessage将结果回传到主线程。这样是进行复杂操作的时候就不会阻塞主线程了
创建web worker步骤：
● 检测浏览器对于web worker的支持性
● 创建web worker文件（js，回传函数等）
● 创建web worker对象

8、Canvas和SVG的区别

9、HTML5的新特性

链接
● HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加
● 绘画canvas
● 用于媒介回放的video和audio元素
● 本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失
● sessionStorage的数据在浏览器关闭后自动删除
● 语义化更好的内容元素：article、footer、header、nav、section
● 表单控件：calendar、date、time、email、url、search
● 新的技术：web worker、web socktGeolocation

10、HTML5 drag API

11、前端页面有哪三层构成，分别是什么，作用是什么

三层包含：结构层、表示层、行为层
● 结构层：由html或xhtml的标记语言创建。标签即为尖括号里面的单词，对网页内容的语义含义做出描述，这这些标签不包含任何关于显示有关内容的信息。eg：p标签表达的是“这是一个文本段”
● 表示层：由CSS负责创建，作用是对内容如何显示做出一定的控制
● 行为层：由JS和DOM创建，作用是控制用户做出一个事件该如何显示。eg：用户悬浮在某个元素上，弹出一个显示元素标题内容的提示框

12、HTML5的form如何关闭自动完成功能

autocomplete属性用于控制自动完成功能的开启和关闭。on为启用，off为关闭。当启用该功能后，用户再自动完成域开始输入时，浏览器会在该域显示填写的选项，每提交一次就会增加一个用于选择的选项
方法：

1. 在IE的Internet选项菜单里的内容–自动完成里面设置
2. 设置Form的autocomplete为"on"或者"off"来开启或者关闭自动完成功能
3. 设置输入框的autocomplete为"on"或者"off"来开启或者关闭该输入框的自动完成功能

13、页面如何实现一个圆形可点击区域

方法：

1. border-radius：50%，之后加上点击事件
2. map标签实现

14、页面使用“application/xhtml+xml”有什么问题

● 要求比较严格，必须有head、body标签，并且每个标签必须是关闭的
● 一些老的浏览器不支持，实际上，任何最新的浏览器都将支持application/xhtml+xml媒体类型。大多数浏览器也接受以application/xml发送的XHTML文档。

15、一个页面上有大量的图片（大型电商网站），加载很慢，有哪些方法优化这些图片的加载，给用户更好的体验

1. 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
2. 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
3. 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
4. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
5. 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

16、浏览器输入URL显示主页的过程

（考察点：HTTP请求、DNS解析、TCP三次握手、四次挥手）

1. DNS解析，查找域名对应的IP地址
2. 与服务器进行三次握手建立TCP连接
3. 向服务器发送HTTP请求
4. 服务器处理请求，并返回网页内容
5. 浏览器接收到返回的内容，之后进行渲染页面
6. TCP四次挥手连接结束

浏览器解析html过程