H5语义化标签

H5 专栏收录该内容
2 篇文章 0 订阅

现在写H5项目,还是使用以前的标签,今天特意把H5的标签整理出来,监督自己些项目要使用新的标签。

H5的语义化标签:

1.<header></header>主要用于页面的头部的信息介绍,也可用于板块头部

2.<section></section>:页面上的版块用于划分页面上的不同区域,或者划分文章里不同的节

3.<footer></footer>:页脚,页面的底部或板块的底部

4.<hgroup></hgroup>页面上一个标题的组合(一个标题或一个子标题的组合,或者标语的组合)

列如:<hgroup>

        <h1>标题1</h1>

        <h2>标题2</h2>

</hgroup>

5.<nav></nav>:导航(包含链接的一个列表)、

列如:<nav>

        <p><a href="javascript:void(0)">列表1</a></p>

        <p><a href="javascript:void(0)">列表2</a></p>

</nav>

6.<article></article>:用来在页面中表示一套结构完整且独立的内容部分(一篇文章,博客等等)

7.<aside></aside>:元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分

8.<address></address>:定义文章,作者的详细的联系信息

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

10.<time></time>:用来表示时间或日期

列如:<time>9:16</time>

<time datetime="2018-2-14">情人节</time>

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

<figcaption></figcaption> :figure的子元素,用于对figure进行说明

列如:<figure>

        <img src="">

        <figcaption></figcaption>

     </figure>

12.<datalist></datalist>:选项列表。一般与input配合使用,用来定义input的可能值

列如:<input type="text" name="" list="valList">

    <datalist id="valList">

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

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

        <option value="h5">h5</option>

</datalist>

13.<details></details>:用来描述某个文档或某个文档的细节。

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

Open:是默认打开

<details open="">

        <summary>美国</summary>

        <p>美国是一个高度发达的资本主义国家,其政治、经济、军事、文化、创新等实力领衔全球。</p>

</details>

14. <dialog></dialog>:定义一段对话

列如:

<dialog open="">

        <dt>你喜欢美国吗?</dt>

        <dd>喜欢</dd>

        <dt>你喜欢美国饮食吗?</dt>

        <dd>喜欢</dd>

</dialog>

15.<progress max="120" value="50" >:用来定义进度条

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

列如:

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

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

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

        <input type="submit" />  

   </form>

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

慢思考

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值