前端面试 —— HTML_html前端面试-CSDN博客

本文链接：https://blog.csdn.net/weixin_42186513/article/details/83782935

DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义?

告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。
标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。

行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素：a span img input select 
块级元素：div ul ol li dl dt dd h1 p
空元素：<br> <hr> <link> <meta>

块级元素和行内元素的区别: 
    1 . 块级元素独占一行，块级元素内可嵌套部分块级元素, 而行内元素不能嵌套块级元素
    2 . 块级可设置 margin 、padding 元素，但是行内元素只有 margin-left、margin-right 和 padding-left、padding-right 有效
    3 . 块级 display: block，行内 display: inline

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

相同的地方，都是外部引用CSS方式，区别：
1 . link 是html方式，@import 是css方式
2 . link引用CSS时候，页面载入时同时加载；@import需要在页面完全加载以后加载，而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载
3 . link是xhtml标签，无兼容问题；@import是在css2.1提出来的，低版本的浏览器不支持
4 . link支持使用javascript控制去改变样式，而@import不支持
5 . link方式的样式的权重高于@import的权重

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

在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。

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

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

简述一下你对HTML语义化的理解？

去掉或丢失样式的时候能够让页面呈现出清晰的结构。
有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
方便其它设备解析。
便于团队开发和维护，语义化更具有可读性。

HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5

新增元素：

canvas
用于媒介回放的video和audio元素
本地离线存储。
语意化更好的内容元素，比如 article footer header nav section
位置API：Geolocation
表单控件，calendar date time email url search
新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket
拖放API：drag、drop

移除的元素：

纯表现的元素：basefont big center font s strike tt u
性能较差元素：frame frameset noframes

兼容性问题：

实现标签被识别
通过document.createElement（tagName）方法即可让浏览器识别新标签，浏览器支持新标签后，还可以为新标签添加CSS样式。
JavaScript解决方案

//在<head>中调用以下代码：

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

区分：

DOCTYPE声明的方式是区分重要因素
根据新增加的结构、功能来区分

cookies，sessionStorage和localStorage的区别？

共同点：都是保存在浏览器端，且是同源的。

区别：

cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。
存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。
数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享