HTML常用标签（代码＋样例）持续更新_html帅哥网页代码-CSDN博客

本文链接：https://blog.csdn.net/weixin_47788265/article/details/106542657

本文详细介绍了HTML中常见的标签，包括骨架标签、字符集声明、标题、段落、图像、链接等，并提供了代码示例。同时，还涵盖了表格、列表、表单元素等，是HTML初学者的实用指南。

摘要由CSDN通过智能技术生成

建议可查阅文档：

1.W3C：https://www.w3school.com.cn/

2.MDN:https://developer.mozilla.org/zh-CN/

1.html骨架标签

代码：

<html>                        /*根标签*/
  <head>                      /*文档的头部，注意其中必须设置title*/
    <title>练习中</title>     /*网页的标题*/
  </head>
  <body>                     /*文档主体，基本内容都写在这里*/
   菜鸡在练习中！
  </body>
</html>

样例：

HTML标签关系：

1.嵌套关系

  <head>
    <title>练习中</title>
  </head>

也称为父子级关系，<head>为父级，<title>为子级

2.并列关系

<head></head>
<body></body>

<head>和<body>即为并列关系，也称兄弟关系

2.<!DOCTYPE html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<!DOCTYPE html> 指的是HTML5的标准，写在最顶端

3.<html lang="en">

<html lang="en">指的是English，页面语言为英语

<html lang="zh-CN">指的是中文

4.<meta charset="UTF-8">

UTF-8是目前最常用的字符集编码方式，基本包含全世界所有国家要用到的字符

其他常用字符集:1.GB2312 简体中文

2.BIG5 繁体中文

3.GBK GB2312的扩展，加入对繁体中文的支持

5.标题标签h

<h1>~<h6>,共有6个等级，<h1>一级标题最大，文字依次变小，块级元素，效果如下图

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>早上好</h1>
  <h2>早上好</h2>
  <h3>早上好</h3>
  <h4>早上好</h4>
  <h5>早上好</h5>
  <h6>早上好</h6>
</body>
</html>

样例：

6.段落标签p

<p> </p>:段落与段落之间会自动换行

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>
  全书虚实互补、虚实相生。以实笔写生，以虚笔写死。这样一来，“生”的部分写得充实而丰厚，杨绛一家的音容笑貌、
  性格特征、人生历程历历在目。那些实实在在的故事，那些生动有趣的细节，给读者留下了不可磨灭的印象。以“梦”的形式描写女儿和丈夫最后的岁月，
  以虚笔写死，也许一方面是由于那一段是作者不愿去回忆的、让人撕心裂肺的岁月，她还没从伤痛中走出来，不愿再重复亲人所受的痛苦和折磨。所以，作者以“梦”的形式，
  滤去不堪回首的往事和细节。另一方面，从内容和形式的结合来看，死亡本是虚幻缥缈的东西，很难用文字把握，用此种形式描写死亡，更易揭示其真实面貌。从这个角度来看，以虚笔写死，
  也许本身就是内容表达的需要。
  </p>
  <p>
  此外，作者在书中运用现代派手法以求意识流动的自由和主观感受的真实，但情感的表法依然是节制含蓄的。杨绛通过情景交融营造梦境的邈远迷离，
  分载过于深重的死别的悲情，把丰富复杂的情感寓于景中，通过意象比喻、象征、暗示，尽显古典文化的韵味。
  梦开始，杨绛虚构了客栈、小船和古栈道，对应于现实中的家、医院和两地间的路途。</p>烟雾迷蒙、杨柳成行、杂树丛生、野草滋蔓的场景描写，暗示通向死亡的荒凉、迷离，是作者内心伤感悲凉之情的外射和物化。
</body>
</html>

样例：

7.水平线标签hr

<hr />:在页面中显示一条水平线

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>全书虚实互补、虚实相生。以实笔写生，以虚笔写死。这样一来，“生”的部分写得充实而丰厚，杨绛一家的音容笑貌、
  性格特征、人生历程历历在目。那些实实在在的故事，那些生动有趣的细节，给读者留下了不可磨灭的印象。以“梦”的形式描写女儿和丈夫最后的岁月，
  以虚笔写死，也许一方面是由于那一段是作者不愿去回忆的、让人撕心裂肺的岁月，她还没从伤痛中走出来，不愿再重复亲人所受的痛苦和折磨。所以，作者以“梦”的形式，
  滤去不堪回首的往事和细节。另一方面，从内容和形式的结合来看，死亡本是虚幻缥缈的东西，很难用文字把握，用此种形式描写死亡，更易揭示其真实面貌。从这个角度来看，以虚笔写死，
  也许本身就是内容表达的需要。</p>
  <hr />
  <p>此外，作者在书中运用现代派手法以求意识流动的自由和主观感受的真实，但情感的表法依然是节制含蓄的。杨绛通过情景交融营造梦境的邈远迷离，
  分载过于深重的死别的悲情，把丰富复杂的情感寓于景中，通过意象比喻、象征、暗示，尽显古典文化的韵味。
  梦开始，杨绛虚构了客栈、小船和古栈道，对应于现实中的家、医院和两地间的路途。</p>烟雾迷蒙、杨柳成行、杂树丛生、野草滋蔓的场景描写，暗示通向死亡的荒凉、迷离，是作者内心伤感悲凉之情的外射和物化。
</body>
</html>

样例：

8.换行标签br

<br />:某段文字需要强制换行显示时使用

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>全书虚实互补、虚实相生。<br />以实笔写生，以虚笔写死。这样一来，“生”的部分写得充实而丰厚，杨绛一家的音容笑貌、
  性格特征、人生历程历历在目。那些实实在在的故事，那些生动有趣的细节，给读者留下了不可磨灭的印象。以“梦”的形式描写女儿和丈夫最后的岁月，
  以虚笔写死，也许一方面是由于那一段是作者不愿去回忆的、让人撕心裂肺的岁月，她还没从伤痛中走出来，不愿再重复亲人所受的痛苦和折磨。所以，作者以“梦”的形式，
  滤去不堪回首的往事和细节。另一方面，从内容和形式的结合来看，死亡本是虚幻缥缈的东西，很难用文字把握，用此种形式描写死亡，更易揭示其真实面貌。从这个角度来看，以虚笔写死，
  也许本身就是内容表达的需要。</p>
  <hr />
  <p>此外，作者在书中运用现代派手法以求意识流动的自由和主观感受的真实，但情感的表法依然是节制含蓄的。杨绛通过情景交融营造梦境的邈远迷离，
  分载过于深重的死别的悲情，把丰富复杂的情感寓于景中，通过意象比喻、象征、暗示，尽显古典文化的韵味。
  梦开始，杨绛虚构了客栈、小船和古栈道，对应于现实中的家、医院和两地间的路途。</p>烟雾迷蒙、杨柳成行、杂树丛生、野草滋蔓的场景描写，暗示通向死亡的荒凉、迷离，是作者内心伤感悲凉之情的外射和物化。
</body>
</html>

样例：