zoukankan      html  css  js  c++  java
  • html5-语义化标签

    <header></header> 页眉

      主要用于页面的头部的信息介绍,也可用于板块头部

    <nav></nav> 导航

      一般用于网页的导航栏

    <hgroup> 页面标题和标语的组合

      <h1>妙味</h1>

      <h2>我是dada</h2>

    </hgroup>

      一个标题和一个子标题,或者标语的组合

    <footer></footer> 页脚

      页面的底部 或者 版块底部

    <section></section> 页面上的版块

      用于划分页面上的不同区域,或者划分文章里不同的节

    <article></article> 用来在页面中表示一套结构完整且独立的内容部分

      可以用来呈现论坛的一个帖子,杂志或报纸中的一篇文章,一篇博客,用户提交的评论内容,可互动的页面模块挂进等。

    <aside></aside> 和主体相关的附属信息

      可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分; 需要注意的地方是 1. aside的内容应该与article的内容相关。 2. 被包含在<article></article>中作为主要内容的附属信息部分,其中的内容 以是与当前文章有关的引用、词汇列表等 3. 在<article></article>之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。

    <figure></figure> 用于对元素进行组合。一般用于图片或视频

    <figcaption></figcaption> figrue的子元素 用于对figure的内容 进行说明

      <figure>

        <img src="miaov.png"/>(注意没有alt)

        <figcaption>dadada</figcaption>

      </figure>

    <time></time>用来表现时间或日期

      <p>我们在每天早上<time>9:00</time>开始营业</p>

      <p>我在<time datatime="2008-02-15">情人节</time>有个约会</p>

      datatime属性不会影响代码,其作用只是为了参照!!!

    <address></address>定义文章 或页面作者的详细联系信息

    <mark></mark> 需要标记的词或句子

    -------------具有功能的语义化标签----------------

    <datalist></datalist> 选项列表。 与input元素配合使用,来定义input可能的值。

      <input type="text" list="valList" />

      <datalist id="valList">

        <option value="javascript">javascript</option>

        <option value="html">html</option>

        <option value="css">css</option>

      </datalist>

    <details></details>用于描述文档或文档某个部分的细节(点击显示下拉信息)

      该元素用于摘录引用等 应该与页面的主要内容 区分开的 其他内容

      Open属性默认展开

    <summary></summary>details 元素的标题

      <details>

        <summary>妙味课堂</summary>

        <p>国内将知名的IT培训机构</p>

      </details>

    <dialog></dialog> 定义一段对话

      <dialog open>

        <dt>学生A</dt>

        <dt>2+2等于?</dt>

      <dt>学生B</dt>

        <dt>4</dt>

      </dialog>

      类似于dl和dt的关系 老版火狐默认是不显示dt内容的 需要open属性,和给distails语义标签加open效果类似。

    <keygen> 给表单添加一个公钥

      <form action="http://www.baidu.com" method="get">

        用户:<input type="text" name="usr_name"/>

        公钥:<keygen name="security" />

        <input type="submit" />

      </form>

      相对于前段有些鸡肋,会在页面上显示一个input输入框 输入内容被form表单提交时会被加密显示。

    <progress></progress> 定义进度条

       <progress max="100" value="76">

         <span>76</span>%

       </progress>

       会在页面显示一个进度条 max表示到最后的数值,value表示已达到的数字,会以百分比的形式显示进度条的颜色改变;span是为了向下兼容,有的浏览器不显示进度条就会出现"76%"

      

  • 相关阅读:
    Spring注解驱动开发3:自动装配
    Spring注解驱动开发2:生命周期和属性赋值
    Spring注解驱动开发1:组件注册
    Java线程及其实现方式
    Winform 可取消的单选按钮(RadioButton)
    autoit脚本-从基本的函数用法开始
    python进阶(一)
    dict字典的一些优势和劣势
    读《流畅的python》第一天
    智能化脚本autoit v3的简单了解
  • 原文地址:https://www.cnblogs.com/wssjzw/p/9270814.html
Copyright © 2011-2022 走看看