HTML5新增

语义化标签
  • <header> ：头部标签
  • <nav> ：导航标签
  • <article> ：内容标签
  • <section> ：定义文档某个区域
  • <aside> ：侧边栏标签
  • <footer> ：尾部标签
多媒体标签
  1. 音频：<audio>
  2. 视频：<video>；尽量使用mp4

视频

<video src ="文件地址" controls ="controls"> </video>
<video controls ="controls" width=" " height=" ">
	<source src="move.ogg" type="video/ogg">
	<source src="move.mp4" type="video/mp4">
	您的浏览器暂不支持<video>标签播放视频
</video>
属性 值 描述
autoplay autoplay 视频就绪自动播放
control control 向用户显示播放控件
width pixel像素 设置播放器宽度
height pixel像素 设置播放器高度
loop loop 播放完是否继续播放该视频，循环播放
preload auto；none 规定是否预加载视频，autoplay则忽略
src url 视频地址
poster imgurl 加载等待的画面照片
muted muted 静音播放

音频

<audio src ="文件地址" controls ="controls"> </audio>
<audio controls ="controls" >
	<source src="move.ogg" type="audio/ogg">
	<source src="move.mp3" type="audio/mp3">
	您的浏览器暂不支持<audio>标签
</audio>
属性 值 描述
autoplay autoplay 音频在就绪后马上播放
control control 向用户显示控件，比如播放按钮
loop loop 循环播放
src url 音频的地址
input类型

type = "email | url | date | time |month | week

​ number | tel | search | color"

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

CSS3新特性

CSS新增选择器
属性选择器

属性选择器可以根据元素特定属性来选择元素，不用借用类或者id选择器

选择符 简介
E[att] 选择具有att属性的E元素
E[att=”val”] 选择具有att属性且属性值等于val的E元素
E[att^=”val”] 匹配具有att属性且值以val开头的E元素
E[att$=”val”] 匹配具有att属性且值以val结尾的E元素
E[att*=”val”] 匹配具有att属性且值中含有val的E元素
结构伪类选择器

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

选择符 简介
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个子元素E
E:nth-child(n) 匹配父元素中的第n个子元素E
E:first-of-ytpe 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个

n 可以是数字或者公式；2n偶数even；2n+1奇数odd；n从零开始

区别：

  1. nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n 个孩子，然后看看是否匹配
  2. nth-of-type 对父元素里面指定子元素排序选择。先去匹配E ，然后再根据E 找第n 个孩子
伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新元素标签，而不需要HTML标签

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

属于行内元素，新创建的元素在文档树中找不到，所以称伪元素。

语法：element::before{} ；必须有content 属性。

before 在父元素内容的前面创建元素，after 在父元素内容的后面创建元素；权重为1；