前端必知：2.html中常用的基础标签-块

小姚学前端

已于 2023-07-05 15:02:49 修改

阅读量664

点赞数 4

分类专栏： HTHL+CSS 文章标签：前端 html

于 2023-07-04 22:39:08 首次发布

本文链接：https://blog.csdn.net/qq_52799985/article/details/131544602

版权

HTHL+CSS 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

摘要：HTML是构建网页结构的基础语言，在前端开发中扮演着关键角色。本文将深入介绍HTML中常用的基础标签之一：块级标签。我们将逐一探讨块级标签的作用和使用方法，并给出一些示例，帮助读者更好地理解和应用这些标签。不论您是初学者还是有一定经验的前端开发者，掌握这些HTML块级标签将为您的网页设计和布局打下坚实的基础。点击阅读全文，一起来学习HTML中常用的基础标签-块，提升您的前端技能。

正文：

引言：介绍HTML作为网页结构语言的重要性，并概述本文将讨论的主题。
介绍块级标签
块级标签的特点：详细说明块级标签的一些共同特征和行为，如默认的展示方式、占据整行、可包含内联元素等。

常用的HTML块级标签：

<div> 标签：介绍 <div> 标签的作用和使用场景，如何利用它进行布局和组织网页内容。
<p> 标签：说明 <p> 标签用于段落的定义和展示，如何合理使用它使文本内容更有结构。
<h1>-<h6> 标签：介绍标题标签的层次结构和语义化的重要性，如何选择使用正确的标题标签。
<ul> 和 <ol> 标签：说明无序列表和有序列表的使用方法，如何创建和排列列表项。

<blockquote> 标签：解释 <blockquote> 标签的作用和样式，如何引用外部内容或进行长文本引用。等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础标签</title>
</head>
<body>
    <!-- 
         标签分为 行属性标签 和 块属性标签
    
         块属性标签
         1.div 标签
            没有任何意义的标签，通常用来进行页面的布局

      -->
      <div style="border: 1px #f00 solid;">千里冰封</div>
      <div style="border: 1px #f00 solid;">千里冰封</div>
      
      <!-- 
        2.h系列标签
           h1-h6 标题
           在一个页面中，h1最多只能出现1次，h2最多出现20次，h3-h6次数
           不限。
           h1的用法：
             1.网站logo处  （有利于seo）
             2.资讯详情页的大标题
           由于h1的权限较大，只能出现在以上两个地方
       -->
       <h1>万里雪飘</h1>
       <h2>万里雪飘</h2>
       <h3>万里雪飘</h3>
       <h4>万里雪飘</h4>
       <h5>万里雪飘</h5>
       <h6>万里雪飘</h6>

       <!-- 
         3.p 标签，段落标签，它里面一般包含一段文字。

        -->
        <p style="border: 1px #f00 solid;">也许我撞到南墙才会回头吧</p>
        <p style="border: 1px #f00 solid;">青春要是过去何处找少年</p>

        <!-- 
            4.分割线  <hr />
                  
         -->

         <hr />
         <p style="border: 1px #f00 solid;">
            也许我撞到南墙才会回头吧  <br>
            也许我到了黄河才会死心吧
        </p>

        <!-- 
            5.无序列表
               ul>li
               可以设置他的list-style-type属性
               aquare：实心方块
               circle:空心圆
               dotted:实心圆   disc
               none:取消列表样式
               disc：高版本系统下默认样式
         -->
        <ul style="list-style-type:disc;">
            <li>人之初</li>
            <li>人之初</li>
            <li>人之初</li>
            <li>人之初</li>
        </ul>
        <!-- 
            6.有序列表
            ol>li
            可以设置他的list-style-type属性
            lower-alpha： 小写字母
            lower-roman:小写罗马文
            upper-roman:大写罗马文
            upper-alpha:大写字母
         -->
         <ol style="list-style-type:upper-alpha;">
            <li style="border: 1px #f00 solid;"> <p>人之初</p></li>
            <li>人之初</li>
            <li>人之初</li>
            <li>人之初</li>
        </ol>
        <!-- 
            ol,ul,li都是块属性标签，并且ol，ul的字元素必须是li标签
            li是列表项
         -->


         <!-- 
            7.定义列表
              dl>dt   >的意思是dl的子集必须是dt
              dl>dd
              dl：定义列表的父元素
              dt：块标签，定义列表的 标题项
              dd：块标签，定义列表的 列表项
          -->
          <dl>
            <dt>早餐</dt>
            <dd>包子</dd>
            <dd>油条</dd>
            <dd>豆浆</dd>

            <dt>中餐</dt>
            <dd>面条</dd>
            <dd>饺子</dd>
            <dd>螺蛳粉</dd>
            <dd>臭豆腐</dd>
          </dl>

          <!-- 
            8.address地址标签 ，一般的，他的内容是一个地址
           -->
           <address>郑州市二七区学院路1号</address>

           <!-- 
            9.blockquote 引用标签，一般引用的是一段文字，他的cite属性
            表示该文字引用的文献名目
            -->
            <blockquote cite="语录">要想知道桃子的味道，你必须尝一尝</blockquote>
            <!-- 
                不要使用html官方没有的标签，虽然也会被浏览器渲染，但是
                不符合w3c规范
             -->
            <h7 style="border: 1px #f00 solid;">abcd</h7>
</body>
</html>