首页 > 代码库 > H5 新特性之全局属性一

H5 新特性之全局属性一

2024-08-19 14:16:11   224人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<title>html新特性</title>-->
<!--</head>-->
<!--<bod>-->
<!---->
<!--</bod>-->
<!--</html>-->
<!--在HTML5中，有许多新引入的元素，hgroup就是其中之一。假设我的网站名下面紧跟着一个子标题，-->
<!--我可以用<h1>和<h2>标签来分别定义。然而，这种定义没有说明这两者之间的关系。而且，-->
<!--h2标签的使用会带来更多问题，比如该页面上还有其他标题的时候。-->
<!--在HTML5中，我们可以用hgroup元素来将它们分组，这样就不会影响文件的大纲。-->
<hgroup>
    <h1>我是大标题</h1>
    <h2>我是小标题</h2>
</hgroup>
<!--将文字和图片内在联系起来。因此，HTML5引入了<figure>元素。当和<figcaption>结合起来后，我们可以语义化地将注释和相应的图片联系起来。-->
<figure>
    <img src="http://www.mamicode.com/img/662E.tmp.jpg">
    <figcaption>        <p> 学护理</p>    </figcaption>
</figure>
<!--在HTML5中，<small>被用来定义小字。试想下你网站底部的版权状态，根据对此元素新的HTML5定义，<small>可以正确地诠释这些信息。-->
<small>这是small来定义网站底布的版权状态，试试吧</small>


<!--HTML5的解决方案消除了对JavaScript的需要。如果一个特定的输入应该是“选择”或聚焦，默认情况下，我们现在可以利用自动聚焦属性。-->

<p>你的姓名：</p><input type="text" autofocus>

<!--当使用<audio>元素时请记得包含两种音频格式。FireFox想要.ogg格式的文件，-->
<!--而Webkit浏览器则需要.mp3格式的。和往常一样，IE是不支持的，且Opera 10及以下版本只支持.wav格式。-->
<audio controls autoplay>
    <source src="http://www.mamicode.com/xx.ogg"/>
    <source src="http://www.mamicode.com/xx.mps"/>
    <p>
        你的版本不支持
        请下载 <a href="http://www.mamicode.com/xx.mp3">地址</a>
    </p>
</audio>

<!--HTML5中不仅有<audio>元素，而且还有<video>。然而，和<audio>类似，HTML5中并没有指定视频解码器，-->
<!--它留给了浏览器来决定。虽然Safari和Internet Explorer9可以支持H.264格式的视频，-->
<!--Firefox和Opera是坚持开源Theora 和Vorbis格式。因此，指定HTML5的视频时，你必须提供这两种格式。-->
<video controls autoplay>
    <source src="http://www.mamicode.com/xx.ogv">
    <source src="http://www.mamicode.com/xx.mp4">
    <p>
        你的版本不支持
        请下载 <a href="http://www.mamicode.com/xx.mp4">地址</a>
    </p>
</video>


<!--在HTML4或XHTML中，你需要用一些正规表达式来验证特定的文本。而HTML5中新的pattern属性让我们能够在标签处直接插入一个正规表达式。-->
<form action="" method="post">

    <label for="username">
        Create a Username:
    </label>

    <input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required>
    <button type="submit">Go</button>

</form>
<br>
<br>
<!--datalist-->
<form oninput="x,value=http://www.mamicode.com/parseInt(a,value)+parseInt(b.value)">
    <input id="myCar" list="cars">
    <datalist id="cars">
        <option value="http://www.mamicode.com/BMW"></option>
        <option value="http://www.mamicode.com/Ford"></option>
        <option value="http://www.mamicode.com/Volvo"></option>
    </datalist>
</form>


<!--mark-->
<h3>mask</h3>
<p>do not forget to buy <mark>milk</mark> today</p>

<h1>进度条 progress</h1>
<progress max="100" value="http://www.mamicode.com/85"></progress>
<!--time-->
<h3>time</h3>
<p>
    发布日期 <time datetime="2012-1-21">9:00</time>
    更新日期
    <time datetime="2012-2-12T09:00Z" pubdate>9:00</time>
</p>
<!--wbr-->
<h3>wbr</h3>
<p>h5新特性 换行 如你要学习阿贾克斯，那么先熟悉XML
    <wbr></wbr>
    http request 对象
</p>
<!--command 不支持-->
<menu>
    <command onclick="alert(‘1‘)"  lable="click" >
    click me
</menu>
<!--details-->
<h3>details</h3>
<details open>
<summary>MacBook Pro Specification</summary>
<ul>
    <li>dja</li>
    <li>djb</li>
    <li>djc</li>
    <li>djd</li>
</ul>
</details>
</body>
</html>

H5 新特性之全局属性一


联系
我们