1、文本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<p>今天<em>下雨了<em><!--斜体、语气着重-->
<p><strong>警告</strong> 警告</p><!--粗体、文字着重-->
<i>i标签</i><!--斜体-->
<br>
<b>b标签</b><!--粗体-->
<p>p标签</p><!--正常体-->
<small>small标签</small><!--小号字体（合同细则）-->
<br>
<cite>《清明雨上》</cite><!--参考内容-->
<p>
子曰：<q>温故而知新，可以为师已!</q><!--引号-->
<p>
<div id="haha">
子曰：<blockquote>哈哈哈哈</blockquote><!--换行-->
<div>
<p>2<sup>2</sup></p><!--2的2次幂（上角标）-->
<p>杨幂<sup><a href="#haha">[2]</a></sup></p><!--跳转到制定位置-->
<p>H<sub>2</sub>O </p><!--下角标-->
<p>
<del>4000.88</del><br><!--删除线-->
999.99<br>
</p>
<p><ins>下划线</ins> </p><!--下划线-->
<p>
<pre>
del la():
print("hello")
la()
</pre><!--保留格式-->
</p>
<code>
del la():
print("hello")
</code><!--保存代码格式（与<pre结合使用>）-->
<pre><code>
del la():
print("hello")
</code></pre><!--<code>与<pre结合使用-->
</body>
</html>
2、列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
<style type="text/css">
/* ul{
list-style: none;
} */
</style>
</head>
<body>
<!--
1.无序列表：ul li
2.有序列表：ol li
3.定义列表：dl dt dd
-->
<ul><!--无序列表-->
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<ol type="1"><!--有序列表 默认type=‘1’-->
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<p>菜谱</p><!--嵌套-->
<ul>
<li>
鱼香肉丝
<ul>
<li>肉</li>
<li>胡萝卜</li>
</ul>
</li>
<li>小炒肉</li>
<li>尖椒干豆腐</li>
</ul>
<dl>
<dt>喜洋洋</dt>
<dd>眼睛大</dd>
</dl>
</body>
</html>
3、单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单位</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
}
.box1{
font-size: 100px;
/*1em=100px*/
width: 10em;
height: 90%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
</div>
</body>
</html>
4、颜色的单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>颜色的单位</title>
<style type="text/css">
.box{
width: 500px;
height: 500px;
/* background-color: rgb(41,200,78); */
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
5、字体的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体的样式</title>
<style type="text/css">
.p{
color: red;
font-size: 30px;
font-family: 楷体;
}
</style>
</head>
<body>
<p class="p">
哈哈哈哈hahahahafluaulkfs
lkdvbvkbxziiuducilns
dfsdfsdsdvsdgdgfzdggsd
</p>
</body>
</html>
6、字体分类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体分类</title>
<style type="text/css">
</style>
</head>
<body>
<!--衬线字体serif 、不好好写字
非衬线字体sans-serif 、横平竖直
等宽字体monospace 、每个字一样宽
草书字体curfuc 、杂乱的
虚幻字体fantasy 、个性字体
-->
<p style="font-size: 50px; font-family: serif;">
哈哈哈哈
</p>
</body>
</html>
7、字体的其他样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体的其他样式</title>
<style type="text/css">
.p1{
color: red;
font-size:50px;
font-family: 微软雅黑;
font-style:italic;
font-weight: bold;
font-variant: small-caps;
} /*倾斜加粗*/
/* 小型大写字母 */
.p2{
font: italic small-caps bold 60px "华文彩云";
}
</style>
</head>
<body>
<p class="p1">好大的雨lllllllllll</p>
<p class="p2">好大的雨lllllllllll</p>
</body>
</html>
8、行间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行间距</title>
<style type="text/css">
.p1{
line-height: 40px;
font-size:20px;
}
.box{
height: 200px;
width: 200px:
background-color: red;
line-height: 200px;
}
</style>
</head>
<body>
<div class="box">
<a href="#">超链接</a>
</div>
<p class="p1"> 生命里，一些缱绻，无论素净，还是喧哗，都已经被岁月赋予了清喜的味道，一些闲词，或清新，或淡雅，总会在某一个回眸的时刻醉了流年，濡湿了柔软的心，冥冥之中，我们沿着呼唤的风声，终于在堆满落花的秋里，再次重逢，念在天涯，心在咫尺，我相信，一米阳光，才是我们最好的距离。
缘起是诗，缘离是画，这些关于岁月，关于记忆的章节，终会被时光搁置在无法触及的红尘之外，曾经，你我一别经年，可风里，总有一段美丽会与我们不期而遇，一盏琉璃，半杯心悦，端然着那一份醉人的静，这安静行走的流年，总会被过往赋予一份清喜，一份浪漫。
或许，习惯了着布衣素颜，让清心若雪，不喜张扬，不畏喧哗，守着一怀自己的素韵安静，在自己心中的半亩桃源，修篱种菊，喜欢与山水相依，与流水对话，让文字的墨香，依附在心灵的每一个角落，也喜欢，在闲时，端坐时光一隅，将一本书读到无字，将一盏茶喝到无味，将一个故事看到流泪.……心染尘香，不须有多少的柔情话语去讲，只要能够念起，便是一份温暖。
再打开记忆的栅栏，取一壶往昔，与流年对坐，情有多深，心就有多疼，触不到的可惜，在挥手袖的风里滋养着忧伤，捻一缕清芬，看三千浮华，历历往事，素淡清雅，研一池墨香，植于眉心，相遇如梦，一直充满虔诚的无暇，这个十月，我用满怀的深情，打开文字的苍白，灵动的心事，穿过岁月的轩窗，迎面而来，我未曾离开，为何不见了原来这世间的繁华与葱笼？是时光的无情，还是流年容易沧桑，让所有的一切都如逝水匆匆，去了遥远的天涯？
从此，我只想，淡泊一份宁静，让心中盈满诗意，只为赴你早就许下的盟誓，你不来，我怎么会轻易离开？一直，我喜欢叶落的静美，梦想着有一天和你一起看云水长天。我说：我韶华已老，岁月早已沧桑，已习惯了静默着独舞忧伤，然，这一眼凝眸，却注定得一世相随！或许我会静静陪你看一生的细水长流。
静默，看一场烟花如何绚烂自己的一生，忽然发现，我的梦想，有些什么已悄然变了，呼出的想念里，夏已调谢，秋已深浓，空气里有雨过的清新，却让秋沾染了好些沧桑的凉。一场花开的邂逅，静美了多少无言的守望？一帘烟雨的轮回，成全了多少天涯的相依？梦里天涯，许多人，终要忘记；许多事，总会随风，那些忧伤和叹息的深夜，依然会被突如其来的喧嚣触痛，我的星月，我的花开，曾经悄然用心铭刻，却也被时光的沙漏，渐渐滤去最初的繁华。
我知道，那些关怀，那些温暖，你均是悄悄的给予，既已懂得，何须多言？！就让这份静美，永留心间。感谢岁月赠予我的这一份恩宠，亦感谢你让我途径你生命的四季，陪我走过的这一程山水，那么美。遇见，已是很美。就让我借一程云淡风轻。掬一捧水月在手，沾岁月的花香满衣。慎重在相逢的渡口写下：回忆有你，真是精彩。未来很美，许我和你一起笑对！可好？其实，情早已经入心，不要问，情深缘浅；不要说，相见恨晚。遇见已是很美，我们何须追问那些雨的印记，那些相伴的理由？一直想对你说：如果时光不老，情不会改变，如果你愿，我便放下所有矜持，携一颗琉璃素心，陪你静看一生最美的日落烟霞。</p>
</body>
</html>
9、文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
/* .p{
text-transform: lowercase;
}
.p{
text-decoration: line-through;
}
.a{
text-decoration: none;
} */
/* 去除超链接下划线 */
.p{
text-align: justify;
}
.p4{
text-indent: 32px;
}
</style>
</head>
<body>
<a href="#">chaolianjie</a>
<p class="p">fklfbklksaldkvbslakbdlkkbsalkdkvblksadlvkblksdbvlbslkadbvasbdlvjblsajbdlvjblskjkvblkjxbclkvjlskbvlkblskbdvlkbslkdvbksjbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbfsfsfsadgsgsdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffklfbklksaldkvbslakbdlkkbsalkdkvblksadlvkblksdbvlbslkadbvasbdlvjblsajbdlvjblskj
kvblkjxbclkvjlskbvlkblskbdvlkbslkdvbksjbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffklfbklksaldkvbslakbdlkkbsalkdkvblksadlvkblksdbvlbslkadbvasbdlvjblsajbdlvjblskjkvblkjxbclkvjlskbvlkblskbdvlkbslkdvbksjbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbfsfsfsadgsgsdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
</body>
</html>
