文本標簽
em標簽用于表示一段內(nèi)容中的著重點。
strong標簽用于表示一個內(nèi)容的重要性梳凛。
通常em顯示為斜體霍衫,而strong顯示為粗體身堡。
i標簽中的內(nèi)容會以斜體顯示
b標簽中的內(nèi)容會以加粗顯示
small標簽中的內(nèi)容會比他的父元素中的文字要小一些
cite 網(wǎng)頁中所有的加書名號的內(nèi)容都可以使用cite標簽,表示參考的內(nèi)容权谁,
比如:書名 歌名 話劇名 電影名
q標簽表示一個短的引用(行內(nèi)引用)
q標簽引用的內(nèi)容剩檀,瀏覽器會默認加上引號
blockquote標簽表示一個長引用(塊級引用)
sup標簽 使用sup標簽來設(shè)置一個上標
sub標簽 sub標簽用來表示一個下標
del標簽 使用del標簽來表示一個刪除的內(nèi)容 del標簽中的內(nèi)容,會自動添加刪除線
ins標簽 ins表示一個插入的內(nèi)容
ins中的的內(nèi)容旺芽,會自動添加下劃線
pre標簽和code標簽
需要頁面中直接編寫一些代碼
pre是一個預(yù)格式標簽沪猴,會將代碼中的格式保存,不會忽略多個空格
code專門用來表示代碼
我們一般結(jié)合使用pre和code來表示一段代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<p>
<em>哈哈哈采章,你起遲了</em>
</p>
<p>
<strong>
注意:早睡早起
</strong>
</p>
<p>
<!-- i ->icon圖標 -->
<i>
啦啦啦啦运嗜,就是這么強大
</i>
</p>
<p>
<b>多熱烈的白羊</b>
</p>
<p>
ppppp就是你
<small>pppp不是你</small>
<big>bbbbbb是你是你就是你</big>
</p>
<p>
<cite>《莉莉安》</cite>宋冬野
</p>
<p>
安和橋:<q>宋冬野</q>
</p>
<div>
南山南:<blockquote>宋冬野</blockquote>
</div>
<p>2<sup>2</sup></p>
<p>
薛之謙<sup><a href="#">[3]</a></sup>
</p>
<p>
哈哈<sub>啦啦啦</sub>呵呵
</p>
<p>
<del>100000</del><br>
99999<br>
</p>
<p>
加油你是最棒的<ins>自信 自制力 自強不息</ins>
</p>
<pre>
if(True):
print(’相信自己‘)
</pre>
<pre>
<code>
if(True):
print(’你一定會很好的‘)
</code>
</pre>
</body>
</html>
文本樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本屬性</title>
<style type="text/css">
/* text-decoration 設(shè)置文本屬性
uppercase 全大寫
lowercase 全小寫
underline 下劃線
overline 上劃線
line-through 刪除線
none 默認值*/
.p1{
text-transform: uppercase;
}
.p2{
text-transform: lowercase;
}
.p3{
text-decoration:underline;
}
.p3{
text-decoration: overline;
}
.p3{
text-decoration: line-through;
}
a{
text-decoration: none;
}
.p1{
letter-spacing: 1px;
word-spacing: 10px;
}
/*letter-spacing 字符間距
word-spacing 單詞間距*/
.p4{
text-align: center;
}
/*left 左對齊
right 右對齊
justify 兩端對齊
center 居中對齊*/
.p5{
font-size: 40px;
text-indent: 2em;
}
/*首行縮進用 text-indent 用2em*/
</style>
</head>
<body>
<p class="p5">
今天,人們的生活節(jié)奏非趁踔郏快担租,很多年輕人在就業(yè)市場面前感到了巨大的壓力。我大學(xué)畢業(yè)前就開始找工作了抵怎,很難找到我想要的工作奋救。我被拒了很多次,但當我被聘用的那一刻反惕,我感到了勝利
</p>
<a href="#">clj</a>
<p class="p1">
今天菠镇,人們的生活節(jié)奏非常快承璃,很多年輕人在就業(yè)市場面前感到了巨大的壓力利耍。我大學(xué)畢業(yè)前就開始找工作了,很難找到我想要的工作盔粹。我被拒了很多次隘梨,但當我被聘用的那一刻,我感到了勝利
I still remembered the day when I was interviewed. Before I came to the company, I had practised many times and my friends pretended to be the employers, asking me all kinds of questions. So I made some preparations and believed that I wouldn't lose control. At the beginning, the employers asked me some simple questions, which I had prepared, so I felt confident. But when they asked me about the company, I forgot to search enough information. But I told myself to calm down, so I expressed my wish to work here. Two days later, I was informed that I got the job. My heart was beating very fast, just liked I had conquered the world.
</p>
<p class="p2">
I got the job. My heart was beating very fast, just liked I had conquered the world.
</p>
<p class="p3">
I still remembered the day when I was interviewed. Before I came to the company, I had practised many times and my friends pretended to be the employers, asking me all kinds of questions.
</p>
<p class="p4">
今天舷嗡,人們的生活節(jié)奏非持崃裕快,很多年輕人在就業(yè)市場面前感到了巨大的壓力进萄。我大學(xué)畢業(yè)前就開始找工作了捻脖,很難找到我想要的工作锐峭。我被拒了很多次,但當我被聘用的那一刻可婶,我感到了勝利
I still remembered the day when I was interviewed. Before I came to the company, I had practised many times and my friends pretended to be the employers, asking me all kinds of questions. So I made some preparations and believed that I wouldn't lose control. At the beginning, the employers asked me some simple questions, which I had prepared, so I felt confident. But when they asked me about the company, I forgot to search enough information. But I told myself to calm down, so I expressed my wish to work here. Two days later, I was informed that I got the job. My heart was beating very fast, just liked I had conquered the world.
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字體的其他樣式</title>
<style type="text/css">
.p1{
color: pink;
font-size: 40px;
font-family: '宋體';
font-style: italic;
/*italic 斜體*/
font-weight: bold;
/*normal 默認粗細*/
/*bold 粗體*/
/*100 - 900 也可以設(shè)置粗體*/
font-variant: small-caps;
/*font-variant 設(shè)置字母小型大寫
small-caps 小型大寫字母*/
}
.p3{
font:italic small-caps bold 40px monospace;
}
</style>
</head>
<body>
<p class="p1">時常想起你沿癞,想起那些回憶 ACDFEEEEE</p><p class="p3">時常想起你,想起那些回憶 ACDFEEEEE</p>
</body>
</html>