1
<!DOCTYPE html>
<html>
<head>
<title>文本標簽</title>
</head>
<body>
<p><em>xxxxx</em></p>
<p><strong>注意，你快完了<strong></p>
<p><i>大河之劍</i><b>天上來</b></p>
<p>將進酒<big>杯莫停</big></p>
<p><cite>《電影》</cite>是我喜歡的</p>
<p>你是<q>xxxx</q>嗎?</p>
<div>他說：<blockquote>a點有人<blockquote></div>
<p>8<sup>2</sup></p>
<p>某某某<sub><a href="#">[1]</a></sub></P>
<p>H<sub>2</sub>0</p>
<p>
<del>200.00</del><br>
300.00<br>
</p>
<p>你很<ins>可愛</ins>啊！</p>
<pre>
if a == b:
print(lll)
</pre>
<pre>
<code>
if a == b:
print(lll)
</code>
</pre>
<ul>
<li>m4a1</li>
<li>ak47</li>
<li>awm</li>
</ul>
</body>
</html>
2
<!DOCTYPE html>
<html>
<head>
<title>列表</title>
</head>
<body>
<p>衣庫</p>
<ul>
<li>白色短袖<ol><li>白色的</li><li>短袖</li></ol></li>
<ul>
<li>m4a1<li>
<li>ak47<li>
<li>awm<li>
</ul>
<ol type="a">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</body>
</html>
3
<!DOCTYPE html>
<html>
<head>
<title>顏色單位</title>
<style type="text/css">
.box{
width: 100px;
height: 200px;
background-color: rgb(169,198,120);
/*background-color: rgb(100%,50%,50%);*/
/*background-color: #0000FF;*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
4
<!DOCTYPE html>
<html>
<head>
<title>字體分類</title>
<style type="text/css">
</style>
</head>
<body>
<p style="font-size: 50px;font-family: serif;">abcdefgh</p>
<p style="font-size: 50px;font-family: sans-serif;">abcdefgh</p>
<p style="font-size: 30px;font-family: sans-serif;">虛幻字體:abcdefgh</p>
<p style="font-size: 30px;font-family: sans-serif;">草書字體：abcdefgh</p>
<p style="font-size: 30px;font-family: sans-serif;">等寬字體：abcdefgh</p>
</body>
</html>
5
<!DOCTYPE html>
<html>
<head>
<title>字體樣式</title>
<style type="text/css">
.w1{
color: green;
font-size: 30px;
font-family: 微軟雅黑;
}
</style>
</head>
<body>
<p class="w1">mmmmmmmm</p>
</body>
</html>
6
<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
<style type="text/css">
.w1{
width: 100px;
height: 100px;
background-color: red;
border-width: 10px 20px 30px;
border-color: yellow;
border-style: solid;
}
</style>
</head>
<body>
<div class="w1"></div>
</body>
</html>
7
<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
<style type="text/css">
.ccc{
width: 100px;
height: 100px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="ccc" <a href=</a>></div>
</body>
</html>
8
<!DOCTYPE html>
<html>
<head>
<title>行間距</title>
<style type="text/css">
.w1{
line-height: 50px;
font-size: 20px;
}
.xxxxx{
width: 200px;
height: 200px;
background-color: red;
line-height: 200px;
}
</style>
</head>
<body>
<div class="xxxxx">
<a href="#">我是超鏈接</a>
</div>
<p class="w1">
(其中長段內容自選)
</p>
</body>
</html>
9
<!DOCTYPE html>
<html>
<head>
<title>顏色單位</title>
<style type="text/css">
.box{
width: 100px;
height: 200px;
background-color: rgb(169,198,120);
/*background-color: rgb(100%,50%,50%);*/
/*background-color: #0000FF;*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
10
<!DOCTYPE html>
<html>
<head>
<title>字體其他樣式</title>
<style type="text/css">
.p1{
color: red;
font-size: 30px;
font-family: 微軟雅黑;
font-style: oblique;
font-weight: bold;
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 30px "微軟雅黑";
}
</style>
</head>
<body>
<p class="p1">abcabcabc</p>
<p class="p2" style="font-style: italic;">我是abc</p>
<p class="p3" style="font-style: italic;">我是我是我是abc</p>
</body>
</html>
11
<!DOCTYPE html>
<html>
<head>
<title>文本樣式</title>
<style type="text/css">
.w1{
text-transform: lowercase;
}
.w2{
text-decoration: overline;
}
a{
text-decoration: none;
}
.w3{
/*letter-spacing: 10px;*/
word-spacing: 100px;
}
</style>
</head>
<body>
<a href="#">hello</a>
<p class="w3">(此處選入長段落內容)</p>
<p class="w2">(此處選入長段落內容)</p>
</body>
</html>
