HTML——基础标签

三三木木七 2022-05-14 14:32:04 阅读数:189

htmlCSDN基础标签technology-development

前言:本文简单的总结了一下HTML中经常使用到的HTML标签


自动生成的目录有点怪怪的,在此制作了个思维导图


HTML—— h 标签

h 元素通常用来表示创建一个标题

注意:创建标题只有 <h1> - <h6>,没有 h7h8的。

那么<h1>~<h6>它们有什么区别呢?

从<h1>~<h6>他们的字体依次减小。

举个例子——<h>标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>创建不同字体大小的标题1</h1>
<h2>创建不同字体大小的标题2</h2>
<h3>创建不同字体大小的标题3</h3>
<h4>创建不同字体大小的标题4</h4>
<h5>创建不同字体大小的标题5</h5>
<h6>创建不同字体大小的标题6</h6>
</body>
</html>

结果如下图: 

 

HTML—— p 标签 

 p 元素通常用来表示一个段落

创建一个p 标签:

<p> p标签表示一个段落。</p>

举个例子——<p>标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>我是一个段落</p>
</body>
</html>

 结果如下图:

HTML—— a 标签

a标签通常用来定义一个链接。href属性的值就是链接的地址。

 创建一个a 标签:

<a href="http://www.baidu.com">百度</a>

 举个例子——<a>标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- ********* Begin ********* -->
<a href="http://www.baidu.com">百度</a>
<!-- ********* End ********* -->
</body>
</html>

结果如下:

HTML—— img 标签

img标签通常用来表示一个图片。src属性的值就是图片的地址,alt属性的值是当图片没有展现出来时提示的文字 。  

创建一个img 标签:

<img src="图片地址" alt="风景画"/>

 举个例子—— img 标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- ********* Begin ********* -->
<img src="https://www.educoder.net/attachments/download/207801" alt="小狗走路"/>
<!-- ********* End ********* -->
</body>
</html>

 效果如图:

 当图片没有展示出来时,或者图片地址是错的,就会显示提示文字。

HTML—— div 标签 

 div标签可以把文档分割为独立的、不同的部分。它没有实际的意义,仅仅表示创建了一个块级元素。

创建一个div 标签:

 <div>创建div标签</div>

举个例子—— div 标签 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h2>我是h2标签</h2>
<p>我是p标签</p>
<!-- ********* Begin ********* -->
<div>我是div标签</div>
<!-- ********* End ********* -->
</body>
</html>

效果如下:

 

 可以发现:它和 <h1>-<h6><p>标签的创建是一样的,只不过它没有实际的意义。

HTML—— 注释

 注释是解释性文本,在运行程序时,会被程序跳过,不做处理。

 添加注释:

<!--表示注释的开始, -->表示注释的结束

<!-- 这里p标签 -->

<!--<p>这是一个段落</p>-->


 自我总结:


一起加油!

版权声明:本文为[三三木木七]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/m0_62894677/article/details/124645225