HTML5+CSS3新特性学习
1.什么是HTML5
万维网的核心语言,标准通用标记语言下的一个应用超文本标记语言的第五次重大修改,作为新HTML语言,具有新的元素,属性和行为。
增加了新特性:语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维,图形以及特效特性性能与集成特性,CSS3特性
2.H5新增语义化标签
<header>头部标签
<nav>导航标签
<article>内容标签
<section>块级标签
<aside>侧边栏标签
<footer>底部标签
3.H5新增多媒体标签
<audio>音频
属性 值 描述
autoplay autoplay 音频马上自动播放
controls controls 向用户显示播放的按钮
loop loop 音频结束重新开始播放
src url 要播放音频的url
<video>视频
属性 值 描述
autoplay autoplay 视频自动播放
controls controls 显示视频播放控件
width pixels 设置播放器宽度
height pixels 设置播放器高度
loop loop 播放完是否循环播放
preload auto/none 规定是否预先加载视频
src url 视频url地址
poster imgurl 加载等待的画面图片
muted muted 静音播放
4.H5新增input表单,表单属性
type="email" 输入邮箱
type="url" 输入url类型
type="time" 输入时间类型
type="month" 输入为月类型
type="week" 输入为周类型
type="number" 输入数字类型
type="tel" 手机号码
type="search" 搜索框
type="color" 生成颜色选择器
属性 值 说明
required required 表单拥有属性不能为空必须填
placeholder 提示文本 表单的提示信息
autofocus autofocus 自动聚焦属性,页面加载完自动聚焦到指定表单
autocomplete off/on(居多) 当用户开始输入时,浏览器是否显示之前写入的值(需要同时在表单中加入name的值同时成功提交)
multiple multiple 可以多选文件提交
5.CSS3新特性
1.属性选择器
选择符 简介
E[alt] 选择具有alt元素的E元素
E[alt="val"] 选择具有alt属性,且属性值中等于val的E元素
E=[alt^="val"] 匹配具有alt属性,且值以val的E元素
E=[alt$="val"] 匹配具有alt属性,且值以val结尾p的E元素
E=[alt*="val"] 匹配具有alt属性,且值中含有val的E元素
2.结构伪类选择器
选择符 简介
E:first-child 匹配父元素的第一个子元素
E:first-child 匹配父元素的最后一个子元素
E:nth-child(n) 匹配父元素的第n个子元素 (even为偶数odd为奇数)
E:first-of-type 指定类型的第一个
E:last-of-type 指定类型的最后一个
E:nth-of-type(n) 指定类型的第n个
总结::nth-child(n)选择父元素里边的第n个孩子,他不管里面的孩子是否是同一类型,而nth-of-type选择指定类型的元素
3.伪元素选择器
选择器 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
注意:
before和after必须有content属性
before在内部的前面after在内容的后面
before和after创建一个元素,但是属于行内元素
因为在dom里面看不见刚才创建的元素,所以称为伪元素
伪元素和标签选择器一样,权重为1