【面试】前端面试之html篇

1.语义化标签有哪些？HTML5新特性有哪些？

语义化标签：h1-h6(标题标签)、li(无序列表)、ol(有序列表)、strong/em(强调)等
HTM5新特性：
1.语义化标签：header、footer、section、nav、aside、artical
①语义化更好的内容标签，有利于seo，有利于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重 ②语义化的html在没有css的情况下也能呈现较好的内容结构与代码结构
2.增强型表单：input的多个type(date、range、email、number、color、time等)
3.新增表单元素：datalist、keygen、output（用于不同类型的输出，比如计算或脚本输出）
4.新增表单属性：placehoder、required、min和max
5.音频视频：audio、video
6.画布canvas（元素用于图形的绘制，通过脚本 -通常是JavaScript来完成.）
7.地理定位
8.拖拽释放（Drap and drop）
9.数据存储
localStorage-没有时间限制的数据存储,存储大小20m多窗口都能使用； sessionStorage-针对一个session的数据存储，当用户关闭浏览器窗口后，数据会被删除
10.新事件：onresize、ondrage、onscroll、onmousewheel、onerror、onplay、onpause
11.WebSocket:单个TCP连接上进行全双工通讯的协议
支持html5新标签：
IE8/IE7/IE6支持通过document。createElement方法产生的标签
可以利用这一特性让这些浏览器支持html5的新标签
浏览器支持新标签后，还需添加标签的默认样式

2.说一些浏览器实现页面渲染的整个过程

1.在浏览器输入url
2.浏览器先查看浏览器缓存–系统缓存–路由器缓存，如果缓存中存在页面的内容，就会直接在屏幕当中显示
3.在发送http请求前，浏览器会开启一个线程来解析域名（DNS解析）,获取相应的IP地址
4.浏览器向服务器发起TCP连接，与服务器通过TCP三次握手建立连接
5.握手成功后，浏览器再向服务器发起http/https请求，请求数据包
6.服务器处理收到的请求，将数据返回给浏览器
7.浏览器收到http响应
8.解析html，构建dom树
9.解析css，生成css规则树
10.合并dom树和css规则树，生成render树
11.布局render树
12.绘制render树，即绘制页面像素信息
13.GPU将各层合成，结果呈现在浏览器的窗口当中

（简单记忆：dns -- tcp --http请求--服务器响应--渲染）
关于tcp握手不理解的话，可以看这位老哥的文章，写的简单易懂：
https://baijiahao.baidu.com/s?id=1614404084382122793&wfr=spider&for=pc

3.行内标签有哪些？块级标签有哪些？

行内标签：span、a、em(强调)、strong、u(下划线)、i(斜体)
行内块标签：img、input、textarea、
块级标签：div、h1-h6、ul、ol、li、hr、以及html5新增的 header、section、aside、footer

4.简述一下src与href的区别?

href是指向网络资源所在的位置，建立和当前元素（锚点）或当前文档（链接）之间的锚点，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置，在请求src资源的时候会将其指向的资源下载并应用到文档当中，例如js脚本，img图片，frame等元素。

当浏览器解析到该元素的时候，会暂停其他资源的下载和处理，直到该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内，这也是为什么将js脚本放在底部而不是头部。