04-HTML 中的语义化标签

HTML 中的语义化标签

在网页中 HTML 专门用来负责网页的结构，所以在使用 HTML 标签时，

应该关注标签的语义，而不是他的样式。

• 标题标签

  h1 ~h6 一共有六级标题

  从 h1 ~ h6 语义表示的重要性递减， h1 最重要，h6 最不重要

  h1 在网页中的重要性仅次于 title 标签，一般情况下一个网页中只使用一次 h1

  一般情况下标题标签只会使用到h1 ~ h3，h4 ~ h6 很少使用

  （标题标签都是块元素）

       <h1>一级标题</h1>
       <h2>二级标题</h2>
       <h3>三级标题</h3>
       <h4>四级标题</h4>
       <h5>五级标题</h5>
       <h6>六级标题</h6>
  

• 引用标签

  • blockquote 标签

    表示一个长引用

          鲁迅说：
          <!-- blockquote 表示一个长引用 -->
          <blockquote>
              这句话我是从来没有说过的！
          </blockquote>
    

  • q 标签

    表示一个短引用

          子曰<q>学而时习之，乐呵乐呵！</q>
    

• 段落标签

       <!-- 
           p标签表示页面中的一个段落
  
           p也是一个块元素
        -->
        <p>在p标签中的内容就表示一个段落</p>
        <p>在p标签中的内容就表示一个段落</p>
  

• 文本格式化标签

  ​ 和加粗文字优先strong
  ​ 和倾斜作用推荐em
  ​ 和加一条删除线推荐del
  ​ 和下划线推荐ins

• 分组标签

  <hgroup></hgroup> 标签表示分组，可以把相同类型的标签嵌套在里边。

       <!-- 
          hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
  
        -->
        <hgroup>
              <h1>回乡偶书二首</h1>
              <h2>其一</h2>
        </hgroup>
  

• 布局标签

  布局标签是结构化语义标签。

  ​ header 表示网页的头部*

  ​ main 表示网页的主体部分(一个页面中只会有一个main)

  ​ footer 表示网页的底部

  ​ nav 表示网页中的导航

  ​ aside 和主体相关的其他内容（侧边栏）

  ​ article 表示一个独立的文章

  ​ section 表示一个独立的区块，上边的标签都不能表示时使用section

  ​ div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素

  ​ span 行内元素，没有任何的语义，一般用于在网页中选中文字

  	 <header></header>
       <main></main>
       <footer></footer>
  
       <nav></nav>
       <aside></aside>
       <article></article>
  
       <section></section>
  
       <div></div>
  
       <span></span>
  

• 换行，水平线 标签

  • 换行标签

    <br>  
    

  • 水平线标签

    <hr>
    

• base 标签

  在head头部使用

  <base />单标签
  <base target="_blank" />
  	默认所有标签都在新窗口打开
  		_blank是在新窗口打开，_self是在当前窗口打开
  

• 内联框架

      <!-- 
  
          内联框架，用于向当前页面中引入一个其他页面
              src 指定要引入的网页的路径
              frameborder 指定内联框架的边框
  
       -->
      <iframe src="https://www.qq.com" width="800" height="600" 				frameborder="0"></iframe>
      <h1>Hello</h1>