前端篇~~~html（1）

最新推荐文章于 2024-11-12 11:19:19 发布

小小前端工程师

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量320

点赞数 5

文章标签：前端 html

本文链接：https://blog.csdn.net/qq_61912766/article/details/139752480

版权

1.1 标题标签

h1-h6 字体从大到小，由粗到细，用于网站的标题，并且独立成行

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
<h1> 猫咪</h1>
<h2> 小狗狗</h2>
<h3>小海豚</h3>
<h4>小猪猪</h4>
<h5>小牛牛</h5>
<h6>小鸭子</h6>
</body>
</html>

1.2段落标签

浏览器对于多个空格会合并成一个这种现象叫空白折叠
实体字符 &nbsp 用来表示空格
配合段落使用的标签有以下几个

1.3图片

这里分别来说一下

1.src后接图片地址

地址路径分为三种：本地路径，绝对路径和网络路径，下面分别来说一说

1）本地路径：./ 表示在当前目录下 ../表示在上一级目录下

例如：./1.jpg 表示在当前目录下查找 1.jpg文件

2）绝对路径：找到你代码所在的文件夹，复制上面的路径即可，例如 F:\代码\html\1.jpg

3）网络路径：复制网上的一个图片的路径地址即可，例如https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_m_1.jpg?

2.alt 表示图片加载失败时提示的文字

3.title表示鼠标移入到图片上的提示信息

来简单举个例子吧

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>

 <img src="./1.jpg"  width="300" height="300" alt="找不到啦" title="两年半"> 

</body>
</html>

1.4超链接

<a href="https://4399.com" target="_blank">跳转到游戏</a>

其中，href 表示将要跳转的超链接地址可以是本地地址，也可以是网络地址

target 表示以什么方式打开链接，有以下两种方式可以打开链接

1）_self 以当前页打开

2）_blank 在新页面打开

这里我来给大家截图演示

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<a href="https://4399.com" target="_blank">跳转到游戏</a>
</body>
</html>

_blank会在新的一个页面打开4399小游戏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	
	<a href="https://4399.com" target="_self">跳转到游戏</a>
</body>
</html>

_self 会在当前的页面打开4399小游戏，只会有一个页面，不会像上面出现两个页面