HTML5简介
万维网的核心语言,标准通用标记语言的写一个应用超文本标记语言(HTML)的第五次重大修改,作为新HTML语言,具有新的元素,属性和行为;广义的HTML是包含HTML5本身 + CSS3 + JavaScript,虽然不被所有浏览器所支持,但它是一种趋势;
新增语义化标签
<header></header> <!-- 头部标签 -->
<nav></nav> <!-- 导航标签 -->
<article></article> <!-- 内容标签 -->
<section></section> <!-- 块级标签 -->
<aside></aside> <!-- 侧边栏标签 -->
<footer></footer> <!-- 尾部标签 -->
注意:
- 这些语义化标签是针对搜索引擎的;
- 可以被使用多次
- 在 IE9 中需要被转换成块级标签
display: block;
音频标签
<audio src="音频地址"></audio>
<!-- 由于mp3的格式不是被所有的浏览器所支持的 -->
<audio>
<source src="url.mp3" type="audio/mpeg" />
<source src="url.ogg" type="audio/ogg" />
</audio>
属性 |
值 |
描述 |
autoplay |
autoplay |
如果出现该属性,则音频在就绪后马上播放,chrome 默认时禁用的 |
controls |
controls |
如果出现该属性,则向用户显示播放控件,各个浏览器样式不同 |
loop |
loop |
如果出现该属性,则每当音频结束时重新开始播放 |
src |
url |
音频播放地址 |
视频标签
<video src="视频地址"></video>
<!-- 由于mp4的格式不是被所有的浏览器所支持的 -->
<video>
<source src="url.mp4" type="video/mp4" />
<source src-"url.ogg" type="video/ogg" />
</video>
属性 |
值 |
描述 |
autoplay |
autoplay |
视频就绪自动播放 |
controls |
controls |
向用户显示播放控件 |
loop |
loop |
循环播放 |
preload |
auto,meta,none |
当页面加载后载入整个视频;当页面加载后只载入元数据;当页面加载后不载入视频 (如果设置了 autoplay 属性,则忽略该属性) |
src |
url |
地址 |
poster |
imgurl |
加载等待的画面图片 |
muted |
muted |
静音播放 |
width |
px |
设置播放器宽度 |
height |
px |
设置播放器高度 |
新增表单属性
input 新增 HTML5 表单属性,移动端常用
<!-- 按钮禁止点击 -->
<button disable></button>
属性值 |
说明 |
type="email" |
限制用户必须输入邮箱类型 |
type="url" |
限制用户必须输入网址 |
type="date" |
限制用户输入日期 |
type="time" |
限制用户输入时间 |
type="month" |
限制用户输入月份 |
type="week" |
限制用户输入星期 |
type="number" |
显示用户输入数字 (mobile唤醒数字键盘) |
type="tel" |
显示用户输入手机号码(mobile唤醒数字键盘) |
type="search" |
搜索框 |
type="color" |
生成一个选择颜色表单 |
属性 |
值 |
说明 |
required |
required |
表单不能为空 |
placeholder |
提示文本 |
表单的提示信息 |
autofocus |
autofocus |
自动聚焦属性光标 |
autocomplate |
off/on |
需要成功提交过一次内容,需要有一个name属性,一般情况为off |
multiple |
multiple |
可以选择多文件提交 |
CSS3 选择器
属性选择器
选择符 |
简介 |
E[attr] |
选择具有attr属性的E元素 |
E[attr="val"] |
选择attr属性等于val的元素 |
E[attr^="val"] |
选择attr属性开头等于val的元素 |
E[attr$="val"] |
选择attr属性结尾等于val的元素 |
E[attr*="val"] |
选择attr属性中包含val的元素 |
结构伪类选择器
选择符 |
简介 |
E:first-child |
匹配父元素中的第一个子元素E |
E:last-child |
匹配父元素中的最后一个子元素E |
E:nth-child(n) |
匹配父元素中的第N个子元素E |
E:first-of-type |
指定类型E的第一个 |
E:last-of-type |
指定类型E的最后一个 |
E:nth-of-type(n) |
指定类型E的第n个 |
注意:nth-child(n);nth-of-type(n)
;even:偶数;odd:基数
伪元素选择器
选择符 |
简介 |
::before |
在元素内部的前面插入元素 |
::after |
在元素内部的后面插入元素 |
注意:
- before 和 after 必须有 content 属性
- before 在内容的前面 after 在内容的后面
- before 和 after 创建一个元素,但是属于行内元素
- 因为在 dom 中看不到刚才创建的元素,所以称为伪元素
- 伪元素和标签选择器一样权重为1