《Web前端開發(fā)項(xiàng)目教程》網(wǎng)頁中添加圖像和文本-網(wǎng)站首頁中文本的應(yīng)用

項(xiàng)目04網(wǎng)頁中添加圖像和文本任務(wù)4-2網(wǎng)頁中文本的應(yīng)用任務(wù)4-2網(wǎng)站首頁中文本的應(yīng)用

知識(shí)點(diǎn)掌握各類文本標(biāo)簽及其屬性的用法掌握文本標(biāo)記的樣式技能點(diǎn)能夠向網(wǎng)頁中添加文本能夠熟練調(diào)整文本的樣式一、插入文本用合適語義的標(biāo)簽對(duì)文本數(shù)據(jù)進(jìn)行結(jié)構(gòu)化是網(wǎng)站架構(gòu)的基本技能。常用的文本標(biāo)記有標(biāo)題標(biāo)簽<h1>~<h6>、段落標(biāo)簽<p>、換行標(biāo)簽<br>、水平線標(biāo)簽<hr>、強(qiáng)調(diào)文本標(biāo)簽<strong>、<em>等，不同瀏覽器對(duì)不同文本標(biāo)簽有自己默認(rèn)的呈現(xiàn)樣式。塊級(jí)文本標(biāo)記行內(nèi)文本標(biāo)記特殊字符塊級(jí)文本——標(biāo)題標(biāo)記<h1>~<h6><h1>~<h6>標(biāo)簽可定義六級(jí)不同大小的標(biāo)題。<h1>定義最大的標(biāo)題，<h6>定義最小的標(biāo)題。用法：<hn>標(biāo)題文本</hn>標(biāo)題標(biāo)記為雙標(biāo)記，n的取值為1到6。由于其擁有確切的語義，有明顯的主次和輕重關(guān)系，因此要選擇恰當(dāng)?shù)臉?biāo)簽層級(jí)來構(gòu)建文檔的結(jié)構(gòu)，常用h1用作主標(biāo)題，h2是次重要的標(biāo)題，依次后推。塊級(jí)文本——段落標(biāo)記<p>在網(wǎng)頁中要把文字有條理地顯示出來，離不開段落標(biāo)記，就如同我們平常寫文章一樣，整個(gè)網(wǎng)頁也可以分為若干個(gè)段落，段落的標(biāo)記就是<p>。<p>段落文本</p>作為塊級(jí)元素，p標(biāo)簽會(huì)自動(dòng)在其前后創(chuàng)建一些空白，大小可以通過樣式屬性margin來改變。塊級(jí)文本——水平線標(biāo)記<hr/>在網(wǎng)頁中常?？吹揭恍┧骄€將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰，層次分明。這些水平線可以通過插入圖片實(shí)現(xiàn)，也可以簡單地通過標(biāo)記來完成，<hr/>就是創(chuàng)建橫跨網(wǎng)頁水平線的標(biāo)記。<hr/><hr/>是塊級(jí)元素，塊級(jí)元素的樣式屬性對(duì)于hr標(biāo)記同樣有效。例如：<hrstyle="width:80%;margin:0auto;background:#0000FF;">我們看到的水平線其實(shí)是一個(gè)高度為0的有邊框的小矩形盒子。行內(nèi)文本標(biāo)記<span><span>標(biāo)簽經(jīng)常被用來修飾段落中的某一部分文本，通過對(duì)span元素設(shè)置css樣式可以為行內(nèi)文本設(shè)置特殊效果。絕大多數(shù)行內(nèi)修飾標(biāo)記如加粗<b><strong>、斜體<i><em>、下劃線<u>等都可以被<span>所取代，在樣式表中設(shè)置span元素的樣式可以更好地實(shí)現(xiàn)內(nèi)容與形式的分離。例如：<i>斜體字</i>等價(jià)于<span>斜體字</span>樣式表中span{font-style:italic;}<mark>標(biāo)記文本<mark>是HTML5中的新標(biāo)記，用來定義帶有記號(hào)的文本，表示頁面中需要突出顯示或高亮顯示的信息，也是行內(nèi)元素。例如：<p>床前明月<mark>光</mark></p>換行標(biāo)記<br/>在HTML中，一個(gè)段落中的文字會(huì)從左到右依次排列，直到父級(jí)盒子的右端，然后自動(dòng)換行。如果希望某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)記<br/>，如果還像在word中直接敲回車鍵換行就不起作用了。HTML中<br/>元素屬于內(nèi)聯(lián)元素，但是除了換行也沒有其他實(shí)際意義。注釋標(biāo)記在開發(fā)中為代碼添加適當(dāng)?shù)淖⑨屖且环N良好的習(xí)慣。注釋只在編輯文本情況下可見，在瀏覽器展示頁面時(shí)并不會(huì)顯示。在HTML中用“<!--”和“-->”標(biāo)記插入注釋，且不支持任何屬性。語法結(jié)構(gòu)為：<!--注釋的文本內(nèi)容-->例如：<!--以下是通知板塊--><div>這里是最新通知。</div>在CSS中的注釋則必須以“/*”開始、以“*/”結(jié)束，中間加入注釋內(nèi)容。注釋可以放在樣式表之外，也可以放在樣式表內(nèi)部。語法結(jié)構(gòu)為：/*注釋的文本內(nèi)容*/例如：/*定義網(wǎng)頁的頭部樣式*/.head{width:960px;}特殊字符字符描述實(shí)體名稱

空格

<

小于號(hào)<>

大于號(hào)>&和號(hào)&￥人民幣¥?版權(quán)©?注冊商標(biāo)®°攝氏度°±正負(fù)號(hào)±×乘號(hào)×÷除號(hào)÷2平方²3立方³二、CSS文本和字體樣式應(yīng)用---字體樣式樣式屬性描述取值font-family字體系列font-family:"TimesNewRoman",Times,serif;font-size字號(hào)14px16pt1.5emfont-style斜體italicfont-weight粗體boldfont一次性設(shè)置所有的字體屬性font:italicbold18px‘幼圓’;二、CSS文本和字體樣式應(yīng)用---字體樣式（1）設(shè)置字體font-family:字體1,字體2;font-family有兩種類型的字體系列名稱可以取值。第一種是指定具體字體名稱，比如："timesnewroman"、"黑體"、"arial"等。為防止用戶機(jī)器上該字體系列不可用，font-family取值為具體字體的時(shí)候通常多定義幾個(gè)備用字體，如果第一個(gè)字體沒有的話就按照第二個(gè)字體顯示。雙引號(hào)可以省略，但是字體名稱內(nèi)部如果有空格的話一定要用雙引號(hào)把字體名稱引起來。第二種是指定通用字體集名稱，所謂通用字體集名稱就是統(tǒng)一描述一類字體樣式的名稱，例如“serif（有邊飾字體）”、“sans-serif（無邊飾字體）”等。瀏覽器在遇到字體集名稱的時(shí)候，會(huì)自動(dòng)從系統(tǒng)中尋找與之匹配的字體進(jìn)行顯示。使用的時(shí)候通常多定義幾個(gè)備用字體，如果第一個(gè)字體沒有的話就按照第二個(gè)字體顯示，字體名稱內(nèi)部如果有空格的話要用雙引號(hào)把字體名稱引起來。二、CSS文本和字體樣式應(yīng)用---字體樣式（2）文字大小font-size:16pt;font-size:12px;font-size:2em;在CSS中，字體大小的設(shè)置單位常用的有3種：px、pt和em。px就是表示pixel，像素，是屏幕上顯示數(shù)據(jù)的最基本的點(diǎn)；而pt就是point，英文音譯為“磅”，中文讀作“點(diǎn)”，是排版印刷中常用的文字大小單位。

任意瀏覽器的默認(rèn)字體高都是16px。96px=72pt。

Chrome中文界面下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照12px顯示。em是相對(duì)長度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。默認(rèn)大小:1em=16px，1.25em=16px*1.25=20px；如果在body里面定義font-size:12px;則1em=12px，1.25em=12px*1.25=15px。二、CSS文本和字體樣式應(yīng)用---字體樣式（3）文字加粗、傾斜與大小寫傾斜：font-style:italic粗體：font-weight:bold變體：font-variant:small-caps(小體大寫)（4）用font綜合設(shè)置樣式如果將所有的關(guān)于字體的樣式設(shè)置在一個(gè)font屬性里面，必須按照指定的順序來寫，各個(gè)屬性使用空格隔開。格式如下：

選擇器{font:font-style

font-weight

font-size/line-height

font-family;}其中不需要設(shè)置的屬性可以省略（取默認(rèn)值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。二、CSS文本和字體樣式應(yīng)用---文本樣式樣式屬性描述取值color文本顏色red#f00#ff0000rgb(255,0,0)line-height行高14px1.5em120%text-decoration裝飾線noneoverlineunderlineline-throughtext-indent首行縮進(jìn)2emtext-align對(duì)齊centerleftrightjustifyletter-spacing字符間距2px-3px二、CSS文本和字體樣式應(yīng)用---文本樣式（1）文字顏色前景字符顏色屬性：color該屬性改變的是文本的顏色，使用時(shí)要與背景色background-color屬性相區(qū)分。color:blue;color:#0000ff;color:#00f;color:rgb(0,0,255);color:rgb(0%,0%,100%);二、CSS文本和字體樣式應(yīng)用---文本樣式（2）行高line-height:30px;行高指的是文本行的基線間的距離，即每行文字下基線與下一行文字的下基線之間距離（或者是每行文字上基線與下一行文字的上基線之間距離）。應(yīng)用：通過調(diào)整line-height的值實(shí)現(xiàn)單行文字的垂直居中。#txt{ font-family:微軟雅黑;

height:60px;

background-color:#eee;

font-size:16px; line-height:60px;

}二、CSS文本和字體樣式應(yīng)用---文本樣式（3）文字的修飾效果text-decoration屬性的作用就是在文本上面、中間或下面添加線條。取值為overline的時(shí)候，在上面有裝飾線；取值是line-through的時(shí)候，在中間有一條刪除線；取值為underline的時(shí)候，在最下面有一條下劃線。經(jīng)常用于超鏈接中去掉下劃線

a{text-decoration:none;}二、CSS文本和字體樣式應(yīng)用---文本樣式（4）文字的水平對(duì)齊方式text-align設(shè)置水平方向上的對(duì)齊方式，可以取值為left|right|center等。（5）文字布局字符間距屬性：letter-spacing字符間距可以是負(fù)數(shù)，此時(shí)字符之間會(huì)有重疊的效果。二、CSS文本和字體樣式應(yīng)用---文本樣式（6）段落的首行縮進(jìn)首行縮進(jìn)是將段落的第一行縮進(jìn)，這是常用的文本格式化效果，一般為縮進(jìn)兩個(gè)字符。text-indent屬性的初始值為0，text-indent:2em;實(shí)現(xiàn)段首空兩格的效果。text-indent還可以取負(fù)值，實(shí)現(xiàn)懸掛縮進(jìn)的效果。實(shí)訓(xùn)任務(wù)1：為文本添加CSS樣式完成以下頁面效果。<body>

<h1>新華網(wǎng)評(píng)：以科學(xué)家精神引領(lǐng)創(chuàng)新之路</h1>

<imgsrc="img/xinhua.jpg">

<p><span>一</sp