HTML
一、html 常用的标签
h、p、hr、br、div、span、ul li、ol li、img、a、input、label、textarea、select、form、head、nav、footer、article、section、aside、audio、video
二、html 新特性
-
新增语义化标签
header头部、footer底部、nav导航栏、article主要内容、aside侧边栏、section区块（有语义化的div）、meau菜单 -
新增媒体元素
①audio：音频
<audio src='' controls autoplay loop='true'></audio>
属性：
- controls 控制面板
- autoplay 自动播放
- loop=‘true’ 循环播放
②video：视频
<video src='' poster='imgs/aa.jpg' controls></video>
属性：
- poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一帧画面，当然通过 poster 也可以自己指定。
- controls 控制面板
- width
- height
- 新增用于绘画的 canvas 属性
- 新增本地存储方式：
sessionStorage、localStorage - 新的技术：
webworker、websocket - 新增表单控件：
calendar、date、time、email、url、search
三、对语义化的理解
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），也就是说用正确的标签做正确的事。
好处：
- 对开发者友好，让人容易理解，利于代码可读性
- 对机器友好，让搜索引擎更容易读懂，利于 SEO
四、说说 web worker
web worker 的作用是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，然后将一些任务分配给其运行。
在主线程运行的同时，Worker 线程在后台运行，两者互不干扰，等到 Worker 线程完成任务后就将结果返回给主线程。这样的好处是：一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程就会很流畅，不会被阻塞或拖慢（通过 postMessage 将结果传回到主线程即可）。
Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。
这里有几个注意点：
- 同源限制
分配给 Worker 线程的脚本文件，必须和主线程脚本文件同源。 - 脚本限制
Worker 线程不能执行alert()方法和confirm()方法，但可以使用XMLHttpRequest对象发出AJAX请求。 - DOM 限制
Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是 Worker 线程可以使用navigator对象和location对象。 - 通信联系
Worker 线程和主线程不在同一个上下文环境，不能直接通信，必须通过消息完成。 - 文件限制
Worker 线程无法读取本地文件，即不能打开本机的文件系统，它所加载的脚本，必须来自于网络。
五、HTML5 的离线储存的工作原理是什么？该怎么使用？如何进行管理和加载？
离线存储指的是：在用户没有连接网络时，可以正常访问站点或应用，当连接上网络后，更新用户机器上的缓存文件。
原理：html5 的离线缓存是基于一个新建的 .appcache 文件的缓存机制，即通过这个文件上的解析清单 离线缓存资源。之后当网络在离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
使用方法：
- 首先要创建一个和
.html文件同名的.manifest文件，然后在页面头部插入manifest属性：<html lang="en" manifest="index.manifest"> - 在
cache.manifest文件中编写需要离线存储的资源：
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
- CACHE: 表示需要离线存储的资源列表。由于包含
.manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。 - NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
- FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他。比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。
- 在离线状态时，操作 window.applicationCache 进行离线缓存的操作。
更新缓存的方案：理所当然的就是更新 .manifest 文件
管理和加载：
- 在线情况下，浏览器发现 html 头部有
manifest属性，它会请求.manifest文件，如果是第一次访问页面，那么浏览器就会根据.manifest文件的内容下载相应的资源并进行离线存储；如果已经访问过页面并进行过离线存储，那么浏览器会使用离线的资源加载页面，然后对比新旧.manifest文件，若文件发生改变就会重新下载文件中的资源并进行存储。 - 离线情况下，浏览器会直接使用离线存储的资源加载页面。
注意事项：
（1）浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
（2）如果 .manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
（3）引用 .manifest 的 html 必须与 .manifest 文件同源，在同一个域下。
（4）FALLBACK 中的资源必须和 .manifest 文件同源。
（5）当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
（6）站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。
（7）当 .manifest 文件发生改变时，资源请求本身也会触发更新。
六、DOCTYPE（文档类型）的作用？严格模式和混杂模式的区别？
!DOCTYPE 是用来告诉浏览器要以 HTML5 标准解析页面，如果不写，则进入混杂模式
- 严格模式（标准模式）：以 w3c 标准解析代码
- 混杂模式（怪异模式）：浏览器用自己的方式解析代码。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作
七、常⽤的 meta 标签有哪些
meta 标签由 name 和 content 属性定义，用来描述网页文档的属性。
| 属性 | 描述 | 值 | 例子 |
|---|---|---|---|
| charset | HTML文档的编码类型 | utf-8 gbk | <meta charset="UTF-8" > |
| keywords | 页面关键词 | 自定义 | <meta name="keywords" content="关键词" /> |
| description | 页面描述 | 自定义 | <meta name="description" content="页面描述内容" /> |
| refresh | 页面重定向和刷新 | 自定义 | <meta http-equiv="refresh" content="0;url=" /> |
| viewport | 适配移动端，可以控制视口的大小和比例 | width viewport ：宽度 height viewport ：高度 initial-scale ：初始缩放比例 maximum-scale ：最大缩放比例 minimum-scale ：最小缩放比例 user-scalable ：是否允许用户缩放(yes/no） | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
| robots | 搜索引擎索引方式 | all：文件将被检索，且页面上的链接可以被查询； none：文件将不被检索，且页面上的链接不可以被查询； index：文件将被检索； follow：页面上的链接可以被查询； noindex：文件将不被检索； nofollow：页面上的链接不可以被查询。 | <meta name="robots" content="index,follow" /> |
八、iframe 有那些优点和缺点
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
优点：
- 用来加载速度较慢的内容（如广告）
- 可以使脚本可以并行下载
- 可以实现跨子域通信
缺点：
- iframe 会阻塞主页面的 onload 事件
- 无法被一些搜索引擎索识别
- 会产生很多页面，不容易管理
九、defer 和 async 的区别
defer 和 async 都是 <script> 标签的属性。
从下图可以得知：
defer：
- 在 script 标签添加 defer 属性，就可以让这个 script 外联的 js 变成异步加载。当 html 解析过程中碰到这个 script ，就会开辟一个新线程来下载脚本（这个脚本的下载和 html 的解析是同步的），当脚本下载完毕后不会立即执行，而是等待 html 解析完毕后才开始执行。
- 所有 defer 的 js 代码都保证按顺序执行。
async：
- 在 script 标签添加 async 属性后，html 解析过程中碰到这个 script ，也会开辟新线程来同步下载脚本，但下载完毕后会立即执行脚本，并中断 html 解析流程，等到脚本执行完之后再接着解析 html 。
- async 的 js 代码不能保证按顺序执行，而是谁先下载完就先执行哪个脚本。
十、src 和 href 的区别
- src 会将其指向的资源下载并应用到文档内，这时候它会暂停其他资源的下载，直到该资源加载、编译、执行完毕。
- href 会与指向的网络资源建立链接关系，它会与其他资源并行下载，不会停止对当前文档的处理。
十一、行内元素、块级元素，以及两者的区别
- 行内元素有：
a、br、cite、em、i、img、input、label、select、span、strong、sub、sup、textarea - 块级元素有：
div、p、form、ul、ol、dl、h、hr、table、menu、 - 区别：
- 块级元素独占一行，行内元素不会
- 块级元素可以设置宽高，行内元素不能
- 块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素。
- 块级元素可以设置
margin和padding，行内元素的水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
若是设置为行内块级元素，它也不能独占一行，但能设置宽高
十二、title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别
title 属性没有明确意义只表示是个标题，h1 则表示层次明确的标题。
strong 标签有语义，是起到加重语气的效果，而 b 标签是没有的。虽然都能加粗字体，但搜索引擎更侧重 strong 标签。
i 内容展示为斜体，em 表示强调的文本
十三、label 的作用
<label> 标签是用来定义故意表单控件的关系。
作用：用于绑定一个表单元素，当点击 label 标签的时候，被绑定的表单元素就会获得输入焦点。
- 使用方法1：
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
- 使用方法2：
<label>Date:<input type="text"/></label>
十四、canvas 和 svg 的区别
- canvas 是画布，适合图形密集型的游戏，不支持事件处理
- svg 是矢量图，不依赖分辨率，不适合游戏，适合大型渲染区域（地图），支持事件处理
十五、渐进增强、优雅降级，以及两者的区别
- 渐进增强：针对低版本浏览器也能保证基础功能，然后对高级浏览器改进追加功能（向上兼容）。
- 优雅降级：一开始就构建站点的完整功能，然后针对浏览器进行测试和修复（向下兼容）。
- 区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
扫一扫
1200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
