html5和css3知识点

Html5

H5新增了一些新的标签、新的表单和新的表单特性

//  新增的语义化标签 
<header>: 头部
<nav>: 导航
<article>: 内容
<section>: 定义文档某个区域
<aside>: 侧边栏
<footer>: 尾部
// 新增的多媒体标签
<audio>: 音频
<video>: 视频

注：在IE9中，需要把这些元素转换为块级元素

视频标签

视频格式尽量选MP4
音频选MP3

<video src="文件地址" controls="controls"></video>

音频标签

<audio src="文件地址" controls="controls"></audio>

总结

视频标签是重点，我们经常设置自动播放

新增input标签

// 验证必须添加from表单
<from action="">
<input type="email">
</from>

表单属性

<from action="">
<input type="search" required="required">
</from>

css3

新增选择器

1.属性选择器
2.结构伪类选择器
3.伪元素选择器

属性选择器

属性选择器可以根据元素特定属性的来选择元素

第二个是重点掌握

/* 必须是input但是同时具有value属性选择这个元素 */
input[value] {color:pink}
/* 只选择文本框 type=text */
input[type=text] {color:pink}

注：类选择器、属性选择器、伪类选择器，权重为10

结构伪类选择器

主要根据文档结构来选择元素，常用于根据父级选择器里的子元素
n可以是数字，关键字和公式
n如果是数字，则选择第n个元素
n可以是关键字：even偶数，odd奇数
如果公式是n，则从0开始计算，但是第0个元素超出了元素的个数会忽略

常见公式如下：

/* nth-child会把所有的盒子都排列序号
执行的时候首先看 :nth-child(1) 之后回去看div */
section div:nth-child(1) {}

/* nth-child会把指定元素的盒子排列序号
执行的时候首先看 div指定的元素 之后回去看前面div */
section div:nth-of-type(1) {}

伪元素选择器（重点）

可以帮助我们利用css创建新标签元素

/* 语法*/
element::before{}

before和after元素属于行内元素
before和after必须有content属性
伪元素选择器和标签选择器权重为1

案例：伪元素字体图标
仿土豆效果
伪元素清除浮动

css3盒子模型

通过box-sizing来指定盒模型
两个值：content-box
border-box

css3其他新特性（了解）

图片模糊处理

fliter:blur(5px); // 数值越大越模糊

calc函数

width:calc(100%-80px); // 可加减乘除

css3过渡(重点)

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

口诀：谁做过渡给谁加