亿企邦
  • 首页
    •
  • 解决方案&服务
    •
  • 客户&案例
    •
  • 营销资讯
    •
  • 关于我们
    •
    15158846557 或 在线咨询 在线咨询
    亿企邦
    15158846557 或 在线咨询
    亿企邦

    快捷入口

    所在位置： 首页 > 营销资讯 > 网站运营 > html最常用的标签是哪些？

    html最常用的标签是哪些？

    时间：2024-02-08 04:30:02 | 来源：网站运营

    时间：2024-02-08 04:30:02 来源：网站运营

    html最常用的标签是哪些？：

    本篇目标

    1. 掌握html标签的概念。
    2. 掌握html标签的两种语法结构。
    3. 掌握html常用的文本相关标签。
      1. 标题：h1~h6
      2. 段落：p
      3. 换行：br
      4. 加粗：strong、b
      5. 斜体：em、i
      6. 下划线：ins
      7. 删除线：del
      8. 上下标：sup、sub
    4. 掌握html语言中的注释编写。

    内容摘要

    本篇先介绍了html标签的语法，后面重点介绍了html中文本相关的标签：标题、段落、换行、加粗、斜体、下划线、删除线、上下标。

    阅读时间预计30~40分钟。

    html标签（tag）

    前面我们编写了第一个网页，并了解了网页的文档结构，现在来插入链接、图片、视频、段落、标题等等这些内容。

    插入这些内容需要用到一个叫做标签的东西，标签是html中最基本的单位，在html中标签有两种语法结构：

    语法一：

    <标签名>标签体</标签名>其中：

    1. 标签名 表示插入的是什么内容，比如：h1表示标题、p表示段落等，标签名大小写无关。2. 标签体 表示标签里面的内容，可以是文字，也可以是其他标签，即标签嵌套。3. </标签名> 表示标签的结束，这边标签名要和开始的标签名一致。简单示例：

    <h1>标题一</h1><p>我的一个段落</p>语法二：

    <标签名>这边标签称为空元素（empty element），只需要一个标签名即可。例如:

    <br> 表示换行。<hr> 表示水平线。等等。下面我们实际学习一些标签，加深对语法结构的理解。

    标题标签

    在网页中表示标题，有如下6个标签：

    <h1>标题</h1><h2>标题</h2><h3>标题</h3><h4>标题</h4><h5>标题</h5><h6>标题</h6>其中：

    h1到h6 就是一级标题、二级标题到六级标题，显示的字体从大到小，类似word里的一级、二级标题。示例1，在网页输出h1到h6标题，标题内容为 "前端零基础入门" ：

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>标题标签演示</title> </head> <body> <h1>前端零基础入门</h1> <h2>前端零基础入门</h2> <h3>前端零基础入门</h3> <h4>前端零基础入门</h4> <h5>前端零基础入门</h5> <h6>前端零基础入门</h6> </body></html>运行效果：







    在实务中标题标签经常用在新闻、视频、商品等内容页上，用来重点突出新闻标题、视频标题、商品名称等。

    段落标签

    在网页中表示段落使用p标签，p就是英文单词Paragraph的意思，语法格式如下：

    <p>段落内容</p>示例1，在网页上显示如下诗歌：

    夏天的飞鸟，来的我的窗前，歌唱，又分走了。秋天的黄叶，它们没有什么曲子可唱，一声叹息，飘落在地上。世界上一队小小的流浪者啊，在我的字里行间留下你们的足迹吧！世界对着它的爱人，扯下它那庞大的面具。它变小了，小得宛如一首歌，小得宛如一个永恒的吻。大地的泪珠，使她的微笑如鲜花般盛开。如果说我们直接把上面到内容复制到网页里，那么在浏览器上看到都排版在一行里了，这个时候我们就可以用p标签了。

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>段落标签演示</title> </head> <body> <p>夏天的飞鸟，来的我的窗前，歌唱，又分走了。</p> <p>秋天的黄叶，</p> <p>它们没有什么曲子可唱，一声叹息，飘落在地上。</p> <p>世界上一队小小的流浪者啊，在我的字里行间留下你们的足迹吧！</p> <p>世界对着它的爱人，扯下它那庞大的面具。</p> <p>它变小了，小得宛如一首歌，小得宛如一个永恒的吻。</p> <p>大地的泪珠，使她的微笑如鲜花般盛开。</p> </body></html>运行效果：







    换行标签

    上面用了段落标签对文本进行处理，如果不用段落标签，也可以用 br 标签实现换行排版。

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>换行标签演示</title> </head> <body> 夏天的飞鸟，来的我的窗前，歌唱，又分走了。<br/> 秋天的黄叶，<br/> 它们没有什么曲子可唱，一声叹息，飘落在地上。<br/> 世界上一队小小的流浪者啊，在我的字里行间留下你们的足迹吧！<br/> 世界对着它的爱人，扯下它那庞大的面具。<br/> 它变小了，小得宛如一首歌，小得宛如一个永恒的吻。<br/> 大地的泪珠，使她的微笑如鲜花般盛开。<br/> </body></html>运行效果：







    从显示效果上来看和上面使用段落标签p类似，但是还有有一点不一样一样的，读者能找到吗？

    仔细观察可以发现使用段落标签 p 的行间距比使用换行标签 br 的更大一些。

    另外在标签结构上，br 标签就是没有标签体的标签形式，它的作用就是告诉网页显示到这里的时候，换行一下。

    加粗标签

    word文档中有加粗、斜体、下划线的效果，网页中也有这些效果，我们先看下加粗的实现。

    网页中加粗使用标签 strong 或者 b，语法格式如下：

    <strong>加粗的文本</strong><b>加粗的文本</b>其中：

    b 就是 bold 第一个字母。示例1，将下列文本显示在网页上，并对 只争朝夕 进行加粗显示。

    多少事，从来急；天地转，光阴迫。一万年太久，只争朝夕！用一个段落标签 p 包裹这句话，然后用 strong 标签包裹 只争朝夕。

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>加粗标签演示</title> </head> <body> <p>多少事，从来急；天地转，光阴迫。一万年太久，<strong>只争朝夕</strong>！</p> </body></html>其中：

    p标签嵌套了strong标签，在html中标签嵌套是很常见的情况。运行效果：







    很明显 只争朝夕 字样进行了加粗显示。

    了解：

    本例用 b 标签也可以实现加粗的效果，但是我更倾向是用 strong 标签，为什么呢？

    strong 是逻辑状态，b 是物理状态。b 只是单纯的加粗，strong 除了加粗，也起到了强调作用。下面例子看起来会更加清晰些：

    <strong>强调文本</strong><b>加粗文本</b>其实从 strong 和 bold 单词字面意思也能大概看的出来区别。本例这边 只争朝夕 文字有强调的作用，所以用 strong 更加符合一些。

    那么什么时候用 b 标签呢？

    本书中很多了地方进行了加粗显示，比如：示例、实例、思考、解答、注意等文字，这边更多的意义是对文档进行一个分层，阅读起来更加舒服，这个场景下用 b 标签就更加合适。

    给初学者的建议：

    除了标签可以加粗外，后续学习的css也可以对文本进行加粗，这么多花样对于初学者来讲容易眼花缭乱。

    我的建议是如果实在弄不清两个的区别，先用strong就好，毕竟这个基本没有影响，后续熟悉了再细究。

    斜体标签

    网页中斜体使用标签 em 或者 i，语法格式如下：

    <em>强调的斜体文字</em><i>斜体文字</i>em、i的区别和strong、b的区别类似，em全称为emphasize，起到强调作用，i全称为italic，只是表示显示为斜体而已。

    中文用斜体表示的很少，斜体本身是为西方文字设计的，下面看一些些简单的例子。

    示例1，使用em和i的例子：

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>斜体标签演示</title> </head> <body> <p>使用em的例子：</p> <p>Just <em>do</em> it already!</p> <p>We <em>had</em> to do something about it</p> <p>使用i的例子：</p> <p>The <i>Queen Mary</i> sailed last night</p> </body></html>运行效果：







    下划线标签

    网页中下划线使用标签 ins，语法格式如下：

    <ins>文本</ins>示例1，语句 "今天的天气是晴天" 中的晴天用下划线表示。

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>下划线标签演示</title> </head> <body> <p>今天的天气是<ins>晴天</ins></p> </body></html>运行效果：







    删除线标签

    网页中下划线使用标签 del，语法格式如下：

    <del>文本</del>其中：

    del就是delete单词的缩写。实务中删除线经常用于对价格的标记上，请看下面例子。

    实例1，对语句 "原价4999，现在只要999。" 中4999用删除线显示。

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>删除线标签演示</title> </head> <body> <p>原价<del>4999</del>，现在只要<ins>499</ins>。</p> </body></html>运行效果：







    上下标标签

    网页中上标使用标签 sup，下标使用标签 sub，语法格式如下：

    <sup>上标</sup><sub>下标</sub>实务中上下标经常用于数学公式，请看下面例子。

    实例1，在网页中显示：X1 + X2^2 。

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>上下标标签演示</title> </head> <body> <p>X<sub>1</sub> + X<sub>2</sub><sup>2</sup> </p> </body></html>运行效果：







    代码注释

    最后我们介绍下代码注释，实务中项目的代码往往很多，时间久了即便是看自己写的代码也经常容易忘记其中逻辑，所以经常需要对代码进行描述和说明。

    要对代码进行描述和说明，需要用到注释符号，注释符号内的内容不会参与实际的代码运行。

    各编程语言都有自己的注释符号，html中的注释符号语法为：

    <!-- 注释内容 -->简单示例：

    <!-- 毛泽东写的诗词：《满江红·和郭沫若同志》 --><p>多少事，从来急；天地转，光阴迫。一万年太久，<strong>只争朝夕</strong>！</p>上面的内容不会显示在网页上，但是通过注释我们就知道下面语句的出处和作者，这个就是注释的含义了。

    后面的代码示例我们也会适当的增加注释，方便大家更容易直观的理解代码。

    小贴士：

    实际工作中良好的注释不光可以方便自己，也可以方便其他同事，特别容易受到大家的点赞。

    本篇总结

    1. 标签是html语言中的基本单位，不同的标签表示不同的意思。
    2. html常用的文本相关标签。
      1. 标题：h1~h6
      2. 段落：p
      3. 换行：br
      4. 加粗：strong、b
      5. 斜体：em、i
      6. 下划线：ins
      7. 删除线：del
      8. 上下标：sup、sub
    3. html标签可以互相嵌套，实现更多样的效果。


    关键词：标签

    推荐文章

    新闻资讯

    整合营销 网络营销 网络推广 信息时代 建站知识 网站运营 电子商务 营销百科 公司新闻 行业动态 品牌营销

    推荐资讯

    74
    73
    25
    news

    微信公众号

    版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

    为了最佳展示效果，本站不支持IE9及以下版本的浏览器，建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
    关闭