HTML5 常用标签整理


<!--1.  html5 文本 -->
<div>
<header>
<hgroup>
<h1>h1</h1>
<h2>h2</h2>
</hgroup>
</header>
<article>article</article>
<footer>footer</footer>

</div>

<!-- 2. html5 小标签 -->
<div>
<a href="#header的位置" accesskey="a">快捷键a</a>
<small>small</small>
<big>big</big>
<i>i</i>
<blink>blink</blink>
<cite>cite</cite>
<sub>sub</sub>
<sup>sup</sup>
<span>span</span>
<dfn>dfn</dfn>
<samp>samp</samp>
<pre>pre</pre>
<kbd>kbd</kbd>
<address>addressaddressaddress</address>
<textarea name="" id="" cols="30" rows="10">textareatextareatextarea</textarea>
<code>code</code>
</div>

<div>
<article>article</article>
<aside>aside</aside>
<details>details</details>
<figcaption>figcaption</figcaption>
<figure>figure</figure>
<footer>footer</footer>
<header>header</header>
<hgroup>hgroup</hgroup>
<menu>menu</menu>
<nav>nav</nav>
<section>section</section>
<summary></summary>
<progress value="20" max="100"></progress>
</div>

<!-- 3. html5 列表 -->
<div>
<ul contenteditable="true">
<li>ul1</li>
<li>ul2</li>
<li>ul3</li>
<li>ul4</li>
</ul>
</div>

<div>
<ol contenteditable="true">
<li>ol1</li>
<li>ol2</li>
<li>ol3</li>
<li>ol4</li>
</ol>
</div>

<div>
<dl contenteditable="true">
<dt>dt1</dt>
<dd>dd1</dd>
<dt>dt2</dt>
<dd>dd2</dd>
<dt>dt3</dt>
<dd>dd3</dd>
<dt>dt4</dt>
<dd>dd4</dd>
</dl>
</div>
<!-- 4. html5 form -->
<div>
<form id="" name="" action="" method="" autocompelete="on">
<label for="email">邮箱:</label>
<input type="email" id="" name="" placeholder="" size="" required autofocus Pattern="[A-Za-z]{0-10}" min="" max="" value=""><!-- 四到十个英文字母 -->
<input type="number">
<input type="seach">
<input type="date">
<input type="color">
<input type="text">
<input type="textarea">
<input type="password">
<input type="range">
<input type="radio" name="one">
<input type="radio" name="two">
<input type="checkbox">
<input type="filemultiple="multiple">
<button type="submit" value="" onclick="javascript:window.location.href="aa.htm"">submit</button>
</form>
</div>

<div>
<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>
</div>

<div>
<input type="text" list="CityList"></input>
<datalist id="CityList">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
<option>one01</option>
<option>two01</option>
</datalist>
</div>

<!-- 5. html5 select -->
<div>
<select>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
</select>
</div>

<!--6. html5 多媒体 below -->
<div>

<img src="image1.png" alt="图片无法显示 替换文本" title="提示文本" longdesc="这是吴倩在2014.10.12弄的一张无法显示的图,这里做个长的提示文本">img</img>
<figcaption>
<p>this is something about img</p>
</figcaption>

<audio autoplay="autoplay" controls="controls">
<source src="file.ogg"></source><!-- firefox -->
<source src="file.mp3"></source><!-- chrome+safari -->
<source src="file.wav"></source><!-- opera -->
<a href="file.mp3">down this file</a>
</audio>

<video controls preload>
<source src="file.ogv" type="video/ogg" codecs="vorbis,theora"></source>
<source src="file.mp4" type="video/mp4" codecs="avc1.42E01E,MP4A.40.2"></source>
<source src="1.swf"></source>
<a href="file.mp4">down this file</a>
</video>

<canvas id="myCanves">本游览器不支持HTML5的画布标记!</canvas>

<embed id="" src="" width="" height="" type="" wmode="Opaque" wmode="transparent">

<object data="" type=""></object>

注意!此信息未认证,请谨慎判断信息的真实性!

全部评论
空

相关内容推荐

头像 头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像 头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像 头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像 头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像 头像
2022-12-10 18:47
门头沟学院_2023
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
点赞 6 评论
分享

全站热榜

正在热议