HTML篇

一. HTML和XHTML的区别

1. HTML是一种基于web网页设计的语言，XHTML是一种语法更为严格的标准语言。
2. HTML的语法不严格，XHTML的语法严格，标签必须小写，必须闭合，必须要有根元素。

二. 语义化的目的

在正确的位置使用正确的标签，便于代码的阅读和维护。

三. 锚点的作用

1. 作用：可以根据需求跳转到对应的位置，提高阅读效率。
2. 实现方式：name和id两种

   1. <a name='school'></a> <a href='#school'></a>
   2. <a id='school'></a> <a href='#school'></a>
   

四. 简述src和href的区别

1. 作用结果不同
   • src表示引入，一般用于img、script标签，用于替换当前内容。
   • href表示引用，一般用于link、a标签，用于在当前文档和引用文档之间建立联系。
2. 浏览器的解析方式不同
   • 当浏览器解析到href的时候，会将其识别为css文档，此时会并行加载不会停止对当前文档的处理。
   • 当浏览器检测到src的时候，会暂停对其它资源的加载，直到对当前资源加载、编译、执行完毕，并且替换到当前位置后才会加载剩下资源。

五. iframe的优缺点

1. 优点
   • 可以解决加载缓慢的第三方内容，如图片广告等
   • 可以实现安全沙漏
   • 可以并行加载脚本
2. 缺点
   • 会阻塞页面的onload事件
   • 即使里面的内容为空加载也需要时间
   • 元素没有语义

六. 常见的块级元素和行内元素以及它们之间的区别

1. 块级元素：div,p,h1-h6,ul,ol,table,th,tr,td等
2. 行内元素：span,a,img,input等
3. 区别：
   • 块级元素独占一行，可以自定义宽高。
   • 行内元素在一行显示，不可以设置宽高，高度由内容撑开。
   • 块级元素的margin-left、margin-right和padding-left、padding-right属性设置都是有效的。
   • 行内元素的margin-top、margin-bottom和padding-top、padding-bottom属性设置是无效的，但是必须注意的是，对于padding-top和padding-bottom的设置，从显示效果上来看是增加的，但其实设置是无效的，因为它们没有撑大盒子，并不会对周围的元素产生影响。
   • img是一个特例，它虽然是行内元素，但它的性质不同于行内元素。对于img设置padding和margin都是有效的。

七. h5新增特性

1. 结构标签：header,nav,footer,aside,article,section,figure
2. 媒体标签：audio,video
3. 表单控件：date,time,email,url,search,number
4. 其他控件：
   • canvas 用于绘制图形
   • process 进度条
   • mark 标记
   • manifest 用于缓存资源清单

八. 浅谈cookie、localStorage、sessionStorage的区别

1. cookie： cookie就是客户端保存用户信息的一种机制，用来记录用户的一些信息。存储少量的数据一般在4k左右，数据始终在请求中携带，是浏览器上的hash表，安全性不好，需要自己封装。

   • 封装：setcookie(‘键’,‘值’,‘有效时间’,‘路径’)
   • 获取：document.cookie
   • 修改：创建一个同名的cookie
   • 删除： 目前没有提供删除的操作，可以通过将Max-age设置为0，也就是立马失效达到删除的目的。浏览器关闭会失效，但是服务端可以设置过期时间。

2. localStorage：可以存储5M左右的数据，数据会一直存储在浏览器中，除非人为删除。是HTML5提供的API，本质上是浏览器上的hash表。 安全性较cookie高。

   • 存储：localStorage.setItem(key,value)
   • 获取：localStorage.getItem(key,value)
   • 删除：localStorage.removeItem(key,value)

3. sessionStorage：可以存储5M左右的数据，数据临时存储在浏览器中，当关闭浏览器的时候数据会被删除。本质上是服务器上的hash表。安全性较cookie高。

   • 存储：sessionStorage.setItem(key,value)
   • 获取：sessionStorage.getItem(key,value)
   • 删除：sessionStorage.removeItem(key,value)

九. 懒加载的好处

在用户需要的时候再进行加载，可以减轻服务器的压力，增强用户体验。

十. head标签

1. 说明：是网页的头部，一般用来声明所使用脚本文件，以及网页传输的时候所使用的方式。
2. 组成：
   • title：主题标签，也就是网页打开是上方显示的文字。
   • link：一般用于引入css文件
   • script：一般用于引入js文件
   • meta：网页描述和编码
   • style：书写css样式的地方
   • base：为页面上所有的链接规定一个默认的url

十一. 浏览器内核

1. 概念：是浏览器的核心部分，内核也成为渲染引擎
2. 五大浏览器：
   • 谷歌浏览器：以前是webkit现在是blink。
   • 火狐浏览器：gecko（读音：改口）
   • safari：webkit
   • IE：trident
   • 欧朋浏览器：blink