HTML5、CSS3面试题（二）
上一章:HTML5、CSS3面试题（一）
哪些是块级元素那些是行内元素，各有什么特点 ？（必会）
行内元素: a、span、b、img、strong、input、select、lable、em、button、textarea 、selecting
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote、form
行内、块级元素区别
1、块级元素会独占一行，其宽度自动填满其父元素宽度行内元素不会独占一行，相邻的行
内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
2、一般情况下，块级元素可以设置 width,height 属性，行内元素设置 width, height 无效
(注意：块级元素即使设置了宽度，仍然是独占一行的)
3、块级元素可以设置 margin 和 padding 行内元素的水平方向的
padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的
padding-top,padding-bottom,margin-top,margin-bottom 都不会产生边距效果。（水平方向有效，
竖直方向无效
CSS 中选择器的优先级以及 CSS 权重如何计算？（必会）
！Important>行内样式>ID 选择器>类选择器>标签>通配符>继承>浏览器默认属性
权重
CSS 权重是由四个数值决定，看一张图比较好解释：
第一等：内联样式，如：style="color:red;"，权值为 1000.（该方法会造成 css 难以管理，
所以不推荐使用）
第二等：ID 选择器，如：#header，权值为 0100
第三等：类、伪类、属性选择器如：.bar， 权值为 0010
第四等：标签、伪元素选择器，如：div ::first-line 权值为 0001
最后把这些值加起来，再就是当前元素的权重了
其他：
无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。
（ie6 支持上有些 bug）
通配符，子选择器，相邻选择器等。如*，>,+, 权值为 0000.
继承的样式没有权值
CSS 权重计算方式
计算选择符中的 ID 选择器的数量（=a）
计算选择符中类、属性和伪类选择器的数量（=b）
第 34 页 共 348 页
计算选择符中标签和伪元素选择器的数量（=c）
忽略全局选择器
在分别计算 a、b、c 的值后，按顺序连接 abc 三个数字组成一个新的数字，改值即为所计算的选
择符的权重。如果两个选择符的计算权重值相同，则采取“就近原则”。
示例：
div#app.child[name="appName"] /a=1,b=2,c=1 —>权重 = 1 + 100 + 10 +10 = 121/
12、CSS 选择器有哪些?哪些属性可以继承?（必会）
CSS 选择器：
1、id 选择器（ # myid）
2、类选择器（.myclassname）
3、标签选择器（div, h1, p）
4、相邻选择器（h1 + p）
5、子选择器（ul > li）
6、后代选择器（li a）
7、通配符选择器（ * ）
8、属性选择器（a[rel = "external"]）
9、伪类选择器（a:hover, li:nth-child）
继承问题：
可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;
HTML5 的离线存储怎么使用，工作原理是什么？（必会）
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用
户机器上的缓存文件
原理：
HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制(不是存储技术)，
通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之
后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
如何使用：
1、页面头部像下面一样加入一个 manifest 的属性；
2、在 cache.manifest 文件的编写离线存储的资源；
3、在离线状态时，操作 window.applicationCache 进行需求实现
说说你对语义化的理解？列举 5 个语义化的标签？（必 会）
1、去掉或样式丢失的时候能让页面呈现清晰的结构：HTML 本身是没有表现的，我们看到
例如<h1>是粗体，字体大小 2em，加粗；<strong>是加粗的，不要认为这是 HTML
的表现，这些其实 HTML 默认的 CSS 样式在起作用，所以去掉或样式丢失的时候能让
页面呈现清晰的结构不是语义化的 HTML 结构的优点，但是浏览器都有有默认样式，默
认样式的目的也是为了更好的表达 HTML 的语义，可以说浏览器的默认样式和语义化的 HTML 结
构是不可分割的
2、屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页
3、PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备
对 CSS 的支持较弱）
4、有利于 SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于
标签来确定上下文和各个关键字的权重
5、便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循 W3C 标
准的团队都遵循这个标准，可以减少差异化
常见的语义化标签
<header>元素描述了文档的头部区域标签定义导航链接的部分
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其
他部分
<article> 标签定义独立的内容
<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）
<footer> 元素描述了文档的底部区域
列举 5 个以上的 H5 事件？（必会）
H5 事件
onblur：当失去焦点时运行脚本
onchange：当元素改变时运行脚本
onclick：当单击鼠标时运行脚本
ondrop：当被拖动元素正在被拖放时运行脚本
onended：当媒体已抵达结尾时运行脚本
onerror：当在元素加载期间发生错误时运行脚本
onfocus：当获得焦点时运行脚本
oninput：当元素获得用户输入时运行脚本
onkeydown：当按下按键时运行脚本（还没松开时就触发）
onkeypress：当按下按键时运行脚本（还没松开时就触发）
onkeyup：当松开按键时运行脚本（松开时即触发）
onload：当加载时运行脚本
onmousedown： 当按下鼠标按钮时运行脚本
onmousemove：当鼠标指针移动时运行脚本
onmouseout：当鼠标指针移出元素时运行脚本
onmouseover：当鼠标指针移至元素之上时运行脚本
onmouseup：当松开鼠标按钮时运行脚本
CSS 单位中 px、em 和 rem 的区别？（必会）
1、px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一
个虚拟长度单位，是计算机系统的数字化图像长度单位
2、em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字
体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大
小，因此并不是一个固定的值
3、rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字
体大小时，仍然是相对大小，但相对的只是 HTML 根元素
4、区别：
IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem
相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通
过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐
层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem
原文地址：https://blog.csdn.net/lin85253788/article/details/136721101
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！