ICode9

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

语义化标签

2022-03-05 12:31:56  阅读:194  来源: 互联网

标签:h1 网页 标签 元素 语义 行内 页面


在网页中HTML专门用来负责网页的结构,所以在使用html标签时,应该关注的是标签的语义,而不是它的样式。

块元素:在页面中独占一行的元素称为块元素(block element)

标题标签:
- 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中

        <hgroup>
                 <h1>回乡偶书二首</h1>
                <h2>其一</h2>         
             </hgroup>

<p></p>标签:
- 表示页面中的一个段落
    - <p>也是一个块元素,独占一行

            <p>我是p标签</p>
            <p>表示一个段落</p>


<em></em>标签:
- 用于表示语音语调的一个加重
- 在页面中不会独占一行,称为行内元素(inline element)

            <p>今天天气<em>真</em>不错!</p>

<strong></strong>标签:
- 表示强调,重要内容

            <p>今天必须要<strong>完成作业</strong>!</p>

<blockquote></blockquote>标签:
- 表示一个长引用
    - 属于块元素,独占一行

    鲁迅说:
            <blockquote>
                这句话我没说过。
            </blockquote>

<q></q>标签:
- 表示一个短引用
    - 属于行内元素,不会独占一行
    - 在编写代码时即使换行往下编写代码(不使用换行符),在页面显示中后面的文字也不会自动换行

            子曰:
            <q>
                学而时习之,乐呵乐呵!
            </q>

<br>标签:
- 表示换行

 

块元素 block element:
- 在网页中一般通过块元素来对页面进行布局
行内元素 inline element:
- 行内元素主要用来包裹文字

一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素
块元素中基本上什么都能放
        p元素中不能放任何的块元素

举例一:
        <html>
        <body>
            <p>
                    <h1>p元素中不能放任何块元素</h1>
                </p>
        </body>
        </html>
            <h1>我就写在html标签的外部</h1>

浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正
比如:
        标签写在了根元素的外部
        p元素中嵌套了块元素
        跟元素中出现了除head,body以外的子元素
        …… ……
从网页源码中看不到浏览器修正的内容,因为不是自动修正代码,而是在内存解析中修正
            在网页的开发者工具中可以查看:
                右键->检查->elements
                F12

 

布局标签(结构化语义标签)

html5新增:

         <header> 表示网页的头部
         <main>   表示网页的主题部分(一个页面中只会有一个main)
         <footer> 表示网页的底部
         <nav>    表示网页中的导航
         <aside>  和主体相关的其他内容(侧边栏)
         <article> 表示一个独立的文章
         <section> 表示一个独立的区块,上面的标签都不能表示时使用section

         <div>    没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素
         <span>   行内元素,没有任何语义,一般用于在网页中选中文字

标签:h1,网页,标签,元素,语义,行内,页面
来源: https://www.cnblogs.com/cjxstart/p/15967595.html

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

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

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

ICode9版权所有