HTML标签的使用

最新推荐文章于 2025-02-28 17:22:03 发布

jiangtea

最新推荐文章于 2025-02-28 17:22:03 发布

阅读量564

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javaee 文章标签： html 标签

本文链接：https://blog.csdn.net/jiangtea/article/details/73746005

javaee 专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了HTML中的基本标签及其用法，包括标题、段落、字体样式、图片、列表、超链接、表格、框架等，并提供了锚点及定义列表等高级用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、语法和规范：

HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。
HTML文件分为头部分(<head></head>)和体部分(<body></body>)
HTML标签都是由开始标签和结束标签组成。(<hr />)
HTML标签不区分大小写，建议使用小写。

2、标签
2.1、标题标签

<hn></hn>

n 从 1 到 6 逐渐变小。超过 6 的按 6 的进行显示。特点：加粗加黑显示，单独占用一行。与其它行有一定的行间距。

<!--标题标签-->
<h1>公司简介</h1>
<h2>公司简介</h2>
<h3>公司简介</h3>
<h4>公司简介</h4>
<h5>公司简介</h5>
<h6>公司简介</h6>

2.2、水平线标签

<hr />

2.3、段落标签

<p></p>

2.4、字体标签

<font></font>

设置颜色：color(可以是英文单词也可以是十六进制)
设置字体：face(那些字体必须是你本机已经有的)
设置大小的：size (从 1 到 7 逐渐变大，超过 7 的部分按照 7 来显示)

<font color="#f00" size="5" face="楷体">离开房间</font>

加粗：

<b>加粗</b>

斜体：

<i>斜体</i>

下划线：

<u>下划线</u>

2.5、图片标签

<img />

属性：
src:相对路径；
如果是同级，直接写文件名称或者./文件名称；
如果是上一级：…/文件名称(如果是多层，那么多写几个…/)；
如果是下一级：写目录名称/文件名称
width：设置图片的宽度
height：设置图片的高度
alt：当图片无法正常显示的时候给出的提示信息。

<img src="../../img/1.jpg" width="150px" height="30px" alt="图片加载中..."/>

2.6.1、无序列表标签

<ul></ul>

属性：type 有 3 个取值

<!--disc(默认),circle（空心圆）,square（实心方块）-->
<ul type="square">
	<li>百度</li>
	<li>阿里</li>
	<li>腾讯</li>
</ul>

ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放。

2.6.2、有序列表标签，ordered list 有序列表

<ol></ol>

属性：type 有 5 个取值， start 起始位置，reverse：倒序。

<ol start="4" reversed="reversed" type="A">
	<li>百度</li>
	<li>阿里</li>
	<li>腾讯</li>
</ol>

2.7、超链接标签

<a href="http://www.baidu.com" target="_blank"  title="悬停文本">点我</a>

属性 target：_blank代表在新页面跳转，_self在自己也页面跳转。title悬停文本。
2.8、表格标签

<table></table>

<table>和<tr>属性：
边框：border
宽度：width
高度：height
背景颜色：bgcolor
边框与边框的：cellspacing
边框与内容的：cellpadding
居中显示：align

<table>
	<tr>
		<td>11</td>
		<td>12</td>
		<td>13</td>
	</tr>
</table>

单元格里面可以嵌套单元格，也可以嵌套其他标签，宽高可以为100%或者30%：

width="100%" height="100%"

<table border="1px" width="500px" height="200px" align="center" cellspacing="0px" cellpadding="0px">
	<tr>
		<td colspan="2" align="center">11</td>
		<td>13</td>
		<td>14</td>
	</tr>
	<tr>
		<td>21</td>
		<td colspan="2" rowspan="2" align="center">22</td>
		<td>24</td>
	</tr>
	<tr>
		<td>31</td>
		<td rowspan="2" align="center">34</td>
	</tr>
	<tr>
		<td>41</td>
		<td>42</td>
		<td>43</td>
	</tr>
</table>

空格：&nbsp
换行：<br />
2.9、框架标签

<frameset cols="25%,*">
	<frame src="left.html"/>
	<frame src="right.html"/>
</frameset>

不要在body中写，可以去掉body。划分两个或者三个都可以，都放一个引号里面。
分三块：

<frameset rows="20%,80%">
	<frame src="top.html"/>
	<frameset cols="20%,*">
		<frame src="left.html"/>
		<frame src="right.html"/>
	</frameset>
</frameset>

内容关联：

<frameset rows="20%,80%">
	<frame src="top.html"/>
	<frameset cols="20%,*">
		<frame src="left.html"/>
		<frame name="right"/>
	</frameset>
</frameset>

Left.html

<a href="right.html" target="right">点我</a>

属性：
cols:进行垂直切割划分，可以切割为任一块。(参数的值相加=100%，其中有一块可以
使用表示)
rows: 进行水平切割划分，可以切割为任一块。(参数的值相加=100%，其中有一块可
以使用表示)
src:指定该区域显示的文件(路径)
name:它通常会结合超链接的 target 属性使用，来定义最终的显示位置

3、补充

3.1、注意

p是一个文本级的标签，p里面只能放文字、图片、表单元素。

3.2、锚点

一个a标签如果name属性（或者id属性），那么就是页面的一个锚点。

如果有一个超级链接，指向页面中的锚点，那么就是：

<a href="#gzjy">点击我就查看工作经验</a>
<a href="#wdzp">点击我就查看我的作品</a>
<h2><a id="gzjy">工作经验</a></h2>
<h2><a name="wdzp">我的作品</a></h2>

跨页面锚点

<a href="1.html#gzjy">查看小明同学的工作经验</a>

3.3、a是一个文本级的标签

一个段落中的所有文字都能够被点击，那么应该，p包裹a。
a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。

3.4、定义列表

定义列表也是一个组标签，不过比较复杂，出现了三个标签：

dl表示definition list 定义列表；dt表示definition title 定义标题；dd表示definition description 定义表述词儿。

dt、dd只能在dl里面；dl里面只能有dt、dd；一个dt配很多dd；dt、dd都是容器级标签，想放什么都可以。

<dl>
	<dt>北京</dt>
	<dd>国家首都，政治文化中心</dd>
	<dd>污染很严重，PM2.0天天报表</dd>
</dl>
<dl>
	<dt>上海</dt>
	<dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
</dl>
<dl>
	<dt>广州</dt>
	<dd>中国南大门，有珠江、小蛮腰</dd>
</dl>