devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML标签应用_标签

作者：weixin_40725706 | 2024-03-24 03:05:38

赞

踩

标签

文本标签

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

常用标签

常见标签包括：

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

2.<p></p>（段落标签）

3.<br/>（换行标签）

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

5.<strong></strong>（字体加粗)

6.<em></em>（斜体标签)

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

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

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

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

<p></p>（段落标签）

<br/>（换行标签）

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

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta charset="utf-8">
  5.   <title>h 标签的应用</title>
  6.  </head>
  7.  <body>
  8.   我是普通文本<br/>                                       
  9.   <hr color="green" width="500" align="left" size="5"/>  
  10.   <h1>我是 h1 标签的文本</h1>
  11.   <h2>我是 h2 标签的文本</h2>
  12.   <h3>我是 h3 标签的文本</h3>
  13.   <h4>我是 h4 标签的文本</h4>
  14.   
  15.  </body>
  16. </html>

 上图源码

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

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

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

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

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

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

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

<ins> <del> <em> <strong>标签的使用

<strong></strong>（字体加粗)

<em></em>（斜体标签)

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

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

 上图源码

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

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

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

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

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

html中的特殊字符

特殊字符 （空格）

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


小于字符< （<）

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


大于字符>  （>）

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


版权符号©   (版权©）

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


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

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

引号字符"（"）

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


商标字符&trade（™）

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

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta charset="utf-8">
  5.   <title>特殊字符</title>
  6.   
  7.  </head>
  8.  <body>
  9.   <p>我是特殊字符&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p >
  10.   <p>我是特殊字符小于号&lt;<p>
  11.   <p>我是特殊字符大于号&gt;<p>
  12.   <p>我是版权符号&copy;<p>
  13.   <p>我是注册&reg;<p>
  14.   <p>我是引号&quot;</p>
  15.   <p>我是商标&trade;</p>
  16.  
  17.  </body>
  18. </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"/>

上图源码

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta charset="utf-8">
  5.   <title><img/>标签的应用</title>
  6.  </head>
  7.  <body>
  8.   常规的图像<br />
  9.   <img src="images/spring.jpg" width="200" height="131"/><br /><br />
  10.   带有边框的图像<br />
  11.   <img src="images/spring.jpg" width="200" height="131" border="3"/><br /><br />
  12.   等比缩放的图像<br />
  13.   <img src="images/spring.jpg" width="150" border="3"/><br /><br />
  14.   
  15.   
  16.  </body>
  17. </html>

 img图像路径问题

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

 

 这里就已经完成了

接下来是路径的问题

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

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

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

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

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

图文混合

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

 自主练习

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta charset="utf-8">
  5.   <title>自主练习</title>
  6.  </head>
  7.  <body>
  8.   <img src="images/syc.gif"/>
  9.   <h1 >文章精选</h1>
  10.   <h1>内容收藏</h1>
  11.   <b>内容精选</b>
  12.   <p>《沁园春长沙》</p >
  13.   <p>独立寒秋，湘江北去，橘子洲头。
  14. 看万山红遍，层林尽染；漫江碧透，百舸争流。
  15. 鹰击长空，鱼翔浅底，万类霜天竞自由。</P>
  16. <P>怅寥廓，<font color="blue">问苍茫大地，谁主沉浮？</font>
  17. <ins>携来百侣曾游，忆往昔峥嵘岁月稠。</ins>
  18. 恰同学少年，风华正茂；书生意气，挥斥方遒。</p >
  19. <P>指点江山，<font color="red">激扬文字，粪土当年万户侯。</font>
  20. 曾记否，到中流击水，浪遏飞舟？</p >
  21.  
  22.   <b><font color="red">显示更多&reg;<b>
  23. <P><font color="blue">《城东早春》</P>
  24. <p><font color="orange">诗家清景在新春</p >
  25. <p><font color="lndigo">绿柳才黄半未勺</p >
  26. <P><font color="violet">若待上林花似锦</P>
  27. <p><font color="hotpink">出门俱是看花人</p >
  28.      </body>
  29.   <body>
  30. <p><font color="black">《心灵成长》</p >
  31. <img src="images/xh.jpg"/><br/>
  32. <img src="images/tu.png"/>
  33.  
  34.   
  35.  </body>
  36. </html>

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读