HTML常用标签一

最新推荐文章于 2024-09-13 11:02:21 发布

MyikJ

最新推荐文章于 2024-09-13 11:02:21 发布

阅读量1.5k

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_48893653/article/details/110454943

版权

一、排版标签

1.标题标签(h1~h6):作为标题使用，并且依据重要性递减。具体语法格式如下：

<h1>   一级标题   </h1>
<h2>   二级标题   </h2>
<h3>   三级标题   </h3>
<h4>   四级标题   </h4>
<h5>   五级标题   </h5>
<h6>   六级标题  </h6>

显示效果如下：
在这里插入图片描述
注意：
- 一行只能放一个标题（块级元素）
- 加了标题的文字会变的加粗，字号也会依次放大

2.段落标签p：可以将HTML文档分割为若干段落

<p>不要仰望高山的雄奇，即使你是一粒微尘，忘却自我渺小，依旧能够堆砌一个星球;
　　不要羡慕苍松的挺拔，就算你是一株小草，忘却自我平凡，仍然能够装点一方土地;
　　不要向往大海的汹涌，纵使你是一滴雨露，忘却自我普通，还是能够滋润一片泥壤。</p>
	<p>你的爱好就是你的方向，你的兴趣就是你的资本，你的性情就是你的命运。各人有各人梦想的乐园，有自已所乐于安享的花花世界。</p>

显示效果如下：
在这里插入图片描述
注意：默认情况下，文本在一个段落中会根据浏览器窗口的大下自动换行。

3.水平线标签hr：是单标签

<hr />

显示效果如下：
在这里插入图片描述
这里我给hr标签加了border属性。

4.换行标签br

你是最棒的！
<br />
you are good！

显示效果如下：
在这里插入图片描述

5.div 和 span 标签：用来布局
div:块级盒子，一行放一个
span:行内块元素，一行可以放多个

	<div>你是最棒的！</div>
	<span>you are good!!!</span>
	<span>you are good!!!</span>
	<span>you are good!!!</span>

显示效果如下：
在这里插入图片描述

二、文本格式化标签

加粗 <br>
	<b>你是最棒的！</b>
	<strong>你是最棒的！</strong>
	<br>
	斜体 <br>
	<i>你是最棒的！</i>
	<em>你是最棒的！</em>
	<br>
	删除线<br>
	<s>你是最棒的！</s>
	<del>你是最棒的！</del>
	<br>
	下划线<br>
	<u>你是最棒的！</u>
	<ins>你是最棒的！</ins>
	<br>

在这里插入图片描述

三、图像标签

<h4>图片可以正常显示</h4>
	<img src="timg.jpg">

	<h4>图片不能正常显示时，显示文本内容（alt属性）</h4>
	<img src="timg1.jpg" alt="胡歌在吹笛子">

	<h4>图片能正常显示时，当鼠标悬浮在图片上时，显示出文本内容（title属性）</h4>
	<img src="timg.jpg" title="胡歌还在吹笛子">

	<h4>高度和宽度的属性</h4>
	<img src="timg.jpg" title="胡歌还在吹笛子" width="1000">

	<h4>边框属性border</h4>
	<img src="timg.jpg" title="胡歌还在吹笛子" border="20">

在这里插入图片描述
注意：

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
采取键值对的格式 key=“value” 的格式。

四、链接标签

<h4> 外部链接 </h4>
	<a href="http://www.baidu.com" target="_blank"> 百度一哈 </a>
	<h4> 内部链接 </h4>
	<a href="05.换行标签.html"> 跳转到自己写的页面中 </a>

	<h4> 空链接 </h4>
	<a href="#"> 点我哈！</a>

	<h4> 图像链接 </h4>
	<a href="05.换行标签.html" target="_blank"> <img src="timg.jpg" alt=""></a>

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

注意：