HTML精选面试题

1.1 html的布局元素有哪些？描述每种布局元素的应用场景：

答：
内联元素:和其他行内元素从左到右在一行显示，不可直接控制宽高等css属性，可以直接设置内外边距的左右值。
代表：span,a,b,strong,i,em,br,inut,textarea
应用场景：用于不指定宽高，宽高由内容指定。

块状元素：独占一行，每一个元素都会从新的一行开始，从上到下排布。可以直接控制宽高等css属性。在不设置宽高的情况下，宽度是父级元素内容的宽度。高度是本身内容的高度。
代表：div，h1~h6，menu，ol，ul，li，dl，table，p，form
应用场景：用于指定宽高，标签占满一行。

内联块元素：不自动换行，能够设置宽高，line-height,padding,marign,默认排列从左到右。
应用场景：用于指定元素宽高，不占满一行。

1.2 b标签和strong的区别：

答：
b为了加粗而加粗，strong为了表明重点而加粗。
优点：利于seo搜索。

1.3 H5新增元素：

答：article（文章），aside（侧边），details（细节），figcaption（图片标题），figure（细节），footer（页脚），header（页眉），main（主程序），mark（标记），nav（导航），section（节），summary（摘要），time（时间）

1.4 如何语义化：

答：
使用页面不同位置的标签：header，nav，artive，section，footer，aside
尽可能少使用无语义的div和span
不要使用纯样式标签，如：b，font，u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中。
使用表格时，标题用caption，表头用thead，主体用tbody，表尾用tfoot，表头和一般单元格要区分开，表头用th，单元格用td
表单域用fieldset包裹，并用legend标签说明表单用途。
每个input标签对应的说明文本都需要用label标签。并且通过为input设置id属性，在lable标签中设置for=someId来让说明文本和相对应的input关联起来。

1.5 减少dom数量的办法，如何优化dom数量

答：
1，使用伪元素，阴影实现的内容尽量不适用dom实现，如清除浮动，样式实现等。
2，按需加载，减少不必要的渲染。
3，结构合理，语义化标签。
优化dom（减少重排和重绘）：
1，缓存dom对象。如循环遍历的时候就可以先将主节点，不必循环的dom节点先获取到。
2，利用document.createdocumentFragment()方法创建文档碎片节点。
3，用innerHTML代替appendChild
4，使用虚拟dom

1.6 a标签禁止默认事件后如何实现跳转

答：
使用location.href实现跳转
	let domArr = document.getElementsByTagName('a')
	[...domArr].forEach(item=>{
    	item.addEventListener('click',function () {
        location.href = this.href
    	})
	})

1.7 meta元素都有什么

答：
1，元数据：用来构建HTML文档的基本结构，
2，meta属性：
	charset：字符编码
	content：content，配合name或http-equiv使用，提供一个值。
	http-equiv：可用做http头部的某些作用，通过定义该属性可以改变服务器和用户代理得行为。
	name：用于定义页面的元数据。不能和http-equiv、charset共存。通常配合content使用

明天会更新相关css面试题。html相对来说简单点。所以少写一点点。