错题一

一、可以继承的CSS属性

原题链接：https://www.nowcoder.com/questionTerminal/7642837ccba6435baedbe62cfb4ed187

下列哪些属性是不可以被继承的()

A. margin

B. position

C. float

D. font-size

答案：ABC

---

题目的意思是：当父元素设置为以下哪个属性时，其子元素不会有影响

A 选项：设置的是 margin ，而子元素在内容区域，设置 margin 不会影响子元素，子元素也不会继承

B 选项：如果父元素设置了 position: absolute ，其子元素设置定位位置 top: 300px; 是没有用的，依然要在子元素设置 position 属性

C 选项：父元素设置了浮动，不会影响子元素的浮动状态

D 选项：当父元素设置字体大小，其子元素不设置字体大小，则会自动继承父元素的字体大小

二、标签嵌套规范

原题链接：https://www.nowcoder.com/questionTerminal/928c7583fc3b4084929504a69ef6c856

下列HTML代码中符合HTML5嵌套规范的是 ：

A. 
<p>
  <a href="some link">
    <p>some text</p>
  </a>
</p>

B.
<button type="submit">
  <a href="some link">some text</a>
</button>

C.
<table>
  <caption>some title</caption>
  <tbody>
    <tr>
      <th>some text</th>
      <td>some text</td>
    </tr>
  </tbody>
</table>

D.
<dl>
  <dt>
    <h1>some title</h1>
  </dt>
  <dd>
    <p>some text</p>
    <p>some text</p>
  </dd>
</dl>

答案：C

---

A 选项：<p> 里面不能有 <p>，如果这样写的话，浏览器不会按照写的显示 HTML 元素。

<!-- 错误写法
<p>
	<p>some text</p>
</p> 
-->

<!-- 显示效果 -->
<p> </p>
<p>some text</p>

B 选项：<button> 里不推荐使用 <a> ，因为样式看起来会冲突，按钮里面的字体是链接样式。而如果换过来，就只会有按钮的样式。

<a href="https://www.baidu.com/">
  <button>百度</button>
</a>

D 选项：<dt>、<th> 不推荐嵌套<header>、<footer>、区块型元素(sectioning content)、标题型元素(heading content)

三、jQuery的滑入滑出

原题链接：https://www.nowcoder.com/questionTerminal/7213136dc8fc4474b2b613377c59c091

如果想要让一个 p 标签，在1s内缓慢的以滑动方式隐藏，要怎么实现：

A. $("p").slideUp(1000);
B. $("p").slideDown(1000);
C. $("p").mergeUp(1000);
D. $("p").mergeDown(1000); 

A. slideUp 通过高度变化（向上减小）来隐藏元素

B. slideDown 通过高度变化（向下增大）来显示元素

slideToggle ： 通过高度变化来切换元素的可见性

四、已废弃的acronym

原题链接：https://www.nowcoder.com/questionTerminal/5f8173bcbb36406287844f7edcb9515d

HTML5 中不再支持下面哪个元素？

A. <cite>
B. <acronym>
C. <abbr>
D. <base>

A 选项： <cite> 表示一个作品的引用，且必须包含作品的标题，样式是斜体。

B 和 C 选项：都表明该标签里的单词构成缩写或简略语， <acronym> 被弃用，改成使用 <abbr>

D 选项：<base> 定义一个文档中所有相对 URL 的根 URL 。

五、jQuery查找所有子孙节点

原题链接：https://www.nowcoder.com/questionTerminal/fab75dedaee14a08ab1eb08c266aee88

给定下面代码： 怎么能够取得 ”wrapper” 中全部项的集合？

A. $('#wrapper').children();

B. $('#wrapper').html();

C. $('#wrapper').contents();

D. $('#wrapper').find('all');

<div id="wrapper">
  <div class="wText">
    <div>a</div>
    <div>b</div>
  </div>

  <div class="wImg">
    <div>a</div>
    <div>b</div>
  </div>

  <div class="wVideo">
    <div>a</div>
    <div>b</div>
  </div>
</div>

---

答：C

解析：

• A 选项：$('#wrapper').children(); ，只能获取到所有子节点，子孙节点获取不到
• B 选项：$('#wrapper').html(); ，可以获取到所有子孙节点，但只是返回字符串
• C 选项：$('#wrapper').contents(); ，可以获取到所有子孙节点，也包括文本节点
• D 选项：$('#wrapper').find('all'); ；find() 方法是用来查找指定的子节点

六、空元素

以下不属于空元素（void elements）的是：

A. embed

B. img

C. address

D. wbr

---

答案：C

解析：空元素的详细定义：一个空元素（empty element）可能是 HTML，SVG，或者 MathML 里的一个不能存在子节点（例如内嵌的元素或者元素内的文本）的element。

简单来说就是不用闭合的标签。例如最常见的 <input> 。

而 <address> 标签代表 某个人或某个组织（等等）的联系信息，因为联系方式不止一种，所以需要闭合标签，标签里面有多个子标签来代表联系方式。

<p>Contact the author of this page:</p>

<address>
  <a href="mailto:jim@rock.com">jim@rock.com</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

七、重绘和回流

HTML 在解析时，会同时解析 HTML 文件和 CSS 文件，然后将解析成的 DOM 和 CSSOM 合并成渲染数 Render Tree，接着将每个元素在页面上进行排列，最后将排列的结果显示出来。例如下面流程图。

st=>start: 开始
HTML=>operation: 解析HTML文件
CSS=>operation: 解析CSS文件
DOM=>operation: 生成DOM
CSSOM=>operation: 生成CSSOM
RT=>operation: 合并成渲染树
Layout=>operation: 进行元素排列
Paint=>operation: 进行页面绘制
e=>end: 结束
para=>parallel: 解析文件

st->para
para(path1, bottom)->CSS
para(path2)->HTML
HTML->DOM
CSS->CSSOM
DOM->RT
CSSOM->RT
RT->Layout
Layout->Paint
Paint->e

• 回流
  • 当更改影响布局时发生，对元素进行重新排列。
  • 触发示例：width ， position ， float.
  • 重新计算位置和尺寸。
  • 影响更大，更改单个元素会影响所有子元素、祖先元素和兄弟姐妹或整个文档。
• 重绘
  • 当更改影响可见性时发生，对元素重新绘制。
  • 触发示例：opacity ， color, ，background-color ， visibility 。

根据上面流程图可知，当触发回流时，也会触发重绘，所以我们要尽量避免回流。避免最大程度的回流的方法：

1. 一次性获取或者修改 CSS 样式

由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程，简单来说就是先缓存一些修改然后再一次性重排。但当获取到一些 CSS 样式属性时，会直接清空缓存进行重排，以免获取到不正确的值。

获取或者修改下面属性，会强制让页面回流。

• offsetTop、offsetLeft、offsetWidth、offsetHeight
• scrollTop、scrollLeft、scrollWidth、scrollHeight
• clientTop、clientLeft、clientWidth、clientHeight
• getComputedStyle()
• 。。。。。
• 详细的可见：https://gist.github.com/paulirish/5d52fb081b3570c81e3a

---

我们应该像下面这样做，一次性获取上面属性，一次性修改上面属性。

参考链接：https://gist.github.com/faressoft/36cdd64faae21ed22948b458e6bf04d5

// 不推荐的修改方式，会触发6次回流
var box1Height = document.getElementById('box1').clientHeight;
document.getElementById('box1').style.height = box1Height + 10 + 'px';

var box2Height = document.getElementById('box2').clientHeight;
document.getElementById('box2').style.height = box2Height + 10 + 'px';

var box3Height = document.getElementById('box3').clientHeight;
document.getElementById('box3').style.height = box3Height + 10 + 'px';

var box4Height = document.getElementById('box4').clientHeight;
document.getElementById('box4').style.height = box4Height + 10 + 'px';

var box5Height = document.getElementById('box5').clientHeight;
document.getElementById('box5').style.height = box5Height + 10 + 'px';

var box6Height = document.getElementById('box6').clientHeight;
document.getElementById('box6').style.height = box6Height + 10 + 'px';

// 推荐的方式，只会触发1次回流
var box1Height = document.getElementById('box1').clientHeight;
var box2Height = document.getElementById('box2').clientHeight;
var box3Height = document.getElementById('box3').clientHeight;
var box4Height = document.getElementById('box4').clientHeight;
var box5Height = document.getElementById('box5').clientHeight;
var box6Height = document.getElementById('box6').clientHeight;

document.getElementById('box1').style.height = box1Height + 10 + 'px';
document.getElementById('box2').style.height = box2Height + 10 + 'px';
document.getElementById('box3').style.height = box3Height + 10 + 'px';
document.getElementById('box4').style.height = box4Height + 10 + 'px';
document.getElementById('box5').style.height = box5Height + 10 + 'px';
document.getElementById('box6').style.height = box6Height + 10 + 'px';

也可以直接替换类，而不是一个个替换样式

// 不推荐，虽然现代浏览器都对其做了优化，只会触发一次重排
const el = document.getElementById('test');
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px';

// 推荐，修改类直接修改多个样式
const el = document.getElementById('test');
el.className += ' active';

如果每次我们不需要最新的属性值，可以将循环里的获取属性值的操作提取出来。

// 不推荐写法
function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = box.offsetWidth + 'px';
    }
}

// 推荐写法
const width = box.offsetWidth;
function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = width + 'px';
    }
}

2. 批量修改 DOM

参考链接：https://segmentfault.com/a/1190000017329980

如果要修改 DOM 的时候，尽量批量修改 DOM，或者在修改 DOM 时隐藏元素

• 在修改 DOM 时隐藏元素

const ul = document.getElementById('list');
ul.style.display = 'none';
appendDataToElement(ul, data);
ul.style.display = 'block';

• 批量修改 DOM，使用文档碎片（fragment）或者克隆一个脱离文档的节点

const fragment = document.createDocumentFragment();
appendDataToElement(fragment, data);
ul.appendChild(fragment);

const clone = ul.cloneNode(true);
appendDataToElement(clone, data);
ul.parentNode.replaceChild(clone, ul);

3. 使用绝对定位让其脱离文档流

对于复杂动画效果，我们可以使用绝对定位，让它脱离文档流。

4. css3硬件加速（GPU加速）

使用 css3 硬件加速，可以让 transform、opacity、filters 这些动画不会引起回流重绘 。但是对于动画的其它属性，比如 background-color 这些，还是会引起回流重绘的

八、CSS 优先级

基于以下 HTML 结构和 CSS 样式，文本 Dijkstra的颜色应该是？

<ul class="authors" id="favorite">
  <li><span>Martin</span></li>
  <li id="related"><span class="highlight"> Dijkstra </span></li>
</ul>
<style>
  ul#related span {
    color: red;
  }

  #favorite .highlight {
    color: orange;
  }

  .highlight {
    color: black;
  }
</style>

---

答：orange

解析：可以参考：https://specifishity.com/

• 标签选择器、 伪元素选择器 ：0-0-1，每多一个标签选择器就加一，0-0-N
• 类选择器、属性选择器、 伪类选择器 ：0-1-0
• ID 选择器：1-0-0
• 注意计算优先级不进位

根据上面可以计算出：

• red ：1-0-2
• orange ：1-1-0
• black ：0-1-0

九、原生JS获取select元素

原题链接：https://www.nowcoder.com/questionTerminal/562c9ee3cfcd4c9b9eb9d1dbc63f38ad

如何获取下面表单 select 域的选择部分的文本，其中 obj=document.getElemById("obj")

<form name="a">
    <select name="a" size="1" id="obj">
        <option value="a">1</option>
        <option value="b">2</option>
        <option value="c">3</option>
    </select>
</form> 

A. obj.options[obj.selectedIndex].text
B. obj.options[obj.selectedIndex].value
C. obj.value
D. obj.text

---

答：A

解析：

• C 选项：obj.value ：获取下拉框所选择选项的 value 值
• obj.selectedIndex ：获取到所选择的选项的下标；
• obj.options ：获取到下拉框的所有选项
• obj.options[obj.selectedIndex] ：获取到所选择的选项元素
• obj.options[obj.selectedIndex].text ：获取到所选择的选项元素的文本
• obj.options[obj.selectedIndex].value ：获取到所选择的选项元素的 value 值

十、offset和client

原题链接：https://www.nowcoder.com/questionTerminal/61f8f5ecca5f4aebbdfda6440f0dda6b

根据规范，以下 HTML 和 CSS 代码解析后， container.clientWidth 的值是:

<style>
  #container {
    width: 200px;
    height: 200px;
    padding: 20px;
    margin: 20px;
    border: solide 10px black;
  }
</style>

<div id="container">
  content
</div>

答：240px；

解析：只要弄清这两个 clientWidth 和 offsetWidth 就行

• clientWidth ：内容 + 内边距
• offsetWidth ：clientWidth + 边框

所以可知 clientWidth= 200px + 20 * 2 px = 240px

offsetWidth = 240px + 10 * 2 px = 260px

十一、BFC

原题链接：https://www.nowcoder.com/questionTerminal/cdaa9b301f1c46e686c5a87650d79525

<style type="text/css">
.a, .b, .c {
    box-sizing: border-box;
    border: 1px solid;
}
.wrap {
    width: 250px;
}
.a {
    width: 100px;
    height: 100px;
    float: left;
}
.b {
    width: 100px;
    height: 50px;
    float: left;
}
.c {
    width: 100px;
    height: 100px;
    display: inline-block;
}
</style>
 
<div class="wrap">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
</div>

请问 wrap 这个 div 的高度是多少？

答：150px；

解析：这个涉及到 BFC， BFC（块格式化上下文，Block Formatting Context）是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简单来说就是，让布局变成块级盒子，BFC 的详细详解在下面。

a 和 b 都浮动，两个的宽度加起来 200 px，父元素的宽度是 250 px，所以 a 和 b 会左右相邻。然后 c 设置了 display: inline-block; ，导致 c 新建了一个 BFC，所以 c 不会和浮动元素重叠在一起。因为 b 的高度比 a 的小，所以 c 就会在 b 的下面，这样父元素的高度就被 b 和 c 同时撑起来，为 50px + 100px = 150 px。

（如果 b 的高度比 a 的小，c 不会在 a 元素的下面，而是另起一行，即 a 与 c 的上下中间有间隔，这应该是浮动的规则）

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

（1）生成BFC方式

浮动的元素会脱离当前文档流，会造成元素重叠，类似于设置了 position: absolute 。因为生成了一个新的 BFC，生成 BFC 有下面几种方式：

• 根元素（<html>）
• 浮动元素（float 值不为 none）
• 绝对定位元素（position 值为 absolute 或 fixed）
• 行内块元素（display 值为 inline-block）
• 表格单元格（display 值为 table-cell，HTML 表格单元格默认值）
• 表格标题（display 值为 table-caption，HTML 表格标题默认值）
• 匿名表格单元格元素（display 值为 table、table-row、 table-row-group、table-header-group、table-footer-group（其分别是 HTML table、tr、tbody、thead、tfoot 的默认值）或 inline-table）
• overflow 值不为 visible、clip 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content 或 paint 的元素
• 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器
• 网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器
• 多列容器（column-count 或 column-width 值不为 auto，包括 column-count 为 1） column-span 值为 all 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中

（2）解决BFC问题

BFC 会影响布局，通常我们会使用定位和清除浮动创建新的 BFC ，来解决下面布局问题（使用 BFC 来解决 BFC 问题，要用魔法打败魔法）：

• 包含内部浮动
• 排除外部浮动
• 阻止外边距重叠

---

1. 包含内部浮动，就是将内部浮动元素包含在父元素里，不造成父元素高度坍塌。通常会使用上面生成 BFC 方式中的两种：

• 使用 overflow: auto ：不推荐使用，如果要使用需要写上注释，不然后面的开发者不知道为什么要使用 overflow 属性
• 使用 display: flow-root ：推荐使用， 可以创建无副作用的 BFC

包含内部浮动

<section>
  <div class="box">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the container.</p>
  </div>
</section>
<section>
  <div class="box" style="overflow:auto">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the <code>overflow:auto</code> container.</p>
  </div>
</section>
<section>
  <div class="box" style="display:flow-root">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the <code>display:flow-root</code> container.</p>
  </div>
</section>

section {
  height: 150px;
}
.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
}
.box[style] {
  background-color: aliceblue;
  border: 5px solid steelblue;
}
.float {
  float: left;
  width: 200px;
  height: 100px;
  background-color: rgba(255, 255, 255, .5);
  border:1px solid black;
  padding: 10px;
}

---

2. 排除外部浮动，就是使两个兄弟元素相互不重叠。需要使用 display: flow-root 和浮动实现双列布局，因为正常文档流中建立的 BFC 不得与元素所在的块格式化上下文中的任何浮动的外边距重叠。

例如下面代码，左边的元素设置为浮动，左边的元素就会和右边的元素重叠在一起，这时右边的元素就需要设置 display: flow-root

排除外部浮动

<section>
  <div class="float">Try to resize this outer float</div>
  <div class="box"><p>Normal</p></div>
</section>
<section>
  <div class="float">Try to resize this outer float</div>
  <div class="box" style="display:flow-root"><p><code>display:flow-root</code><p></div>
</section>

section {
  height:150px;
}
.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
}
.box[style] {
  background-color: aliceblue;
  border: 5px solid steelblue;
}
.float {
  float: left;
  overflow: hidden; /* required by resize:both */
  resize: both;
  margin-right:25px;
  width: 200px;
  height: 100px;
  background-color: rgba(255, 255, 255, .75);
  border: 1px solid black;
  padding: 10px;
}

---

3. 阻止外边距重叠。创建新的 BFC 避免两个相邻的 div 之间 外边距重叠 。

外边距重叠：块的上外边距 (margin-top) 和下外边距 (margin-bottom) 有时合并为一个边距，其大小为其中的最大值，这种行为称为边距折叠。

有三种情况会导致外边距重叠：

1. 上下相邻的两个元素之间。
2. 没有将父元素和后代元素的上下边距分开，会导致父块元素和后代块元素外边界重叠，重叠部分最终会 溢出 到父级块元素外面
3. 当一个块元素上边界直接贴到元素下边界时，即元素里没有任何内容但设置了上下边距。也会发生边界折叠。

---

三种情况分别有不同的解决方案：

1. 在不需要外边距重叠的元素外面多加一层 <div> ，并将 <div> 的样式设置为 overflow: hidden; 或者其他创建 BFC 的方式

2. 把父元素的样式添加 overflow: hidden; 或者其他创建 BFC 的方式

3. 把空元素的样式添加 overflow: hidden; 或者其他创建 BFC 的方式

十二、DHTML

原题链接：https://www.nowcoder.com/questionTerminal/e34254eb4dff49239070b5503765778f

DHTML 的动态样式的作用是 ()

A. 可使开发人员改变显示在一页上的文本或图像，以便内容能够交互地对用户的鼠标和键盘操作做出响应

B. 让页面制作者以自动方式或对用户的操作做出响应的方式移动页面上的文本和图像

C. 可实现客户端与服务端动态的信息资源交换

D. 使网页作者改变内容的外部特征而不强制用户再次下载全部内容

答：C

解析：DHTML 指动态 HTML（Dynamic HTML）。DHTML 不是由万维网联盟（W3C）规定的标准。DHTML 是一个营销术语 - 被网景公司（Netscape）和微软公司用来描述 4.x 代浏览器应当支持的新技术。

简单来说就是 HTML 、CSS 和 Javascript 结合的页面

A 选项：涉及到 Javascript 操作 DOM 和监听鼠标与键盘

B 选项：也是 Javascript 操作 DOM

D 选项：Javascript 操作 CSS 样式

十三、跨域文件

原题链接：https://www.nowcoder.com/questionTerminal/a75606a328364bf5b62056e9f4fb0061

以下关于跨域的描述哪些是正确的:

A. Web 字体、图片等资源文件加载都不受浏览器跨域限制

B. CSS 文件的加载不受跨域限制

C. window.onerror 方法默认情况下无法获取跨域脚本的报错详情

D. canvas 中使用 drawImage 贴图会受跨域限制

答案：BCD

---

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

可以在下列场景中使用跨站点 HTTP 请求：

• 由 XMLHttpRequest 或 Fetch APIs 发起的跨源 HTTP 请求。
• Web 字体 (CSS 中通过 @font-face 使用跨源字体资源)，因此，网站就可以发布 TrueType 字体资源，并只允许已授权网站进行跨站调用。
• WebGL 贴图
• 使用 drawImage 将 Images/video 画面绘制到 canvas。
• 来自图像的 CSS 图形

而 C 选项，如果想在同域 Javascript 文件——a.js 中获取到不同域 Javascript 文件—— b.js 的报错信息，b.js 需要加上 Access-Control-Allow-Origin:* 的 response header 以及在引用 b.js 文件时加上crossorigin属性

参考链接：https://www.jianshu.com/p/315ffe6797b8

十四、readonly和disabled的区别

原题链接：

以下对 form 表单中 input 元素的 readonly 与 disabled 属性描述正确的是？（ ）

A. Readonly为真时，脚本无法修改input的值

B. Disabled为真时，脚本无法修改input的值

C. Readonly为真时，input的值不会随着表单提交

D. isabled为真时，input的值不会随着表单提交

答案：D

解析：当文本框设置了 readonly 属性，文本框不会产生很大变化，只是点击了不能输入而已，依然能变成焦点，能随着表单提交

而设置了 disabled 属性，文本框就会变灰，不能变成焦点，也不能随表单提交

但设置了这两个属性，都可以通过 Javascript 来改变文本框的值

两个属性的区别

<input type="text" disabled />
<input type="text" readonly />

十五、设置垂直居中

原题链接：https://www.nowcoder.com/questionTerminal/fb55c230f85643e8ad4583362af794f1

假设HTML结构为 <parent><child>content</child></parent> 下列哪些做法可以实现child内容垂直居中？

A.
parent {
  display: table;
}
child {
  display: table-cell;
  vertical-align: middle;
}

B.
parent {
  display: flex;
  align-items: center;
}

C.
parent {
  position: relative;
}
child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

D.
parent:after {
  content: '';
  height: 100%;
  vertical-align: middle;
  width: 0;
}
child {
  display: inline-block;
  vertical-align: middle;
}

---

答案：D

解析：

• A 选项：table-cell 的布局没有使用过，背就行了
• B 选项：经典流式布局
• C 选项：使用定位来居中，先将元素的上边界与中心对齐 top: 50%; ，然后向上平移自己高度的一半 transform: translateY(-50%);
• D 选项：vertical-align 是与当前父元素里的基线比较，父元素的基线是行内元素的文字中心，一般不会改变，除非改变文字的 line-height 属性。

如果想要在父元素垂直居中，需要使用一个行内块元素来撑满整个父元素，然后再设置与基线中心对齐。例如上面使用的是父元素的伪元素，高度设置为 100%，垂直居中，但因为没有设置为 行内块元素 ，导致高度设置失败，所以没有效果。原理： 因为行内块元素已经撑满整个父元素，不能再移动，然后又要与基线对齐，所以就只能移动行内元素的位置来符合对齐基线。

最常用的是 A 、B 选项，需要牢记

十六、label的注意事项

原题链接：https://www.nowcoder.com/questionTerminal/02b4e97dff6e4d0887ec9db668a04e53

关于label元素，以下说法正确的有：

A. label元素可以使用for属性关联表单控件，也可以将表单控件放置在它的内部

B. 当使用for属性来关联label元素和表单控件时，label元素的for属性要和表单控件的ID一致

C. 如果label元素内嵌套一个a链接，则点击该a链接不会触发页面跳转

D. 一般会在 label 元素内部放置可交互的元素，比如 anchors 或 buttons

答案：D

解析：A 选项：label 的另一种用法，例如下面代码，不过一般不会这样用。

<label>
  用户名：
  <input type="text" name="userName">
</label>

<!-- 一般会这样用 -->
<label for="userName">用户名：</label>
<input type="text" id="userName" name="userName">

C 和 D 选项：两个选项是相对的，当在 label 内部放置可交互元素，比如 anchors（a 标签） 或者 buttons ，当点击后依然会 触发链接和按钮的功能，这样 label 所起作用的文字就变少了，所以尽量不要放可交互元素。参考链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label#%E4%BA%A4%E4%BA%92%E5%86%85%E5%AE%B9

十七、HTML5新特性

原题链接：https://www.nowcoder.com/questionTerminal/c47c76b206214ae281e874d97f4250aa

下面哪些特性不是HTML5新引入的特性：( )

A. audio和video支持

B. Canvas

C. AJAX

D. localStorage

E. ES6

F. WebSocket

答案: C E

• C 选项：Ajax即 Asynchronous Javascript And XML（异步 JavaScript 和 XML），在 2005年被 Jesse James Garrett提出。

使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象 XMLHttpRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

• E 选项：ES6 是 Javascript 的新标准，和 HTML 没多大关系。

HTML 5 新特性：

1. 语义化标签：新增 <header> 、<nav> 等标签，不要再大量使用 <div> 了

2. 增强型表单：<input> 类型增加了 date 、color 等，也增加了 placeholder 、pattern 当属性

3. 媒体元素：<audio> 和 <video>

4. Web Storage：分别是 localStorage 和 sessionStorage

5. Web Sockets ： 单独的持久连接上提供全双工、双向通信，可以用于聊天室功能

6. 地理位置

7. Canvas 画布

十八、CSS百分比参照

原题链接：https://www.nowcoder.com/questionTerminal/bde5f59a72c6494798cedd56c652f276

当 margin-top、padding-top 的值是百分比时，分别是如何计算的？

A. 相对父级元素的 height，相对自身的 height

B. 相对最近父级块级元素的 height，相对自身的 height

C. 相对父级元素的 width，相对自身的 width

D.相对最近父级块级元素的 width，相对最近父级块级元素的 width

答案：D

解析：

• 参照父元素宽度的元素：padding，margin，width，text-indent（ 块元素首行文本内容之前的缩进量 ）
• 参照父元素高度的元素：height
• 参照父元素属性：font-size line-height
• 参照自己的属性：transform: translateY(50%); 等

十九、影子DOM

原题链接：https://www.nowcoder.com/questionTerminal/00fab8fa2ad74bd69346bd82772df696

下列选项中哪些标签是HTML5新增的？

A. footer

B. content

C. section

D. header

答案：B

解析：content 已废弃，用于 Shadow DOM 内部作为 insertion point（插入点），现已被 <slot> 标签替换。

Shadow DOM：影子节点， 可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离。例如 <video> ，可以在开发者工具的设置中开启【显示用户代理 Shadow DOM】，就可以看到视频的进度条的实现代码，不开启的话整个视频标签就像是一个控件。有点像 Vue 中的组件。

具体使用参考：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM

（虽然和 Vue 中的虚拟 DOM 名字上有点相似，但完全不是一个东西）