引言

近期整理了HTML5+CSS3知识体系，30个知识点由浅入深，建议收藏，如有问题，欢迎指正。

1. `<!DOCTYPE html>` 作用

文档对象声明，告诉浏览器使用标准模式 解析页面。放在页面最顶部，并且前面不要有其他字符（注释、空白、大小写混用生效）

标准模式和怪异模式（可通过 document.compatMode 获取），比如盒模型，ie盒模型怪异模式，还有标准模式。

标准模式：默认模式，浏览器使用最高标准解析页面
怪异模式：浏览器使用相对宽松的标准解析页面

2. 如何理解语义化标签

简单来说就是两点：合适的位置放合适的标签。以前后台开发人员都用table布局，美工用div+css布局，专业的前端用正确的标签。

常见的语义化标签

html 复制代码

<header></header>  头部
<nav></nav>  导航栏
<section></section>  区块（有语义化的div）
<main></main>  主要区域
<article></article>  主要内容
<aside></aside>  侧边栏
<footer></footer>  底部

语义化标签好处

利于搜索引擎抓取
代码的结构更清晰，利于团队开发，维护。

原则

h1标签只有一个给logo,h2不能最多三个,h3一般是大标题
strong和em相比较b和i权重更高
Img要有alt标签

3. HTML5有哪些新特性

狭义： html的第五个版本，广义：新的web技术集。H5非专业叫法，现在基本上是指移动端web开发，手机页面、微信小程序、微信页面。

新特性：

语义化标签
表单元素

text 复制代码

表单类型：
    email ：能够验证当前输入的邮箱地址是否合法
    url ： 验证URL
    number ： 只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。
    search ： 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
    range ： 可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值
    color ： 提供了一个颜色拾取器
    time ： 时分秒
    data ： 日期选择年月日
    datatime ： 时间和日期(目前只有Safari支持)
    datatime-local ：日期时间控件
    week ：周控件
    month：月控件

表单属性：
    placeholder ：提示信息
    autofocus ：自动获取焦点
    autocomplete="on" 或者 autocomplete="off" 使用这个属性需要有两个前提：
        -   表单必须提交过
        -   必须有name属性。
    required：要求输入框不能为空，必须有值才能够提交。
    pattern=" " 里面写入想要的正则模式，例如手机号patte="^(+86)?\d{10}$"
    multiple：可以选择多个文件或者多个邮箱
    form=" form表单的ID"

表单事件：
    oninput 每当input里的输入框内容发生变化都会触发此事件。
    oninvalid 当验证不通过时触发此事件。

多媒体、音视频

js 复制代码

<audio src='' controls autoplay loop='true'></audio>
<video src='' poster='imgs/aa.jpg' controls></video>

本地存储

indexDB、localStorage、sessionStorage

2D/3D绘图

canvans、webGL、SVG

性能 web Workers
通信技术 web Sockets
设备访问

camera API、触控、定位、设备方向

样式

阴影、边框、动画、过渡、变形、flex、动画

选择器

交集、结构伪类、状态伪类、伪元素

4. href和src区别

二者都用于请求资源，ref：超文本引用，用在a和link元素上，src：引用外部资源，用在img、script标签上。

5. defer和async区别

Defer 延迟的意思，async异步的问题
Defer和async是异步加载JS文件，不会阻塞页面解析
日常使用建议defer，或者将script写在body最后

6. link 和@import 区别

二者都是外部引用css的方式，

link

js 复制代码

<link href="xxx.css" rel="stylesheet" type="text/css" />

@import

js 复制代码

<style type="text/css">   @import url("xxx.css") </style>

主要区别:

Link是html标签提供，@import是css语法提供
Link是在页面时加载 ，@import引用的CSS是在页面加载完成后才会加载
Link不存在浏览器兼容性问题，@import只有在ie5以上才可以被识别
Link引入样式的权重大于@import的引用 -@import引用的样式不能通过JS控制DOM去改变

导入外部样式，一般使用Link，并写在header中，让浏览器尽早的发送请求获取css样式

7. head 标签有什么作用，有哪些？

标签用于定义文档的头部
包括：文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等
常见的head标签属性：<meta> <title> <link> <style> <script>

8. 常用的meta标签有哪些

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性。

常用的meta标签

charset，用来描述HTML文档的编码类型：

html 复制代码

<meta charset="UTF-8" >

keywords，页面关键词：

html 复制代码

<meta name="keywords" content="关键词" />

description，页面描述：

html 复制代码

<meta name="description" content="页面描述内容" />

viewport，适配移动端，可以控制视口的大小和比例：

html 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

其中，content 参数有以下几种：

width viewport ：宽度(数值/device-width)
height viewport ：高度(数值/device-height)
initial-scale ：初始缩放比例
maximum-scale ：最大缩放比例
minimum-scale ：最小缩放比例
user-scalable ：是否允许用户缩放(yes/no）

9 margin 和 padding 的使用场景

margin:设置元素与元素之间的距离
padding 设置元素与内容之间的距离

10. 对盒模型的理解

盒子模型有两种

第一种：W3C标准盒模型（对应的属性是content-box），盒子的width是content

第二种：怪异盒模型/老版本IE盒模型（对应的属性是border-box），盒子的width是padding+border+content，border和padding是包含在width里面的，content里面的值会自动调整，内容内减。

IE5-采用IE盒模型，IE6 、7 的标准模式放弃了IE 盒模型，转为使用W3C 盒模型，IE8+借助box-sizing，又重新提供了对IE盒模型的支持

什么时候会用到 border-box

盒子本身是背景是一张图片，且图片有自身宽度，当设置盒子的padding时，盒子的尺寸会变大，设置border-box，可以避免这个问题。

11. CSS选择器权重

伪类、属性选择器：10
伪元素选择器，本质是标签，权重1

12. 可继承性的属性有哪些

字体相关属性

css 复制代码

font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格

文本相关属性

css 复制代码

text-align：文本水平对齐
line-height：行高
text-indent：文本缩进
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
color：文本颜色

列表布局属性

css 复制代码

list-style：列表风格

光标属性

css 复制代码

cursor：光标显示为何种形态

元素可见性

css 复制代码

visibility：控制元素显示隐藏

13. 对line-height属性的理解

指的是文本行 到基线的距离。
基线：基线是指英文字母的下端沿，不是汉字的下端沿。

如果一个标签没有设置 height 属性，那么其最终的高度由 line-height 决定。

14. 对vertical-align属性理解

只针对行内元素、行内块、 table-cell 元素，包括span 、img 、input 、button 、td

vertical-align的值：

线类：baseline（基线）、top（父元素最顶端）、middle（中线）、bottom（父元素最底端）
文本类：text-top （不受行高以及周边其他元素的影响，图片上有空隙）、text-bottom（不受行高以及周边其他元素的影响，图片上有空隙）
上标下标类：sub、super
数值百分比类：2px、2em、2%等（对于基线往上或往下偏移，-往下，+往上）

15. 什么是外边距合并，如何解决

有两种情况

垂直排列块级元素

解决方案：将两个盒子放在不同的BFC 里

嵌套关系块级元素（只存在第一个元素中），设置里面元素margin-top

解决方案：

父元素设置overflow:hidden
父元素定义1像素的上边框和内边距

16. 对BFC的理解，如何创建

FC是什么：布局规则，在这个布局规则中子元素都要按照特定的规则进行排列。

常见的格式化上下文有：

BFC（块级格式化上下文）
IFC（内联格式化上下文）
FFC（Flex格式化上下文）
GFC（Grid格式化上下文）

BFC是什么：全称为：块级格式化上下文，是一个外部独立渲染的区域。是一种环境，作用就是隔离保护，里面的元素通过BFC布局，不会对外面的元素产生影响。

如何触发BFC

float为left、right
position为absolute、fixed
overflow不为visible (hidden、auto、scroll)
display 为flex，line-block，table-cell，table-caption
html根元素

BFC特性

内部的 Box 会在垂直方向上一个接一个的放置。
垂直方向上的距离由 margin 决定
bfc 的区域不会与 float 的元素区域重叠。
计算 bfc 的高度时，浮动元素也参与计算

BFC应用场景

解决外边距合并塌陷问题
清除元素浮动
左侧固定右侧自适应（普通流体BFC后，和浮动元素不会产生交集，顺着浮动元素形成自己的封闭上下文）

17. 清除浮动方式

1. 伪元素

一般是给浮动元素父级加.clearFix类名，clearfix::after

2. 类似的双伪元素

clearfix::before + clearfix::after

3. 父盒子overflow：hidden

弊端：里面的内容或者元素超出父元素就会隐藏

4. 浮动元素末尾加一个空标签

弊端：增加结构负担，代码冗余

当：父盒子本身有高度和父盒子本身有float属性不需要清除

clear属性清除浮动的原理是什么？

设置元素禁止浮动元素出现在它的左侧、右侧甚至是双侧。

为什么要清除浮动？

父级元素不设置高度时靠子元素撑大，子元素有多高，父元素就有多高，子元素浮动，浮动元素不占位置脱离标准流，父亲没有高度，后面元素跑上来。清除浮动本质：闭合浮动，主要是解决父级元素因为子集元素浮动，引起的内部高度为0的问题。

18. 定位方式有几种

1. absolute 脱标

默认参考点初始包含块，（是浏览器厂商提供，与视口等高等宽 的透明矩形 但不是视口可以理解为浏览器第一屏四个角）
如果有父级元素，就是离自己最近的设置绝对定位、相对、固定定位的父元素，可以是子绝父相、子绝父绝、子绝父固，一般是子绝父相

2. relative 不脱标

参考点自身位置多是结合浮动调整浮动父盒子溢出一二像素

3 .fixed 脱标

参考点永远是浏览器窗口比如说固定导航栏、底部弹层

4. sticky

默认和relative一样，当页面滚动超出目标区域时，就会表现出fixed，
需要设置top，bottom，left或者right四个阀值之一，粘性定位生效

19. 元素的层叠顺序

定位层级是由父元素决定的，层级相同，后写的父元素连同子元素会压在先写的元素以及子元素上面。
当父元素不设置层级时，子元素的高低将决定自身是否压倒其他元素和子元素。

20. z-index什么情况下会失效

父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
子元素设置了float浮动。解决：float去除，改为display：inline-block；

21. 隐藏元素方式有哪些

ispaly：none 不占位，彻底消失
visibility:hidden 占位，视觉上的消失
opacity：0 占位，视觉上的消失
height/width/border=0/padding/margin,如果有子元素,+overflow:hidden属性

22. 水平垂直居中的实现方式有哪些

子元素宽高已知：

margin：0 auto
绝对定位+负margin：子元素先走父盒子宽度50%，再往回走自身一半
绝对定位+margin:auto 子元素各个方向距离设为0 ，再将margin设为auto

子元素宽高未知（可以用上面的方法）：

绝对定位+transform:translateX(-50%) 子先走父盒子宽度50%，再往回走自身一半
flex

css 复制代码

水平居中：父元素display: flex+justify-content: center
垂直居中：父元素display: flex+align-items: center

css-table

css 复制代码

水平居中：父元素text-align:center + 子元素display:block
垂直居中：父元素display:table-cell+vertical-align: middle

23. 如何画一个三角形，画扇形

画三角

宽高0，border:30px solid 透明
border-bottom:30px solid 加颜色

需要哪个朝向的三角形，就将哪个方向的border-right的颜色transparent改 red

画扇形

和画三角形思路类似，加一个圆角样式，圆角宽度为边框的宽度

24. 画一条0.5px的线

采用transform: scale()的方式，该方法用来定义元素的2D 缩放转换：

css 复制代码

transform: scale(0.5,0.5);

25. 设置小于12px的字体

在谷歌下css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。

解决办法：

使用css3的transform缩放属性

css 复制代码

-webkit-transform:scale(0.5);

注意收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素。

26. CSS动画怎么使用

先定义动画

css 复制代码

@keyframes moveLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100px);
    }
 }

@keyframes rotate {
    0%{transform: rotate(0deg);}
    50%{transform: rotate(180deg);}
    100%{transform: rotate(360deg);}
}

调用动画

animation:动画名称动画时长速度曲线延时时间

27. 对flex布局的理解

css3新增，webapp，混合app，小程序常用布局方式

1 、四个核心概念

弹性空间、弹性元素，也就是父元素弹性元素，弹性项，也就是子元素 容器中默认的两条轴，主轴从左向右，横向排列，侧轴从上向下，竖向排列。

父元素属性

父元素首先要开启弹性空间

css 复制代码

.container {
    display: flex | inline-flex;
}

主轴方向 flex-direction

row 水平排列，相当于左浮动
row-reverse 水平逆序排列，相当于右浮动
column 垂直排列
column-reverse 垂直逆序排列

主轴对齐方式 justify-content

space-around 空间包含元素，两边窄一点
space-evenly 空间包含元素，平均分配
space-between 两端对齐

侧轴对齐方式 aligin-items

flex-start 居开始
flex-end 居结束
center 居中

是否换行 flex-warp

侧轴多行对齐方式align-content（发生换行，侧轴不止一行，主轴方向上多个轴）

子元素属性

flex-grow

grow 生长拉伸的意思子项放大比例，子元素宽度未占满， 定义子元素瓜分剩余空间比例。

width:100 flex-grow:1
width:150 flex-grow:2
width:100 flex-grow:3 瓜分剩余空间最多

flex-shrink

压缩的意思，子元素缩小比例，子元素宽度超过父元素， 定义子元素压缩比例

width:300 flex-shrink：1
width:150 flex-shrink：2
width:200 flex-shrink：3 压缩的越多超出的宽度/压缩的总份数=每份压缩值

flex-basis

项目占据主轴空间 ，默认auto元素大小

order

设置子元素顺序，越小越前，默认是0，可以为负值

align-self

设置子元素对齐方式，可覆盖align-items

css 复制代码

.item{
  align-self:auto | **flex-start | flex-end | center** | baseline | stretch
}

Flex 1的默认值

flex-grow、shrink、basis默认值为1，1，auto
flex1：flex-grow flex-shrink flex-basis (1 1 auto)
flex:1 相当于一个快捷值，子元素会自动放大与缩小

28. flex实现九宫格

利用calc函数，可以写表达式计算

calc(calc(100%/3) -10px)

css 复制代码

<style>
    {
        padding:0;
        margin:0;
    }
    .father {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        /*换行*/
    }
    .item {
        // 利用css cale函数，里面可以写表达式，可以计算 
        width: calc(calc(100% / 3) - 10px);
        margin: 5px;
        height: 200px;
        background:aqua;
    }
</style>

29. flex实现align-self

利用：

flex-directon:colum

align-self:flex-end

css 复制代码

*{
    padding:0;
    margin:0;
}
.father {
    display: flex;
    flex-direction: column;
    height:300px;
    background:antiquewhite
    /*换行*/
}
.item {
    width: 200px;
    height: 100px;
    margin: 5px;
    background:aqua;
    &:nth-of-type(2){
        align-self: center;
    }
    &:nth-of-type(3){
        align-self:flex-end;
    }
}

30. 常见的 CSS 布局单位

em：相对于父元素
rem：相对于html根元素
vw：相对于视窗的宽度，视窗宽度是 100vw
vh：相对于视窗的高度，视窗高度是 100vh

【HTML5+CSS3】30个知识点由浅入掌握HTML5+CSS3🔥🔥

引言

1. <!DOCTYPE html> 作用

2. 如何理解语义化标签

3. HTML5有哪些新特性

4. href和src区别

5. defer和async区别

6. link 和@import 区别

7. head 标签有什么作用，有哪些？

8. 常用的meta标签有哪些

9 margin 和 padding 的使用场景

10. 对盒模型的理解

11. CSS选择器权重

12. 可继承性的属性有哪些

13. 对line-height属性的理解

14. 对vertical-align属性理解

15. 什么是外边距合并，如何解决

16. 对BFC的理解，如何创建

17. 清除浮动方式

18. 定位方式有几种

19. 元素的层叠顺序

20. z-index什么情况下会失效

21. 隐藏元素方式有哪些

22. 水平垂直居中的实现方式有哪些

23. 如何画一个三角形，画扇形

24. 画一条0.5px的线

25. 设置小于12px的字体

26. CSS动画怎么使用

27. 对flex布局的理解

28. flex实现九宫格

29. flex实现align-self

30. 常见的 CSS 布局单位

1. `<!DOCTYPE html>` 作用