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;