首页 > 网站 > WEB开发 > 正文

HTML5 常用标签整理

2024-04-27 14:26:04
字体:
来源:转载
供稿:网友
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="file" multiple="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 style="display:none" 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>

块级元素列表

<address> 定义地址<caption>定义表格标题<dd> 定义列表中定义条目<div> 定义文档中的分区或节<dl> 定义列表<dt> 定义列表中的项目<fieldset>定义一个框架集<form> 创建 HTML 表单<h1> 定义最大的标题<h2> 定义副标题<h3> 定义标题<h4> 定义标题<h5> 定义标题<h6> 定义最小的标题<hr> 创建一条水平线<legend>元素为 fieldset 元素定义标题<li> 标签定义列表项目<noframes>为那些不支持框架的浏览器显示文本,于 frameset 元素内部<noscript>定义在脚本未被执行时的替代内容<ol> 定义有序列表<ul> 定义无序列表<p> 标签定义段落<pre> 定义预格式化的文本<table> 标签定义 HTML 表格<tbody> 标签表格主体(正文)<td> 表格中的标准单元格<tfoot> 定义表格的页脚(脚注或表注)<th> 定义表头单元格<thead> 标签定义表格的表头<tr> 定义表格中的行

行内元素列表

<a> 标签可定义锚<abbr>表示一个缩写形式<acronym>定义只取首字母缩写<b>字体加粗<bdo>可覆盖默认的文本方向<big>大号字体加粗<br>换行<cite>引用进行定义<code>定义计算机代码文本<dfn>定义一个定义项目<em>定义为强调的内容<i>斜体文本效果<img>向网页中嵌入一幅图像<input>输入框<kbd>定义键盘文本<label>标签为 input 元素定义标注(标记)<q>定义短的引用<samp>定义样本文本<select>创建单选或多选菜单<small>呈现小号字体效果<span>组合文档中的行内元素<strong>语气更强的强调的内容<sub>定义下标文本<sup>定义上标文本<textarea>多行的文本输入控件<tt>打字机或者等宽的文本效果<var>定义变量

<button> 按钮<del> 定义文档中已被删除的文本<iframe>创建包含另外一个文档的内联框架(即行内框架)<ins> 标签定义已经被插入文档中的文本<map> 客户端图像映射(即热区)<object>object对象<script>客户端脚本


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表