HTML5与css3知识点

一、 THML5 介绍

1.1 HTML5

html 经过了第 5 次重大改版 , 增加了一些语义化的标签

高版本浏览器支持 ,ie9 以下不支持 ,

特点 ： html5 是向下兼容的 , 原来 html4 的标签仍然可以用

1.2 HTML5 新增的新特性

结构语义化标签

多媒体标签

智能表单

canvas 绘图

SVG 绘图

二、结构语义化标签

1.header : 表示页面中一个内容区块或整个页面的标题 , 通常

可以用来包含 logo 搜索框 标题

2.nav : 划分导航区域

3.footer 元素 表示页面中一个内容区块或整个页面的脚注 , 包

含友情链接、版权等

4.figure>figcaption 一般用于图文

5.hgroup 标题的一个分组 , 通常与 h1 • h6 组合使用

6.aside 元素 在 article 之外的，与 article 内容相关的辅助信息

7.section 元素 表示页面中的一个内容区块 , 内容以及标题组成

8.article 元素 表示一块与上下文无关的独立的内容 , 如一个博

文 , 报刊中的文章

9.mark 定义高亮显示的文本 (span) 行内元素

10.time 表示日期和时间 行内元素

三、 HTML5 标签的兼容性问题

IE9 以下是不兼容的

解决 ？

第一种方式 ： js 引入 html5shiv . min . js 文件

<!-- [ if lt IE 9 ] >

< script src = "js/html5shiv.min.js" >< /script>

<! [ endif ] -->

第二种 ： js 动态的创建标签

< script >

document . createElement ( " 标签名 " );

< /script>

创建出来的是行内元素，需要用 css 转为块

备注 ： 两种方案， script 标签都放在 head 的尾部

四、多媒体标签

4.1 视频

<video src="video/movie1.mp4" controls loop autoplay muted poster="images/1.jpg" ></video> 属性 ：src ：视频的路径 controls : 播放控件 loop ： 循环播放 poster : 设置视频的封面 autoplay :自动播放，必须配合muted 使用 muted ： 静音 一般需要加载三种格式的视频： <video controls loop poster="images/1.jpg" width="600" height="300" autoplay muted><source src="video/movie1.mp4" type="video/mp4"> <source src="video/movie1.ogg" type="video/ogg"> <source src="video/movie1.webm" type="video/webm"> </video>

4.2 音频

<audio src="" controls loop></audio> 一般需要加载三种格式的音频： <audio controls loop> <source src="video/zhoujie.mp3" type="audio/mpeg"> <source src="video/zhoujie.ogg" type="audio/ogg"> <source src="video/zhoujie.wav" type="audio/wav"> </audio>

五、智能表单

5.1 智能表单标签

1、<input type="url"> 用于包含URL地址的输入域 2、<input type="email"> 用于包含e-mail地址的输入域 3、<input type="search"> 用于搜索域 4、<input type="tel"> 用于输入电话号码的文本域 5、<input type="number" min="1" max="5" step="1" value="3" >用于包含数值的输入域 6、<input type="range" value="5" max="20" min="1" step="2">用于包含一定范围内数字值的 输入域 7、<input type="color"> 用于选取颜色 8、<input type="date"> 用于从一个日期选择器选择一个日期 9、<input type="datetime"> 用于手动输入一个日期时间 10、<input type="datetime-local"> 用于选择一个日期和时间 11、<input type="month"> 用于选择一个月份 12、<input type="time"> 用于选择一个时间 13、<input type="week"> 用于选择周和年 14、 <datalist>标签 用来定义选项列表，与 input 元素配合使用，来定义 input 可能的值 <input type="text" list="urlList"> <datalist id="urlList"><option value="https://www.baidu.com" label="百度"> <option value="https://www.taobao.com" label="淘宝"> <option value="https://www.JD.com" label="京东"> </datalist>

5.2 表单标签属性

1 、 max 属性规定输入域所允许的最大值

min 属性规定输入域所允许的最小值

step 属性为输入域规定合法的数字间隔

2 、 placeholder 属性描述输入域所期待的值

3 、 autofocus 属性自动获取焦点

4 、 autocomplete 属性自动完成 ( 关闭 / 打开提交的历史记录 )

5 、 form 属性规定输入域所属的表单

6 、 required 属性规定必须在提交之前填写输入域

7 、 pattern 属性规定用于验证 input 域的模式

8 、 multiple 属性规定输入域中可选择多个值

9 、 list 属性实现数据列表的下拉效果

六、 CSS3

6.1 CSS3 介绍

CSS3 是 CSS 技术的升级版本，是最新的 CSS 标准。

特点 ： 向下兼容的

css 新增的模块 : 选择器、框模型、背景和边框、文本效果、 2D/3D 转换、动画、多列布局、用户界面

6.2 浏览器私有前缀问题

某些 CSS3 属性还只是最新版的预览版，并未发布成最终的正式版，而大部分浏览器已经为这些属性提供了

支持，但这些属性是小部分浏览器专有的；需要加浏览器前缀进行识别。

备注 ：书写的顺序：先写加前缀的，最后写不加前缀的

 6.3 属性选择器

css2

（ 1 ） E[attr] 指定了属性名，但没有指定属性值。

（ 2 ） E[attr=”value”] 指定了属性名，并且指定了该属性的属性值。

（ 3 ） E[attr~=”value”] 指定了属性名，并且属性值是一个词列列表，词列表中包含了一个指定的 value

值。

css3 新增的

1 、 [attr^="value"] 选择器：指定了属性名，且属性值以 value 开头

2. [attr$="value"] 选择器：指定了属性名，且属性值以 value 结束。

3. [attr*="value"] 选择器：匹配属性值包含指定值的每个元素。

css3 新增选择器

1.1 属性选择器

1.2 结构性伪类选择器

E:first-child{} 选择父元素中的第一个子元素 E

E:last-child{} 选择父元素中的最后一个子元素 E

E:nth-child(n){} 选择父元素中的第 n 个子元素 E

E:nth-last-child(n){} 选择父元素中倒数第 n 个子元素 E

备注 ：

n 可以是数值可以是公式（ 2n/2n+1... ）还可以是关键字 odd （奇数） /even( 偶数 )

必须是同一种类型的标签

补充（了解）

如果不是同一种类型的标签用以下几种： 先过滤类型再查找

E:first-of-type{}

E:last-of-type{}

E:nth-of-type(n){}

1.3 状态伪类选择器

主要针对表单

1 、 E:checked 匹配用户界面上处于选中状态的元素

2 、 E:enabled 匹配用户界面上处于可用状态的元素

3 、 E:disabled 匹配用户界面上处于禁用状态的元素