html的基础操作——标签
（一）认识标签
1、标题标签
h1---h6
-格式-
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>认识标签</title>
</head>
<body>
<h1>第一大标题</h1>
<h2>第二大标题</h2>
<h3>第三大标题</h3>
<h4>第四大标题</h4>
<h5>第五大标题</h5>
<h6>第六大标题</h6>
</body>
</html>
2、常用标签
-代码-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用标签</title>
</head>
<body>
<p>段落标签,也叫p标签</p>
<em>斜体标签，也叫em标签</em><br />
<b>b标签，也是加粗</b><br />
<i>斜体标签</i><br />
<strong>加粗标签</strong>
<u>下划线</u>
<s>删除线</s>
<sub>下标</sub>
<sup>上标</sup><br />
<font color="aqua"> 颜色</font>
<p> 格</p>
</body>
</html>
3、图片标签
（1）引用本地图片
a、图片可以拖拽到img下或放在img文件下
（2）引用网上图片
4、链接标签
（1）定义：从一个网页指向另一个网页的目的地，这个目标可以是一个网页，也可以图片，一个文件，一个网站等
（2）链接的类型
a、生成新链接覆盖源链接
b、新开一个窗口
c、图片链接
d、死链接
（3）链接操作
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<a href="https://www.baidu.com/">百度（覆盖原有窗口）</a><br />
<a href="https://www.jd.com/" target="_blank">京东(另开一个窗口)</a><br />
<a href="https://www.hao123.com/"><img src="../img/QQ图片20231212113155.png"/></a>
<a href="#">死链接</a>
</body>
</html>
*详解：target=属性*
（1） target=“_blank” 表示将连接的画面内容，在新的浏览器窗口中打开；（打开新窗口）重点
（2）target=“_self” 表示将连接画面内容，显示在目前的窗口中；
（3）target=“_top” 表示将连接画面内容，显示在没有框架的视窗中；
（4）target=“_parent” 表示将连接画面内容，当成文件的上一个画面；
（5）target=“_search” 表示将连接画面内容，搜索区装载的文档
5、列表标签
（一）
（1）有序列表：order lists（简称ol）
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<ol type="">男
<li> 跑车</li>
<li>手表</li>
</ol>
<ol>女
<li>服装</li>
<li>化妆品</li>
</ol>
</body>
</html>
排序
（2）快速生成有序列表
ol*3>li*2 按tab联想
（二）
（1）无序列表：unorder lists（简称：ul）
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<ul type=>男
<li>车</li>
<li>房</li>
<li>钞票</li>
</ul>
<ul>女
<li>服装</li>
<li>化妆品</li>
<li>手饰</li>
</ul>
</html>
（2）快速生成无序列表
ul*2>li*3 按tab键联想
浙公网安备 33010602011771号