HTML5&CSS3重点知识点总结

504 阅读9分钟

1.如何理解语义化

标签的命名有一定直观上的含义,能直接看出可能的作用

优点:

1. 当页面加载失败时也能过呈现出清晰的结构

2. 有利于SEO(让搜索结果排名靠前)优化,有利于被搜索引擎收录

3. 在项目的开发和维护时有利于降低开发难度和节省成本

2.页面呈递流程、回流和重绘

1. 页面的呈递流程

(1)首先浏览器会将获取到的HTML代码解析为一个dom树,HTML中的每一个标签都是dom树中的节点

(2)浏览器会将所有样式解析为样式结构体

(3)dom树和样式结构体结合后构建呈现树(render tree),其中的每个节点成为box(Box dimensions)

(4)当render tree构建完毕后,浏览器会根据它绘制对应的页面

2. 回流

当render tree中的内容因为元素的尺寸,布局,显示等该改变需要重新构建时会产生回流(页面元素的改变影响了布局)。每个页面至少存在一次回流,页面第一次加载的时候。

3. 重绘

当render tree中的一些元素需要重新更新属性,而这些属性只是影响元素的外观,风格(例如color)不会影响到布局称为重绘。 回流必有重绘,重绘不一点有回流。

3.link和import的区别

1. 本质区别:link属于xhtml标签,@import属于css提供的一种方式

2. 引用类型区别:link可以引入css/js等外部文件,import只能引入CSS文件

3. 加载顺序区别:link引入的css会和页面一起加载,@import引入的css等到页面加载完毕才会加载

4. 兼容性区别:link是xhtml标签几乎没有兼容性问题,@import属于css2.1提出的,IE5一下不能识别

4.px和em的区别

相同点:都是长度单位

不同点:px是像素单位,是绝对单位,不会因为其他元素的尺寸改变而变化。em是相对于其父元素的字体大小决定的,是相对单位。

5.清除浮动的方法

1. 给父级元素定义高度或者添加样式:overflow:hidden

2. 在末尾添加一个空元素,并添加样式:clear:both

3. 给父级元素定义伪类

.clearfloat:after{display:block;
                    clear:both;
                    content:"";
                    visibility:hidden;
                    height:0}
.clearfloat{zoom:1}//zoom属性是IE浏览器的专有属性,可以设置或检索对象的缩放比例

6.什么是优雅降级和渐进增强

1. 渐进增强 progressive enhancement

针对低版本浏览器构建也页面,保证最基本的功能,然后再针对高版本浏览器进行效果、交互等改进和追求功能达到更好的用户体验。

2. 优雅降级graceful degrafation

一开始构建完整的功能,再针对低版本浏览器进行兼容

区别:

优雅降级是从复杂的现状开始,并试图减少用户体验的供给(往后看)。渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断拓充,以适应未来环境的需要(往前看)。

7.display:none和visibility:hidden区别

1. display:none:销毁了对应的dom元素,因此脱离了文档流,浏览器不会解析该元素。visibility:hidden是视觉上的消失,可以理解为透明度为零,在文档流中占位,浏览器会解析。

2. 使用visibility:hidden比display:none性能上更好。display:none切换时也页面回产生回流。而visibility:hidden不会。

8.relative、absolute、fixed和sticky的区别

1. relative:相对定位,相对于自身的定位,没有脱离标准流,一般是配合absolute使用(子绝父相)

2. absolute:绝对定位,相对于离自己最近的带有定位的父元素的定位,脱离了标准流

3. fixed:固定定位,相对于浏览器视口的定位,不会随着页面的滚动而滚动。

4.sticky:粘性定位,跟前面几个属性值都不一样,它会产生动态效果,很像 relative 和 fixed 的结合:一些时候是 relative 定位(定位基点是自身默认位置),另一些时候自动变成 fixed 定位(定位基点是视口比如型表格滚动的时候,表头始终固定。sticky 生效的前提是,必须搭配 top、bottom、left、right 这四个属性一起使用,不能省略,否则等同于 relative 定位,不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离",浏览器把它当作 sticky 的生效门槛

9.块级元素和行内元素举例

1. display:block/table:divph1-h6uloldlliheaderfooterasidesectionarticleformtable

2. display:inline:abbremispanstrongsmallcodeqsubsup

3. display:inline-block:buttonimginputselecttextarea

10.css盒模型

1. 标准盒模型:width = content

2. IE盒模型:(box-sizing:border-box )width = border + padding + content

11.HTML5新特性

1. 语义化标签

  • 定义了文档的头部区域
  • <footer></footer>定义了文档的尾部区域

  • <nav></nav>定义文档的导航

  • <section></section>定义文档中的节(section、区段)

  • <article></article>定义页面独立的内容区域

  • <aside></aside>定义页面的侧边栏内容

  • <detailes></detailes>用于描述文档或文档某个部分的细节

  • <summary></summary>标签包含 details 元素的标题

  • <dialog></dialog>定义对话框,比如提示框

2. 增强型表单

新增input的输入类型

  •  color:主要用于选取颜色

  • date:从一个日期选择器选择一个日期

  • datetime:选择一个日期(UTC 时间)

  • datetime-local:选择一个日期和时间 (无时区)

  • datetime-local:选择一个日期和时间 (无时区)

  • email:包含 e-mail 地址的输入域

  • month:选择一个月份

  • number:数值的输入域

  • range:一定范围内数字值的输入域

  • search:用于搜索域

  • tel:定义输入电话号码字段

  • time:选择一个时间

  • url:URL 地址的输入域

  • week:选择周和年

3. 新增表单属性

  • placehoder 属性,简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,在用户输入后消失。
  • required 属性,是一个 boolean 属性。要求填写的输入域不能为空
  • pattern 属性,描述了一个正则表达式用于验证 元素的值。
  • min 和 max 属性,设置元素最小值与最大值。
  • step 属性,为输入域规定合法的数字间隔。
  • height 和 width 属性,用于 image 类型的 标签的图像高度和宽度。
  • autofocus 属性,是一个 boolean 属性。规定在页面加载时,域自动地获得焦点。
  • multiple 属性 ,是一个 boolean 属性。规定 元素中可选择多个值。

4. 新增视频和音频标签

5. canvas、SVG绘图

6.地理定位

7.拖放API

8.web worker (HTML5提供的一种多线程方案)

9.webStorage

10.webSocket(HTML5提供的一种在单个TCP连接上进行的全双工通讯的协议)

12.CSS3新特性

1. 动画属性

@keyframes/animation

2. 边框属性

border-image/border-radius/border-shadow

3. 颜色属性

opacity

4.弹性盒子模型

flex/align-content/align-item/align-self/justify-content/order……

5. 过渡和动画

(1)2D/3D转化

transform/translate/scale/rotate/translate3d/skew

(2)过渡

transition

13.BFC理解和应用

1. 概念

Block format content ,块级格式化上下文,是一块独立渲染的区域,内部元素的渲染不会影响边界以外的元素。

2. 应用

(1)伪元素清除浮动

(2) 解决父元素高度塌陷,外边距重叠

3. 如何产生

(1)跟元素

(2)float属性(不为none)

(3)display属性(为inline-block,table-cell,fiex,inline-flex)

(4)position属性(不为static,relative)

(5)overflow属性(不为visible)

14.居中对齐的方式有哪些

水平居中

(1)Inline元素:text-align:center

(2)block元素:margin:0 auto

(3)absolute:(left:50%+margin-left:-50%)

(4)translateX

(5)flex:(display:flex;justify-content:center)

垂直居中

(1)inline元素:height:line-height

(2)absolute:(top:50%+margin-top:-50%)

(3)translateY

(4)flex:(display:flex;flex-direction:column;justify-content:center)

15.css选择器

优先级:!important > 内联 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器

伪类选择器(伪类 表示元素的一种特殊状态)

  • :active 向被激活的元素添加样式
  • :focus 向拥有键盘输入焦点的元素添加样式
  • :hover 当鼠标悬浮在元素上方时,向元素添加样式
  • :link 向未被访问的链接添加样式
  • :visited 向已被访问的链接添加样式。(隐私问题只能设置颜色)
  • :first-child 向元素的第一个子元素添加样式
  • :lang 向带有指定 lang 属性的元素添加样式
  • ::selection 匹配被用户选中或处于高亮状态的部分

伪元素选择器(表示元素中一些特殊的位置,不会出现在dom中)

  • :first-letter 向文本的第一个字母添加特殊样式。
  • :first-line 向文本的首行添加特殊样式。
  • :before 在元素之前添加内容。
  • :after 在元素之后添加内容

16.style写在body前后的区别

1. 写在body前

有利于浏览器逐步渲染

2. 写在body后

由于浏览器以逐行的方式对HTML文档进行解析,当解析到尾部的样式时会导致浏览器停止之前的渲染,等待加载且解析样式表完成后再重新渲染

17.DIV+CSS布局和table布局区别

table布局

缺点:

1. 显示样式和数据绑定在一起

2.布局不够灵活

3. 一个页面可能会有大量的table元素,代码冗余度高

4. 不利于被搜索引擎收录

优点:

1. 理解比较简单

2. 不同的浏览器看到的效果一般相同

DIV+CSS布局

优点:

1. 符合w3c标准

2. 搜索引擎更加友好

3. 样式调整方便,内容和样式分离

4. css样式代码简洁,对于一个大型网站来说可以节省大量带宽

18.如何画一条0.5px的线

1. 采用meta viewport 的方式

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

**只针对移动端

2. 采用transform:scale()的方式

transform: scale(0.5,0.5);