整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
續上次沒說完的標題吧，今天也順便講下段落和文本格式化。
首先，需要知道的是，標題很重要。
需要確保將 HTML 標題的標簽只用于標題。不要僅僅是為了生成粗體或大號的文本而使用標題。搜索引擎使用標題為網頁的結構和內容編制索引。因為用戶可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文檔結構是很重要的。應該將 h1 用作主標題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。就像之前發的那張圖一樣。然后再說說標題的水平線。<hr> 標簽在 HTML 頁面中創建水平線,hr 元素也可用于分隔內容。實例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210815---(二)測試開發轉型</title>
</head>
<body>
<h></h>
<p></p>
<h1>我是最大的，你忍一下</h1>
<hr>
<h2>我是老二，你也要忍一下</h2>
<hr>
<h3>我是老三，我一般</h3>
<hr>
</body>
<a href ="https://www.baidu.com">這是一個招聘網站</a>
</html>
可以看到有分割線
HTML注釋
接著我們說下HTML的注釋，可不是簡單的 //
<!-- 這是一個注釋 -->
需要注意的一點: 開始括號之后（左邊的括號）需要緊跟一個嘆號，結束括號之前（右邊的括號）不需要，合理地使用注釋可以對未來的代碼編輯工作產生幫助。
接著說下HTML的段落
HTML 段落
段落是通過 <p> 標簽定義的。
具體我們來看個實例：
可以看到三個段落，我們再看看代碼是怎么實現的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210815---(二)測試開發轉型</title>
</head>
<body>
<h></h>
<p>這是第一個段落</p>
<!--我是一個注釋-->
<h1>我是最大的，你忍一下</h1>
<hr>
<p>這是第二個段落</p>
<h2>我是老二，你也要忍一下</h2>
<hr>
<p>這是第三個段落</p>
<h3>我是老三，我一般</h3>
<hr>
</body>
<a href ="https://www.baidu.com">這是一個招聘網站</a>
</html>
不要忘記結束標簽:即使忘了使用結束標簽，大多數瀏覽器也會正確地將 HTML 顯示出來。接著說下在段落中折行，這就需要用到<br>了
我們直接來看看實例:
可以看到有三個折行
來看看代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210815---(二)測試開發轉型</title>
</head>
<body>
<h></h>
<p>這是第一個段落,你服不服<br>我不服，你個二愣子</p>
<!--我是一個注釋-->
<h1>我是最大的，你忍一下</h1>
<hr>
<p>這是第二個段落<br>你給我滾一邊去</p>
<h2>我是老二，你也要忍一下</h2>
<hr>
<p>這是<br>第三個段落<br></p>
<h3>我是老三，我一般</h3>
<hr>
</body>
<a href ="https://www.baidu.com">這是一個招聘網站</a>
</html>
<br /> 元素是一個空的 HTML 元素。由于關閉標簽沒有任何意義，因此它沒有結束標簽
下一節我們講下HTML的格式化，包含粗體、斜線等
加油，晚安~
海無涯，不要沉浸在知識的海洋里，迷失自己。
要知道自己想要什么，抓住重點，不忘初心。
這個世界上百分之20的人，掌握著百分之80的財富。
接下來一系列教程，就帶領大家抓住重點，一起做那百分之20的人。
往期知識點回顧：
重點屬性-display
重點屬性-position
重點屬性-float
重點屬性-flex
重點屬性-overflow
重點屬性-media
CSS 背景這里指通過background對對象設置背景屬性，如通過CSS設置背景各種樣式。
設置顏色作為對象背景顏色
設置圖片作為背景圖片
設置背景平鋪重復方向
設置或檢索背景圖像是隨對象內容滾動還是固定的。
設置或檢索對象的背景圖像位置。
背景樣式的值是復合屬性值組合，也就是背景單詞的值可以跟多個屬性值，值與值之間使用一個空格間隔鏈接上即可。
1、設置純色背景。背景background可以設置對象純色的背景顏色，
2、設置圖為背景。可以設置對象背景為圖片，如果背景是圖片可以讓圖片重復平鋪橫鋪，或將圖片作為對象背景固定在對象任何位置。
屬性解析
no-repeat:不重復
repeat-x:水平方向（橫向）重復平鋪
repeat-y:垂直方向（豎向）重復平鋪
如果不設置，為全背景平鋪
left 圖片靠左
right 圖片靠右
top 圖片靠上
bottom 圖片靠下
fixed 圖片固定
scroll 背景圖片內容滾動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex布局css</title>
<style>
.container{
background: #FFF url(https://image.baidu.com/beijing.gif) no-repeat 0 0 fixed
}
</style>
</head>
<body>
<div class="container">
背景圖
</div>
</body>
</html>
復制代碼1、由使用float浮動造成浮動產生無法顯示css背景顏色
2、高度不夠而產生背景無法顯示
3.如果是float造成：解決方法有三種，一個是設置clear清除浮動、設置css高度、設置css overflow樣式。
4.如果是高度原因：解決方案如下，設置夠高的高度，或取消刪除高度樣式即可。
篇中我們介紹了文本的一些樣式，這篇接著講文本樣式。
6.文本下劃線
一般文本下劃線都用在什么地方呢？我想到一個就是畫重點考前劃重點，有沒有畫面感，^v^。
用css來實現劃重點，也是別具風格呀。
<!DOCTYPE html>
<html>
<head>
<title>css顏色與度量單位</title>
<style>
span{
text-decoration:underline;
}
</style>
</head>
<body>
<p>
在做等離子物理對撞實驗的時候，如果把第三能量的極坐標，向負方向調整三個阿爾法單位，那么對最終的結果將會產生多少影響?
<br>
<span>2伽馬一步徐龍根號3</span>
</p>
</body>
</html>text-decoration可以給文本設置下劃線，上劃線，刪除線，取消線。
上面代碼實現效果如下：
這個效果看起來兩行之間的距離有點擁擠，我們可以調整的它們的距離，稍微遠一點，讓它們看起不那么擁擠。
7.文本的行間距
用line-height來指定行間距，因為文本都包含在p標簽中，所以我們給p標簽加了行間距為50px
調整后的效果如下：
看起來下劃線的文字還是不夠顯眼啊，我們再給它加點顏色上去，會更好。
這回好多了。夠顯眼，就絕對記得住。
text-decoration后面可以設置的值如下：
值 | 說明 |
none | 讓本身有劃線裝飾的文本取消掉 |
underline | 讓文本的底部出現一條下劃線 |
overline | 讓文本的頭部出現一條上劃線 |
line-through | 讓文本的中部出現一條刪除線 |
blink | 讓文本進行閃爍，基本不支持了 |
text-decoration：none這個會讓本身有劃線裝飾的文本取消掉的意思，例如a標簽，天生就帶下劃線，那要不想要自帶的下劃線就可以利用這個樣式給它去掉。
來嘗試一下
<!DOCTYPE html>
<html>
<head>
<title>css顏色與度量單位</title>
<style>
p{
line-height: 50px;
}
span{
text-decoration:underline;
color: red;
}
</style>
</head>
<body>
<p>
在做等離子物理對撞實驗的時候，如果把第三能量的極坐標，向負方向調整三個阿爾法單位，那么對最終的結果將會產生多少影響?
<br>
<span>2伽馬一步徐龍根號3</span>
<br>
<a href="http://www.baidu.com">百度</a>
</p>
</body>
</html>百度兩個字下面天生就帶了下換線，要去掉請使用text-decoration：none
其余幾個大家可以自己動手嘗試一下效果。
8.設置英文文本轉換為大小寫
這個標題很好理解，就是專門針對英文的，如果想把英文文本轉換大小寫可以使用
<!DOCTYPE html>
<html>
<head>
<title>css顏色與度量單位</title>
<style>
p{
line-height: 50px;
}
span{
text-decoration:underline;
color: red;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<p>
在做等離子物理對撞實驗的時候，如果把第三能量的極坐標，向負方向調整三個阿爾法單位，那么對最終的結果將會產生多少影響?
<br>
<span>2伽馬一步徐龍根號3</span>
<br>
<a href="http://www.baidu.com">百度</a>
<br>
<span class="english">
no zuo no die you why cry
<br>
you zuo you die don't ask why
</span>
</p>
</body>
</html>頁面效果如下：
這里的英文文本也是寫在了span標簽里面，受span標簽樣式的影響這里也變成了紅色，也加了下劃線。我們給它取消掉這些樣式。并給它設置讓英文單詞首字母變成大寫的樣式。
下面給出text-transform的值和作用的表格，大家可以自行動手嘗試效果。
值 | 說明 |
none | 將已被轉換大小寫的值恢復到默認狀態 |
capitalize | 將英文單詞首字母大寫 |
uppercase | 將英文轉換為大寫字母 |
lowercase | 將英文轉換為小寫字母 |
9.文本添加陰影
text-shadow:5px 5px 5px red;
這里有四個值（3個5px和一個red）：第一個值代表水平偏移；第二個值代表垂直偏移；第三個值代表陰影模糊度（可選）；第四個值代表陰影顏色（可選）。
10.設置文本的對齊方式
我們可以設置文本的對齊方式，如果你用過word文檔的話，那一定知道左對齊、右對齊、居中對齊。css里面同樣有
我們來嘗試一下居中對齊
值 | 說明 |
left | 靠左對齊，默認 |
right | 靠右對齊 |
center | 居中對齊 |
justify | 內容兩端對齊 |
start | 讓文本處于開始的邊界 |
end | 讓文本處于結束的邊界 |
start和end屬于css3新增的功能，IE和Opera瀏覽器可能不支持。
11.處理文本之間的距離（letter-spacing）
也就是兩個字間的距離，通過例子來感受一下
很明顯的可以看到字間距變大了。
12.設置英文單詞之間的距離（word-spacing）
13.文本首行的縮進（text-indent）
一般每個段落的首行都要縮進，這是書寫書信文件時的規定。
我們去掉了居中對齊的樣式，是為了更好地演示首行縮進的效果。
看效果圖紅框的地方，明顯有縮進。
好了，以上就是今天的內容了。
希望大家可以早日學會編程，踏上高薪之路，早日成為白富美、高富帥。動手練，聽我的沒錯。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
