一. 简述你对语义化的理解?
⒈用正确的标签做正确的事情
⒉HTML语义化让页面的内容结构化,结构更清晰,便于对浏览器,搜索引擎解析;
⒊及时在没有样式CSS情况下也以一种文档格式显示,并且时任意阅读的;
⒋搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;
⒌时阅读源代码的人对网站更容易将网站分块,便于阅读维护理解
二.元素的title属性和alt属性有什么区别?
1.试用范围,浏览器表现
alt是img标签的属性,当图片加载出错、无法显示图像时会显示的替代文本。IE7以下IE浏览器在鼠标滑过时会展示alt属性,IE8以后不会。
title属性适用于所有标签,规定关于元素的额外信息,通常会在鼠标移到元素上是显示一段提示文本,所有浏览器都支持。
2.对于网站seo优化
alt属性是搜索引擎唯一识别的图片信息,因此alt属性应与图片主题内容相关。
三.清除浮动的方式和他们各自的优缺点?
1.给父元素单独定义高度
优点:简单快速、代码少。
缺点:无法进行响应式布局。
2.在标签结尾处加空div标签
优点:简单快速、代码少,兼容性较高。
缺点:增加空标签,不利于页面优化。
3.父级定义overflow:hidden
优点:简单快速、代码少,兼容性较高。
缺点:超出部分被隐藏了,在布局的时候要注意。
4.父级定义class=“clearfix”,使用after伪类和zoom
.clearfix:after{content:"";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clearfix{zoom:1;}
优点:写法固定,没有多余结构,兼容性高。
缺点:代码多。
四.CSS选择器权重值如何计算?
计算规则
1.第一等:代表内联样式,如: style=””,权值为1000。
2.第二等:代表ID选择器,如:#content,权值为0100。
3.第三等:代表类,伪类和属性选择器,如.content,权值为0010。
4.第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
5.通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6.继承的样式没有权值。
比较规则
1.1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较,前一等级相等才往后比。
2.无论是行间、内部和外部样式,都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式;ID>class>元素。之所以有这样的错觉,是因为确实行间为第一等的权重,所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后,所以覆盖掉了之前的。
3.在权重相同的情况下,后面的样式会覆盖掉前面的样式。
4.通配符、子选择器、相邻选择器等的。虽然权值为0000,但是也比继承的样式优先。
!important
!important 的作用是提升优先级,换句话说。加了这句的样式的优先级是最高的(比内联样式的优先级还高)。