我所了解的H5和CSS3新特性

 这一篇博客呢我准备和大家说一说我知道的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两种播放

<video src='文件路径'controls='controls'(控制器,可简写为controls)autoplay='autoplay'(自动播放,可简写为autoplay)loop='loop'(重复次数)poster='封面图路径'width=''height=''></video>

<audio src='文件路径'controls='controls'(控制器,可简写为controls)autoplay='autoplay'(自动播放,可简写为autoplay)loop='loop'(重复次数)></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 “弹性盒”

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,544评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,430评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,764评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,193评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,216评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,182评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,063评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,917评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,329评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,425评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,019评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2 353

推荐阅读更多精彩内容