前端必备知识储存——HTML篇一（面试常考）

系列文章目录

最近准备前端面试，整理一下学习过的内容，勤能补拙嘛。

---

@阿乐今天敲代码没

---

一、HTML篇

1.HTML 语义化的理解

    使用合适的标签来表达正确含义的页面结构,让页面具有良好的结构和含义，可以有效提高：
可访问性：帮助辅助技术更好的阅读和转译你的网页，利于无障碍阅读；
可检索性：有了良好的结构和语义，可以提高搜索引擎的有效爬取，提高网站流量；
国际化：全球只有 13%的人口是英语母语使用者，因此通用的语义化标签可以让各国开发者更容易弄懂你网页的结构；
互用性:减少网页间的差异性，帮助其他开发者了解你网页的结构，方便后期开发和维护

2.为什么要使HTML语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护：语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3.写HTML代码时应注意什么？

1. 尽可能少的使用无语义的标签div和span；
2. 在语义不明显时，既可以使用div或者p时，尽量用p,因为p在默认情况下有上下间距，对兼容特殊终端有利；
3. 不要使用纯样式标签，如：b、font、u等，改用css设置。
4. 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
5. 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
6. 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
7. 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

4.你用过哪些 HTML5 标签

表示结构的标签

<header> <nav> <main> <article> <section> <aside> <footer>

---

表示文字形式：data

举例：展示了一些产品名称，而且每个名称都和一个产品编码相关联。

<p>新产品p><ul> <li><data value="398">迷你番茄酱data>li> <li><data value="399">巨
无霸番茄酱data>li> <li><data value="400">超级巨无霸番茄酱data>li>ul>

新产品

• 迷你番茄酱
• 巨 无霸番茄酱
• 超级巨无霸番茄酱

---

*表示日期和时间值*：time 举例：机器读取通过 datetime 属性指定。

<p>The concert took place on <time datetime="2001-05-15 19:00">May 15time>.p>

The concert took place on May 15.

---

*用于高亮的文本*：mark

举例：

<mark>我是mark里面的内容mark>

我是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 href="myVideo.mp4">link to the videoa> instead.p>video><video src="videofile.ogg" autoplay poster="posterimage.jpg"> 抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 <a href="videofile.ogg">下载a> 并用你喜欢的播放器观看 !video><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>

Your browser doesn’t support HTML5 video. Here is a link to the video instead.

抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 下载 并用你喜
欢 的 播 放 器 观 看 !

---

音频：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 href="myAudio.mp4">link to the audioa> instead.p>audio><audio src="AudioTest.ogg" autoplay> Your browser does not support the
<code>audiocode> 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>

Your browser doesn’t support HTML5 audio. Here is
a link to the audio instead.

Your browser does not support the
audio element.

---

canvas： 通过 JavaScript 和 HTML 的 元素来绘制图形

<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);

5.meta viewport 是什么

meta可提供有关页面的元信息，viewport是指视窗、视口，浏览器上用来显示网页的那部分区域。在移动端和pc端视口是不同的，pc端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口。

布局视口：在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或其他值，一般都比移动端浏览器可视区域大很多，所以就会出现浏览器出现横向滚动条的情况

视觉视口：用户通过屏幕看到的页面区域，通过缩放查看显示内容的区域，在移动端缩放不会改变布局视口的宽度，当缩小的时候，屏幕覆盖的css像素变多，视觉视口变大，当放大的时候，屏幕覆盖的css像素变少，视觉视口变小。

理想视口：一般来讲，这个视口其实不是真是存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。

meta viewport是为了在移动端不让用户缩放页面使用的,即实现移动端适配。

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

width=device-width 将布局视窗（layout viewport）的宽度设置为设备屏幕分辨率的宽度
initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度
maximum-scale=1 指定用户能够放大的最大比例
minimum-scale=1 指定用户能够缩小的最大比例

6.行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

（1）行内元素有：

a、b、span、img、input、strong、select、label、em、button、textarea、
cite、i、q、var

（2）块级元素有：

div、p、h1…h6、ol、ul、dl、table、address、blockquote 、form、pre

（3）常用的内联块状元素有：

img、input

（4）常见的空元素：

br、meta、hr、link、input、img

7.a 标签中如何禁用 href 跳转页面或定位链接

一、js的几种调用方法

 1、a href="javascript:js_method();"

这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句

2、 a href="javascript:void(0);" οnclick="js_method()"

这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

 3、a href="javascript:;" οnclick="js_method()"

这种方法跟跟2种类似，区别只是执行了一条空的js代码。

  4、a href="#" οnclick="js_method()"

这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

 5、a href="#" οnclick="js_method();return false;"

这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。

综合上述，在a中调用js函数最适当的方法推荐使用：

<a href="javascript:void(0);" onclick="js_method()">a> 
<a href="javascript:;" onclick="js_method()">a> 
<a href="#" onclick="js_method();return false;">a>

二、href="#"的作用

a中href="#"表示回到最顶部。#包含了一个位置信息，默认的锚是#top 也就是网页的顶端。如果当前页面中需要滚动的话，那么用这种方式就可以直接回到顶部。

三、href="URL"的作用

1、URL为绝对URL

<a href="https://blog.csdn.net/qq_45840993?spm=1011.2124.3001.5343">超链接a> 

超链接
此时指向另一个站点，比如href=“https://blog.csdn.net/qq_45840993?spm=1011.2124.3001.5343”,那么点击时就会直接跳转到这个链接的页面。

2、URL为相对URL

此时指向站点内的某个文件，比如href="/text.doc"，那么点击时就会直接下载文件。

3、锚 URL

此时指向页面中的锚，比如href="#top"，那么点击时就会到当前页面中id="top"的这个锚点，实现当前页面的所谓跳转。用的最多就是在可滚动页面中，添加菜单，可以直接回到页面中的某个部分的内容。

8.canvas 在标签上设置宽高和在 style 中设置宽高有什么区别

canvas 标签的 width 和 height 是画布实际宽度和高度，绘制的图形都是在这个上面。
而 style的 width 和 height 是 canvas 在浏览器中被渲染的高度和宽度。如果 canvas 的 width 和 height没指定或值不正确，就被设置成默认值 。
直白说，在标签上设置宽高canvas的宽高大小改变时，其实际内容大小不会变化，只有画布大小变化；而在 style 中设置宽高，内容大小会发生变化。

9.浏览器的内核

IE: trident 内核
Firefox：gecko 内核
Safari:webkit 内核
Opera:以前是 presto 内核，Opera 现已改用 GoogleChrome 的 Blink内核
Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发

10.Cookie和localStorage、以及sessionStorage之间的区别

localStorage: localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据，否则数据永远不会消失。

sessionStorage: sessionStorage 的生命周期是仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念，sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的。

cookie: cookie生命期为只在设置的cookie过期时间之前一直有效，无论窗口或浏览器是否关闭。 cookie存放数据大小为4K左右, 有个数限制（各浏览器不同），一般不能超过20个；sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

11.Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?

（1） 声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。
（2）严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站
点无法工作。
（4）DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。复制代码
你知道多少种 Doctype 文档类型？
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks
（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。