1.常用标签（上）-CSDN博客

本文链接：https://blog.csdn.net/qq_41891186/article/details/124610401

本文介绍了HTML的基础标签，包括编码、标题、div与span、超链接和图片的使用。通过示例展示了如何创建和布局网页，以及如何链接外部资源和调整图片尺寸。此外，还提供了一个商品列表的案例，演示了实际网页设计中的应用。

摘要由CSDN通过智能技术生成

1 编码（head）

<meta charset="UTF-8">

2 title（head）

<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>

3 标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>
</html>

4 div和span

<div>内容</div>

<span>asdfa</span>

div，一个人占一整行。【块级标签】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <div>山东蓝翔</div>
    <div>挖掘机哪家强</div>
</body>
</html>

span，自己多大占多少。【行内标签、内联标签】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <span>山东蓝翔</span>
    <span>挖掘机哪家强</span>
</body>
</html>

5 超链接

跳转到其他网站
<a href="http://www.chinaunicom.com.cn/about/about.html">点击跳转</a>

跳转到自己网站其他的地址

<a href="http://127.0.0.1:5000/get/news">点击跳转</a>
<a href="/get/news">点击跳转</a>

# 当前页面打开
<a href="/get/news">点击跳转</a>

# 新的Tab页面打开
<a href="/get/news" target="_blank">点击跳转</a>

6 图片

<img src="图片地址" />

直接显示别人的图片地址（防盗链）：
<img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" />

<img src="自己图片的地址" />
显示自己的图片：
	- 自己项目中创建：static目录，图片要放在static
	- 在页面上引入图片
	    <img src="/static/wbq.png" />

关于设置图片的高度和宽度

<img src="图片地址" style="height:100px; width:200px;" />
<img src="图片地址" style="height:10%; width:20%;" />

小结

学习的标签

<h1></h1>
<div></div>
<span></span>
<a></a>
<img />

划分

- 块级标签
	<h1></h1>
	<div></div>
- 行内标签
	<span></span>
    <a></a>
    <img />

嵌套

<div>
    <span>xxx</span>
    <img />
    <a></a>
</div>

案例：商品列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>商品列表</h1>

<a href="https://www.mi.com/redmiwatch2" target="_blank">
    <img src="/static/a1.jpeg" style="width: 150px">
</a>

<a href="https://www.mi.com/shouhuan6/nfc" target="_blank">
    <img src="/static/a2.jpeg" style="width: 150px">
</a>

<a href="https://www.mi.com/xiaomibuds3pro" target="_blank">
    <img src="/static/a3.jpeg" style="width: 150px">
</a>

</body>
</html>