【前端】入门基础（二）格式化标签、img标签
文章目录
- 一、格式化标签
- 1、加粗标签
- 2、倾斜
- 3、删除线
- 4、下划线
- 5、应用：
- 二、img标签（图片标签）
- 1、src属性
- （一） 定义
- （二） 应用
- 2、alt属性
- 3、title属性
- 4、width/height属性
- 5、border属性
- 三、谢谢观看！
一、格式化标签
1、加粗标签
strong标签和b标签 （这两个标签均为双标签）
<html>
<head>
<title> 这是页面标题 </title>
</head>
<body>
<!-- 这是注释 -->
<strong>前端</strong>指的是用户在使用网站或应用程序时直接看到和与之交互的部分，也称为<b>“客户端”</b>。
它负责将数据以视觉化、交互化的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。
简单来说，前端就是用户眼前的一切。
</body>
</html>
2、倾斜
em标签和 i 标签
3、删除线
del标签和s标签
4、下划线
ins标签和u标签
以上四种标签中的第一个均起强调作用。
5、应用：
<html>
<head>
<title> 这是页面标题 </title>
</head>
<body>
<!-- 这是注释 -->
<strong>前端</strong>指的是用户在使用网站或应用程序时<del>直接看到和与之交互</del>的部分，也称为<b>“客户端”</b>。
它负责将数据以<em>视觉化、交互化</em>的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。
简单来说，<u>前端就是用户眼前的一切。</u>
</body>
</html>
二、img标签（图片标签）
1、src属性
（一） 定义
img标签有多种属性，我们先来介绍其src属性。
img标签必须搭配src来使用，src用来指定图片路径。
绝对路径：从系统根目录（或网站域名）开始的完整路径，能唯一确定资源的位置。
特点：
1、以根目录符号（/）或协议（http://、https://）开头。
2、与当前文件位置无关，路径固定不变。
相对路径：以当前文件所在目录为起点，通过相对位置定位资源。
特点：
1、无根目录符号或协议开头。
2、路径随当前文件位置变化而动态计算。
相对路径符号规则：
（二） 应用
<html>
<head>
<title> 这是页面标题 </title>
</head>
<body>
前端指的是用户在使用网站或应用程序时直接看到和与之交互的部分，也称为“客户端”。<br/>
它负责将数据以视觉化、交互化的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。<br/>
简单来说，前端就是用户眼前的一切。<br/>
<img src="https://img0.baidu.com/it/u=4227008132,2843866888&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1084">
</body>
</html>
2、alt属性
提示报错信息。当图片加载失败时会展示alt中的提示内容。（提示内容可以自行添加）
这里将src中的图片链接损坏：
<html>
<head>
<title> 这是页面标题 </title>
</head>
<body>
前端指的是用户在使用网站或应用程序时直接看到和与之交互的部分，也称为“客户端”。<br/>
它负责将数据以视觉化、交互化的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。<br/>
简单来说，前端就是用户眼前的一切。<br/>
<img src="https://img0.baidu.co" alt="图片加载失败，请检查链接是否正确！">
</body>
</html>
3、title属性
展示图片文案。
<html>
<head>
<title> 这是页面标题 </title>
</head>
<body>
前端指的是用户在使用网站或应用程序时直接看到和与之交互的部分，也称为“客户端”。<br/>
它负责将数据以视觉化、交互化的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。<br/>
简单来说，前端就是用户眼前的一切。<br/>
<img src="https://b0.bdstatic.com/be03cd442c30a8d4e9bbe06adc3197bf.jpg@h_1280" alt="图片加载失败，请检查链接是否正确！"
title="这张图片很棒！" >
</body>
</html>
4、width/height属性
控制图片的宽度和高度。
将上述图片的宽高均设为了 200px（像素）
<html>
<head>
<title> 这是页面标题 </title>
</head>
<body>
前端指的是用户在使用网站或应用程序时直接看到和与之交互的部分，也称为“客户端”。<br/>
它负责将数据以视觉化、交互化的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。<br/>
简单来说，前端就是用户眼前的一切。<br/>
<img src="https://b0.bdstatic.com/be03cd442c30a8d4e9bbe06adc3197bf.jpg@h_1280" alt="图片加载失败，请检查链接是否正确！"
title="这张图片很棒！"
width="200px"
height="200px" >
</body>
</html>
5、border属性
为图片添加边框。
<html>
<head>
<title> 这是页面标题 </title>
</head>
<body>
前端指的是用户在使用网站或应用程序时直接看到和与之交互的部分，也称为“客户端”。<br/>
它负责将数据以视觉化、交互化的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。<br/>
简单来说，前端就是用户眼前的一切。<br/>
<img src="https://b0.bdstatic.com/be03cd442c30a8d4e9bbe06adc3197bf.jpg@h_1280" alt="图片加载失败，请检查链接是否正确！"
title="这张图片很棒！"
width="200px"
height="200px"
border="5px" >
</body>
</html>
注：各种属性无先后之分，不固定，可任意控制。各属性直接可以用空格/enter回车隔开