【前端 - HTML】第 2 课 - HTML 标签

Aperion

已于 2023-06-09 23:32:27 修改

阅读量569

点赞数 1

分类专栏： HTML 文章标签： html 前端

于 2023-06-05 17:04:12 首次发布

本文链接：https://blog.csdn.net/qq_51870334/article/details/131037790

版权

HTML 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

欢迎来到博主 Apeiron 的博客，祝您旅程愉快！时止则止，时行则行。动静不失其时，其道光明。

1、缘起

HTML 标签是用于描述和定义网页结构的元素。它们用于创建和组织网页内容，并赋予其不同的含义和功能。标签可以定义文本、图像、链接、表格、表单等元素，以及样式、布局和 交互效果。HTML 标签是构建网页的基础，让内容在浏览器中呈现出美观和有意义的形式。接下来让我们一起来看看 HTML 中都有哪些标签吧！

2、常用标签

2.1、容器标签

在 HTML 中，<div>标签是一个通用的容器标签，用于将 HTML 文档中的内容分组或者进行布局 。<div>标签本身没有特定的含义或语义，它仅仅用于在文档中创建一个独立的区块，可以用来组织、样式化或者分离不同的部分。

<div>标签同时也是一个块级元素，它通常用于包裹其他 HTML 元素，可以通过 CSS 来对其进行样式化，也可以通过 JavaScript 来操作它的内容。下面是一些<div>标签的常见用法：

① 组织结构

<div>标签可以用来组织和分组页面中的内容，使得代码更加清晰和易于理解。你可以将相关的元素包裹在一个<div>中，以便将它们作为一个整体进行处理。

示例代码：

<body>
    <div>
      <h1>标题</h1>
      <p>这是一个段落。</p>
      <ul>
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
      </ul>
    </div>
</body>

② 样式化

通过给<div>标签添加 CSS 类或者 ID，你可以对其进行样式化，如设置背景颜色、边框、内外边距等。这样可以方便地对页面的不同部分进行样式设置。

示例代码：

<style>
  .highlight {
    background-color: yellow;
    padding: 10px;
    border: 1px solid black;
  }
</style>


<body>
    <div class="highlight">
      这是一个高亮的区域。
    </div>
</body>

③ 布局

<div>标签可以用于创建页面布局的不同区域，例如头部、导航栏、侧边栏、主内容区等。通过给这些<div>添加不同的样式和属性，可以实现灵活的布局设计。

示例代码：

<style>
     .header {
         background-color: #333;
         color: #fff;
         padding: 20px;
         text-align: center;
      }

      .sidebar {
         float: left;
         width: 25%;
         background-color: #f2f2f2;
         padding: 20px;
      }

      .content {
         float: left;
         width: 75%;
         padding: 20px;
      }
</style>


<body>
    <div class="header">
        <h1>网页标题</h1>
    </div>

    <div class="sidebar">
        <ul>
          <li>导航1</li>
          <li>导航2</li>
          <li>导航3</li>
        </ul>
    </div>
          
    <div class="content">
          <h2>主要内容</h2>
          <p>这是页面的主要内容区域。</p>
    </div>
</body>

④ div 的继承

示例代码：

<style>
    .box div {
        width:100px;
        height:100px;
        text-align: center;
        line-height:100px; 
    }

    .box div:nth-child(1){
        background-color: lawngreen;
    }

    .box div:nth-child(2){
        background-color: #ffd700;
    }

    .box div:nth-child(3){
        background-color: #ed5736;
    }

    .box {
        display:flex;
        justify-content: space-around;
    }
</style>


<body>
    <div class="box">
       <div>A</div>
       <div>B</div>
       <div>C</div>
    </div>

    <div>D</div>
</body>

2.2、标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

标签名：h1~h6（双标签）

显示特点：

① 文字加粗

② 字号逐渐减小

③ 独占一行（换行）

示例代码：

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

注意：h1 标签在一个网页中 只能用一次，用来放 新闻标题 或 网页的 logo，h2 ~ h6 没有使用次数的限制。

2.3、段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

标签名：p（双标签）

显示特点：

① 独占一行

② 段落之间有间隙

示例代码：

<body>
    <p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路!”</p>
    <p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路!”</p>
</body>

2.4、文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

在实际工作中，我们经常使用第一种标签名，因为 strong、em、ins、del 标签自带 强调含义（语义）。

示例代码：

<body>
    <strong>这是加粗</strong>
    <em>这是倾斜</em>
    <ins>这是下划线</ins>
    <del>这是删除线</del>
</body>

2.5、图像标签

2.5.1基本作用

作用：在网页中插入图片

语法：<img src = “图片的 URL”>

src 用于指定 图像的位置和名称，是 <img> 的 必须属性。

示例代码：

<body>
    <img src="./Doutu.jpg" >
</body>

2.5.2属性

① 属性名 = “属性值”

② 属性写在 尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序。

属性	作用	说明
alt	替换文本	图片无法显示的时候显示的文字
title	提示文本	鼠标悬停在图片上面的时候显示的文字
width	图片的宽度	值为数字，没有单位
height	图片的高度	值为数字，没有单位

① 属性 alt 示例

示例代码：

<body>
    <img src="./Doutu1.jpg" alt = "这是一个表情包" >
</body>

从上述代码和图片中可以看出，Doutu1.jpg 这张图片在目录找不到，所以就在屏幕上显示 alt 属性的内容。

② title 属性示例

示例代码：

<body>
    <img src="./Doutu.jpg" title = "这是一个表情包" >
</body>

在 HTML 中，常用的图像属性只有 alt 和 title ，至于图片的 height 和 width 属性专门在 CSS 中进行设置。

2.6、超链接标签

作用：点击跳转到其他页面

< a href = "https://www.baidu.com" target = "_blank" >跳转到百度</a>

① href 属性值是 跳转地址，是超链接的 必须属性

② target = "_blank 属性的作用是在新窗口打开页面

示例代码：

<body>
    <a href="https://www.baidu.com" target = "_blank">跳转到百度</a>
</body>

2.7、音频标签

作用：在网页中插入音频

<audio src = "音频的 URL"></audio>

音频标签的常见属性如下：

属性	作用	特殊说明
src（必须属性）	音频 URL	支持格式：MP3、Ogg、Wav
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	为了提升用户体验，浏览器一般会禁用自动播放功能

示例代码：

<body>
   <audio src="./media/万物生.mp3" controls loop></audio>
</body>

2.8、视频标签

作用：在网页中插入视频

<video src = "视频的 URL"></video>

视频标签的常见属性如下：

属性	作用	特殊说明
src（必须属性）	视频URL	支持格式：MP4、WebM、Ogg
controls	显示视频控制面板
loop	循环播放
muted	静音播放
autoplay	自动播放	为了提升用户体验，浏览器支持在静音状态自动播放

示例代码：

<body>
   <video src="./video/婉儿十连胜.mp4" controls loop muted autoplay></video>
</body>

注意：在浏览器中，要想自动播放，必须要有 muted 属性，否则无法自动播放。

3、总结

本期的分享总结就到这里了，如果有疑问的小伙伴儿，我们在评论区交流嗷~~~，笔者必回，我们下期再见啦！

前端 - HTML 专栏系列将持续更新，，，，，，

Aperion

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端 - HTML】第 2 课 - HTML 标签

HTML 标签是用于描述和定义网页结构的元素。它们用于创建和组织网页内容，并赋予其不同的含义和功能。标签可以定义文本、图像、链接、表格、表单等元素，以及样式、布局和交互效果。HTML 标签是构建网页的基础，让内容在浏览器中呈现出美观和有意义的形式。接下来让我们一起来看看 HTML中都有哪些标签吧！
复制链接

扫一扫