HTML之认识标签(一)

关注

原创最新推荐文章于 2026-07-06 09:11:31 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

学习记录：HTML 标签(一) 学习记录：HTML标签（一） div; span; p; h1; br; hr; table; ul; img; 阅读详情

2-1. 语义化, 让你的网页更好的被搜索引擎理解

标签的用途: 我们学习网页制作时, 常常会听到一个词,语义化。那么什么叫做语义化呢，说的通俗点就是: 明白每个标签的用途(在什么情况下使用此标签合理) 比如, 网页上的文字的标题就可以用标题标签，网页上的各个栏目名称也可以使用标签标题。文章中内容的段落就得放在段落标签中, 在文章中有想强调的文本，就可以使用 em标签标示强调等等。

优点:1.更容易被搜索引擎收录。2.更容易让屏幕阅读器读出网页内容。

2-2. <body>标签，网页上显示的内容放在这里

在网页上要展示出来的内容一定要放在body标签中。

2-3. 标签,添加段落

2-4. <hx>标签, 为网页添加标题

2-5. 加入强调语气, 使用和标签

2-6. 标签

标签是没有语义的，它的作用就是为了设置单独的样式用的

2-7. <q>标签, 短文本引用

作用: 在html中加一段引用，不如引用某个作家的一句诗，使文章更加出彩。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>q标签</title>
</head>
<body>
<p>周瑜，不可否认，他是历史上一个了不起的英雄人物！确实也配的上那句<q>聪明秀出为之英，胆略过人为之雄。</q></p>
</body>
</html>

2-8. <blockquote>标签,长文本引用

<blockquote>的作用也是引用别人的文本。但是它对长文本的引用, 如在文章中引入大段某知名作家的文字, 这是需要这个标签。

<q>标签是对短文本的引用, 如引用一句话就用到<q>标签

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>blockquote标签的使用</title>
</head>
<body>
<h2>心似桂花开</h2>
<p>大家都在忙于自认为最重要的事情，却没能享受到人生的乐趣，反而要吞下苦果？</p>
<blockquote>暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。</blockquote>
<p>这是李清照《咏桂》中的词句，在李清照看来，桂花暗淡青黄，性情温柔，淡泊自适，远比那些大红大紫争奇斗艳花值得称道。</p>
</body>
</html>

2-9. 使用 标签分行显示文本

对于2-8的例子，我们想让那首诗显示得更美观些，如显示下面的效果

怎么可以让每一句诗词后面加入一个折行呢？那就可以用到 标签了，在需要加回车的换行的地方加入 , 标签的作用相当于word文档中的回车。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>br标签的使用</title>
</head>
<body>
<h2>《咏桂》</h2>
<p>暗淡轻黄体性柔，<br/>情疏迹远只香留。<br/>何须浅碧深红色，<br/>自是花中第一流。</p>
</body>
</html>

2-10.  为你的网页中添加一些空格

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>空格讲解</title>
</head>
<body>
<h1>感悟梦想</h1>
<p>来源：作文网  作者：为梦想而飞</p>
</body>
</html>

2-11. 认识 <hr>标签, 添加水平横线

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>hr标签使用</title>
</head>
<body>
<p>火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。</p>
<hr />
<p>每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。那天，我拿着行李，带上一个背影的祝福与惆怅，挥手告别了这片土地。我不知道，我何时会回来。</p>
</body>
</html>

2-12. <address> 标签, 为网页加入地址信息

一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）,签名或者文档的作者的身份。

语法:

<address>联系地址信息</address>

如：

<address>文档编写：lilian 北京市西城区德外大街10号</address>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>address标签介绍</title>
</head>
<body>
<h2>慕课网</h2>
<p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!公司地址：<address>北京市西城区德外大街10号</address></p> 
</body>
</html>

2-13. 加入一行代码? 使用 <code> 标签

在介绍语言技术的网站中, 避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code>标签

注意:在文章中一般如果要插入多行代码时不能使用<code>标签了

注：如果是多行代码, 可以使用<pre>标签

<!DOCTYPE HTML>									
<html>							
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>code标签介绍</title>
</head>
<body>
    <p>我们可能知道水平渐变的实现，类似这样：
        <code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code></p>
</body>
</html>

2-14. 使用 <pre> 标签为你的网页加入大段代码

语法：

<pre>标签的主要作用: 预防格式化的文本。被包围 pre 元素中的文本通常会保留空格和换行符。

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pre标签的使用</title>
</head>

<body>
<pre>
    var message="欢迎";
    for(var i=1;i<=10;i++)
    {
        alert(message); 
    }
</pre>
</body>
</html>

收录于