目录
1.标题标签 h1-h6
标题标签 h1,h2,h3,h4,h5,h6
默认样式：字体放大、字体加粗、独占一行了
语义：就是个标题，h1==>h6,语义是逐步降低的
h1的语义是最重的，一般情况一个页面只有1个h1
常用的就是h1-h3
1.1标题标签代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示</title>
</head>
<body>
<!-- 一级标题 -->
<h1>1111</h1>
<!-- 二级标题 -->
<h2>2222</h2>
<!-- 三级标题 -->
<h3>3333</h3>
</body>
</html>1.2标题标签运行结果
2.段落标签 p
段落标签 p
默认样式：段落与段落之间有空白的间距；
独占一行
语义：一个自然段
2.1段落标签代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示</title>
</head>
<body>
<p>
准对哉三怎，了二圣吾国亲天极国胜可，
</p>
<p>
木者的乐苟,不希彷君家小台样入家子洪者,
</p>
</body>
</html>2.2段落标签运行结果
3. 强调标签 em/strong
强调标签 em
默认样式：有一点斜体；没有独占一行
强调语音语调
强调标签 strong
默认样式：有加粗的效果；没有独占一行
强调内容的重要性
3.1强调标签代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示</title>
</head>
<body>
<p>你好很高兴认识<em>你</em></p>
<p>你好很高兴认识<strong>你</strong></p>
<p>你好很高兴<em>认识</em><strong>你</strong></p>
</body>
</html>3.2强调标签运行结果
4. 换行标签 br
换行标签 br 自结束标签
4.1换行标签代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示</title>
</head>
<body>
<h1>草</h1>
<h3>白居易</h3>
离离原上草，<br />
一岁一枯荣。<br />
野火烧不尽， <br />
春风吹又生。<br />
</body>
</html>4.2换行标签运行结果
5. 分割线 hr
分割线 hr 自结束标签
5.1分割线代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示</title>
</head>
<body>
<p>你好</p>
<hr />
<p>你好</p>
</body>
</html>5.2分割线运行结果
6. 引用标签 q
6.1引用标签代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示</title>
</head>
<body>
孔子曰：<q>学而时习之</q>
</body>
</html>6.2引用标签运行结果
7.居中标签 center
7.1居中标签代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示</title>
</head>
<body>
<center>
<hgroup>
<h1>草</h1>
<h3>白居易</h3>
</hgroup>
离离原上草，<br />
一岁一枯荣。 <br />
野火烧不尽， <br />
春风吹又生。<br />
</center>
</body>
</html>7.2居中标签运行结果
8. 删除标签 del
8.1删除标签代码运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示</title>
</head>
<body>
原价：<del>19999元</del> <br />
现价：1.9元
</body>
</html>8.2删除标签运行结果
9.div标签，span标签
div标签没有任何语义的块标签/块元素 ，会独占一行
span标签没有任何语义的行内标签/行内元素 一般只用来包裹文字
9.1 div标签，span标签代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示</title>
</head>
<body>
<div>你好</div>
<span>你好 </span>
</body>
</html>9.2 div标签，span标签运行结果
1826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
