欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Web前端——HTML中的标签

程序员文章站 2022-04-24 22:13:44
...

1. meta标签

实现meta标签功能的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 
        meta主要用于设置网页中的一些元数据，元数据不是给用户看的
            常用属性：
            charset 指定网页字符集
            name    指定数据的名称
            content 指定数据的内容

                keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开
                    例子：<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,京东"/>
                        <meta name="keywords" content="网购,网上购物,在线购物,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">

                description 用于指定网站的描述
                    例子：<meta name="description" content="网上购物【京东正品行货，全国配送，心动不如行动，立即购买享受更多优惠哦！】">
                        网站的描述会显示在搜索引擎的搜索结果中
                
                title标签的内容会作为搜索结果的超链接上的文字显示
                    例子：<title>亚马逊网上购物商城，给你更大的世界</title>

                http-equiv
                    例子：<meta http-equiv="refresh" content="3,url=https://www.baidu.com"> 
                        将页面重定向到另一个网站（过3秒跳转到百度的网址）
     -->
     <meta name="keywords" content="HTML5,前端,CSS3">
     <meta name="description" content="这是一个非常不错的网站">
     <meta http-equiv="refresh" content="3,url=https://www.baidu.com"> 

     
    <title>meta功能</title>
</head>
<body>
    
</body>
</html>

语义化标签

  • 标题+分组+段落+强调+引用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <!-- 
        在网页中HTML专门用来负责网页的结构
            所以在使用HTML标签的时候，应该关注的是标签的语义，而不是他的样式

            标题标签：
                h1~h6 一共有六级标题
                从h1~h6重要性递减，h1最重要，h6最不重要
                h1在网页中的重要性仅次于title标签，一般情况下一个页面中只有一个h1
                一般情况下标题标签只会使用到h1~h3，h4~h6很少用

                标题标签都是块元素

            在页面中独占一行的元素称为块元素（block element）
     -->
    <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标签用于表示语音语调的一个加重

        在页面中不会独占一行的元素称为行内元素（inline element）
     -->
    <p>今天天气<em>真</em>不错</p>


    <!-- 
        strong表示强调，重要内容！
     -->
     <p>你今天必须要<strong>完成作业</strong></p>


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


    <!-- q表示一个短引用 -->
    子曰：
    <q>学而时习之，乐呵乐呵！</q>


    <!-- 
        br标签表示页面中的换行
     -->
    <br>
    <br>
    今天天气不咋样
      
</body>
</html>
  • 块元素和行内元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <!-- 
        块元素（block element）
            - 在网页中一般通过块元素来进行布局

        行内元素（inline element）
            - 行内元素主要用来包裹文字

            - 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
            - 块元素中基本上什么都能放
            - p元素中不能放任何的块元素
        
        浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
            比如：
                标签写在了根元素的外部
                p元素中嵌套了块元素
                根元素中出现了除head和body以外的子元素
                ... ...

     -->
    <p>
        <h1>哈哈哈</h1>
    </p>

</body>
</html>

<h1>我写在了html标签的外面！</h1>
  • 布局标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</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>
    
</body>
</html>

具体详细请见：html的标签信息

相关标签： web前端 html

上一篇： 实现div中的img图片垂直水平居中

下一篇： 字体和图片的垂直居中、水平居中

推荐阅读