乐趣区

关于前端学习:HTML标签HTML5-语义化标签

援用标签

  • 援用大段文本:<blockquote></blockquote>

    • 特点:援用的文本会独立进去,左右主动进行缩进
  • 援用小段文本:<q></q>

    • 特点:援用的文本不会独立进去,被援用的文本主动应用双引号包裹
  • 被援用的文档信息:<address></address>

    • 特点:斜体显示
  • 被援用的文档的题目:<cite></cite>

    • 特点:斜体显示
  • 文本的缩写或单词缩略词:<abbr title=""></abbr>

    • title 属性内写缩写或缩略词的全称

语义化标签

  • 页面头部:<header></header>
  • 页面主体:<main></main>
  • 页面尾部:<footer></footer>
  • 题目组合:<hgroup></hgroup>
  • 导航栏:<nav></nav>
  • 输入:<output></output>
  • 画布:<canvas></canvas>
  • 页面区域划分

    • 区域区块划分:<article></article>
    • 次要区域划分:<section></section>
    • 辅助区域划分:<aside></aside>

文档题目、细节开合管制

  • 题目:<summary></summary>
  • 细节:<details></details>

    <details open>
      <summary>HTML 5</summary>
      This document teaches you everything you have to learn about HTML 5.
    </details>
    
    open 属性管制默认是否关上显示 

进度条、度量范畴

 进度条
<progress value="22" max="100"></progress> 

度量范畴
<meter value="3" min="0" max="10"> 非常之三 </meter>

日期、工夫

<time datetime="2008-02-14"> 情人节 </time>

带有标记的文本

<mark>milk</mark>

代码块标签

  • pre 元素包裹的内容将保留空格与换行符
  • code 元素将文本内容转化为等宽字体,示意这是一段源代码程序

    <pre>  
      <code></code>  
    </pre>

文字注解、注音

  • ruby:突围要注音的文字,内含三个元素。
  • rb:要注音的对象
  • rp:若浏览器不反对 ruby 那么上例就会顺次显示 rb rp rt rp rb 内容在同一行。如果浏览器反对,那么 rp 内容 不会显示。如上例,在 IE8 下可能会显示成 吉林大学 (ji lin da xue)

    <ruby>
      <rb> 吉林大学 </rb>
      <rp>(</rp>
      <rt>ji lin da xue</rt>
      <rp>)</rp>
    </ruby>

设置文本方向

  • dir 属性:属性值有两个 ltr、rtl
<bdo  dir="rtl">123</bdo>

罕用特殊字符

Item Value Item Value Item Value
空格: &nbsp\; 版权: &copy\; 注册: &reg\;
商标: &trade\; 左尖括号 &lt\; 右尖括号 &gt\;
退出移动版