【HTML】常用的元素标签

原创已于 2023-08-22 21:20:25 修改 · 381 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

于 2021-03-23 22:26:22 首次发布

html 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了HTML中常见的元素标签，包括块级标签如<div>、<h1>-<h6>、<p>、<ul>、<li>，行内标签如<span>，以及行内块级标签<img>。还讲解了标题标签的用法，段落标签<p>，特殊标签如<br/>和<hr/>，以及实体字符的使用，帮助读者深入理解HTML的基本结构和特性。

【HTML】常用的元素标签

文章目录

- 【HTML】常用的元素标签

1、Html中基本的标签分类

html中标签是灵魂，基本上html中的基本标签分为三类，分为

块级标签：独占一行,可以对快级标签设置宽度，高度，对齐方式等属性，设置完后依旧独占一行
- 最经典的块级标签：div
```

<body>
我是div外面的标签
	<div>
    	我是div里面的标签
	</div>
</body>
```
- 常见的块级标签:h1-h6、p、ul、li
行内标签：不独占一行，大小不能够自己设定，设定了也没效果，大小是根据自身内容撑开的
- 最经典的行内标签：span
```

<body>
  <span>我是第一行的内容</span>
  <span>我还是第一行的内容</span>
</body>
```
- 注意：行内标签里面不能够去嵌套块级标签，除了a标签
行内块级标签：结合了块级和行内标签，不独占一行，并且可以设置大小，默认的大小随着内容的撑开
- 最经典的行内块级标签：image

2、标题标签

标签：<h1-h6></h1-h6>，数字越大表示文字字体越小

属性：(默认居左且加粗)
align = “left | center | right”
设置元素内容水平对齐方式

Html示例:
<body>
  
  <h1 align="center">一级标签</h1>
  <h2 align="right">二级标签</h2>
  <h3>三级标签</h3>
  <h4>四级标签</h4>
  <h5>五级标签</h5>
  <h6>六级标签</h6>
</body>
结果:

3、段落标签

标签：<p></p>

属性：(默认居左且加粗)
align = “left | center | right”
设置元素内容水平对齐方式

Html示例：

<body>
  <!--属性：(默认居左且加粗)
    align = "left | center | right"
    设置元素内容水平对齐方式-->
  <p align="center">
    我是居中的段落
  </p>
  <p>
      我是默认的段落
  </p>
  我是在p标签外面的
</body>

结果:

在这里插入图片描述

4、特殊的标签

换行标签：<br/>

水平线标签：<hr/>

属性：

align = “left | center | right” 设置元素内容水平对齐方式
color = “” 设置水平线的颜色
width = “” 设置水平线的长度，水平方向
size = “” 设置水平线的宽度，垂直方向

注意：HTML默认单位是像素(px)，当单位为px时可以不写

Html示例：
<body>
  
  <p>单独的飞机 <br/> 颠三倒四</p>

      
  <p align="center">我在水平线上</p>
  <hr color="red" width="500px" size="10px"/>
  <p align="center">我在水平线下</p>
</body>

align = “left \| center \| right”	设置元素内容水平对齐方式
color = “”	设置水平线的颜色
width = “”	设置水平线的长度，水平方向
size = “”	设置水平线的宽度，垂直方向

5、实体字符

概念：实体字符就是当页面一些特殊的字符产生了歧义或者html不识别，就可以使用实体字符代替，实体字符都是由&开始的

  空格
© 版权 ©
> 大于 >
< 小于 <

Html示例：
<body>
	空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
	&lt;p&gt;&lt;/p&gt;
	版权 &copy;
</body>
结果：