Html5语法之元素和属性

结构元素

  • section 表示页面中的一个内容区块,比如章节、页眉、页脚或页面
  • article 表示页面中的一块与上下文不想关的独立内容
  • aside 表示article元素的内容之外的,与article元素的内容相关的辅助信息
  • header 表示页面中一个内容区块或整个页面的标题
  • footer 表示整个页面或者页面中一个内容区块的脚注
  • nav 表示页面中导航链接部分
  • figure 表示一段独立的流内容
  • main 表示网页中的主要内容

其他元素

  • video元素 用于定义视频
<video src="movie.ogg" controls="controls">video元素</video>
  • audio元素 用于定义音频
<audio src="movie.wav">audio元素</audio>
  • embed元素 用来插入各种多媒体,格式可以是Midi,Wav,AIFF,AU,MP3等
<embed src="movie.wav"/>
  • mark 用来在视觉上向用户呈现那些突出显示或者高亮显示的文字,如同span
  • progress 表示运行中的进程,可以使用progress元素来显示javascript中耗费时间的函数的进程。
  • meter 表示度量衡,用于已知最大值和最小值的度量
  • time 表示日期和时间,也可以同时表示两者
  • ruby 表示ruby注释(中文拼音或字符)
  • rt 表示字符的解释或发音
  • rp 在ruby注释中使用,用来定义不支持ruby元素的浏览器所显示的内容
  • wbr 表示软换行,表示浏览器窗口或父级元素的宽度足够宽时,不进行换行,如果宽度不够时,主动在此处进行换行。
  • canvas 表示图形,这个元素本身没有行为,仅提供一块画布
<canvas id="myCanvas" width="200" height="200"></canvas>
  • command 表示命令按钮,比如单选按钮、复选框按钮等
  • details 表示用户要求得到并且可以得到的细节信息,可以与summary元素配合使用,summary元素提供标题或图例,summary元素应该是details元素的第一个子元素。
<details>
  <summary>HTML5</summary>
  This document teaches you everything you have to learn about HTML5
</details>
  • datalist 表示可选数据列表,与input元素配合使用,可以制作出输入值下拉列表
  • datagrid 表示可选数据的列表,以树形列表的形式显示
  • keygen 表示生成密钥
  • output 表示不同类型的输出,比如脚本的输出
  • source 媒介元素,定义媒介资源
  • menu 表示菜单列表
<menu>
  <li><input type="checkbox">Red</li>
  <li><input type="checkbox">blue</li>
</menu>
  • dialog 表示对话框

新增input元素类型

  • email 表示输入email地址的文本输入框
  • url 表示必须输入url地址的输入框
  • number 数值文本输入框
  • range 必须输入一定范围内数字值的输入框
  • Date Pickers 选取日期和时间的输入框
    • date 选取日月年
    • month 选取月年
    • week 选取周和年
    • time 选取时间
    • datetime 选取时间、月、日、年
    • datetime-local 选取时间、日、月、年(本地时间)

废除的元素

能使用css替代的元素

对于basefont,big,center,font,s,strike,tt,u等元素,由于他们的功能是纯粹为画面展示服务的,s、strike元素可以由del元素进行替代,tt元素可以由CSS的font-family属性进行替代。

不再使用frame框架

只支持iframe框架

只有部分浏览器支持的元素

applet,bgsound,blink,marquee等元素被废除,applet可以由embed替代,bgsound可以由audio元素替代,marquee可以由javascript编程的方式所替代。

其他废除的元素

  • 废除rb元素,使用ruby替代
  • 废除acronym,使用abbr元素替代
  • 废除dir元素,使用ul元素替代
  • 废除isindex元素,使用form和input元素相结合的方式替代
  • 废除listing元素,使用pre替代
  • 废除xmp,使用code元素替代
  • 废除nextid,使用GUIDS替代
  • 废除plaintext,使用“text/plain”替代

新增的属性

  • 可以对input(type=text),select,textarea,button元素指定autofocus属性,以指定属性方式让元素在画面打开时自动获取焦点
  • 可以对input元素(type=text)与textarea元素指定placeholder属性,会对用户输入进行提示,提示用户可以输入的内容
  • 可以对input,output,select,textarea,button,fieldset指定form属性,声明它属于哪个表单,然后将其放置在页面上任何位置,而不是表单之内。
  • 可以对input元素与textarea元素指定required属性,该属性表示在用户提交的时候进行检查,检查该元素内一定要有输入内容。
  • input元素增加了几个新的属性,autocomplete,min,max,multiple,pattern,step,同时还有一个新的list元素与datalist元素配合使用,multiple属性允许在上传文件时一次上传多个文件
  • input和button增加以下属性:formaction,formenctype,formmethod,formnovalidate与formtarget,他们可以重载form元素的action,enctype,method,novalidate与target属性,为fieldset元素增加了disabled属性
  • 为input,button,form元素增加了novalidate属性,该属性可以取消提交时进行的有关检查,表单可以被无条件提交
  • 为所有可使用标签的表单元素(包括非隐藏的input元素(type属性值不等于hidde)),button元素,select元素,textarea元素,meter元素,output元素,progress元素以及keygen元素定义一个lebels属性属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合。
  • 可以在标签内部放置一个表单元素,并且通过该标签的control属性访问该表单元素
  • 针对input元素与textarea元素,增加SelectionDirection属性,可以获取鼠标的选取文字的方向。
  • 对复选框添加indeterminate属性,说明复选框处于尚未明确是否选取的状态。
  • 对类型为image的input元素添加用于指定图片按钮中图片高度的height属性与图片宽度的width属性。
  • 对textarea元素新增用于指定文字可输入个数的maxlength属性和用于指定表单提交时是否在文字换行处添加换行符的wrap属性。

链接相关的属性

  • 为a何area元素增加了media属性,download属性,以及ping属性,download属性用于让用户下载目标链接所指向的资源,而不是直接打开该目标链接,media属性规定目标url是什么类型的媒介/设备进行优化的。
  • 为area元素增加了href,lang与rel属性,以保持与a元素,link元素的一致。
  • 为link元素增加了新属性size,该属性可以与icon元素结合使用,该属性指定关联图标的大小。
  • 为base元素增加了target属性,主要目的是保持与a元素一致性

其他属性

  • 为ol元素增加start属性和链接相关的属性,start属性定义列表的开始编号,reversed属性指定列表是否倒序显示
  • meta元素增加charset属性
  • menu元素增加type和label属性,label属性为菜单定义一个可见的标注,type属性可以让菜单以上下文菜单,工具条,与列表菜单三种形式出现。
  • 为style元素增加scoped属性,用来规定样式的作用范围,譬如只对页面上某个树起作用
  • 为html元素增加属性manifest,开发离线web应用程序时他与API结合使用,定义一个URL,在这个URL上描述文档的缓存信息
  • 为iframe增加三个属性-sandbox,seamless和srcdoc用来提高页面安全性,防止不信任的web页面执行某些操作。
废除的属性

全局属性

是指可以对任何元素都使用的属性。

contentEditable属性

允许用户编辑元素中的内容,布尔值属性,有一个inherit继承属性,如果该属性为true,那么inherit就是true。
还存在一个isContentEditable属性,当元素为可编辑时,返回true,否则返回false。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>contentEditable属性示例</title>
<ul contentEditable='true'>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
</ul>
</head>

designMode属性

用来指定整个页面是否可编辑,该属性可编辑的话,支持contentEditable属性的元素都可编辑,该属性只能在javascript脚本中被修改,有两个值‘on’和‘off’

document.designMode="on"

hidden属性

所有元素都允许使用该属性,功能是通知浏览器不渲染该元素,使该元素处于不可见状态,

spellcheck属性

spellcheck属性针对input和textarea提供的属性,他的功能是对用户输入的文本内容进行拼写和语法检查,必须明确声明属性值为true或false,如果元素的readOnly属性或disabled属性设为true,则不执行拼写检查。

<textarea spellcheck="true">

tabindex属性

当不断的敲击tab键让窗口或页面中的控件获得焦点,则每一个控件的tabindex表示该控件是第几个被访问到的。
把tabindex设置为负数,就可以避免不需要的控件获得焦点

新增的事件

新增的事件

参考文章

书籍:HTML5与CSS3权威指南

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,644评论 18 139
  • 一、html5语法特点 1.DOCTYPE及字符编码① 文档声明DOCTYPE:<!doctype html>② ...
    MGd阅读 967评论 0 2
  • 中华骄傲 学习汉字,宣扬中国文化 正直:目不斜视,直视正前方,这就是汉字的演变过程!记住它的由来,更加有趣的学习中...
    幸福之巢阅读 242评论 0 3
  • 当你写不出东西,当你因此恐慌却无奈,当你看着别人的文章写得那么好并因此陷入更深的焦虑。 你不妨,停下来。 从电脑或...
    小失恋阅读 476评论 0 5
  • 向往精彩而又热烈的生活,但又害怕嘈杂。
    倾心珠阅读 277评论 0 1