放假了，通宵熬夜整理31个HTML5 的手写知识点！！专业扫盲！

领航猿麦兜
116 阅读15分钟

前言

就在今年年初，我成为了一名「掘金」的作者，我的昵称是「程序猿十五」，他们都叫我「广西老表」，源于抖音上广西老表网红。探索技术，追求本源是我的座右铭，技术的价值不在于占有，而在于使用是我的初心。今天分享的主题是：放假了，通宵熬夜整理31个HTML5 的手写知识点！！专业扫盲！

1、HTML 5 性特性

  • 画布(Canvas) API；
  • 地理(Geolocation) API；
  • 音频、视频API(audio,video)；
  • localStorage和sessionStorage；
  • webworker和 websocket；
  • header，nav，footer，aside，article，section；
  • web worker是运行在浏览器后台的js程序，他不影响主程序的运行，是另开的一个js线程，可以用这个线程执行复杂的数据操作，然后把操作结果通过postMessage传递给主线程，这样在进行复杂且耗时的操作时就不会阻塞主线程了。

2、Label 的作用是什么？是怎么用的？

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>

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

给不想要提示的 form 或某个 input 设置为 autocomplete=off。

4、dom如何实现浏览器内多个标签页之间的通信?

  • WebSocket、SharedWorker；
  • 也可以调用localstorge、cookies等本地存储方式；localstorge另一 个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通 过监听事件，控制它的值来进行页面信息通信；
  • 注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常。

5、实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

<div style="height:1px;overflow:hidden;background:red"></div>

6、title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：strong 会重读，而 b 是展示强调内容；i 内容展示为斜体，me 表示强调的文本；

Physical Style Elements -- 自然样式标签，例如：b, i, u, s, pre

Semantic Style Elements -- 语义样式标签：例如：strong, em, ins, del, code

应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

7、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

  • Trident 内核：IE 系列；
  • Gecko 内核：Firefox；
  • Webkit 内核：Safari；
  • Blink 内核：是基于Webkit内核的子项目,使用的浏览器有；
  • Chrome/opera 等除 IE、Firefox、Safari 之外的几乎所有浏览器；
  • 几乎所有国产双内核浏览器（Trident/Blink）如360、猎豹、qq、百度等。

8、每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

用于文档声明。声明位于文档中的最前面的位置，处于 *`` * 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）。IE下如不书写文档声明会使用怪异模式解析网页导致一系列 CSS 兼容性问题。

9、div+css的布局较table布局有什么优点

正常场景一般都适用div+CSS布局，

优点：

  • 结构与样式分离；
  • 代码语义性好；
  • 更符合HTML标准规范；
  • SEO友好。

Table布局的适用场景：

某种原因不方便加载外部CSS的场景，例如邮件正文，此时用table布局可以在无css情况下保持页面布局正常。

10、img的alt与title有何异同？ strong与em的异同。

  • alt(alt text)：为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)；
  • title(tool tip)：该属性为设置该属性的元素提供建议性的信息；
  • em：表现为斜体，语义表示强调；
  • strong：表现为粗体，语义为强烈语气，强调程度超过em。

11、简述一下src与href的区别

  • src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
  • src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置，在请求。
  • src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img 图片和 frame 等元素。
<script src =”js.js”></script>
  • 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
  • href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加。 <link href="common.css" rel="stylesheet"/>
  • 那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

12、知道的网页制作会用到的图片格式有哪些

png-8，png-24，jpeg，gif，svg。但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）

科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。

13、在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理

dns缓存，cdn缓存，浏览器缓存，服务器缓存。

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

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

15、你如何理解HTML结构的语义化

  • 更符合W3C统一的规范标准，是技术趋势。
  • 没有样式时浏览器的默认样式也能让页面结构很清晰。
  • 对功能障碍用户友好。屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。
  • 对其他非主流终端设备友好。例如机顶盒、PDA、各种移动终端。
  • 对SEO友好。

16、谈谈以前端角度出发做好SEO需要考虑什么

搜索引擎主要以外链数量和质量,网页内容和结构等来决定某关键字下的网页搜索排名。

前端应该注意网页结构和内容方面的情况：

  • Meta标签优化：主要包括主题（Title)，网站描述(Description)。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等，符合W3C规范的语义性标签的使用
  • 如何选取关键词并在网页中放置关键词：搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

17、HTML5 有哪些新特性、移除了那些元素

新特性：

  • 拖拽释放(Drag and drop) API
  • 语义化更好的内容标签（header,nav,footer,aside,article,section）
  • 音频、视频API(audio,video)
  • 画布(Canvas) API
  • 地理(Geolocation) API
  • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
  • sessionStorage 的数据在浏览器关闭后自动删除
  • 表单控件，calendar、date、time、email、url、search
  • 新的技术webworker, websocket, Geolocation 移除的元素：
  • 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
  • 对可用性产生负面影响的元素：frame，frameset，noframes；

18、如何处理HTML5新标签的浏览器兼容问题

IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

19、如何区分HTML和HTML5？

DOCTYPE声明新增的结构元素、功能元素。

20、HTML5 Canvas元素有什么用

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作。

21、如何在 HTML5 页面中嵌入音频

HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg： <audio controls> <source src="jamshed.mp3" type="audio/mpeg"> Your browser does'nt support audio embedding feature. </audio>

22、 如何在HTML5页面中嵌入视频

和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg：

<video width="450" height="340" controls>
<source src="jamshed.mp4" type="video/mp4">
Your browser does'nt support video embedding feature.
</video>

23、HTML5 引入什么新的表单属性

datalist，datetime，output，keygen，date， month，week，time，number，range，emailurl。

24、语义化的理解

  • 用正确的标签做正确的事情！
  • html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
  • 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
  • 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
  • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

25、介绍一下你对浏览器内核的理解

  • 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
  • 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
  • JS引擎则：解析和执行javascript来实现网页的动态效果。
  • 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

26、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源。

27、请描述一下cookies，sessionStorage 和localStorage的区别

  • cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密），ookie 数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
  • sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 存储大小：
  • cookie数据大小不能超过4k。
  • sessionStorage 和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。 有期时间：
  • localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除。
  • cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

28、css sprite是什么,有什么优缺点

概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

优点：

  • 减少HTTP请求数，极大地提高页面加载速度。
  • 增加图片信息重复度，提高压缩比，减少图片大小。
  • 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。

缺点：

  • 图片合并麻烦。
  • 维护麻烦，修改一个图片可能需要从新布局整个图片，样式。

29、canvas 如何绘制一个三角形|正方形

  • moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。
  • 这两个函数加起来就是画一条直线。 画线要用“笔”，那么MoveTo()把笔要画的起始位置固定了（x,y）然后要固定终止位置要用到LineTo函数确定终止位置（xend,yend）,这样一条线就画出来了。 每次与前面一个坐标相连 。
  • stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
<!DOCTYPE HTML5><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>画布</title>
</head> <body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");//三角形
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(50,50);
cxt.lineTo(10,50);
cxt.lineTo(10,10);
cxt.stroke();//正方形
var cxt2=c.getContext("2d");
cxt2.moveTo(60,10);
cxt2.lineTo(100,10);
cxt2.lineTo(100,50);
cxt2.lineTo(60,50);
cxt2.lineTo(60,10);
cxt2.stroke();
</script></body></html>

30、弹性盒子模型? flex|box区别?

  • 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

  • flex和box的区别: display：box 是老规范，要兼顾古董机子就加上它； 父级元素有display:box;属性之后。他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。flex是最新的，董机老机子不支持的；父元素设置display:flex后，子元素宽度会随父元素宽度的改变而改变，而display:box不会。 AndroidUC浏览器只支持display: box语法；而iOS UC浏览器则支持两种方式。

31、解释在ie低版本下的怪异盒模型和c3的怪异盒模型 和 弹性盒模型?

IE当padding+border的值小于width或者height:

  • 盒模型的宽度=margin(左右)+width（width已经包含了padding和border的值）
  • 盒模型的高度=margin(上下)+height（height已经包含了padding和border的值）

当padding+border的值大于width或者height:

  • 盒模型的宽度=margin(左右)+padding(左右)+border(左右)

  • 盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px （加一个默认行高 19px） 所以相当于是padding+border和width或者height比大小，谁大取谁。

  • 以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式） CSS3box-sizing有两个值，一个是content-box，另一个是border-box。

  • 当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；

  • 当设置为box-sizing:border-box时，将采用怪异模式解析计算；

  • Css3弹性盒模型引入了新的盒子模型—弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

avatar
文章
阅读
粉丝