文本标签；样式及盒子模型
2018-06-04 本文已影响0人
松雪宝宝
（1）文本标签：
<!DOCTYPE html>
<html lang="en">
<center>
<head>
<meta charset="UTF-8">
<title>文本标签</title>
<style type="text/css">
</style>
</head>
<body>
<p>今天天气真好</p>
<p>
<strong>
注意:太阳毒
</strong>
</p>
<p>
<i>我是p标签中的i标签</i>
<br><br>
<b>我是p标签中的i标签</b>
</p>
<p>
我是p内容
<small>我是small中内容</small>
<big>
内容
</big>
<cite>《七龙珠》</cite>
你是<q>小猪脾气</q>
</p>
<div>
子曰<blockquote>不亦说乎</blockquote>
</div>
<p>8<sup>2</sup></p>
<p>林志颖<sup><a href="#"></a></sup></p>
<p>H<sub>2</sub>O</p>
<p>
<del>200.00<br></del>
150.00<br>
</p>
<p>
真<ins>高</ins>啊
</p>
<pre>
if(true):{
print("真好");
}
</pre>
<code>
if(true):{
print("真好");
}
</code>
<pre>
<code>
if(true):{
print("真好");
}
</code>
</pre>
<ul>
<li>大官人</li>
<li>中官人</li>
<li>小官人</li>
</ul>
</body>
</center>
</html>
(2）列表:
<!DOCTYPE html>
<html lang="en">
<center>
<head>
<meta charset="UTF-8">
<title>列表</title>
<style type="text/css">
ul{
list-style: none;
}
ol{
list-style: none;
}
</style>
</head>
<body>
<dl>
<dt>武松</dt>
<dd>战力500</dd>
<dd>逼上梁山</dd>
<dt>武大郎</dt>
<dd>被毒死</dd>
</dl>
<p>菜谱</p>
<ul>
<li>肉
<ol>
<li>鱼香</li>
<li>黑丝</li>
<li>肉丝</li>
</ol>
</li>
<li>饭
<ul>大米</ul>
<ul>小米</ul>
<ul>黑米</ul>
</li>
<li>菜</li>
</ul>
<ul>
<li>大大大</li>
<li>大大大</li>
<li>大大大</li>
</ul>
<ol type="a">
<li>大大大</li>
<li>大大大</li>
<li>大大大</li>
</ol>
</body>
</center>
</html>
(3)单位:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单位</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background: red;
}
.box1{
/*font-size: 300px;*/
width: 10em;
height: 50%;
background: 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{
font-size: 300px;
width: 5em;
height: 3em;
background: #0000CC;
}
.box1{
font-size: 300px;
width: 3em;
height: 2em;
background: rgb(150,0,0);
}
</style>
</head>
<body>
<div class="box">
<center>
<div class="box1">
</div>
</center>
</div>
</body>
</html>
(5)字体的样式:
<!DOCTYPE html>
<html lang="en">
<center>
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<style type="text/css">
.box{
font-size: 300px;
width: 2em;
height: 2em;
background: greenyellow;
}
.p1{
color: rgb(150,0,0);
font-size: 30px;
font-family: 微软雅黑;
}
</style>
</head>
<body>
<div class="box">
<p class="p1">
我是你爹，ABCabc
</p>
</div>
</body>
</center>
</html>
(6)字体的分类:
<!DOCTYPE html>
<html lang="en">
<center>
<head>
<meta charset="UTF-8">
<title>字体分类</title>
<style type="text/css">
.box{
font-size: 300px;
width: 2em;
height: 2em;
background: green;
}
p{
color: red;
}
</style>
</head>
<body>
<div class="box">
<p style="font-size: 60px; font-family: serif;">
我是你爹，ABCabc
</p>
<p style="font-size: 30px; font-family: sans-serif;">
我是你爹，ABCabc
</p>
<p style="font-size: 70px; font-family: monospace;">
我是你爹，ABCabc
</p>
<p style="font-size: 40px; font-family: cursive;">
我是你爹，ABCabc
</p>
<p style="font-size: 20px; font-family: fantasy;">
我是你爹，ABCabc
</p>
</div>
</body>
</center>
</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: oblique;
font-weight: 900;
font-variant: small-caps;
}
.p2{
font-size: 50px;
font-family: 华文彩云;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}
.p3{
font: italic small-caps bold 100px "微软雅黑";
}
</style>
</head>
<body>
<p class="p1">我是一位小哥哥ewwwrwrwrw</p>
<p class="p2">我是一位小哥哥asdasasdada</p>
<p class="p3">我是一位小哥哥asdasasdada</p>
</body>
</html>
(8)行间距:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行间距</title>
<style type="text/css">
.p1{
line-height: 80px-20px;
font-size: 20px;
color: red;
}
.box{
width: 200px;
height: 200px;
background: red;
line-height: 200px;
}
.p2{
line-height: 50;
font: 30px "微软雅黑";
color: blue;
}
</style>
</head>
<body>
<center>
<div class="box">
<a href="#">思考思考就是撒哈哈</a>
</div>
</center>
<p class="p1">近几日在家瞎“折腾”东西时，一个肉色的团状体，变成金黄的绒毛铺在身上，好让人。我也想感受小鸡孵出来的感觉，便揣着两个鸡蛋，偷偷摸摸的放在床上。晚上吃饭时，爷爷奶奶见我心神不定的样子，便问我怎么了。我只是冲他们神秘一笑，就去睡觉了无意中就翻到了那个柜子。
它极为隐秘，在桌子里，还有一把锁和钥匙，要不是心血来潮，我才不会把它打开。柜门一开，一尘灰气呛来，让我咳嗽了几声，一看，里面是简简单单的两个大盒子。打开来，先是一愣，随即又莫名地笑了。
这是碎了的鸡蛋壳，是儿时年幼，想“人工孵蛋”。那时，我曾在奶奶家住过一段时间，奶奶家养有许多鸡，我时常瞪着眼睛去看，尤其在小鸡刚生出来时，从。我把两个鸡蛋压在身下，整个人趴在那儿成“弓”字形，等着小鸡降临。慢慢地，眼皮子就不和我配合了，沉重地落下来……第二天，可想而知，两个鸡蛋惨不忍睹，我或许是出于愧疚，把鸡蛋壳藏了起来，放到箱子里。
笑了笑，摇摇头，继续翻腾下去。这是年幼时和伙伴的“约定”。一张白纸，角边已微微泛黄，上面写着稚气的字体，“张芸雅，张新媛，永远好朋友。”这是我和伙伴在看到电视上的人结为兄弟姐妹时，我们跑到抽屉旁，从里面郑重地拿出一张白纸，我写上我的名字，她写上的她的，然后再一起写上“永远好朋友”，下面还有两个大拇指印，是我们用水彩笔在手上涂了涂，然后印上去的。我们一共弄了两份“约定”，她一张，我一张。而我就把它锁了进去。
揭开沉封的童年，火箭笔，口红粮，炮纸，陀螺……往昔历历在目。是的，我把它们都珍藏了起来，却藏不住时间，藏不住童年。
我小心翼翼地把柜子锁住，锁进去回忆，却锁不住童年。但又何妨?只要永远的记住那些往事和纯真的回忆。童年，锁在心里。</p>
<p class="p2">近几日在家瞎“折腾”东西时，无意中就翻到了那个柜子。</p>
</body>
</html>
(9)文本的样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本的样式</title>
<style type="text/css">
.p1{
text-transform: capitalize;
}
.p2{
text-decoration: underline;
text-decoration: line-through;
}
a{
text-decoration: none;
}
.p3{
letter-spacing: 10px;
word-spacing: 20px;
text-indent: 2%;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<h1>得分</h1>
<a href="http://www.baidu.com">超链接</a>
<p class="p1">Today is Children’s Day. Early in the morning, I feel so excited, because I know the teachers have prepared some surprised for us. We don’t have class and all we do is to enjoy the games. I play Ping Pong game and win many awards. I like the riddle so much. When I get the answer, I feel so proud of myself. </p>
<p class="p2">Today is Children’s Day. Early in the morning, I feel so excited, because I know the teachers have prepared some surprised for us. We don’t have class and all we do is to enjoy the games. I play Ping Pong game and win many awards. I like the riddle so much. When I get the answer, I feel so proud of myself. </p>
<p class="p3">Today is Children’s Day. Early in the morning, I feel so excited, because I know the teachers have prepared some surprised for us. We don’t have class and all we do is to enjoy the games. I play Ping Pong game and win many awards. I like the riddle so much. When I get the answer, I feel so proud of myself. </p>
</body>
</html>
(10)盒子模型:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background: #bfa;
border-width: 10px;
border-color: red;
border-style: dotted;
border-color: red yellow orange green;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
(11)边框:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background: #bfa;
border-left: red solid 10px;
border-top: orange solid 10px;
border-bottom: green solid 10px;
border-right: yellow solid 10px;
}
</style>
</head>
<body>
<div class="box">
</div>
>>></body>
</html>
a.gif
b.gif
c.gif
d.gif
e.gif
