HTML5之元素与标签结构

最新推荐文章于 2022-08-21 12:46:40 发布

叮叮当当0543

最新推荐文章于 2022-08-21 12:46:40 发布

阅读量684

点赞数

一、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>

新增属性

手持
 电视
 慕课网

Coffee
Tea
Milk

手持
电视
慕课网

Coffee
Tea
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
整个页面可编辑

叮叮当当0543

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫