html5新增标签demo,H5C3新增

一.HTML5新特性

1.HTML5新增的语义化标签

标签

语义

头部标签

导航标签

内容标签

定义文档某个区域

侧边栏标签

尾部标签

注意点

在IE9中需要转成成块级元素才能使用display: block

2.HTML5新增的多媒体标签

(1)视频标签

支持：MP4 WebM Ogg

属性

值

用法

autoplay

autoplay

自动播放，google默认禁用

contros

conrols

展示控件

width

px

播放器宽度

height

px

设置播放器高度

loop

loop

是否循环播放

src

url

地址

poster

imgurl

等待页面

会有兼容性问题

demo

你的浏览器暂不支持video标签

(2)音频标签

支持三种格式：MP3 ogg wav

属性

值

用法

autoplay

autoplay

自动播放，google默不播放

loop

loop

是否循环播放

src

url

地址

contros

conrols

展示控件

注意点

不通浏览器支持的格式不同，解决方案，添加多种格式的音频

3.新增的input表单类型

type

解释

emaill

邮箱

url

地址

date

日期类型

time

时间类型

month

日期月类型

week

周类型

number

数字类型

tel

电话号码

search

搜索框

color

颜色选择

• 邮箱
• 网址
• 日期
• 时间
• 数量
• 手机号

4.新增的input属性

属性

值

描述

required

required

表单不能为空

placeholder

提示文本(占位符)

表单的提示信息，存在默认则不显示

autofocus

autofocus

自动获得焦点

autocomplete

off/on

当用户在此字段开始输入时，会自动弹出以前输入过的选项

multiple

multiple

可以多文件提交

三.CSS3新特性

1.属性选择器

选择器

用于

E[alt]

选取具有alt属性的E元素

E[alt="val"]

选择具有alt属性且值为val的E元素

E[alt^=“val"]

选择具有alt属性且值以val开头的E元素

E[alt$="val"]

选择具有alt属性且值以val开头的E元素

E[alt*="val"]

选择具有alt属性且值中具有val的元素

demo1

/*权重等于 标签选择器 + 10 属性选择器 = 11*/

button[disabled]{

color:skyblue;

}

可以点击

可以点击

可以点击

不可以点击

不可以点击

demo2

input[type='text'] {

border: skyblue 2px solid;

}

2.结构伪类选择器

(1)XX-child

E:first-child: 选取父元素中的第一个

E:last-child: 选取父元素中的最后一个

E：nth-child(n): 选取父级元素中的第n个子元素

demo1

/*选取第一个*/

ul li:first-child {

color: pink;

}

/*选取第二个*/

ul li:last-child {

color: chocolate;

}

• 我是第一个
• 我是第二个
• 我是第三个
• 我是第四个
• 我是第五个

demo2

/* 选取子元素里面的第一个元素 */

div :nth-child(1){

background-color:pink;

}

/* 选取子元素里面的第二个元素 */

div :nth-child(2){

background-color: skyblue;

}

/* 选取的是元素里面第三个元素，并且必须是span标签*/

div span:nth-child(3){

background-color: tomato;

}

ppppppppppppppppp

span1

span2

span3

nth-child(n)

n的值可以为：

数字——选取第n个值

关键字——常见：even(偶数) odd(奇数) 可以实现表格或者表格等，奇偶行不同样式

公式——2n(偶数)2n-1(奇数)5n等 n+5(从零开始5开始) -n+6 (前6个)

注意:

n是从0开始计算的，第0个或者超出了元素的个数会被忽略。

(2)xx-of-type

first-of-type

last-of-type

nth-of-type(n)

demo

/* 选取的是元素里面第三个元素，并且必须是span标签*/

div span:nth-child(2){

background-color: tomato;

}

/* 选取的是div里面的第二个span */

div span:nth-of-type(2){

background-color: teal;

}

p

span1

span2

span3

不同点

1. nth-child

会把所有的盒子都排列序号

执行的时候会先看N值(再去匹配元素，如果对应的N值对应的元素不匹配就没有与之相匹配的元素了(换句话说就CSS就没有效果了)

2. nth-of-type

执行的时候先看要匹配的元素，在去看N值

相同点：

都是选取父元素里的某个或者某些元素。

3.::before和::after

::before和::after都属于行内元素

语法

element::before {xxx}

element::after {xxx}

注意点

1.::before和::after都必须要有content属性(可以为空：content: "")

2.before创建的内容在父元素的前面，after在父元素的后面。

3.权重都为：1

可以和：hover搭配使用

.element:hover::after{xxxx}

demo

div[class='fa-box'] {

height: 100px;

width: 100px;

border: 1px solid red;

background-color: pink;

}

div[class='fa-box']::before {

content: '我';

height: 20px;

width: 20px;

background-color: blue;

}

div[class='fa-box']::after {

content: '码农';

height: 20px;

width: 20px;

background-color: blue;

}

是

4.CSS3盒子模型

通过box-sizing的两个值：content-box和border-box,改变盒子大小的计算方式。

box-sizing: content-box /* 盒子实际大小=witdh + border + padding(原先默认)* /

box-sizing: border-box /*盒子实际大小为witdh*/

注

添加了box-sizing： border-box 那么border和padding就不会撑大盒子。