2021-05-25

HTML面试题总结2
1.属于HTML5标签语意化的元素有 (AD)
A.article、footer
B.block
C.section、banner
D.header、nav
解释：html5手册语义化标签：article、section、aside、hgroup、header、
footer、nav、time、mark、figure、figcaption、contextmenu+menu
2.下面有关html结构正确的有（ ABC ）
A.<ul><li></li></ul>
B.<ol><li></li></ol>
C.<dl><dt></dt><dd></dd></dl>
D.<table><tr></tr><td></td></table>
解释：<td>要嵌套在<tr>中
3.假设HTML结构为<parent><child>content</child></parent>下列哪些做法可以实现child内容垂直居中？( ABC )
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;
}

解释：A.display:table将parent变成表格，child设置display:table-cell，display:table-cell的功能是使子元素成为单元格表格，再设置vertical-align:middle可以使元素垂直居中。
B.align-items:center设置子元素在侧轴方向上对齐，侧轴就是column(从上到下)，主轴方向为row(从左到右)
C.父类元素设置相对定位，子元素为绝对定位，子元素据父类上方50%，是子元素的左上角(0,0)在父元素的(0,height*50%)的位置，而不是子元素的中心点在父元素的垂直中心点上，所以再用transform将子元素上移自身高度的50%。
D.设置伪元素。vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。父类和子类都设置了vertical-align:center，他们互相对齐了对方中间的位置。但是伪元素的display默认是inline，行内元素是无法设置宽高的。
4.HTML5 向后兼容旧浏览器吗 ？( A )
A.正确
B.错误
解释：HTML5被设计成尽可能向后兼容现有的web浏览器
5.向当前#list的最后元素之后添加100个新的li节点，合理的操作方式是？( D )

A.通过循环方式创建新的li节点，并依次添加到#list中
B.先将#list节点的display设置为none，通过循环方式创建新的li节点，并依次添加到#list中，最后再将#list节点的display设置为block
C.取出#list中现有的li节点的html，将它与新增的li节点对应的html代码拼接成字符串，一次性插入到#list中
D.创建Fragment，通过循环方式创建新的li节点，添加到Fragment中，最后再将Fragment添加到#list中
解释：A中会发生多次重绘和重排；B发生重绘和一次重排，但是设置display:none隐藏如果浏览器计算性能太差，插入100次要一段比较长的时间，视图就会出现卡顿影响用户体验，列表会消失一段时间；C和D都发生一次重排但是Fragment更安全。
6.有一个元素，需要在pc端显示而在手机端隐藏，需要使用的方法是？( B )
A.visible-xs-8 hidden-md
B.visible-md-8 hidden-xs
C.visible-md-8 hidden-sm
D.visible-sm-8 hidden-md
解释：xs:小于768px隐藏 sm:768px起隐藏 md:768px~991px隐藏
7.关于html的盒模型，下列说法正确的是？( C )
A.margin是内边距
B.padding是外边距
C.border是边框
D.border-radius是css3标准，因此IE并不支持border-radius属性
解释：IE9之后开始支持border-radius
8.对于border-radius，说法错误的是( B )
A.表示圆角边框
B.IE8支持良好
C.IE9支持良好
D.firefox支持良好
解释：与7题同理
9.页面导入样式文件时，对于使用link和@import说法错误的是 ( B )
A.link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS
B.页面被加载的时，link和@import引用的CSS都会等到页面被加载完再加载
C.import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题
D.link支持使用js控制DOM去改变样式，而@import不支持
解释：link会和页面一起加载，@import会等页面加载完之后再加载
10.下列说法错误的是( A )
A.设置display:none后的元素只会导致浏览器的重排而不会重绘
B.设置visibility:hidde后的元素只会导致浏览器重绘而不会重排
C.设置元素opacity:0之后，也可以触发点击事件
D.visibility:hidden的元素无法触发其点击事件
解释：display:none将元素隐藏且不占据空间，会导致重绘和重排
11.HTML 语言中，设置表格中文字与边框距离的标签是（ C ）
A.html<table boder=””>
B.html<table cellspacing=””>
C.html<table cellpadding=””>
D.html<table width=””>
12.在 HTML5 中，哪个方法用于获得用户的当前位置？( B )
A.getPosition()
B.getCurrentPosition()
C.getUserPosition()
13.对于<div id="myid" class="myclass">welcome to yonyou.</div>下面几种选择器，哪个优先级最高( C )
A.div
B…myclass
C.#myid
D.div.myclass
解释：ID：100 class为10(.myclass) 标签：1
14.在不改变元素的显示属性的情况下，元素都是可以设置宽度的，并且能够设置成功，这句话是否正确？( B )
A.正确
B.错误
15.根据以下代码，两个div元素垂直间距为()

<div style="width:100px; height:100px; margin-bottom:100px;"></div>
<div style="width:100px; height:100px; margin-top:200px;"></div>

A.100px
B.200px
C.300px
D.400px
解释：定义margin的上下外边距会发生塌陷，两个数都是正数取最大的，两个数都是负的取绝对值最大的，一个为正，一个为负，则margin为两个数加和。