每日面试题（HTML+CSS）（二）

每日面试题（HTML+CSS）

★ 1. 简述title与h1的区别，b与strong的区别，i与em的区别。

1. title和h1的区别

(1) 从网站角度看，title 更重于网站信息。title可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的。

(2) 从文章角度看，h1则是用于概括文章主题。

(3) 一个网站可以有多个title,最好一个单页用一个title，以便突出网站页面主体信息，从seo看，title权重比h1高，适用性比h1广。

(4) 标记了h1的文字页面给予的权重会比页面内其他权重高很多。一个好的网站是h1和title并存，既突出h1文章主题，又突出网站主题和关键字。达到双重优化网站的效果。

2. b和strong的区别

(1) b 是只是对文本的简单加粗， strong 是一个语义化标签，对相关文本具有强调作用

(2) b 标签只是侧重于字体加粗， strong标签加强字体的语气都是通过粗体来实现的，相比之下，搜索引擎更喜欢侧重于strong标签

(3) strong标签更注重于内容上的应用，在html中，对关键词的标明，然而还有一些网站上，也有使用strong标签登对小标题进行强调，但是在页面中，如果出现过多的strong标签，可能会对排名不利。

3. i和em的区别

(1) i 是实体标签，用来使字符倾斜，em(emphasis)是逻辑标签，作用是强调文本内容

(2) i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语

(3) em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式。

建议：为了符合CSS3的规范，i 标签应尽量少用而应改用 em

★ 2. 什么是标准文档流

标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。当前面内容发生了变化，后面的内容位置也会随着发生变化。

★ 3. z-index是什么？在position的值什么时候可以触发?

1. z-index : 指的是一个元素在当前文档页面定位时重叠层显示的层级等级，默认为0 ，数值不限，越大显示层级越高

2. 触发机制：当position的值设置为absolute、relative和fixed时才能触发

★★ 4. CSS3 如何实现圆角？

1. border-radius属性

(1) 四个值: 左上角，右上角，右下角，左下角。

(2) 三个值: 左上角, 右上角和左下角，右下角

(3) 两个值: 左上角与右下角，右上角与左下角

(4) 一个值： 四个圆角值相同

★★ 5. HTML5有哪些缓存方式？

1. localstorage缓存，将数据储存在本地客户端，只有用户手动清除才能清除缓存

(1) localstorage.setItem(key,value)，键值对的形式缓存

(2) localstorage.getItem(key)，根据键名来获取缓存值

(3) localstorage.length ，获取总缓存数量

2. sessionStorage 会话缓存，会话机制是指从打开浏览器开始访问页面的时候，到关闭这个页面的过程成为一个会话，sessionStorege储存的数据会随着页面关闭而销毁

(1) sessionStorage.setItem(key,val)，键值对的形式创建

(2) sessionStorage.getItem(key)，根据键名来获取缓存的值

(3) sessionStorage.length；获取总共缓存值得数量

3. 离线缓存机制(Application Cache)

(1) 配置manifest文件，manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）

(2) manifest 文件可分为三个部分：

1、CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

2、NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

3、FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

(3) 浏览器通过window.applicationCache对象来及其相应属性、接口、事件供用户构建离线应用。这个对象有一个status属性，属性的值时常量，表示应用缓存的当前状态。

1、（IDLE） : 闲置，即应用缓存未得到更新

2、（CHECKING） : 检查中，即正在下载描述文件并检查更新

3、（DOWNLOADING） : 下载中，即应用缓存正在下载描述文件中指定的资源

4、（UPDATEREADY） : 更新完成，所有资源都已下载完毕

5、（IDLE） : 废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存

4. IndexDB

(1) 索引数据库 (IndexedDB) API（作为 HTML5 的一部分）对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。同时它还有助于本地缓存数据，使传统在线 Web 应用程序（比如移动 Web 应用程序）能够更快地运行和响应。

★★ 6. CSS3新增伪类有那些？

1. :link 选择所有未访问的链接

2. :visited 选择所有访问过的链接

3. :active 选择正在活动的链接（或理解为鼠标点击瞬间效果）

4. :hover 鼠标放到链接后的状态

5. :focus 选择元素输入后具有焦点

6. :before 在元素之前插入内容

7. :after 在元素之后插入内容

★ 7. 简述一下src与href的区别，title和alt的区别

1. src和href的区别

(1) href：href表示超文本引用，用来建立当前元素和文档之间的链接，常用在link和a等元素上。

注：当浏览器解析到这一句时会识别该文档为css文件，会下载并不会停止对当前文档的处理，所以建议使用link方式而不是@import加载css。

(2) src：src表示引用资源，替换当前元素，是页面内容不可缺少的一部分，常用在img，script，iframe上。src指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；请求src资源时会将其指向的资源下载并应用到当前文档中,例如js脚本、img图片等。src链接内的地址不会有跨域问题

注：当浏览器解析到这一句时会暂停其他资源的下载和处理，直至将该资源加载、编译、执行完毕。这也是js脚本放在底部而不是头部的问题

2. title和alt的区别

(1) title：

1、title属性是为元素提供额外的注释信息，当鼠标放在元素上时会有title文字显示，以达到补充说明或提示。

2、title属性更倾向于用户体验的考虑。

3、title既可以是元素的属性也可以是标签，作为属性可以用在除base,basefont,head,html,meta,param,script和title之外的任何标签上（title常与form以及a标签一同使用，以提供关于输入格式和链接目标的信息），title与style、id、class等一起作为HTML中许多标签共用的标准属性。

(2) alt：

1、 alt属性是在你的图片无法显示时的替代文本，它会直接输出在原本加载图片的地方。

2、alt属性有利于SEO，是搜索引擎搜录时判断图片与文字是否相关的重要依据。

3、alt只能是元素的属性，只能用在img、area和input标签中（img,area中alt必须指定）。

注：当a标签内嵌套img标签时，起作用的是img的title属性。