HTML标签应用_标签-CSDN博客

本文链接：https://blog.csdn.net/qq_59384581/article/details/127101672

本文详细介绍了HTML的基础标签，包括双标签如<h1>到<h6>的标题标签，的段落标签，单标签如 的换行和<hr>的水平线。此外，还讲解了、、、<del>、<ins>等文本样式标签的用法。同时，阐述了<img>标签的使用，包括src、alt、title等属性，并探讨了图像的路径问题。最后，通过实例展示了如何实现图文混排及相对路径与绝对路径的概念。

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

文本标签

在HTML中标签分为，双标签，和单标签，双标签一般都是成对的，有一个开始标签，和一个结束标签，如：。单标签它只有一个结束标签，语法例如：

常用标签

常见标签包括：

1.<h1>..<h6>(标题标签）h1-h6标签的字号大小依次减小

2.（段落标签）

3. （换行标签）

4.<hr/>(水平线标签）用于添加水平线

5.（字体加粗)

6.（斜体标签)

7.<del></del>（文本删除线）

8.<ins></ins>（文本下划线）

<h> <hr/>标签的应用

<h1>..<h6>(标题标签）h1-h6标签的字号大小依次减小

（段落标签）

（换行标签）

<hr/>(水平线标签）用于添加水平线

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>h 标签的应用</title>
 </head>
 <body>
  我是普通文本<br/>                                       
  <hr color="green" width="500" align="left" size="5"/>  
  <h1>我是 h1 标签的文本</h1>
  <h2>我是 h2 标签的文本</h2>
  <h3>我是 h3 标签的文本</h3>
  <h4>我是 h4 标签的文本</h4>
  
 </body>
</html>

上图源码

“我是普通文本”这里，我并未使用p标签而是使用了一个 的单标签，进行了一个换行的目的，它这个 标签要注意的是，它是要在文本结束的位置给它换行的，如果在前面编写的话就会多留出一个空行。

<h>标签它是根据级别字体不断变小的

我们这里重点讲一下单标签<hr/>

  <hr color="green" width="500" align="left" size="5"/>   
  <hr color="red" width="150" align="right" size="10"/>

<hr/>标签是水平线标签，color，width，aling ，size ，分别为hr的参数设置，其表示为颜色，长短，对齐方式和大小。

第一行代码中用的是绿色长500，对齐方式是用的left向左对齐，粗细设置的是5大小

第二行代码中用的是颜色红长150，对齐方式是用的right向右对齐，粗细设置的是10大小

<ins> <del> 标签的使用

（字体加粗)

（斜体标签)

<del></del>（文本删除线）

<ins></ins>（文本下划线）

上图源码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>城东早春</title>
  
 </head>
 <body>
  <p align="center"<strong>城东早春</font></p > 
  <p align="right"><em>作者：杨巨源</em></p > 
  <p><font color="blue">诗家清景在新春，</font></p > 
  <p><ins>绿柳才黄半未勺。</ins></p >
  <p><font color="blue">若待上林花似锦，</font></p > 
  <p><strong><del>出门俱是看花人</del></strong></p >
  </body>
</html>

主题部分第二行代码我们这里有用了一个em斜体标签，它这里还用了一个对齐语句设置。align是对齐语句后面跟的是它的向左向右指令。

第三行代码中有个标签这里表示的是字体标签的意思，后面跟了一个color颜色其表示字体颜色。

第四行用了一个<ins>下划线标签不更多概述。

第五行<del> 删除线和加粗标签。

html中的特殊字符

特殊字符&nbsp（空格）

 <p>我是特殊字符&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p >

小于字符&lt （<）

 <p>我是特殊字符小于号&lt;<p>

大于字符&gt （>）

<p>我是特殊字符大于号&gt;<p>

版权符号&copy (版权©）

<p>我是版权符号&copy;<p>

注册商标符号&reg (注册商标®）

<p>我是注册&reg;<p>

引号字符&quot（"）

 <p>我是引号&quot;</p>

商标字符&trade（™）

 <p>我是商标&trade;</p>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>特殊字符</title>
  
 </head>
 <body>
  <p>我是特殊字符&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p >
  <p>我是特殊字符小于号&lt;<p>
  <p>我是特殊字符大于号&gt;<p>
  <p>我是版权符号&copy;<p>
  <p>我是注册&reg;<p>
  <p>我是引号&quot;</p>
  <p>我是商标&trade;</p>

 </body>
</html>

<img>图像标签使用

标签格式：<img src="图像.jpg"/>
src ：是 <img> 标签的必须属性，用于指定图像文件路径和文件名
alt ：替换文本，图像不能显示时（没网络加载不出来）显示的文本
title ：提示文本，鼠标放在图像上，显示的文字
width ：设置图像的宽度
height ：设置图像的高度
border ：设置图像边框粗细

img图像的设置长宽和边框

width ：设置图像的宽度

<img src="images/spring.jpg" width="200">

height ：设置图像的高度

 <img src="images/spring.jpg" height="131">

border ：设置图像边框粗细

 <img src="images/spring.jpg" width="200"  height="131" border="3"/>

上图源码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title><img/>标签的应用</title>
 </head>
 <body>
  常规的图像<br />
  <img src="images/spring.jpg" width="200" height="131"/><br /><br />
  带有边框的图像<br />
  <img src="images/spring.jpg" width="200" height="131" border="3"/><br /><br />
  等比缩放的图像<br />
  <img src="images/spring.jpg" width="150" border="3"/><br /><br />
  
  
 </body>
</html>

img图像路径问题

我们打开文件位置然后把项目中

这里就已经完成了

接下来是路径的问题

相对路径是指：相对于当前文件下的文件所在位置

<img src="images/pic.jpg">

绝对路径指：文件在那里不会变动的位置

 <img src="file:///D:\HTML+CSS网页制作\作业补充案例\charpter02\images\pic.jpg" alt="未出现"
  title="谷歌中的绝对路径" />

上述就是相对路径与绝对路径的书写样式

路径概述完后这里有一个访问文件的路径

类似于俄罗斯套娃。特别注意的是，你文件的命名是与计算机访问文件位置的代码是一样的，这样计算机才能访问出来，否是一直加载的一个状态。所以在编写的时候要看清楚自己文件的命名然后在编写代码。

alt ：替换文本，图像不能显示时（没网络加载不出来）显示的文本

 <img src="file:///D:\HTML+CSS网页制作\作业补充案例\charpter02\images\pic.jpg" alt="未出现" />

title ：提示文本，鼠标放在图像上，显示的文字

 <img src="file:///D:\HTML+CSS网页制作\作业补充案例\charpter02\images\pic.jpg" title="谷歌中的绝对路径" />

结合上面所学知识其他案例演示

图文混合

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>如何实现图文混排</title>
 </head>
 <body>
  <img src="images/logo.png" width="200" border="2"/>
  <p>传智博客专业与Java，Net php c/c++，网页设计，平面设计 ui设计 iOS培训 --最专业的培训机构
  花一分钱掌握多种技能。改变中国tt教育我们正在行动。详情请访问传智博客官方网站</p >
  <hr />
  <img src="images/logo.png" width="200" border="2" align="left" hspace="20" vspace="10"
  alt="专智博客-专业的java培训，net培训，php培训，网页培训，平面培训，ios培训机构"/>
  传智博客专业与Java，Net php c/c++，网页设计，平面设计 ui设计 iOS培训 --最专业的培训机构
  花一分钱掌握多种技能。改变中国tt教育我们正在行动。详情请访问传智博客官方网站</p >
 </body>
 
</html>

自主练习

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>自主练习</title>
 </head>
 <body>
  <img src="images/syc.gif"/>
  <h1 >文章精选</h1>
  <h1>内容收藏</h1>
  <b>内容精选</b>
  <p>《沁园春长沙》</p >
  <p>独立寒秋，湘江北去，橘子洲头。
看万山红遍，层林尽染；漫江碧透，百舸争流。
鹰击长空，鱼翔浅底，万类霜天竞自由。</P>
<P>怅寥廓，<font color="blue">问苍茫大地，谁主沉浮？</font>
<ins>携来百侣曾游，忆往昔峥嵘岁月稠。</ins>
恰同学少年，风华正茂；书生意气，挥斥方遒。</p >
<P>指点江山，<font color="red">激扬文字，粪土当年万户侯。</font>
曾记否，到中流击水，浪遏飞舟？</p >

  <b><font color="red">显示更多&reg;<b>
<P><font color="blue">《城东早春》</P>
<p><font color="orange">诗家清景在新春</p >
<p><font color="lndigo">绿柳才黄半未勺</p >
<P><font color="violet">若待上林花似锦</P>
<p><font color="hotpink">出门俱是看花人</p >
     </body>
  <body>
<p><font color="black">《心灵成长》</p >
<img src="images/xh.jpg"/><br/>
<img src="images/tu.png"/>

  
 </body>
</html>