HTML5 CSS3新增特性

HTML5新增标签

语义化标签：（根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析）

<header>:头部标签

<nav>:导航标签

<article>:内容标签

<section>定义文档某个区域

<aside>:侧边栏标签

<footer>:尾部标签

 

新增音频标签

音频：<audio>

语法格式：<audio src="文件地址” controls="controls"></audio>

视频：<video> (尽量使用MP4格式)

语法格式：<video src="文件地址" controls="controls"></video>

input表单类型

重点记忆“number”数字类型，“tel"手机号码,"search"搜索框

 重点记忆：placeholder提示文本，multiple可以多选文件

CSS3新特性

新增选择器

类选择器，属性选择器，伪类选择器，权重都为10 

属性选择器：（注意用[ ]）

结构伪类选择器：主要根据文档结构来选择元素，常用于根据父类选择器里面的子元素

nth-child(n):

n可以是数字，关键字和公式

n如果是数字，就是选择第n个子元素，里面数字从1开始

n可以是关键字：even偶数，odd奇数

n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素都个数会被忽略）

E:nth-child和E:nth-of-type区别

E:nth-child对父元素里面所有孩子排序选择(序号是固定)先找到第n个孩子，然后看看是否和E匹配

E:nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E找到第几个孩子

伪元素选择器(重点)

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

 注意：

before和after创建一个元素，但是属于行内元素

新创建的这个元素在文档树中是找不到的，所有我们称为伪元素

语法：element::before{}

before和after必须有content属性

 before在父元素内容的前面创建元素，after在父元素内容的后面插入元素

伪元素选择器和标签选择器一样，权重为1

CSS盒子模型

CSS3中可以通过box-sizing来指定盒模型，有两个值：content-box，border-box，这样我们计算盒子大小的方式就发生了改变

可以分为两种情况

box-sizing：content-box 盒子大小为width + padding +border（以前默认的）

box-sizing：border-box盒子大小为width

如果盒子模型改为了box-sizing：border-box，那么padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

CSS3滤镜filter：

filter CSS属性将模糊或者颜色偏移等图形效果应用于元素

filter：函数(); 例如：filterblur(5px);   blur模糊处理 数值越大越模糊

CSS3 calc函数：

calc()此CSS函数让你在声明CSS属性值时执行一些计算

width：calc(100%-80px);

广义的HTML5(了解)

广义的HTML5是HTML5本身 +CSS3 +JavaScript