HTML（二）常用标签

最新推荐文章于 2023-05-07 23:36:37 发布

Insane_Loafer

最新推荐文章于 2023-05-07 23:36:37 发布

阅读量120

点赞数

分类专栏： HTML Python全栈文章标签： html html5 python

本文链接：https://blog.csdn.net/m0_48978908/article/details/120526834

版权

Python全栈同时被 2 个专栏收录

192 篇文章 26 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

一、字体标签

字体标签 < fon...... 
作用：规定文本的字体、字体尺寸、字体颜色
示例:

<font size="3" color= "red">我是红色</font>
<p><font size=14 face="楷体" color="red">我是楷体、红色</font></p>
<p><font size=14 face=" 黑体" color=" #0000ff">我是蓝色</font></p>
<p><font size=14 face="宋体" color="blue">我 也是蓝色</font></p>

[小贴士]
- 在HTML4中，不赞成使用该标签
- 在HTML5中，不支持该标签

属性

size：字体大小，范围为1-7
face：字体类型，比如“黑体”等
color：字体颜色
例子：

<html>
	<head>
		<title>first.html</title>
	</head>
	<body>
		<font size="7" face="黑体" color="blue">
			这是第一个页面~~
		</font>
	</body>
</html>

在这里插入图片描述

二、段落标签

段落标签 <p......
作用：定义一个段落
示例：

<p>我是段落</p>
<p>HTML超文本标记语言，通过使用标记来描述文档结构和表现形式的一种语言，由浏览器
进行解析，然后把结果显示在网页上.它是网页构成的基础,，你见到的所有网页都离不开HT
ML , HTML是用来制作网页的标记语言</p>
<p>我是段落</p>

[小贴士]
- 段落内依据所在容器的宽度自动换行
- 浏览器会自动地在段落的前后添加空行
- 和 的区别
换行符 没有结尾标签
例子：

<html>
	<head>
		<title>first.html</title>
	</head>
	<body>
		<p>
			asdfadgasdfasdgasdgf<br>joaijdfoiaoigja
		</p>
		<p>
			ueuibtibadfgiabeibasg
		</p>
	</body>
</html>

在这里插入图片描述

三、注释标签

注释标签 
作用：编写程序时，给代码的解释或提示，能提高程序代码的可读性,以便于以后的参考、修改
示例：

<!--这里是注释,是作者对程序代码做的解释说
明，以增加代码可读性-->
<!--这里 是注释，是作者对程序代码做的解释说明，以增加代码可读性-->

[小贴士]
- 注释不会在浏览器中进行显示
- 注释出现的频率非常高
例子：

<html>
	<head>
		<title>first.html</title>
	</head>
	<body>
	<!--这是一个注释-->
		<p>
			asdfadgasdfasdgasdgf<br>joaijdfoiaoigja
		</p>
		<p>
			ueuibtibadfgiabeibasg
		</p>
	</body>
</html>

四、标题标签

标题标签 h标签:<h ? >....</h ? >
作用：定义标题头的六个不同文字大小，依次显示重要性的递减，也就是权重依次降低。
示例：

<h1>我是<font color="red">1</font>级标题</h1>
<h2>我是<font color="red">2</font>级标题</h2>
<h6>我是<font color="red">3</font>级标题</h6>

小贴士：尽量靠近在html中的<body>标签，越近越好，以便让搜索引擎最快的领略主题

<h1>标题标签可以给seo优化

五、图片标签

img：<img src="***"/>
作用：在浏览器显示图片
示例：<img src= "image/logo.jpg" alt="**"/>
常用属性：src、alt、height、width
src：文件路径
alt：提示信息，如果src没有找到就会打印alt里面的信息
例子：

<html>
	<head>
		<title>first.html</title>
	</head>
	<body>
		<!--相对路径-->
		<img src="image/headlogo/3.jpeg" alt="not found~" width="100px" height="100px">
		<!--绝对路径-->
		<img src="d:/My_Files/Python_Project/html/image/1.gif" alt="not found~">
	</body>
</html>

在这里插入图片描述

六、超级链接标签

a标签 <a>....</a>
作用：使用超级链接与网络上的另一个文档相连
示例：

<a href="page2.html">打开另一个页面</a>
<a href="page2.html">单击我会打开另一个页面</a>
<a href="image/welcome.png">单击我打开会打开一张图片</a>

小贴士：超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分

a标签的target属性

在这里插入图片描述

例子

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<h1>我的新页面</h1>
	<p><a href="first.html">返回到首页</a></p>
	<a href="https://www.baidu.com">百度</a>
	<a href="image/2.jpeg">打开一个图片</a>
	<!--使用图片打开超链接-->
	<a href="https://www.baidu.com" target="_blank">
		<img src="image/2.jpeg" width="100px" height="200px">
	</a>
</body>
</html>