• 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> 客户端脚本

  • 相关阅读:
    Linux文件系统(三)虚拟文件系统
    Linux文件系统(二)磁盘文件系统
    requests模块
    jquery进阶(文档操作,事件委托等)
    JQuery基本使用
    js基础和js操作bom和dom对象
    js -- javascript
    CSS
    HTML
    python之pymysql模块
  • 原文地址:https://www.cnblogs.com/cynthia-wuqian/p/4578598.html
Copyright © 2020-2023  润新知