学习[9]:HTML5新增布局和表单+CSS3新增特性

本文章基于b站黑马程序员pink老师的H5+CSS3视频的内容总结

一.HTML5新增的语义化标签

1.新增标签

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

注意:

• 针对搜索引擎
• 新标签页面中可以使用多次
• 在IE9把这些元素转化成块级元素
• 移动端更喜欢这个标签

2.新增的多媒体标签 

• 音频:<audio>
• 视频:<video>

(1)视频<video>

只支持格式MP4,ogg,WebM(一般可以多写几个video标签)

 注意:视频格式尽量使用MP4格式

a.语法

 

 b.属性

• 自动播放:autoplay="autoplay"
• 静音播放:muted="muted"(谷歌浏览器中禁用了自动播放,所以要加上静音播放)
• 播放控件:controls="controls"(视频播放控制)
• 播放器宽高:width,high(将他看成一个盒子,属于样式)
• 循环播放:loop="loop"
• 加载等待时的的画面图片:poster="图片的路径"
• 视频的url地址:src=""

 (2)音频<audio>

支持三种格式:MP3,Wav,Ogg

注意:音频格式尽量使用MP3格式

 a.语法

b.属性

• 自动播放:autoplay="autoplay"(谷歌浏览器禁用)
• 音频控件:controls="controls"
• 循环播放:loop="loop"

3.新增的input类型

(1)新增的表单

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

 form格式下,按submit提交可以提示该表单的填写

(2)新增的表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填(required="required")
placeholder	提示文本	表单的提示信息，存在默认值将不显示(placeholder="提示文本")
autofocus	autofocus	自动聚焦属性，页面加载亮成自动聚焦到指定表单
autocomplete	off / on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项， 默认已经打开，如autocomplete="on"，关闭autocomplete ="off"需要放在表单内，同时加上 name属性，同时成功提交
multiple	multiple	可以多选文件提交

二.CSS3的新特性

1.新增的选择器

(1)属性选择器

a.语法:

1).根据属性

标签[属性]  {

}//必须是这个标签而且具有的这个属性才选择这个元素

2).根据属性=值(值可以加""也可以不加)

标签[属性=值]  {

}//必须是这个标签和具有的这个属性且值为这个值才选择这个元素

3). 根据属性=xx(属性值是以xx开头的)

标签[属性^=属性值的开头]  {

}//必须是这个标签而且具有的这个属性的相同开头的属性值才选择这个元素

 4)根据属性=xx(属性值是以xx结尾的)

标签[属性$=属性值的结尾]  {

}//必须是这个标签而且具有的这个属性的相同结尾的属性值才选择这个元素

5) 根据属性=xx(属性值是含有xx的)

标签[属性*=xx]  {

}//必须是这个标签而且具有的这个属性的xx属性值才选择这个元素

b.注意

具有权重--10

 (类选择器,伪类选择器,属性选择器都是10)

(2)结果伪类选择器

根据文档结构来选择元素

 a.相关语法

E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个子元素E
E:nth-child(n)	匹配父元素中的第n个子元素

E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

•  n可以是数字,关键字和公式
• n如果是数字,就选择第n个子元素,里面数字从1开始...
• 奇数(odd),偶数(even)
• 如果使用含n的公式,n从0开始计算,没有的部分和超出的部分会自动忽略掉
• -n+5(前5个)从第5个往上数

 b.区分E:nth-of-type(n)和E:nth-child(n)

E:nth-child(n)

• 使用的时候会把指定元素的盒子全部重新排列序号
• 执行的时候先看nth-child(n),之后再看标签选择的元素,不符合的话不选择

E:nth-of-type(n)

• 使用的时候会把指定元素的盒子全部重新排列序号
• 执行的时候先看前面的标签指定的元素,之后再看nth-of-type(n)

(3)伪元素选择器(重点)

a.通过CSS来创建标签,不是HTML标签
 

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

b.注意

• before和after创建一个元素,但是属于行内元素
• 新创建的这个元素在文档中找不到,所以称为伪元素
• 语法:element::before{}
• 必须具有content属性(content'内容')
• 伪元素选择器的权重是1

2.新增的盒子模型

 通过box-sizing来指定盒模型,content-box,border-box

a.两种情况

1. box-sizing:content-box盒子大小为width+padding+border
2. box-sizing:border-box盒子大小为width

b.优点

如果盒子模型我们改为了box-sizing:border-box,那padding和border就不会撑大盒子了(前提是padding和border不会超过width宽度) 

3.其他特性

 a.filter(CSS属性将模糊或颜色偏移等图形效果)

filter: 函数();

例如,filter:blur(5px);(其中blur里的值越大越模糊)

b.calc函数

width:calc(100%-80px);(括号里可以进行一些加减乘除的运算)

4.过渡(重点)

a.定义

过渡动画,是从一个状态慢慢过渡到另一个状态,经常和hover一起使用

b.语法

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

• 属性:想要变化的属性,所有属性都变化就写all
• 花费时间:单位是s(必须写单位)
• 运动曲线:默认是ease(可以省略)
• 何时开始:单位是s,必须写单位,可以设置延迟触发时间,默认会是0s(可以省略)

谁做过渡给谁加