这一篇博客呢我准备和大家说一说我知道的H5和CSS3新特性(可能不太全,但我真的有用心在搜集)
HTML5
新增的一些标签:
article “定义页面独立的内容区域”
aside “定义页面的侧边栏内容”
command “定义命令按钮,比如单选按钮、复选框或按钮”
details “用于描述文档或文档某个部分的细节”
dialog “定义对话框,比如提示框”
summary “标签包含 details 元素的标题”
figure “规定独立的流内容(图像、图表、照片、代码等等)”
figcaption “定义元素的标题”
footer “定义 section 或 document 的页脚”
header “定义了文档的头部区域”
mark “定义带有记号的文本”
meter “定义度量衡。仅用于已知最大和最小值的度量”
nav “定义导航链接的部分”
progress “定义任何类型的任务的进度”
ruby “定义 ruby 注释(中文注音或字符)”
rt “定义字符(中文注音或字符)的解释或发音”
rp “在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容”
section “定义文档中的节(section、区段)”
time “定义日期或时间”
wbr “规定在文本中的何处适合添加换行符”
修改或删除的:
hr “直线,语义化变为分割线”
small “表示文字小,语义化变为附属细则”
strong “加粗,语义化变为重点强调”
font 被删除 big 被删除
表单:
新增的type属性
calendar(日历)
date(日期)
time(时间)
email(邮箱地址)
url search
color(调色板)
tel(电话号码)
range(范围)
number(数字)
新增的属性
autocomplete(自动补全)
autofocus(自动获取焦点)
list (规定 datalist datalist 是输入域的选项列表)
min、max 和 step 属性(input规定的一些属性)
multiple(email 和 file可以选择多个值)
pattern(用来验证 input 的正则)
placeholder(占位符)
还有video和audio两种播放
离线存储:
localStorage(长久储存,只能人为删除)
sessionStorage(短时储存,页面关闭后就删除)
用于绘画的canvas
CSS3
新的选择器:
attr “只使用属性名,但没有确定任何属性值”
attr="value" “指定属性名,并指定了该属性的属性值”
attr~="value" “指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写”
attr^="value" “指定了属性名,并且有属性值,属性值是以value开头的”
attr$="value" “指定了属性名,并且有属性值,而且属性值是以value结束的”
attr * ="value" “指定了属性名,并且有属性值,而且属值中包含了value”
attr|="value" “指定了属性名,并且属性值是value或者以“value-”开头的值”
:hover “用于当用户把鼠标移动到元素上面时的效果”
:active “用于用户点击元素那一下的效果(正发生在点的那一下,松开鼠标左键此动作也就完成了)”
:focus “用于元素成为焦点,这个经常用在表单元素上”
:first-child “选择某个元素的第一个子元素”
:last-child “选择某个元素的最后一个子元素”
:nth-child() “选择某个元素的一个或多个特定的子元素”
:nth-last-child() “选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算”
:nth-of-type() “选择指定的元素”
:nth-last-of-type() “选择指定的元素,从元素的最后一个开始计算”
:first-of-type “选择一个上级元素下的第一个同类子元素”
:last-of-type “选择一个上级元素的最后一个同类子元素”
:only-child “选择的元素是它的父元素的唯一一个了元素”
:only-of-type “选择一个元素是它的上级元素的唯一一个相同类型的子元素”
:empty “选择的元素里面没有任何内容”
变形:
transform:translate (X|Y|Z) 位移transform:rotate (X|Y|Z) 旋转transform:scale (X|Y|Z) 缩放transform:skew (X|Y|Z) 倾斜 单位deg
一些杂项:
shadow “阴影,有文字阴影和盒阴影(格式:box-shadow:10px 10px 5px #000000;)”
background “背景,有很多东西,我最常用的是背景色”
border-radius “边框圆角”
-webkit-filter:gragscale(1) filter:gragscale(1) “灰度,公祭日时使用的页面变灰效果”
overflow:hidden text-overflow:ellipsis white-space:nowrap “超出省略单行显示省略号”
display:-webkit-box -webkit-box-orient:vertical -webkit-line-clamp:3 overflow:hidden “多行显示省略号”
box-sizing “盒子模型,我经常使用怪异盒模型也就是border-box,还有content-box和inherit”
display-flex “弹性盒”