初识常用的 html 标签
Posted ZSYL
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识常用的 html 标签相关的知识，希望对你有一定的参考价值。
初识常用的 html 标签
初识常用的 html 标签
学习目标
- 能够知道单标签和双标签的区别
1. 常用的 html 标签
<!-- 1、成对出现的标签：-->
<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>
<!-- 2、单个出现的标签： -->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>
<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>
<!-- 4、标签的嵌套 -->
<div>
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>
</div>
提 示:
-
标签不区分大小写，但是推荐使用小写。
-
根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)
2.1 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签
2.2 单标签是一个标签组成，没有标签内容， 比如: img标签
2. 小结
- 学习 html 语言就是学习标签的用法，常用的标签有20多个。
- 编写 html 标签建议使用小写
- 根据书写形式，html 标签分为双标签和单标签
- 单标签没有标签内容，双标签可以嵌套其它标签和承载文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- 双标签：成对出现的标签 -->
<h1>我是第一级标题</h1>
<h6>我是第六级标题</h6>
<div>我是一个容器标签，可以包裹其它标签内容</div>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<!-- 单标签：只有一个标签，没有标签内容 -->
<hr>
<img src="imgs/logo.png" alt="图片加载失败会显示">
<br>
<img src="imgs/logo1.png" alt="">
<!-- 带有属性标签 -->
<a href="https://www.baidu.com">百度</a>
<!-- 标签可以嵌套， 不能交叉嵌套 -->
<DIV>
<!-- 错误示例 -->
<!-- <p>我是一个段落标签</div></p> -->
<p>我是一个段落标签</p>
</DIV>
<!-- HTML不区分大小写，但是推荐大家使用小写 -->
</body>
</html>
加油!
感谢!
努力!
以上是关于初识常用的 html 标签的主要内容，如果未能解决你的问题，请参考以下文章