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

    语义化标签:语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用;好处:最主要的就是对搜索引擎友好,有了良好的结构和语义使得网页内容自然容易被搜索引擎抓取,便于网站的推广。

      • <header>页眉:主要用于页面头部的信息介绍,也可以用于板块头部。
      • <hgroup>标题组合:标题和子标题或者是标语的组合。
      • 1 <hgroup>
        2     <h1>这是大标题</h1>
        3     <h2>这是子标题</h2>
        4 </hgroup>
      • <nav>导航:包含一个链接的列表。

      • <footer>页脚:页面的底部或者是版面的底部。

      • <section>板块:页面上的板块用于划分页面上的不同区域,或者是划分文章里的不同章节。

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

      • <aside>元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组、以及其他类似的有别与主要内容的部分。
      • <figure>用于对元素的组合。一般用于图片或视频。
      • 1 <figure>
        2     <img src="img/111.png" />
        3     <figcaption>这是说明文字</figcaption>
        4 </figure>
      • <datalist>选项列表:与input配合使用,来定义input可能的值。
      • 1 <input type="text" list="valList" />
        2 <datalist id="valList">
        3     <option value="javascript">javascript</option>
        4    <option value="html">html</option>
        5   <option value="css">css</option>
        6 </datalist> 
      • <details>用于描述文档或文档某个部分的细节,该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容。<summary>details元素的标题。
      • 1 <details open="open">
        2     <summary>百度</summary>
        3     <p>百度一下,你就知道</p>
        4 </details>
      • <dialog></dialog>定义一段对话。经测试,在chrome上不能识别

      • <dialog>
          <dt>老师</dt>
          <dd>2+2 等于?</dd>
          <dt>学生</dt>
          <dd>4</dd>
          <dt>老师</dt>
          <dd>答对了!</dd>
        </dialog> 
      • <address></address> 定义文章 或页面作者的详细联系信息。

      • <mark></mark> 需要标记的词或句子。标签内的内容被设置为黄色背景。

      • <keygen>标签规定用于表单的密钥对生成器字段。
      • <progress>定义进度条。
      • 1 <progress max="100" value="76">
        2     <span>76</span>%
        3  </progress> 
      • <time></time>用来表现时间或日期。

  • 相关阅读:
    day50_BOS项目_02
    day51_BOS项目_03
    Criteria 和 DetachedCriteria 的区别
    ecplise中如何关闭Tomcat的自动重启/加载
    Tomcat的Start可以启动起来,但是Debug启动突然启动不起来,一直停在 Class<T>.getDeclaredConstructors0(boolean) line: not available [native method] 的解决办法
    windows下读取Linux分区软件
    15 条实用 Linux/Unix 磁带管理命令
    Nginx安装与配置文件解析
    专注docker安全:Security Scanning
    清除linux系统的多余引导
  • 原文地址:https://www.cnblogs.com/tengri/p/5557824.html
Copyright © 2011-2022 走看看