ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML学习:语义化标签

2021-12-15 02:00:42  阅读:124  来源: 互联网

标签:行内 -- 标签 元素 语义 列表 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,超链接
来源: https://www.cnblogs.com/boy-ke/p/15690868.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有