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>      <!-- hgroup :标题组 -->       <hgroup>          <h1></h1>          <h2></h2>      </hgroup>     <!--     p标签表示页面中的一个段落     -->          <p>在p标签中的内容就表示一个段落</p>          <!--              em标签用于表示语音语调的一个加重
             在页面中不会独占一行的元素称为行内元素（inline element）          -->          <p>今天天气<em>真</em>不错</p>          <!--              strong表示强调，重要内容!           -->          <p>你今天必须要<strong>完成作业</strong></p>          鲁迅说:          <!-- blockquote 表示一个长引用 -->          <blockquote>              这句话我从来没有说过的!          </blockquote>          <!-- q 表示一个短引用 -->          子曰<q>学而时习之，乐呵乐呵!</q>          <!-- br 表示换行标签 -->          <br>          <br>          今天天气真不错 块元素与行内元素：   块元素（ black element）            -在网页中一般通过块元素来对页面进行布局        行内元素（inline element）            -行内元素主要用来包裹文字
           -一般情况下会在块元素中放行内元素             而不会在行内元素中放块元素            -p元素中不能方任何的块元素
        浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正             比如：             标签写在根元素的外部             p元素中嵌套了块元素             根元素出现了除head和body以外的子元素             ...  ... 图示： 自己写的：

网页显示的：

 

 

布局标签:结构语义化标签

      <!--           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> 列表： <!--          列表（list）          1，铅笔          2，尺子          3，橡皮     在html中也可以创建列表，html列表一共有三种；         1.有序列表         2.无序列表         3.定义列表
    无序列表，使用u1标签来创建有序列表         使用li表示列表项     有序列表，使用o1标签来创建有序列表         使用li表示列表项     定义列表，使用dl标签来创建一个定义列表         使用dt来表示定义的内容         使用dd来对内容进行解释说明         列表之间可以嵌互相套
              -->       <ul>           <li>结构</li>           <li>表现</li>           <li>行为</li>       </ul>       <ol>         <li>结构</li>         <li>表现</li>         <li>行为</li>       </ol>       <dl>           <dt>结构</dt>           <dd>结构表示网页的结构，结构用来规定网页中那里是标题，那里是段落</dd>       </dl>   超链接： <!--         超链接可以让我呢吧从一个页面跳转到其他页面，             或者是当前页面的其他位置
        使用 a 标签来定义超链接             属性：                 href 指定跳转的目标路径                    -可以是一个外部的网站的地址                    -也可以写一个内部页面的地址
        超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素      -->      <a href="http://www.baidu.com">超链接</a>      <br><br>      <!-- <a href="http://www.baidu123.com">超链接</a> -->      <a href="">超链接2</a>   相对路径： <!--        当我们需要跳转到一个服务器内部的页面时，一般我们都会使用相对路径              相对路径都会使用.或..开头              ./              ../         ./可以省略不写，如果不写./也不写../则就相当于写了./
        ./ 表示当前文件所在的目录           -在我们这里当前页面就是 超链接           -./就等于  超链接所在目录 柯南的HTML
        ../表示当前文件所在目录的上一级目录 -->

 

这篇关于HTML学习：语义化标签的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！