前端面试常见问题——HTML篇
2020-09-07 本文已影响0人
Marvel_Dreamer
1. HTML语义化
-
什么是HTML语义化
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
-
为什么要语义化
- 在没有样式CSS情况下也以一种文档格式显示，容易阅读
- 搜索引擎爬虫依赖标记来确定上下文和各个关键字的权重，有利于
SEO - 语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备等）
-
写HTML代码时应该注意
- 尽可能少使用无语义的标签
div和span - 在语义不明显时，即可以使用
div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利 - 不要使用纯样式标签，如
b、u、i等，改用css设置 - 需要强调的文本，可以包含在
<strong>或者<em>中 - 使用表格时，标题用
caption包围，表头用thead包围，主体部分用tbody包围，尾部用tfoot包围 - 表单域用
fieldset标签包围，并用legend标签说明表单用途 -
input标签对应的说明文本使用label标签，通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来
- 尽可能少使用无语义的标签
-
常用的语义元素
-
<header>
定义页面的介绍展示区域，通常包括网站logo、主导航以及搜索框。 -
<nav>
定义页面的导航链接部分区域 -
<hgroup>
当标题有多个层级时，该元素将h1到h6元素放在其内，譬如文章的主标题和副标题的组合 -
<article>
定义页面独立的内容，有自己的header、footer、section等，专注于单个主题的文章 -
<section>
标记文档的节或段，通常自带标题 -
<aside>
定义与主要内容相关的内容块。通常显示为侧边栏 -
<footer>
定义底部区域，通常包含作者，著作权信息，链接的使用条款，联系信息等
-
2. Html5新特性
-
关于图像，位置，存储，多任务等功能的增加
- canvas绘画
-
video和audio元素，用于媒介回放 -
localStorage本地离线存储，长期存储数据，浏览器关闭数据不丢失 -
sessionStorage在浏览器关闭后自动删除 -
article、footer、header、nav、section等语义化内容元素 -
calendar、date、time、email、url、search等表单控件 -
webworker、websocket、manifest离线存储等新技术
-
移除的元素：
- 纯表现的元素，如
big、center、font、s、strike、tt、u - 对可用性产生负面影响的元素：
frame、frameset、noframes
- 纯表现的元素，如
-
IE8/IE7/IE6如何支持
HTML5新标签：
通过document.createElement方法让这些浏览器支持HTML5新标签，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim
3. Web Worker
HTML5提供的一种多线程解决方案，可以将大计算量的代码交给web worker而不冻结页面。但子线程完全受主线程控制，且不得操作dom，还是没有改变js单线程的本质
-
使用方式
- 创建在分线程中执行的js文件，设置
self.onmessage，在回调函数中处理数据，通过self.postMessage返回要传递给主线程的数据 - 在主线程的js中创建worker对象，向分线程发消息
worker.postMessage(要传递给分线程的数据)并设置回调worker.onmessage=function(event)
- 创建在分线程中执行的js文件，设置
-
注意事项
- 主线程和分线程的this不同，所以分线程很多属性、方法不能用（document、window、alert等），也不能操作DOM更新界面
- 同源限制：分配给分线程的脚本必须与主线程脚本同源
-
HTML5新特性：不是所有浏览器都兼容
4. Canvas
-
canvas是HTML5提供的一个用于展示绘图效果的标签，提供了一个空白的图形区域，可以使用特定的JavaScript API来绘画图形 - 在标签中通过
width和height可以指定画布的宽高，不能在CSS中定义宽高，因为canvas的默认宽高为300px * 150px，在CSS中为canvas定义宽高，实际上把宽高为300px * 150px的画布进行了拉伸，如果在这样的情况下进行绘图，得到的图形可能就变形的效果 - 在开始和闭合标签之间添加后备信息，当浏览器不支持（IE9以下）时则会显示标签内的信息
-
getContext()获取绘图上下文 -
translate(x, y)更改坐标原点 -
fillStyle属性指定填充样式 -
strokeStyle、lineWidth等属性指定描边样式 -
绘制路径
-
moveTo(x,y)定义线条开始坐标 -
lineTo(x,y)定义线条结束坐标 -
rect(x, y, width, height)可以绘制一个左上角坐标为(x, y)，宽width，高height的矩形路径
-
-
绘制图形
-
fillRect(x, y, width, height)绘制一个由fillStyle指定填充样式的矩形
-
-
绘制文本
-
fillText(text, x, y, maxWidth)使用fillStyle属性显示文本 -
strokeText(text, x, y, maxWidth)使用strokeStyle属性为文本描边
-
-
绘制图像
drawImage(image, x1, y1, width1, height1, x2, y2, width2, height2)
-
创建渐变、阴影
-
变换
-
rotate(angle)旋转 -
scale(scaleX, scaleY)缩放
-
- 导出画布
toDataURL()
5. Canvas和SVG的区别
-
svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布 -
svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿
6. HTML5离线储存manifest
-
原理
基于新建的.appcache文件的缓存机制，通过这个文件上的解析清单，离线存储资源。之后当网络处于离线状态时，浏览器会通过被离线存储的数据进行页面展示，当与因特网连接时，更新机器上的缓存文件
-
如何使用：
- 页面头部加入一个
manifest的属性； - 在
cache.manifest文件的编写离线存储的资源 - 在离线状态时，操作
window.applicationCache进行需求实现
- 页面头部加入一个
-
管理和加载
- 在线情况下，浏览器发现
html头部有manifest属性，会请求manifest文件，第一次访问会根据文件内容下载相应的资源并且进行离线存储。如果已经离线存储，则使用离线的资源加载页面，然后对比新旧的manifest文件，如果文件改变了，那么就会重新下载并存储。 - 离线的情况下直接使用离线存储的资源
- 如果服务器对离线的资源进行了更新，那么必须更新
manifest文件，如果只是更新了资源而没有更新manifest文件的话，浏览器不会重新下载资源 - 在更新资源之后，新的资源需要到下次打开才会生效，如需马上生效，可以使用
window.applicationCache.swapCache()``方法，出现这种现象的原因是浏览器会先使用离线资源加载页面，然后再去检查manifest是否有更新，所以需要到下次打开页面才能生效。 - 对于
manifest文件最好不要设置缓存 - 浏览器在下载
manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。
- 在线情况下，浏览器发现
7. iframe缺点
-
iframe会阻塞主页面的onload事件 -
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，这意味着有可能iframe中的资源占用了可用连接而阻塞了主页面的资源加载 - 使用
iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题 - 搜索引擎的检索程序无法解读这种页面，不利于
SEO
8. Doctype，严格模式与混杂模式
-
<!DOCTYPE>声明位于文档中的最前面，告知浏览器的解析器，用什么文档类型规范来解析文档 -
严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行 -
混杂模式的页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作 -
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现
9. HTML5 为何只需写 <!DOCTYPE HTML>
-
HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为 - 而
HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型 -
SGML(Standard Generalized Markup language)标准通用标记语言，是国际上定义电子文件结构和内容描述的标准，而超文本标记语言HyperText Markup Language(HTML)，标准通用标记语言下的一个应用 - 随着Web应用的不断深入，HTML在需求广泛的应用中已显得捉襟见肘，有人建议直接使用SGML作为Web语言。但SGML太庞大了，于是W3C建议使用一种精简的SGML版本——XML可扩展标记语言
-
XML和HTML之间的差异
XML不是HTML的替代，是对HTML的补充，为不同的目的而设计；XML被设计用来传输和存储数据，其焦点是数据的内容。HTML被设计用来显示数据，其焦点是数据的外观。HTML旨在显示信息，而XML旨在传输信息
10. xhtml和html的区别
-
XHTML(eXtensible HyperText Markup Language)可扩展超文本标记语言表现方式与HTML类似，但语法上更加严格。从继承关系上讲，HTML是一种基于标准通用标记语言SGML的应用，XHTML则基于可扩展标记语言XML，XML是SGML的一个子集 - 功能上：
XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页 - 书写习惯上：
XHTML元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素，所有属性都必须使用双引号
11. HTML全局属性
-
class:为元素设置类标识 -
data-*: 为元素增加自定义属性 -
draggable: 设置元素是否可拖拽 -
id: 元素id，文档内唯一 -
lang: 元素内容的的语言 -
style: 行内css样式 -
title: 元素相关的建议信息
12. Viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 设置viewport宽度，为一个正整数，或字符串‘device-width’
// device-width 设备宽度
// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale 默认缩放比例（初始缩放比例），为一个数字，可以带小数
// minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable 是否允许手动缩放
- 延伸提问：怎样处理 移动端 1px 被 渲染成 2px问题
局部处理 - mate标签中的 viewport属性 ，initial-scale 设置为 1
- rem按照设计稿标准走，外加利用transfrom 的scale(0.5) 缩小一倍即可；
全局处理 - mate标签中的 viewport属性 ，initial-scale 设置为 0.5
- rem 按照设计稿标准走即可
13. div+css的布局较table布局有什么优点？
- 改版更方便 只要改
css文件 - 页面加载速度更快、结构化清晰、页面显示简洁
- 表现与结构相分离
- 易于优化
SEO，对搜索引擎更友好，排名更容易靠前
14. src与href的区别
-
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。 -
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片,会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，类似于将所指向资源嵌入当前标签内。 -
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，例如超链接；如果我们在文档中添加<link href="common.css" rel="stylesheet"/>那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式
