「轉(zhuǎn)行測(cè)試開(kāi)發(fā)-HTML」(三)上次沒(méi)說(shuō)完的標(biāo)題、段落和文本格式化

續(xù)上次沒(méi)說(shuō)完的標(biāo)題吧，今天也順便講下段落和文本格式化。

首先，需要知道的是，標(biāo)題很重要。

需要確保將 HTML 標(biāo)題的標(biāo)簽只用于標(biāo)題。不要僅僅是為了生成粗體或大號(hào)的文本而使用標(biāo)題。搜索引擎使用標(biāo)題為網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容編制索引。因?yàn)橛脩艨梢酝ㄟ^(guò)標(biāo)題來(lái)快速瀏覽您的網(wǎng)頁(yè)，所以用標(biāo)題來(lái)呈現(xiàn)文檔結(jié)構(gòu)是很重要的。應(yīng)該將 h1 用作主標(biāo)題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類(lèi)推。就像之前發(fā)的那張圖一樣。然后再說(shuō)說(shuō)標(biāo)題的水平線。<hr> 標(biāo)簽在 HTML 頁(yè)面中創(chuàng)建水平線,hr 元素也可用于分隔內(nèi)容。實(shí)例如下:

<!DOCTYPE html>

<html>

<head>

<title>20210815---(二)測(cè)試開(kāi)發(fā)轉(zhuǎn)型</title>

</head>

<body>

<h></h>

<p></p>

<h1>我是最大的，你忍一下</h1>

<hr>

<h2>我是老二，你也要忍一下</h2>

<hr>

<hr>

</body>

</html>

可以看到有分割線

HTML注釋

接著我們說(shuō)下HTML的注釋，可不是簡(jiǎn)單的 //

需要注意的一點(diǎn): 開(kāi)始括號(hào)之后（左邊的括號(hào)）需要緊跟一個(gè)嘆號(hào)，結(jié)束括號(hào)之前（右邊的括號(hào)）不需要，合理地使用注釋可以對(duì)未來(lái)的代碼編輯工作產(chǎn)生幫助。

接著說(shuō)下HTML的段落

HTML 段落

段落是通過(guò) <p> 標(biāo)簽定義的。

具體我們來(lái)看個(gè)實(shí)例：

可以看到三個(gè)段落，我們?cè)倏纯创a是怎么實(shí)現(xiàn)的

<!DOCTYPE html>

<html>

<head>

<title>20210815---(二)測(cè)試開(kāi)發(fā)轉(zhuǎn)型</title>

</head>

<body>

<h></h>

<p>這是第一個(gè)段落</p>

<h1>我是最大的，你忍一下</h1>

<hr>

<p>這是第二個(gè)段落</p>

<h2>我是老二，你也要忍一下</h2>

<hr>

<p>這是第三個(gè)段落</p>

<hr>

</body>

</html>

不要忘記結(jié)束標(biāo)簽:即使忘了使用結(jié)束標(biāo)簽，大多數(shù)瀏覽器也會(huì)正確地將 HTML 顯示出來(lái)。接著說(shuō)下在段落中折行，這就需要用到<br>了

我們直接來(lái)看看實(shí)例:

可以看到有三個(gè)折行

來(lái)看看代碼:

<!DOCTYPE html>

<html>

<head>

<title>20210815---(二)測(cè)試開(kāi)發(fā)轉(zhuǎn)型</title>

</head>

<body>

<h></h>

<p>這是第一個(gè)段落,你服不服<br>我不服，你個(gè)二愣子</p>

<h1>我是最大的，你忍一下</h1>

<hr>

<p>這是第二個(gè)段落<br>你給我滾一邊去</p>

<h2>我是老二，你也要忍一下</h2>

<hr>

<hr>

</body>

</html>

<br /> 元素是一個(gè)空的 HTML 元素。由于關(guān)閉標(biāo)簽沒(méi)有任何意義，因此它沒(méi)有結(jié)束標(biāo)簽

下一節(jié)我們講下HTML的格式化，包含粗體、斜線等

加油，晚安~

海無(wú)涯，不要沉浸在知識(shí)的海洋里，迷失自己。

要知道自己想要什么，抓住重點(diǎn)，不忘初心。

這個(gè)世界上百分之20的人，掌握著百分之80的財(cái)富。

接下來(lái)一系列教程，就帶領(lǐng)大家抓住重點(diǎn)，一起做那百分之20的人。

往期知識(shí)點(diǎn)回顧：

重點(diǎn)屬性-display

重點(diǎn)屬性-position

重點(diǎn)屬性-float

重點(diǎn)屬性-flex

重點(diǎn)屬性-overflow

重點(diǎn)屬性-media

重點(diǎn)屬性background

CSS 背景這里指通過(guò)background對(duì)對(duì)象設(shè)置背景屬性，如通過(guò)CSS設(shè)置背景各種樣式。

background-color

設(shè)置顏色作為對(duì)象背景顏色

background-image

設(shè)置圖片作為背景圖片

background-repeat

設(shè)置背景平鋪重復(fù)方向

background-attachment

設(shè)置或檢索背景圖像是隨對(duì)象內(nèi)容滾動(dòng)還是固定的。

background-position

設(shè)置或檢索對(duì)象的背景圖像位置。

Background

背景樣式的值是復(fù)合屬性值組合，也就是背景單詞的值可以跟多個(gè)屬性值，值與值之間使用一個(gè)空格間隔鏈接上即可。

background背景作用：

1、設(shè)置純色背景。背景background可以設(shè)置對(duì)象純色的背景顏色，

2、設(shè)置圖為背景。可以設(shè)置對(duì)象背景為圖片，如果背景是圖片可以讓圖片重復(fù)平鋪橫鋪，或?qū)D片作為對(duì)象背景固定在對(duì)象任何位置。

Background分析解析

屬性解析

A.設(shè)置背景具體顏色值

B.這是背景的具體圖片路徑

C.設(shè)置圖片是否平鋪

no-repeat:不重復(fù)

repeat-x:水平方向（橫向）重復(fù)平鋪

repeat-y:垂直方向（豎向）重復(fù)平鋪

如果不設(shè)置，為全背景平鋪

D.具體左右上下的距離

left 圖片靠左

right 圖片靠右

top 圖片靠上

bottom 圖片靠下

E.背景圖片固定，還是隨上下滾動(dòng)條滾動(dòng)

fixed 圖片固定

scroll 背景圖片內(nèi)容滾動(dòng)

代碼實(shí)踐

<!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>
復(fù)制代碼

面試題：

CSS無(wú)法顯示背景顏色問(wèn)題分析解決

1、由使用float浮動(dòng)造成浮動(dòng)產(chǎn)生無(wú)法顯示css背景顏色

2、高度不夠而產(chǎn)生背景無(wú)法顯示

3.如果是float造成：解決方法有三種，一個(gè)是設(shè)置clear清除浮動(dòng)、設(shè)置css高度、設(shè)置css overflow樣式。

4.如果是高度原因：解決方案如下，設(shè)置夠高的高度，或取消刪除高度樣式即可。

篇中我們介紹了文本的一些樣式，這篇接著講文本樣式。

6.文本下劃線

一般文本下劃線都用在什么地方呢？我想到一個(gè)就是畫(huà)重點(diǎn)考前劃重點(diǎn)，有沒(méi)有畫(huà)面感，^v^。

用css來(lái)實(shí)現(xiàn)劃重點(diǎn)，也是別具風(fēng)格呀。

<!DOCTYPE html>
<html>
<head>
  <title>css顏色與度量單位</title>
  <style>
    span{
      text-decoration:underline;
    }
</style>
</head>
<body>
  <p>
    在做等離子物理對(duì)撞實(shí)驗(yàn)的時(shí)候，如果把第三能量的極坐標(biāo)，向負(fù)方向調(diào)整三個(gè)阿爾法單位，那么對(duì)最終的結(jié)果將會(huì)產(chǎn)生多少影響?
    <br>
    <span>2伽馬一步徐龍根號(hào)3</span>
  </p>
</body>
</html>

text-decoration可以給文本設(shè)置下劃線，上劃線，刪除線，取消線。

上面代碼實(shí)現(xiàn)效果如下：

這個(gè)效果看起來(lái)兩行之間的距離有點(diǎn)擁擠，我們可以調(diào)整的它們的距離，稍微遠(yuǎn)一點(diǎn)，讓它們看起不那么擁擠。

7.文本的行間距

用line-height來(lái)指定行間距，因?yàn)槲谋径及趐標(biāo)簽中，所以我們給p標(biāo)簽加了行間距為50px

調(diào)整后的效果如下：

看起來(lái)下劃線的文字還是不夠顯眼啊，我們?cè)俳o它加點(diǎn)顏色上去，會(huì)更好。

這回好多了。夠顯眼，就絕對(duì)記得住。

text-decoration后面可以設(shè)置的值如下：

值	說(shuō)明
none	讓本身有劃線裝飾的文本取消掉
underline	讓文本的底部出現(xiàn)一條下劃線
overline	讓文本的頭部出現(xiàn)一條上劃線
line-through	讓文本的中部出現(xiàn)一條刪除線
blink	讓文本進(jìn)行閃爍，基本不支持了

text-decoration：none這個(gè)會(huì)讓本身有劃線裝飾的文本取消掉的意思，例如a標(biāo)簽，天生就帶下劃線，那要不想要自帶的下劃線就可以利用這個(gè)樣式給它去掉。

來(lái)嘗試一下

<!DOCTYPE html>
<html>
<head>
  <title>css顏色與度量單位</title>
  <style>
    p{
      line-height: 50px;
    }
    span{


      text-decoration:underline;
      color: red;
    }
</style>
</head>
<body>
  <p>
    在做等離子物理對(duì)撞實(shí)驗(yàn)的時(shí)候，如果把第三能量的極坐標(biāo)，向負(fù)方向調(diào)整三個(gè)阿爾法單位，那么對(duì)最終的結(jié)果將會(huì)產(chǎn)生多少影響?
    <br>
    <span>2伽馬一步徐龍根號(hào)3</span>
    <br>
    <a href="http://www.baidu.com">百度</a>
  </p>
</body>
</html>

百度兩個(gè)字下面天生就帶了下?lián)Q線，要去掉請(qǐng)使用text-decoration：none

其余幾個(gè)大家可以自己動(dòng)手嘗試一下效果。

8.設(shè)置英文文本轉(zhuǎn)換為大小寫(xiě)

這個(gè)標(biāo)題很好理解，就是專門(mén)針對(duì)英文的，如果想把英文文本轉(zhuǎn)換大小寫(xiě)可以使用

<!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>
    在做等離子物理對(duì)撞實(shí)驗(yàn)的時(shí)候，如果把第三能量的極坐標(biāo)，向負(fù)方向調(diào)整三個(gè)阿爾法單位，那么對(duì)最終的結(jié)果將會(huì)產(chǎn)生多少影響?
    <br>
    <span>2伽馬一步徐龍根號(hào)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>

頁(yè)面效果如下：

這里的英文文本也是寫(xiě)在了span標(biāo)簽里面，受span標(biāo)簽樣式的影響這里也變成了紅色，也加了下劃線。我們給它取消掉這些樣式。并給它設(shè)置讓英文單詞首字母變成大寫(xiě)的樣式。

下面給出text-transform的值和作用的表格，大家可以自行動(dòng)手嘗試效果。

值	說(shuō)明
none	將已被轉(zhuǎn)換大小寫(xiě)的值恢復(fù)到默認(rèn)狀態(tài)
capitalize	將英文單詞首字母大寫(xiě)
uppercase	將英文轉(zhuǎn)換為大寫(xiě)字母
lowercase	將英文轉(zhuǎn)換為小寫(xiě)字母

9.文本添加陰影

text-shadow:5px 5px 5px red;

這里有四個(gè)值（3個(gè)5px和一個(gè)red）：第一個(gè)值代表水平偏移；第二個(gè)值代表垂直偏移；第三個(gè)值代表陰影模糊度（可選）；第四個(gè)值代表陰影顏色（可選）。

10.設(shè)置文本的對(duì)齊方式

我們可以設(shè)置文本的對(duì)齊方式，如果你用過(guò)word文檔的話，那一定知道左對(duì)齊、右對(duì)齊、居中對(duì)齊。css里面同樣有

我們來(lái)嘗試一下居中對(duì)齊

值	說(shuō)明
left	靠左對(duì)齊，默認(rèn)
right	靠右對(duì)齊
center	居中對(duì)齊
justify	內(nèi)容兩端對(duì)齊
start	讓文本處于開(kāi)始的邊界
end	讓文本處于結(jié)束的邊界

start和end屬于css3新增的功能，IE和Opera瀏覽器可能不支持。

11.處理文本之間的距離（letter-spacing）

也就是兩個(gè)字間的距離，通過(guò)例子來(lái)感受一下

很明顯的可以看到字間距變大了。

12.設(shè)置英文單詞之間的距離（word-spacing）

13.文本首行的縮進(jìn)（text-indent）

一般每個(gè)段落的首行都要縮進(jìn)，這是書(shū)寫(xiě)書(shū)信文件時(shí)的規(guī)定。

我們?nèi)サ袅司又袑?duì)齊的樣式，是為了更好地演示首行縮進(jìn)的效果。

看效果圖紅框的地方，明顯有縮進(jìn)。

好了，以上就是今天的內(nèi)容了。

希望大家可以早日學(xué)會(huì)編程，踏上高薪之路，早日成為白富美、高富帥。動(dòng)手練，聽(tīng)我的沒(méi)錯(cuò)。

在線咨詢

上一篇：驗(yàn)證碼這樣做，瞬間高出一個(gè)逼格
下一篇：JS｜7種JavaScript代碼調(diào)試的方法

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

「轉(zhuǎn)行測(cè)試開(kāi)發(fā)-HTML」(三)上次沒(méi)說(shuō)完的標(biāo)題、段落和文本格式化

重點(diǎn)屬性background

background-color

background-image

background-repeat

background-attachment

background-position

Background

background背景作用：

Background分析解析

A.設(shè)置背景具體顏色值

B.這是背景的具體圖片路徑

C.設(shè)置圖片是否平鋪

D.具體左右上下的距離

E.背景圖片固定，還是隨上下滾動(dòng)條滾動(dòng)

代碼實(shí)踐

面試題：

CSS無(wú)法顯示背景顏色問(wèn)題分析解決

您的項(xiàng)目需求