1.行标签、内联标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行标签 内联标签 inline</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
span {
width: 100px;
height: 100px;
background-color: cyan;
/* padding-top: 100px; */
margin-left: 10px;
}
</style>
</head>
<body>
<!-- 富文本 -->
<p><span style="color: red">C</span>SDN</p>
<span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span>
<!-- <br> 换行 -->
<br>
<a href="http://www.csdn.net"
target="_blank">CSDN</a>
<!-- targe=_self 默认值，在本页面打开
target=_blank 在新的标签页打开 -->
<br>
<i>倾斜</i>
<b>加粗</b>
<em>加强 倾斜</em>
<strong>加强 加粗</strong>
<p>O<sub>2</sub></p>
<p>6<sup>3</sup></p>
</body>
</html>
2.block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>block</title>
<style>
* {
/* 通配选择器 */
margin: 0;
padding: 0;
/* 没有列表样式 */
list-style: none;
}
</style>
</head>
<body>
<div>无语意</div>
<h1>王者荣耀</h1>
<!-- SEO: 网络引擎搜索优化 -->
<!-- 一个页面最多出现1次 -->
<!-- <h2>法师</h2>
<h3>安琪拉</h3>
<h3>上官婉儿</h3>
<h3>墨子</h3>
<h2>打野</h2>
<h3>兰陵王</h3>
<h3>阿珂</h3>
<h3>澜</h3>
<h2>射手</h2>
<h3>孙尚香</h3>
<h3>鲁班</h3>
<h3>马可波罗</h3> -->
<!-- h1 ~ h3 都具备seo功能 -->
<p>段落 标签</p>
<!-- pre标签可以保留段落的格式 -->
<pre>
这里
是
csdn
</pre>
<!-- 请写出至少10个块标签 -->
<!-- 列表 -->
<!-- 无序列表：unorder list -->
<ul>
<!-- 列表项: list-item -->
<li>床前明月光</li>
<li>疑是地上霜</li>
<li>举头望明月</li>
<li>低头思故乡</li>
</ul>
<!-- 1. 可以折叠的小板凳 马札
2. 井床 背井离乡 -->
<!-- 有序列表： order list -->
<ol>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li>
</ol>
</body>
</html>
3.background
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 600px;
/* 块标签水平居中 */
margin: 0 auto;
overflow: hidden;
background-color: gold;
background-image: url(img/Hello\ world.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
/* contain 长边占满父级 */
/* cover 短边占满父级 */
}
p {
height: 50px;
/* 当line-height = height时，文本垂直居中 */
line-height: 50px;
background-color: rgba(0,0,0,.5);
color: white;
font-size: 24px;
/* 文本水平居中 */
text-align: center;
margin-top: 550px;
/* 整体透明 */
/* opacity: .3; */
}
</style>
</head>
<body>
<div>
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
</div>
</body>
</html>
4.text
<!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>text</title>
<style>
h1 {
/* color: red */
/* color: rgba(255,255,255,1) */
color: #ff0000;
/* rgb: red green blue web三原色 */
/* 像素点由4个值构成，red green blue alpha */
}
h2 {
/* 字体大小 */
font-size: 40px;
/* 字体粗细 */
font-weight: 100;
/* 字体样式 */
font-family: 'STSong','Microsoft YaHei','KaiTi';
}
p {
height: 40px;
line-height: 40px;
background-color: pink;
text-align: center;
}
/* 行高 默认是字体大小的1.2倍数 */
/* 字体是相对于行高来居中的，
当不给高度的时候，
是行高撑开了高度 */
div {
background-color: skyblue;
text-indent: 32px;
/* 字体间距 */
letter-spacing: 20px
}
a {
/* 文本描述线 */
text-decoration-style: solid;
}
span {
display: block;
height: 30px;
background-color: red;
/* 英文大小写 */
text-transform: capitalize;
/* vertical-align: bottom; */
/* 空白符 */
/* pre 保留格式 */
/* wrap 换行 */
white-space: wrap;
}
h1, h2, p, span {
/* 群组选择器 */
color: gold
}
body>p {
/* 子代选择器 */
font-size: 26px;
color: purple;
}
</style>
</head>
<body>
<h1>西游记</h1>
<h2>人与自然和谐相处</h2>
<p>女儿国</p>
<div>鸳鸯双栖蝶双飞，满园春色惹人醉，悄悄问圣僧，明正美不美！鸳鸯双栖蝶双飞，满园春色惹人醉，悄悄问圣僧，明正美不美！鸳鸯双栖蝶双飞，满园春色惹人醉，悄悄问圣僧，明正美不美！</div>
<a href="http://www.jd.com">淘宝</a>
<br>
<span>good GOOD study!good GOOD study!good GOOD study!</span>
<br>
<p>asdf asdfasdf</p>
<div>
<p>123123</p>
<p>456456</p>
</div>
</body>
</html>