HTML 相关题目整理

2021-03-13 本文已影响0人婆娘漂亮生活安逸

写在前面的，该系列题目解析，我是整合各类网上资源，做出的回答。每道题我都尽量贴图，贴 code ，以我认为的最好理解的方式展现出来。
持续更新...

`doctype` 有什么作用？HTML5 为什么只需要写 `<!DOCTYPE HTML>`

作用：
概念 DOCTYPE 标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。声明必须是HTML 文档的第一行，位于标签之前。
HTML5 不基于 SGML（Standard Generalized Markup Language 标准通用标记语言），因此不需要对 DTD 进行引用，但是需要 DOCTYPE 来规范浏览器的行为；
HTML4.01 基于 SGML，所以需要引用 DTD。才能告知浏览器文档所使用的文档类型，如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

`data-` 属性有什么好处？

允许在标准内于HTML元素中存储额外的信息；用法很简单：
HTML语法：所有在元素上以data-开头的属性为数据属性。

<article
    id="electriccars"
    data-columns="3"
    data-index-number="12314"
    data-parent="cars"
>
      ...
</article>

JS访问语法: 获取对应元素，再使用dataset对象去获取到数据属性（是指 data- 后面部分，需要将 - 转为驼峰法）

var article = document.querySelector('#electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

注意：每一个属性都是一个可读写的字符串。在上面的例子中，article.dataset.columns = 5.将会调整属性的值为5。
CSS访问:
可以通过 generated content 使用函数 attr() 来显示 data-parent 的内容：

article::before {
  content: attr(data-parent);
}

也同样可以在CSS中使用属性选择器根据data来改变样式

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

请描述一下 `cookies`，`sessionStorage` 和 `localStorage` 的区别？

	cookies	sessionStorage	localStorage
存储生命周期	一般由服务器生成，可设置生效时间。如果在浏览器生成，默认关闭浏览器失效。	仅在当前会话下有效，关闭页面或者浏览器后被清除。	除非用户手动清除，否则永久保存。
存放数据大小	4k 左右	一般为 5M 左右	同←
与服务器端通信	每次都会携带在 HTTP 头部，如果过大会有性能问题	仅在浏览器中保存，不参与服务器通信	同←
易用性	源生 cookie 接口不友好，需封装在使用	源生接口可接受，也可再次封装对 Object 和 Array 有更好的兼容	同←

storage 类相关成员

成员名	方法参数	描述
length	属性	获取 storage 数量
key(n)	n：索引值	根据索引值，返回 key
getItem(key)	key：键名	根据 key，返回 value
setItem(key, value)	key：键名，value：键值	根据 key 和 value 设置数据项，如果 key 存在，则覆盖相应 value。
removeItem(key)	key：键名	删除对应的 key 的数据项
clear()	无	清空当前 storage 对象

请描述一下`<script>`, `<script async>` 和 `<script defer>` 的区别？

<script>：浏览器在执行 html 遇到 <script> 标签时，会先停止解析，先去下载 js 文件，然后立即执行 js，等执行结束后再继续进行解析。在这个 js 执行期间，就会出现页面空白现象。
<script async>：浏览器在下载 js 同时，页面依旧解析；等下载完成时，页面停止解析，js 脚本执行结束后，恢复页面解析。
<script defer>：浏览器在下载 js ，页面同时解析，直至页面全部解析完成，才去执行 js 文件。
我从网上找了一张图，帮助理解；

注：

在含有 async 的多个 js 脚本，执行顺序并不一定按照出现先后顺序，可能出现后面的 js 脚本比前面的先执行，这是因为 async 只要脚本下载完成就会执行；
在含有 defer 的多个 js 脚本，H5 规定是按照出现先后顺序的，但实际可能也不一定按照顺序执行。

为什么要把 `CSS link 放在 <head>`，把 `JS script 放在</body>`前面？

主要为了提高页面的性能。
CSS 不会阻塞 DOM 解析，但会阻塞 DOM 渲染，把 CSS link 放在 <head>, 可以让页面逐步呈现，提高了用户体验；
JS 文件下载和执行会阻塞 DOM 解析，将 JS script 放在</body>前，是为了让 HTML 先解析完，最早的将页面呈现给用户。
如果 js 脚本包含 async 和 defer 就例外了，具体可看题目 4

什么是渐进式渲染（progressive rendering）？

渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。
在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。
一些举例：

图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。
异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。
详情可查看这篇文章 Async Fragments...

为什么要在 img 标签使用 `srcset` 属性？

主要是为了设置响应式图片。
在分辨率切换时，我们想要显示相同的图片内容，标准的 img src 只能指定唯一的资源文件。配合使用 srcset 和 sizes 属性可以很好的实现这一效果。

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"
>

srcset：定义了我们允许浏览器选择的图像集，以及每个图像的大小。

一个文件名 (elva-fairy-480w.jpg)
一个空格
图像的固有宽度（以像素为单位）（480w）——注意到这里使用w单位，而不是你预计的px。这是图像的真实大小，可以通过检查你电脑上的图片文件找到（例如，在Mac上，你可以在Finder上选择这个图像，然后按 Cmd + I 来显示信息）。

sizes：定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。

一个媒体条件（max-width: 480px）
一个空格
当媒体条件为真时，图像将填充的槽的宽度（440px）

`svg` 和 `canvas` 区别？

	svg	canvas
定义	指可伸缩矢量图形 (Scalable Vector Graphics)，是一种使用 XML 描述 2D 图形的语言。矢量图	通过 JavaScript 来绘制 2D 图形。位图
支持事件处理	基于 XML，SVG DOM 中的每个元素都是可用的，可以为某个元素附加 JavaScript 事件处理器	不支持
适用场景	最适合带有大型渲染区域的应用程序（比如谷歌地图），适合静态图片展示，高保真文档查看和打印的应用场景	最适合图像密集型的游戏，能够以 .png 或 .jpg 格式保存结果图像

行内元素、块级元素、空元素有哪些？

行内：a span img i b input select ...
块级：div ul ol li dl dt dd h1~h6 p table ...
空元素：br hr link meta ...

简述 HTML 语义化理解？

来源：通常写 HTML，都是直接使用 div 和 span 标签，再通过 class 来确定具体样式。页面上的头部、底部、标题、导航等结构，只能通过 class 来分辨。因此，HTML5 添加了页面布局结构的新标签，在开发过程中，根据不同的页面内容使用合适的标签，即为语义化。
优点：1> 有利于构建清晰的代码结构，便于团队的开发与维护；
2> 有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取，利于SEO
3> 有利于不同设备的解析
HTML5 新增的语义化标签：<header> <footer> <nav> <aside> <main> <article> <details> <mark> <section> <summary> <figcaption> <figure> <time> ...

HTML5 新特性？

语义化标签
表单控件：calendar，date，time，email，url，search ...
音频、视频：audio，video
Canvas
地理定位：Geolocation
拖拽释放：Drag，drop
web storage：localStorage，sessionStorage
web worker：是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能
WebSocket: HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议

常见的浏览器内核有哪些，介绍一下你对浏览器内核的理解？

Webkit 内核：Safari，Chrome等
Trident 内核：IE, MaxThon, TT, The Word, 360, 搜狗浏览器等。
Gecko 内核：NETSCAPE6 及以上版本，FireFox
Presto 内核：Opera7 及以上。[Opera 内核原为：Presto，现为：Blink;]

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

src 与 href 的区别？

src：指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。
href：指网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

页面导入样式 `link` 和 `@import` 有什么区别？

区别：
1> link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他业务；@import 是 CSS 范畴，只能加载 CSS。
2> link 是 XHTML 标签，无兼容性问题；但 @import 是 CSS2.1 提出的，低版本浏览器不支持。
3> link 引用 CSS 时，页面同时加载；@import 需要等页面完全载入后，才进行加载，因此可能出现一开始没有 CSS 样式，闪烁一下再出现有样式的页面。
4> link 支持使用 Javascript 去改变样式；但是 @import 不支持。
5> 导入语法不同。

语法介绍：
link

  <head>
      <link  rel="stylesheet" type="text/css" />
  </head>

@import
1> HTML 文件中：

  <style>
      @import url(style.css)
  </style>

2> CSS 文件中

    @import url(style.css)
    div {}

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

(1) title 与 h1 的区别

定义：
title是网站标题，一个页面只能有一个
h1是文章主题
作用：
title 概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页 Tab 栏里的；
h1 突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的。
注意：如果 title 为空，但是页面存在 h1，b，strong 标签，搜索引擎会默认页面 title 为 h1 内的内容，所以得出结论 h1 是在没有外界干扰下除 title 以外第二个能强调页面主旨的标记，在一个页面中应该使用且只使用一次 h1 标签。

(2) b 与 strong 的区别

定义：
b(bold)是实体标签，用来给文字加粗
strong是逻辑标签，作用是加强字符语气
区别：
b 标签只是加粗的样式，没有实际含义，常用来表达无强调或着中意味的粗体文字
strong 表示标签内字符重要，用以强调，其默认格式是加粗，但是可以通过css添加样式，使用别的样式强调
建议：为了符合 CSS3 的规范语义化，b 应尽量少用而改用 strong

(3) i与em的区别

定义：
i(italic)是实体标签，用来使字符倾斜
em(emphasis)是逻辑标签，作用是强调文本内容
区别：
i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语；
em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式。
建议：为了符合 CSS3 的规范，i 应尽量少用而改用 em

元素的alt和title有什么异同？

alt: 当图片加载不出时，作为替代文字出现；
title：当鼠标悬浮于元素时，作为解释型文字出现。

HTML5 的 form 是如何关闭自动完成功能？

关闭输入框的自动完成功能有3种方法：
（1）在 IE 的 Internet 选项菜单里的内容--自动完成里面设置
（2）设置 form 的 autocomplete 为 "on" 或者 "off" 来开启或者关闭自动完成功能（关闭整个表单自动提示功能）
（3）设置输入框(input)的 autocomplete 为 "on" 或者 "off" 来开启或者关闭该输入框的自动完成功能（关闭密码域的自动完成）

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

作用：用于绑定一个表单元素, 当点击 Label 标签的时候, 被绑定的表单元素就会获得输入焦点。当我们鼠标点击 Label 标签里面的文字时，光标会定位到指定的表单里面。
属性：
for：表示这个 Lable 是为哪个控件服务的，Label 标签要绑定了 for 指定HTML元素的 id 或 name 属性，当点击这个标签的时候，所绑定的元素将获取焦点，点击 label 所包裹内容，自动指向 for 指定的 id 或 name
accesskey：定义了访问这个控件的热键( 所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键)

用法：

<label for="username">姓名</label><input id="username" type="text">

网站 SEO 怎么处理？

SEO 全称 Search Engine Optimization，搜索引擎优化。
优化可以有以下方式：
网站结构布局优化
(1) 控制首页链接数量：数量过少直接影响网站收录数量，过多则影响用户体验同时降低首页的权重。
(2) 扁平化的目录层次：尽量做到跳转3次，就可以到达网站内页。
(3) 导航优化：尽量采用文字方式，也可搭配图片导航，<img> 标签必须添加 alt 和 title 属性，即使未加载出图片时，也可以看到文字信息。其次，可以添加面包屑。
(4) 网站的结构布局 ：页面头部放入主体重要的信息，页面尾部可以加入版权友情链接信息。
(5) 利用布局，将重要的 html 代码放在最前面：SEO 抓取 html 内容从上到下，因此我们可以通过修改样式，将重要代码放在前面。
(6) 控制页面大小：减少 http 请求，提高网站的加载速度。

网页代码优化
(1) 突出重要的内容：合理设计 title、description、keywords
(2) 语义化书写 html 代码：尽量让代码语义化，在适当的位置使用适当的标签，让阅读者和 SEO 一目了然。比如使用 strong 代替 b ，使用 em 代替 i；
(3) <a> 标签优化：<a> 标签应该要加 title 说明，如果外部链接，则加上 el='nofollow' 属性，目的为了让 SEO 不去该链接，因为一旦去了外部链接就不会继续在回来了；SEO 不会执行 JS，因此 a 链接的 onclick 事件不会被读取。
(4) <h1>标签优化：一个页面有且最多只能有一个 h1 标签，比如可以放在首页的 logo；其余标题可以用<h2> 等其他标题标签
(5) <img>标签优化：应该使用 alt 属性，当网速很慢或者图片地址失效时，可以让用户了解当前图片作用。
(6) 少使用 iframe：一般不会读取其中的内容
(7) 会过滤掉 display：none 的内容

meta 标签？

介绍：可以定义文档的各种元数据，提供各种文档信息，有助于 SEO。
属性值：
name：名称/值对中的名称。author、description、keywords、generator、revised、others。把 content 属性关联到一个名称。
http-equiv：没有name时，会采用这个属性的值。content-type、expires、refresh、set-cookie。把content属性关联到http头部
content ：名称/值对中的值，可以是任何有效的字符串。始终要和 name 属性或 http-equiv 属性一起使用
charset ：声明了页面的字符编码。

如何实现浏览器多个标签之间的通信？

localStorage：监听 storage 对象；
cookie + setInterval：将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。
webworker
找了一篇详情：多标签通信

HTML 相关题目整理

`doctype` 有什么作用？HTML5 为什么只需要写 `<!DOCTYPE HTML>`

`data-` 属性有什么好处？

请描述一下 `cookies`，`sessionStorage` 和 `localStorage` 的区别？

请描述一下`<script>`, `<script async>` 和 `<script defer>` 的区别？

为什么要把 `CSS link 放在 <head>`，把 `JS script 放在</body>`前面？

什么是渐进式渲染（progressive rendering）？

为什么要在 img 标签使用 `srcset` 属性？

`svg` 和 `canvas` 区别？

行内元素、块级元素、空元素有哪些？

简述 HTML 语义化理解？

HTML5 新特性？

常见的浏览器内核有哪些，介绍一下你对浏览器内核的理解？

src 与 href 的区别？

页面导入样式 `link` 和 `@import` 有什么区别？

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

元素的alt和title有什么异同？

HTML5 的 form 是如何关闭自动完成功能？

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

网站 SEO 怎么处理？

meta 标签？

如何实现浏览器多个标签之间的通信？

猜你喜欢

热点阅读

HTML 相关题目整理

doctype 有什么作用？HTML5 为什么只需要写 <!DOCTYPE HTML>

data- 属性有什么好处？

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

请描述一下<script>, <script async> 和 <script defer> 的区别？

为什么要把 CSS link 放在 <head>，把 JS script 放在</body>前面？

什么是渐进式渲染（progressive rendering）？

为什么要在 img 标签使用 srcset 属性？

svg 和 canvas 区别？

行内元素、块级元素、空元素有哪些？

简述 HTML 语义化理解？

HTML5 新特性？

常见的浏览器内核有哪些，介绍一下你对浏览器内核的理解？

src 与 href 的区别？

页面导入样式 link 和 @import 有什么区别？

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

元素的alt和title有什么异同？

HTML5 的 form 是如何关闭自动完成功能？

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

网站 SEO 怎么处理？

meta 标签？

如何实现浏览器多个标签之间的通信？

猜你喜欢

热点阅读

`doctype` 有什么作用？HTML5 为什么只需要写 `<!DOCTYPE HTML>`

`data-` 属性有什么好处？

请描述一下 `cookies`，`sessionStorage` 和 `localStorage` 的区别？

请描述一下`<script>`, `<script async>` 和 `<script defer>` 的区别？

为什么要把 `CSS link 放在 <head>`，把 `JS script 放在</body>`前面？

为什么要在 img 标签使用 `srcset` 属性？

`svg` 和 `canvas` 区别？

页面导入样式 `link` 和 `@import` 有什么区别？