前端基础（CSS3、HTML5与移动端）

1. HTML5的新特性

1.1 HTML5新增的语义化标签

<header>   头部标签
<nav>      导航标签
<article>  内容标签
<section>  定义文档某个区域
<aside>    侧边栏标签
<footer>   尾部标签

1.2 HTML5新增的多媒体标签

<video> 视频标签
<video src="文件地址" controls="controls"></video>
//常见属性：
//autoplay 视频自动播放
//controls 向用户显示播放控件
//width height 这只播放器的宽高
//loop 是否继续播放视频
//preload(auto none) 规定是否预加载视频 如果有autoplay可以省略
//poster 加载等待的画面图片
//muted 静音播放

<audio> 音频标签
<auido src="文件地址" controls="controls"></audio>
//autoplay 自动播放
//controls 向用户显示控件 比如播放按钮
//loop 在音频结束时重新开始播放

1.3 HTML5中的input类型

我们验证的时候必须添加 form表单域

type = "email"  限制用户输入必须为Email类型
type = "url"    限制用户输入必须为URL类型
type = "date"   限制用户输入必须为日期类型
type = "time"   限制用户输入必须为时间类型
type = "month"  限制用户输入必须为月类型
type = "week"   限制用户输入必须为周类型
//type = " number"  限制用户输入必须为数字类型
//type = "tel"     手机号码
//type = "search"  搜索框
type = "color"   生成一个颜色选择表单

1.4 HTML5新增的表单属性

required 表单拥有该属性表示其内容不能为空，必填
//placeholder 提示文本 
autofocus 自动聚焦属性
autocomplete(off/on) 提交成功并且有name属性 当用户字段开始键入时 提示显示之前输入过的值
//multiple 可以多选文件提交

2. CSS3 的新特性

2.1 属性选择器

<style>
//1. 选择input元素中的带有value属性
    input[value] {
        color:pink;
    }
//2. 选择具有input属性且属性值等于值的元素(重点)
input[type=text] {
    color： pink;
}
//3.选择具有属性且以val开头的元素
div[class^=icon] {
    color : pink;
}
</style>


//1.利用属性选择器就可以不用借助于类或者id选择器
<input type="text" value="请输入用户名">
<input type="text">
//2. 属性选择器还可以选择属性=值的某些元素 (重点！！！)
<input type="text" name="" id="">
<input type="password" name="" id="">
//3.属性选择器可以选择属性值开头的某些元素
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
//4.属性选择器可以选择具有att属性且值结以val尾的E元素
E[att$="val"]
//4.属性选择器可以选择属性且值中含有的val的E元素
E[att*="val"]

2.2 结构伪类选择器

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

E:first-child 匹配父元素的第一个子元素E

E:last-child 匹配父元素的最后一个子元素E

E:nth-child(n) 匹配父元素的第n个子元素E （ n可以是偶数、奇数、关键字、数字、公式 )

2n ：偶数 2n+1 ：奇数 5n ：5 10 15.... n+5 ：从第五个开始到最后

-n+5 ：前五个( 包含第五个 )

E:first-of-type 指定类型E的第一个

E:last-of-type 指定类型E的最后一个

E:nth-of-type(n) 指定类型E的第n个

2.3 伪类选择器（重点）

::before 在元素内部的前面插入内容

::after 在元素内部的后面插入内容

2.4 CSS3图片模糊处理

img {
	filter : blur(15px)
}
//blur是一个函数 小括号里数值越大 图片越模糊