html階段第一小節(jié)第三天

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?HTML的標(biāo)簽(中)

標(biāo)題標(biāo)簽:h1~h6,塊級(jí)標(biāo)簽

語(yǔ)法:<h1>標(biāo)題內(nèi)容</h1> ? ?<h2>標(biāo)題內(nèi)容</h2> ……

標(biāo)題文字共包含6種標(biāo)記。

H1 :標(biāo)題標(biāo)簽是 標(biāo)注當(dāng)前頁(yè)面中的文檔最重要的核心主題的文本。

H1~H6標(biāo)簽,相對(duì)于當(dāng)前文檔的重要性依次降低。

注意:一般情況一個(gè)頁(yè)面只能有一個(gè)H1標(biāo)題(當(dāng)然可以超過,但是不利于搜索SEO)。

H2~H6標(biāo)簽,可以再一個(gè)頁(yè)面中有多個(gè),但是不要濫用,否則會(huì)導(dǎo)致網(wǎng)頁(yè)的SEO受影響,搜索引擎會(huì)認(rèn)為我們作弊。

H1~H6標(biāo)簽不是用于字體大小樣式設(shè)置,是用于表達(dá)內(nèi)容的重要性。

補(bǔ)充快捷鍵:出現(xiàn)一堆完整的標(biāo)簽可以先輸入標(biāo)簽后按TAB鍵(比如輸入h1后按TAB/輸入P后按TAB)看下圖


段落標(biāo)簽:

段落標(biāo)簽語(yǔ)法:<p>包裹段落的內(nèi)容</p>

P 標(biāo)簽之間不會(huì)相互共用一行,會(huì)獨(dú)占一行或多行的空間。


水平線標(biāo)簽

語(yǔ)法:<hr>

hr標(biāo)簽是單標(biāo)簽,不需閉合標(biāo)簽(使用看下圖)。輸入一個(gè)<hr>標(biāo)記,就等于添加了一條默認(rèn)樣式的水平線。


HTML 文檔空白合并

在HTML文檔中,文字之間的空格會(huì)進(jìn)行合并,多個(gè)空格或者是換行會(huì)合并并成一個(gè)空格。


換行標(biāo)簽——Br

語(yǔ)法:<br>

如果有N個(gè)<br>,可以輸入br*n,然后按TAB鍵即可。

br 標(biāo)簽是單標(biāo)簽,不需閉合標(biāo)簽

段落與段落之間隔行換行的,這樣會(huì)導(dǎo)致文字的行間距過大(上面的空白合并),這時(shí)可以使用換行標(biāo)記來完成文字的緊湊換行顯示。(Br標(biāo)簽可以強(qiáng)制段落換行,不受空格或換行的影響)


空格標(biāo)簽——&nbsp

語(yǔ)法:&nbsp

一個(gè)&nbsp代表一個(gè)半角空格,需要多個(gè)空格可以重復(fù)輸入(分號(hào);分開即可)


文本節(jié)標(biāo)簽 ?span ?,行內(nèi)標(biāo)簽

語(yǔ)法:<span>內(nèi)容</span>

<span>標(biāo)簽似乎沒有任何內(nèi)容上的意義,但是與CSS結(jié)合起來后,應(yīng)用非常廣泛。


定義著重文字—<em>

語(yǔ)法:<em></em>

em標(biāo)簽就是對(duì)文檔中的一小段文本進(jìn)行著重的強(qiáng)調(diào)。(em標(biāo)簽是局部的文本的加強(qiáng)語(yǔ)氣,或者是文本的強(qiáng)調(diào)的作用)

em標(biāo)簽可以會(huì)改變局部的文檔語(yǔ)義。(比如:我更加喜歡<em>人民幣</em>和RMB

也有利于網(wǎng)站的SEO。

標(biāo)簽就只用它的語(yǔ)義,不要用它的樣式,樣式可以通過CSS控制


斜體字標(biāo)簽—i

語(yǔ)法:<i>內(nèi)容</i>

i標(biāo)簽不推薦使用,因?yàn)樗械臉邮蕉际峭ㄟ^CSS進(jìn)行控制。


注釋標(biāo)簽:

語(yǔ)法:<1--注釋內(nèi)容-->


定義加重語(yǔ)氣—<strong>


strong標(biāo)簽是針對(duì)整個(gè)文檔而言,進(jìn)行一個(gè)加強(qiáng)語(yǔ)氣 的作用。例如:一篇文章中最重要的主題思想或者段落用strong標(biāo)簽進(jìn)行包裹。(上面有個(gè)em標(biāo)簽可以比較一下)

<strong>標(biāo)簽<em>一樣,用于強(qiáng)調(diào)文本,但它強(qiáng)調(diào)的程度更強(qiáng)一些。


定義下標(biāo)字和定義上標(biāo)字

定義下標(biāo)字:<sub>

語(yǔ)法:<sub>內(nèi)容</sub>

定義上標(biāo)字:<sup>

語(yǔ)法:<sup>內(nèi)容</sup>


定義刪除線

語(yǔ)法:<del>內(nèi)容</del> ? ? ? ?(嘎嘎嘎嘎嘎)


超級(jí)鏈接標(biāo)簽

語(yǔ)法:<a href="你要跳轉(zhuǎn)的網(wǎng)頁(yè)的網(wǎng)址">鏈接元素(就是網(wǎng)頁(yè)上點(diǎn)擊它可以跳轉(zhuǎn)到另一個(gè)頁(yè)面的元素)</a>?

或者 ?<a href="URL(統(tǒng)一資源定位器)">鏈接元素</a>

超級(jí)鏈接不僅僅是可以嵌套文本,還可以嵌套圖片、表格、標(biāo)題。

點(diǎn)擊 好123 字體可以跳轉(zhuǎn)到設(shè)定的頁(yè)面

a標(biāo)簽的target 屬性:

self ?:默認(rèn)的,表示當(dāng)前頁(yè)面中打開超級(jí)鏈接。

blank ?:表示在新的頁(yè)簽中或者是新的窗口中打開超級(jí)鏈接的頁(yè)面。

如果target="_self" ?點(diǎn)擊 好123 會(huì)多出一個(gè)頁(yè)面,而是直接跳轉(zhuǎn),原來的頁(yè)面不見了。

錨點(diǎn)鏈接:

創(chuàng)建錨點(diǎn)鏈接,用戶能夠快速定位到目標(biāo)內(nèi)容。

創(chuàng)建錨點(diǎn)鏈接分兩步:1、語(yǔ)法: <a href="#id名">鏈接元素</a> , 輸入語(yǔ)法創(chuàng)建鏈接文本;2、使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置

可以然后href屬性指向一個(gè)頁(yè)面中的id值,可以讓頁(yè)面跳轉(zhuǎn)到id對(duì)應(yīng)的標(biāo)簽的位置。

當(dāng)前頁(yè)面點(diǎn)擊 “好123”后,會(huì)快速滾動(dòng)到demo位置(會(huì)快速滾動(dòng)到指定位置)

URL協(xié)議

平時(shí)我們寫的網(wǎng)址就是url地址。

Url協(xié)議就是規(guī)定url地址的格式。

協(xié)議規(guī)定格式:scheme://host.domain:port/path/filename

http://sh.itcast.cn/subject/shphp/?zxdt? (對(duì)應(yīng)上面格式)

協(xié)議名稱://域名(ip地址):80/路徑/文件a.htm

scheme -定義因特網(wǎng)服務(wù)的類型。最常見的類型是http, https,ftp

host -定義域主機(jī)(http的默認(rèn)主機(jī)是www)

domain -定義因特網(wǎng)域名,比如w3school.com.cn

:port -定義主機(jī)上的端口號(hào)(http的默認(rèn)端口號(hào)是80)

path -定義服務(wù)器上的路徑(如果省略,則文檔必須位于網(wǎng)站的根目錄中)。

filename -定義文檔/資源的名稱



URL編碼

URL編碼:url中的非ASCII碼,轉(zhuǎn)為%ascii碼

為什么要有URL編碼呢? ? ? ?如果我寫的一個(gè)中文的網(wǎng)頁(yè)要在阿拉伯國(guó)家的電腦上進(jìn)行顯示。

http://news.sina.com.cn/c/zg/2015-10-27/doc-傳智播客61.shtml

中文字符在阿拉伯國(guó)家的電腦上會(huì)正常顯示嗎?

Url在線編碼的工具:http://tool.chinaz.com/Tools/URLEncode.aspx


相對(duì)路徑和絕對(duì)路徑

快速打開dos命令窗口: windows+r 打開運(yùn)行窗口

然后輸入 ?cmd

Cd命令是讓我們dos窗口可以進(jìn)入某個(gè)文件夾。

Dir命令是:顯示當(dāng)前目錄的文件和文件夾。

相對(duì)路徑:

Cd名中,如果寫是../代表目錄是父目錄。

../../代表:父目錄的父目錄。

絕對(duì)路徑:

C:\Windows帶盤符的路徑,我們稱為絕對(duì)路徑



Src:圖片的網(wǎng)站。

Alt:圖片不顯示的時(shí)候,會(huì)顯示alt屬性的文本

Title:對(duì)網(wǎng)站的seo有很大的影響。當(dāng)鼠標(biāo)移上去的時(shí)候,圖片顯示的tip提示文本內(nèi)容。

鼠標(biāo)放在圖片上,會(huì)顯示title 的內(nèi)容


如果紅圈中的圖片網(wǎng)站不對(duì),就會(huì)顯示alt

常用圖片格式

jpg:色彩還原高,適合復(fù)雜顏色圖片,比如banner

gif:色彩效果最低,支持透明,支持動(dòng)畫,適合顏色比較少,不適合漸變色。(只支持256種顏色)

png:PNG的優(yōu)點(diǎn)是,清晰,無(wú)損壓縮,壓縮比率很高,可漸變透明,具備幾乎所有GIF的優(yōu)點(diǎn);缺點(diǎn)是不如JPG的顏色豐富,同樣的圖片體積也比JPG略大。還有用戶體驗(yàn)很好的優(yōu)點(diǎn)。

gif和png基本差不多,色彩比較少的直接gif,如果圖片動(dòng)畫用gif。對(duì)色彩要求高的用jpg。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,333評(píng)論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,491評(píng)論 3 416
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,263評(píng)論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,946評(píng)論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,708評(píng)論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,186評(píng)論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,255評(píng)論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,409評(píng)論 0 288
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,939評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,774評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,976評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,518評(píng)論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,209評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,641評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,872評(píng)論 1 286
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,650評(píng)論 3 391
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,958評(píng)論 2 373

推薦閱讀更多精彩內(nèi)容