HTML基础标签学习
2023-08-06 本文已影响0人
by依白
HTML基础标签
运行环境:Windows 11 专业版，编辑器:Visual Studio Code
一、排版标签
1.标题标签
一级标题 h1
二级标题 h2
三级标题 h3
四级标题 h4
五级标题 h5
六级标题 h6
标题标签示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>web前端入门笔记</h1>
<h2>web前端入门笔记</h2>
<h3>web前端入门笔记</h3>
<h4>web前端入门笔记</h4>
<h5>web前端入门笔记</h5>
<h6>web前端入门笔记</h6>
</body>
</html>
特点:文字加粗，文字加大，从h1到h6逐渐变小，独占一行
2.段落标签
段落标签 <p> 文字</p>
特点:段落之间存在间隙，独占一行
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<p>我是一段文字</p>
<p>我是一段文字</p>
</body>
</html>
3.换行标签
换行标签
特点:单标签，让文字强制换行
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<p>我是一段<br>文字</p>
<p>我是一段文字</p>
</body>
</html>
4.水平线标签
水平线标签 hr
特点:单标签，在页面中显示一条水平线
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<p>我是一段<br>文字</p>
<hr>
<p>我是一段文字</p>
</body>
</html>
二、文版格式化标签
加粗 b
下划线 u
倾斜 i
删除线 s
附带
加粗 strong
下划线 ins
倾斜 em
删除线 del
突出重要性的强调语境
两种效果一样，第二种表示你认为很重要强调的
三、媒体标签
1.图片标签
<img src=" "alt=" ">
src后面是图片地址，alt表示图片显示失败则显示的文字
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<img src="tu.png" alt="这是一只猫">
</body>
</html>
当我把src的图片名称故意写错时,无法读取到图片则alt生效，显示文字，这样用户在网络不好，没加载出来图片时也能大概知道我们要表达的是什么了
image.png
2.路径
路径分为两种：相对路径和绝对路径
由于时间关系明天补充剩下的内容，先写到这里了
