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
posted @ 2020-04-25 21:32  大写的X  阅读(146)  评论(0编辑  收藏  举报