目录
HTML常见标签
HTML注释标签
注释不会显示在网页界面上，目的是提高代码的可读性
使用<!-- -->包裹注释的内容
<!-- 注释的内容 -->- 在VSCode中可以使用
Ctrl+/进行快速注释
注释的原则：
- 要和代码逻辑一致
- 尽量使用中文
- 不要传递负能量
📌
在浏览器中需要查看代码注释可以使用开发者工具查看源代码看到注释内容
HTML标题标签
在HTML中有6个标题标签，从h1~h6，数字越大，则字体越小
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>HTML段落标签
在HTML中，为文本分段可以使用段落标签<p> </p>包裹需要放在一段的文字
<p>这是第一个段落</p>
<p>这是第二个段落</p>注意：
- 在网页界面显示时，段落和段落 之间存在一个较大的空隙
- 当前的
<p>标签描述的段落，前面还没有缩进 - 自动根据浏览器宽度来决定排版
- HTML 内容首尾处的换行, 空格均无效
- 在 HTML 中文字之间输入的多个空格只相当于一个空格.
- HTML中直接输入换行不会真的换行，而是相当于一个空格
HTML换行标签
在HTML中，常见用<br/>标签表示换行，也可以用<br>标签，但是不规范
📌
注意<br/>标签为单标签
这是第一句话，接下来需要换行<br/>已经换行HTML格式化标签
在HTML中，可以使用下面的标签实现对应的属性，并且这些标签可以嵌套使用
- 加粗:
<strong>标签 和<b>标签 - 倾斜:
<em>标签 和<i>标签 - 删除线:
<del>标签 和<s>标签 - 下划线:
<ins>标签 和<u>标签
📌
在四个格式化标签中虽然每一类的第一个标签和第二个标签实现的效果相同，但是为了更加强调文本效果，提高代码可读性，推荐用第一种标签
加粗标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粗体测试</title>
</head>
<body>
<h1>下面是加粗文本和非加粗文本的对比</h1>
<strong>这是一个加粗文本</strong><br>
这是一个普通文本
</body>
</html>倾斜标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倾斜标签测试</title>
</head>
<body>
<h1>下面是倾斜文本和非倾斜文本对比</h1>
<em>这是一个倾斜的文本</em><br>
这是一个普通文本
</body>
</html>删除线标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除线标签测试</title>
</head>
<body>
<h1>下面是有删除线和没有删除线的文本对比</h1>
<del>这是有删除线的文本</del><br>
这是一个普通文本
</body>
</html>下划线标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下划线标签测试</title>
</head>
<body>
<h1>下面是有下划线的文本和无下划线的文本对比</h1>
<ins>这是一个有下划线的文本</ins><br/>
这是一个普通文本
</body>
</html>HTML水平线标签
在HTML中，使用<hr>标签可以在网页上实现水平分割线的效果
📌
注意，水平分割线标签为单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平线标签测试</title>
</head>
<body>
<h1>当前标签下面的横线为水平线</h1>
<hr>
这是分割线下方的测试文本
</body>
</html>HTML图片标签及属性
在HTML中，可以使用<img>标签为网页添加图片
在HTML中，使用图片标签一般包含下面的四个属性
- 图片路径属性
src - 图片替换文本属性
alt - 图片高度和宽度属性
width和height - 图片边框属性
border
📌
所有的图片属性一定放在<img>标签内部，每一个属性之间用空格或者代码中的换行（不是<br/>标签）隔开，同时每个属性的顺序没有固定要求，并且<img>标签为单标签
HTML图片路径属性
在标签<img>中要添加图片，需要键入图片的路径，此时需要用到属性src，即<img src = " ">
在HTML中一般图片路径分为相对路径和绝对路径
- 相对路径：相对于照片所在的文件夹的位置的路径，一般包括当前路径，上级路径和下级路径
- 同级路径: 直接写文件名即可 (或者
./) - 下一级路径:
image/1.jpg - 上一级路径:
../image/1.jpg
- 同级路径: 直接写文件名即可 (或者
- 绝对路径：从根目录一直到照片所在的位置，一般包括本地绝对路径和网页绝对路径
- 本地绝对路径：
D:/rose.jpg - 网络路径：
https://images0.cnblogs.com/blog/130623/201407/300958470402077.png
- 本地绝对路径：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签测试</title>
</head>
<body>
<h1>下面是图片标签的测试</h1>
<p>下面是相对路径中的下级路径</p>
<img src="images/image1.png">
<p>下面是相对路径中的当前路径</p>
<img src="image1.png">
<p>下面是相对路径中的上级路径</p>
<img src="../image1.png">
<p>下面是绝对路径的本地路径</p>
<img src="E:/HTML_CSSLearningCodes/html_-csslearning/image1.png">
<!-- 注意如果使用绝对路径，在远程浏览器中无法被查看到 -->
<p>下面是绝对路径的网络路径</p>
<img src="https://lh5.googleusercontent.com/7T0zO-ZTILZSxNOkiNtHPmPDHgPZKcovw3LWRbuN5h6_aOkzS9fQF0Q8zLu2pgw4TSIEH0Eb4_S8We-pK7Lhfn0s534T-Nt4BDQQ4ZqV7n1jej-pt0m6rB6rUA5eIi9lm1f-n7U">
</body>
</html>HTML图片替换文本属性
在HTML中，当图片因某种错误（一般是图片路径出错）导致无法被解析时，可以使用替换文本属性alt用文本代替于错误图片的位置显示在网页上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签及alt属性测试</title>
</head>
<body>
<h1>下面是图片标签的测试</h1>
<img src="image.png" alt="错误的照片路径导致照片无法显示">
<!-- 正常的照片路径为image1.png -->
</body>
</html>HTML图片宽度和高度属性
在HTML中，当需要修改图片的宽度和高度时，可以使用到width和height属性对宽度和高度进行修改
📌
在HTML中，width和height属性单位为像素px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签及width和height属性测试</title>
</head>
<body>
<h1>下面是图片标签的测试</h1>
<img src="image1.png" alt="错误的照片路径导致照片无法显示" width="200px" height="360px">
<!-- 修改图片的高度为360像素，宽度为200像素 -->
</body>
</html>HTML图片边框属性
在HTML中，需要为图片添加边框时，可以使用border属性为所需要的图片添加边框，但是一般使用 CSS 来设定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签及border属性测试</title>
</head>
<body>
<h1>下面是图片标签的测试</h1>
<img src="image1.png" alt="错误的照片路径导致照片无法显示" border="1px">
<!-- border属性单位为像素px -->
</body>
</html>📌
在HTML中，border属性的单位为像素px
HTML图片提示属性
在HTML中，可以使用title属性对图片显示提示信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签及title属性测试</title>
</head>
<body>
<h1>下面是图片标签的测试</h1>
<img src="image1.png" alt="错误的照片路径导致照片无法显示" title="这是一个提示信息">
<!-- 提示信息会在鼠标悬停在图片上时显示 -->
</body>
</html>
