html5&css3（day4）

1.HTML5新特性
增加了一些新的标签、新的表单和新的表单属性等。
基本是 IE9+ 以上版本的浏览器才支持。
1.1 HTML5 新增的语义化标签
<header>:头部标签
<nav>:导航标签
<article>:内容标签
<section>:定义文档某个区域
<aside>:侧边栏标签
<footer>:尾部标签
注意：
・这种语义化标准主要是针对搜索引擎的
・这些新标签页面中可以使用多次
・在 IE9 中，需要把这些元素转换为块级元素
・移动端更喜欢使用这些标签
1.2 HTML5 新增的多媒体标签
①音频:<audio>
常见格式：MP3（推荐）,Wav,Ogg

<audio src="文件地址" controls="controls"></audio>
 
<audio controls="controls" >
    <source src="happy.mp3" type="audio/mpeg" > 
    <source src="happy.ogg" type="audio/ogg" > 
    您的浏览器暂不支持 <audio> 标签。
</ audio>

<audio src="文件地址" 
autoplay="autoplay" 
//自动播放
controls="controls"
//增加控件
loop="loop" 
//无限循环
</video>

②视频:<video>
常见格式：MP4（推荐）,WebM,Ogg

html
<video src="文件地址" controls="controls"></video>
//controls="controls"增加播放控件
 
css
<video controls="controls" width="300"> 
    <source src="move.ogg" type="video/ogg" > 
    <source src="move.mp4" type="video/mp4" > 
    您的浏览器暂不支持video标签播放视频
</video >

<video src="文件地址" 
autoplay="autoplay" 
//自动播放
muted="muted" 
//静音
loop="loop" 
//无限循环
poster="media/mi9.jpg">
//加载等待图片
</video>

注意：
谷歌浏览器把音频和视频自动播放禁止了
但是，可以通过给视频标签添加 muted 属性来静音播放视频，音频不可以(可以通过JavaScript解决)
视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性
1.3 HTML5 新增的 input 类型

• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week
• color

1.4 HTML5 新增的表单属性

• required 规定必须在提交之前填写输入域（不能为空）
• placeholder 提示文本

  可以通过以下设置方式修改placeholder里面的字体颜色:
  input::placeholder { color: pink;
  }

• autofocus 自动聚焦
• autocomplete 规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。值"on/off"。

  <form action="demo-form.php" autocomplete="on">
    First name:<input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    E-mail: <input type="email" name="email" autocomplete="off"><br>
    <input type="submit">
  </form>
  

• multiple 多选文件

2.CSS3新特性
2.1新增选择器
①属性选择器
选择具有某属性的元素

input[value] {
//必须是input 但是同时具有 value这个属性 选择这个元素
     color:pink;
}


<input type="text" value="请输入用户名">
<input type="text">

选择具有某属性且属性值等于text的元素

//重点
/* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {
    color: pink;
}

<input type="text" name="" id="">
<input type="password" name="" id="">

选择具有某属性且属性值以icon开头的元素

div[class^=icon] {
    color: red;
}


<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>

选择具有某属性且属性值以data结尾的元素

section[class$=data] {
    color: blue;
}

<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">哪我是谁</section>

选择具有某属性且属性值中含有data的元素

section[class*=data] {
    color: blue;
}

注意:
类选择器、属性选择器、伪类选择器，权重为 10。

②结构伪类选择器

匹配父元素中的第一个子元素

ul li:first-child {
    background-color: pink;
}

<ul>
    <li>我是第1个孩子</li>
    <li>我是第2个孩子</li>
    <li>我是第3个孩子</li>
    <li>我是第4个孩子</li>
    <li>我是第5个孩子</li>
    <li>我是第6个孩子</li>
    <li>我是第7个孩子</li>
    <li>我是第8个孩子</li>
</ul>

匹配父元素中的最后一个子元素

ul li:last-child {
    background-color: pink;
}

匹配父元素中的第2个子元素（重要）

ul li:nth-child(2) {

background-color: skyblue;

}

nth-child(n) 选择某个父元素的一个或多个特定的子元素(重点)
・n可以是数字，关键字和公式
・n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始...
・n 可以是关键字:even 偶数，odd 奇数
・n 可以是公式:常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )
2n:偶数
2n+1:奇数
5n: 5 10 15...
n+5: 第5个开始到最后
-n+5: 前5个（包括5）

匹配指定类型的第1个元素

ul li:first-of-type {

background-color: pink;

}

匹配指定类型的最后1个元素

ul li:last-of-type {

background-color: pink;

}

匹配指定类型的第n个元素

ul li:nth-of-type(n) {
      background-color: skyblue;
}

注意:
nth-child 会把所有的孩子都排列序号，执行的时候首先看 :nth-child(n) 之后回去看前面的指定类型。
nth-of-type 会把指定元素的盒子排列序号，执行的时候首先看 指定类型的元素 之后回去看 :nth-of-type(n) 第几个孩子

③伪元素选择器
好处：利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

element::before {}

注意：
・before 和 after 创建一个元素，但是属于行内元素
・新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
・before 和 after 必须有 content 属性
・before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
・伪元素选择器和标签选择器一样，权重为 1

2.2盒子模型
box-sizing 来指定盒模型，有2个值:即可指定为 content-box、border-box
1. box-sizing: content-box 盒子大小为 width + padding + border (以前默认的)
2. box-sizing: border-box 盒子大小为 width
用box-sizing: border-box的话，padding和border不会撑大盒子(前提padding 和border不会超过width宽度)

2.3其他特性（了解）
①图片变模糊
CSS3滤镜filter：filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter: 函数();

例如: filter: blur(5px); blur模糊处理，数值越大越模糊。
②计算盒子宽度 width: calc 函数
CSS3 calc 函数：calc() 此CSS函数让你在声明CSS属性值时执行一些计算。

width: calc(100% - 80px);
//子盒子比父盒子宽度小80px

括号里面可以使用 + - * / 来进行计算。

2.4 CSS3 过渡(重点)
过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画: 是从一个状态 渐渐的过渡到另外一个状态。
经常和:hover 一起 搭配使用。

transition: 要过渡的属性 花费时间 运动曲线 何时开始;
//前两个属性必须写，后两个可以省略
//属性： 想要变化的 css 属性。写多个属性用逗号隔开。如果想要所有的属性都变化过渡， 用all
//花费时间： 单位是秒(必须写单位) eg：0.5s
//运动曲线： 默认是 ease (可以省略)
//何时开始： 单位是 秒(必须写单位)可以设置延迟触发时间 默认是 0s (可以省略)

*谁过渡给谁加

3.结语
狭义的HTML5:HTML5 结构标签本身。
广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。