HTML5基础

HTML5语法

版本兼容性

可以省略标记的元素

  1. 不允许写结束标记的元素有:area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr。
  2. 可以省略结束标记的元素有:li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th。
  3. 可以省略全部标记的元素有:html,head,body,colgroup,tbody。

具有布尔值的属性

对于具有boolean值的属性,如disabled与readonly等,当只写属性而不指定属性值时,表示属性值为true;如果想要奖属性值设为false,可以不使用该属性。另外,要想奖属性值设定为true,也可以将属性名设定为属性值,或将空字符串设定为属性值。例如:

<!--只写属性,不写属性值,代表属性为true-->
<input type="checkbox" checked>
<!--不写属性,代表属性为false-->
<input type="checkbox">
<!--属性值=属性名,代表属性为true-->
<input type="checkbox" checked="checked">
<!--属性值=空字符串,代表属性为true-->
<input type="checkbox" checked>

省略引号

属性值两边既可以用双引号,也可以用单引号。HTML5在此基础上做了一些改进,当属性值不包括空字符串,<,>,=,单引号,双引号邓自负是,属性值两边的引号可以省略。例如:

<input type="text">
<input type='text'>
<input type=text>

HTML5元素

新增的结构元素

元素名称 说明
header 标记头部区域的内容(用于整个页面或页面中的一块区域)
footer 标记脚部区域的内容(用于整个页面或页面中的一块区域)
setion Web页面中的一块区域
article 独立的文章内容
aside 相关内容或者引文
nav 导航类辅助内容

新增功能元素

  • hgroup元素:
    用于对整个页面或页面中一个内容区块的标题进行组合。例如:
<hgroup>...</hgroup>

在HTML4中表示为:

<div>...</div>
  • figure元素:
    表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用figcaption元素可为figure元素组添加标题,例如:
<figure>
       <figcaption>标题</figcaption>
       <p>内容...</p>
</figure>

在HTML4中表示为:

<dl>
        <h1>标题</h1>
        <p>内容....</p>
</dl>
  • video元素:
    定义视频,比如电影片段或其他视频流。例如:
<video src="movie.ogg" controls="controls">video元素</video>

在HTML4中表示为:

<object type="video/ogg" data="movie.ogv">
      <param name="src" value="movie.ogv">
</object>
  • audio元素:
    定义音频,比如音乐或其他音频流。例如:
<audio type="someaudio.wav">audio元素</audio>

在HTML4中表示为:

<object type="application/ogg" data="someaudio.wav">
        <param name="src" value="someaudio.wav">
</object>
  • embed元素:
    用来插入各种多媒体,格式可以是MIDI,WAV,AIFF,AU,MP3等。例如:
<embed src="horse.wav"/>

在HTML4中表示为:

<object data="flash.swf" type="application/x-shockwave-flash></object>
  • mark元素:
    主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。例如:
<mark></mark>

在HTML4中表示为:

<span></span>
  • time元素:
    表示日期或时间,也可以同时表示两者。例如:
<time></time>

在HTML4中表示为:

<span></span>
  • canvas元素:
    表示图形,如图表和其他图像。这个元素本身没有行为,仅提供一块画布,但它把一个绘图API展现给客户端JavaScript,以使脚本能够把想绘制的东西绘制到这块画布上。例如:
<canvas id="myCanvas" width="200" height="200"></canvas>

在HTML4中表示为:

<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>
  • output元素:
    表示不同类型的输出,比如脚本的输出。例如:
<output></output>

在HTML4中表示为:

<span></span>
  • source元素:
    为媒介元素(比如<video>和<audio>)定义媒介资源。例如:
<scource>

在HTML4中表示为:

<param>
  • menu元素:
    表示彩蛋列表。当希望列出表单控件时使用该标签。例如:
<menu>
        <li><input type="checkbox"/>Red</li>
        <li><input type="checkbox"/>blue</li>
</menu>

在HTML4中,menu元素不被推荐使用。

  • ruby元素:
    表示ruby注释(中文注音或字符)。例如:
<ruby>汉<rt><rp>(</rp>han'<rp>)</rp></rt></ruby>
  • rt元素:
    表示字符(中文注音活字符)的解释或发音。例如:
<ruby>汉<rt> han'</rt></ruby>
  • rp元素:
    在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容。例如:
<ruby>汉<rt><rp>(</rp>han'<rp>)</rp></rt></ruby>
  • wbr元素:
    表示软换行。wbr元素与br元素的区别是br元素表示此处必须换行;而wbr元素的意思是浏览器窗口活父级元素的宽度足够宽时(没必要换行时)不进行换行,而当宽度不够时,主动在此处进行换行。
  • command元素:
    表示命令按钮,如单选按钮,复选框或按钮。例如:
<command onclick="ucut()" label="cut">
  • details元素:
    表示用户要求得到并且可以得到的细节信息,可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的,用户单机标题时,会显示出细节信息。summary元素应该会死details元素的第一个子元素。例如:
<details>
        <summary>HTML5</summary>
        For the latest updates form the HTML WG.
</details>
  • datalist元素:
    datalist元素表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表。例如:
<datalist></datalist>
  • datagird元素:
    表示可选数据的列表,它以树形列表的形式来显示。例如:
<datagird></datagird>
  • keygen元素:
    表示生成密钥。例如:
<keygen>
  • progress元素:
    表示运行中的进程,可以使用progress元素来显示JavaScript中耗费时间的函数的进程。例如:
<meter></meter>
  • email:表示必须输入E-mail地址的文本输入框。
  • url:表示必须输入URL地址的文本输入框。
  • number:表示必须输入数值的文本输入框。
  • range:表示必须输入一定范围内数字值的文本输入框。
  • Date Pickers:
    HTML5拥有多个可供选取日期和时间爱你的新型输入文本框:
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 开始学习HTML啦, 谁让现在iOS的招聘要求上都写着熟练掌握HTML优先呢.目前在看的< >, 感觉还挺不错的....
    取昵称真讨厌阅读 382评论 3 0
  • 本文主要介绍Html5和Html4的区别。 语法的改变 内容类型HTML5 的文件扩展符与内容类型保持不变。扩展符...
    layjoy阅读 1,820评论 0 23
  • 一 : 科普一分钟 //其实我有很多奇思妙想的点子,被困在脑海中,往往这就是学习的动力开发的时候有很多好看绚丽的...
    TianTianBaby223阅读 1,263评论 6 9
  • 时间:2016年5月15日在前面两天的基础学习中,尽管大多数东西给了我们一些新奇和体验,但是任何事物任何人都是不完...
    旭先生阅读 878评论 0 2
  • 昨天七夕,自己一个人和宝新区过的,他回来了,陪他爸妈七夕。我想以后也陪我爸妈他应该也能理解吧。他回来,孩子挺高兴,...
    艳儿吖阅读 152评论 0 0