<li>
<data value="400">超级巨无霸番茄酱</data>
</li>
</ul>
`<time>` ： 表示日期和时间值，机器读取通过 datetime 属性指定。
举例：
`<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time></p>`
`<mark>`：用于高亮文本 嵌入内容
`<video>` ： controls：展示视频自带的控件
autoplay：视频马上自动播放
poster：海报帧的 URL
height、width：视频显示区域的宽和高
loop：视频结尾自动回到视频开始的地方
<video controls>
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.webm" type="video/webm">
<p>Your browser doesn’t support HTML5 video. Here is a <a rel="nofollow" href="myVideo.mp4">link to the video</a> instead.</p>
</video>
<!– Simple video example –><video src="videofile.ogg" autoplay poster="posterimage.jpg"> 抱歉，您的浏 览器不支持内嵌视频，不过不用担心，你可以 <a rel="nofollow" href="videofile.ogg">下载</a> 并用你喜 欢 的 播 放 器 观 看 !</video><!– Video with subtitles –>
<video src="foo.ogg">
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska"></video>
`<audio>` ： 大部分同 `<vedio>`
controls：展示音频自带的控件
autoplay：音频马上自动播放
muted：是否静音
loop：音频结尾自动回到开始的地方
<audio controls>
<source src="myAudio.mp3" type="audio/mpeg">
<source src="myAudio.ogg" type="audio/ogg">
<p>Your browser doesn’t support HTML5 audio. Here is a <a rel="nofollow" href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>
<!– Simple audio playback –>
<audio src="AudioTest.ogg" autoplay> Your browser does not support the <code>audio</code> element.</audio>
<audio controls>
<source src="foo.opus"
type="audio/ogg; codecs=opus"/>
<source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="foo.mp3" type="audio/mpeg"/></audio>
<canvas> ： 通过 JavaScript 和 HTML 的 <canvas> 元素来绘制图形 <canvas id="canvas" width="300" height="300"></canvas>//获取HTML
`<canvas>` 元素的引用const canvas = document.getElementById(‘canvas’);//获得一 个绘图上下文
const ctx = canvas.getContext(‘2d’);//让长方形变成绿色
ctx.fillStyle = ‘green’;//将 它的左上角放在(10, 10)，把它的大小设置成宽 150 高 100ctx.fillRect(10, 10, 150, 100);
### [](
)3/. meta viewport 是做什么用的，怎么写？
Step 1：使用目的 是为了在移动端不让用户缩放页面使用的
Step 2：怎么写 `<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale-1, minimum-scale=1">`
Step 3：解释每个单词的含义 with=device-width 将布局视窗（layout viewport）的宽度设置为设备屏幕分辨率的宽度 initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度 maximum-scale=1 指定用户能够放大的最大比例 minimum-scale=1 指定用户能够缩小的最大比例
### [](
)4.H5 是什么
简单粗暴：就是一种移动端页面
深入点：微信上的一种移动营销页面 总之不是 HTML5 5.label 标签的作用 label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签 相关的表单控件上。
`<label for="Name">Number:</label><input type='text' name="Name" id="Name"/><label>Date:<input type="text" name="B"/></label>`
### [](
)6.行内元素有哪些？
块级元素有哪些？
空(void)元素有那 些？
首先：CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，如 div 的 display 默认值为“block”，则为“块级”元素；span 默认 display 属性 值为“inline”，是“行内”元素。
常用的块状元素有：
`<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、 <blockquote> 、<form>`
常用的内联元素有：
`<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、 <code>`
常用的内联块状元素有：
`<img>、<input>`
知名的空元素：
`<br/> <hr/> <img/> <input/> <link/> <meta/> <br />`
### [](
)7.a 标签中 如何禁用 href 跳转页面 或 定位链接
`e.preventDefault();href="javascript:void(0);`
### [](
)8/. canvas 在标签上设置宽高和在 style 中设置宽高有什么区别
canvas 标签的 width 和 height 是画布实际宽度和高度，绘制的图形都是在这个上面。而 style 的 width 和 height 是 canvas 在浏览器中被渲染的高度和宽度。如果 canvas 的 width 和 height 没指定或值不正确，就被设置成默认值 。
### [](
)9.你做的页面在哪些流览器测试过？这些浏览器的内核分别 是什么?
IE: trident 内核 Firefox：gecko 内核 Safari:webkit 内核 Opera:以前是 presto 内核，Opera 现已改用 GoogleChrome 的 Blink 内核
Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发)
### [](
)10.iframe 有哪些缺点?
iframe 是一种框架，也是一种很常见的网页嵌入方 iframe 的优点：
1.iframe 能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个 页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌 套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。
iframe 的缺点：
1.会产生很多页面，不容易管理。
2.iframe 框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动 条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好 的处理 iframe 中的内容，所以使用 iframe 会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe 框架页面会增加服务器的 http 请求，对于大型网站是不可取的。 现在基本上都是用 Ajax 来代替 iframe，所以 iframe 已经渐渐的退出了前端开发。
### [](
)11.HTML5 新特性
1. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; sessionStorage 的 数据在浏览器关闭后自动删除; 新的技术 webworker, websocket, Geolocation;
### [](
)12.HTML5 离线储存
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户 机器上的缓存文件。
原理： HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制(不是存储技术)，通 过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后 当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用： 页面头部像下面一样加入一个 manifest 的属性；
在 cache.manifest 文件的编写离线存储的资源；
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html 在离线状态时，操作 window.applicationCache 进行需求实现。
### [](
)13.浏览器是怎么对 HTML5 的离线储存资源进行管理和加 载的呢？
在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第 一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。 如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面， 然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做 任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 离线的情况下，浏览器就直接使用离线存储的资源。
### [](
)14.Doctype 作用? 严格模式与混杂模式如何区分？它们有 何意义?
（1）`<!DOCTYPE>` 声明位于文档中的最前面，处于 `<html>` 标签之前。告知浏览器以何种 模式来渲染文档。
（2）严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 （3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站 点无法工作。
（4）DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。复制代码 你知道多少种 Doctype 文档类型？ 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。 HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。 XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。 Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
### [](
)15.HTML 与 XHTML——二者有什么区别
区别：
1.所有的标记都必须要有一个相应的结束标记
2.所有标签的元素和属性的名字都必须使用小写
3.所有的 XML 标记都必须合理嵌套
4.所有的属性必须用引号""括起来
5.把所有<和&特殊符号用编码表示
6.给所有属性赋一个值
7.不要在注释内容中使“–”
8.图片必须有说明文字复制代码
[](
)前端面试题集锦——CSS 篇
---------------------------------------------------------------------------------
### [](
)1/. 页面渲染时，dom 元素所采用的 布局模型,可通过 box-sizing 进行设置。根据计算宽高的区域可分为：
content-box (W3C 标准 盒模型 ) border-box (IE 盒模 型) padding-box (FireFox 曾经 支持 ) margin-box (浏览器未实现) Tips: 理论上是有上面 4 种盒子，但现在 w3c 与 mdn 规范中均只支持 content-box 与 border-box；
### [](
)2/. ie 盒模型算上 border、padding 及自身（不算 margin）， 标准的只算上自身窗体的大小 css 设置方法
如下：
标准模型 :box-sizing:content-box;
IE 模型:box-sizing:border-box;
### [](
)3.几种获得宽高的方式 :
dom.style.width/height 这种方式只能取到 dom 元素内联样式所设置的宽高，也就是说如果该节点的样式是在 style 标签中或外联的 CSS 文件中设置的话，通过这种方法是获取不到 dom 的宽高的。
dom.currentStyle.width/height 这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取 到。但这种方式只有 IE 浏览器支持。 window.getComputedStyle(dom).width/height 这种方式的原理和 2 是一样的，这个可以兼容更多的浏览器，通用性好一些。
#### Vue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
#### Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他
**[CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://ali1024.coding.net/public/P7/Web/git)**
原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/166532.html