HTML5之元素与标签结构

一、HTML5语法
沿用了HTML的语法,更简洁。
1.DOCTYPE及字符编码。

<!DOCTYPE html>
<html lang="zh-CN"><!--指定语言-->
    <head>
        <meta charset="UTF-8"><!--指定编码格式-->
        <title>HTML5语法</title>
    </head>

2.大小写都可以(一般都小写)

<input tYpe=Radio/>

3.布尔值

<input type="checkbox" checked />//选中状态为true
<input type="checkbox" />//未选中状态为false

4.省略引号(一般用双引号)

<input type="checkbox" checked />
        <input type='text' />
        <input type=Radio/>

可以写双引号,单引号或不写,所有空格必须加引号
5.可以进行省略的标签(一般不省略)
(1)不允许写结束符的标签:area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
(2)可以省略结束符的标签:li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th
(3)可以完全省略的标签:html、head、body、colgroup、tbody

二、新增/删除标签

新增的结构标签:
* section标签
表示页面中的一个内容区块,比如章节、页眉、页脚或页面其他部分。可以和h1、h2….等标签结合起来使用,表示文档结构。
例:HTML5中<section>_</section>HTML4中<div>_</div>
*article标签
表示页面中一块与上下文不相关的独立内容,比如一篇文章。
*aside标签
表示article标签内容之外的,与article标签内容相关的辅助信息。
*header标签
表示页面中一个内容区块或整个页面的标题。
*hgroup标签
表示对整个页面或页面中的一个内容区域的标题进行组合
*footer标签
表示整个页面或页面中的一个内容区块的脚注。一般来说,他会包含创作者姓名、创作日期及创作者的联系信息。
*nav标签
表示页面中导航链接的部分。
*figure标签
表示一段独立的刘内容,一般表示文档主体流内容中的一个独立单元、使用figcaption标签或figure标签组添加标题,例如:
HTML5中写作:

<figure>
        <figcaption>PRC</figcaption>
        <p>The People's Republic of China was born in 1949</p>
</figure>

HTML4中写作:

<dl>
        <h2>prc</h2>
        <p>The People's Republic of China was born in 1949</p>
    </dl>

新增媒体标签:
*video标签
定义视频,像电影片段或其他视频流。
例:

<video src="movie.ogg" controls="controls">video标签</video>

HTML4中写作:

<object tyle="application/ogg" data="someaudio.wav">
    <param name="src" value="someaudio.wav" />
</object>

*audio标签
定义音频,如音乐或其他视频流,
例:<audio src="someaudio.wav">audio标签</audio>
*embed标签
用来嵌入内容(包括各种媒体),格式可以是Midi、Wav、AIFF、AU、MP3、falsh
例如:<embed src="falsh.swf"></embed>
*新增表单空间标签
*其他新增标签

```
        <input type="checkbox" checked />
        <input type='text' />
        <input type=Radio/>
        <figure>
            <figcaption>PRC</figcaption>
            <p>The People's Republic of China was born in 1949</p>
        </figure>
    </body>
    <dl>
        <h2>prc</h2>
        <p>The People's Republic of China was born in 1949</p>
    </dl>
    <video src="movie.ogg" controls="controls">video标签</video>-->

<object tyle="application/ogg" data="someaudio.wav">
    <param name="src" value="someaudio.wav" />
    </object>

    <audio src="someaudio.wav">audio标签</audio>
<embed src="falsh.swf"></embed>

    <p>
        想让大家
    <mark>关注</mark>
        的内容
    </p>
    <!--进度条-->
    <progress max="100" value="80"></progress>
    <br/>
    <!--time语义标签或微数据标签,标注某部分内容,给搜索引擎使用,但搜索引擎解析到这一块表示他是一个标签
        pubdata属性告诉搜索引擎这是发布时间,T分隔时间与日期,z表示UTC这种标准时间格式
    -->
    <time datetime="2013-10-20T09:00">9:00</time>
    更新日期
    <time datetime="2013-10-20T09:00z" pubdate="9:00"></time>
    <!--ruby表示对某个字进行注释,rt表示注释内容,rp表示浏览器不支持时该如何显示-->
    <br/>
    <ruby>
        "範"
        <rt>fan</rt>
        <rp></rp>
    </ruby>
    <!--wbr软换行,若页面宽度足够在一行内显示则不换行,否则换行-->
    <p>
        如果想熟悉ajax,那么您必须熟悉XML HTTP Request对象
    <wbr></wbr>
    </p>

    <!--canvas进行图像绘制-->
    <canvas id="myCanvas">
        <script>
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext('2d');
            ctx.fillstyle='#FF0000';
            ctx.fillRect(0,0,80,100);
        </script>

    </canvas>
    <!--command命令标签 里面的每一项是一个命令,浏览器不支持。。。-->
    <menu>
        <command onclick="alert('Hello World')" lable="click">
        "click here"
        </command>
    </menu>
    <!--展开内容层-->
    <h3>details</h3>
    <details>
        <summary>MacBook Pro Specification</summary>
        <ul>
            <li>1111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </details>
    <!--list属性与datalist匹配,输入的时候给用户提示-->
    <input id="myCar" list="cars"/>
    <datalist id="cars">
        <option value="BMW">
        </option>
        <option value="Ford">
        </option>
        <option value="Volvo">
        </option>
    </datalist>
    <!--加密,表单提交时对数据加密-->
    <h3>keygen</h3>
    <form action="demo_keygen.asp" method="get">
        Username: <input type="text" name="usr_name" />
        Encryption: <keygen name="security" />
        <input type="submit" />
    </form>

    <form action="form_action.asp" method="get" name="sumform">
        <output name="sum"></output>
    </form>

新增属性








手持
电视
慕课网


  1. Coffee
  2. Tea
  3. Milk


手持
电视
慕课网


  1. Coffee
  2. Tea
  3. Milk

    <!--框架新增属性seamlesss,使得框架不会有边框也没有边距,
    srcdoc指定内嵌框架内容,当srcdoc出现src就不会出现(有先后顺序)
    sandbox用来规定内嵌框架的安全级别,不允许提交内嵌框架表单,禁止运行js脚本,
    内嵌框架跟外面的不是同一语言,不能通用。有四个不同属性--->
    <iframe seamless srcdoc="<h1>Hello</h1>" sandbox="allow-forms" src="http://www.baidu.com"></iframe>
全局属性
data-yourvalue
自定义标签属性
hidden

看不见我


隐藏标签
Spellcheck
对输入内容进行语法纠错


tabindex
设置用户按Tab后跳的输入框是哪个 确定优先级



contenteditable
表示可编辑

请您留言

“`

desiginMode
整个页面可编辑

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值