HTML---第一天筆記

WEB標(biāo)準(zhǔn)構(gòu)成

web標(biāo)準(zhǔn)不是某個(gè)標(biāo)準(zhǔn),而是有W3C和其他標(biāo)準(zhǔn)組織制定的一系列標(biāo)準(zhǔn)集合。主要包括:結(jié)構(gòu)、表現(xiàn)和行為三個(gè)方面。

結(jié)構(gòu)標(biāo)準(zhǔn):結(jié)構(gòu)用于對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類,主要包括XML和HTML兩個(gè)部分。

樣式標(biāo)準(zhǔn):樣式用于設(shè)置網(wǎng)頁(yè)元素的版式、顏色。大小等外觀樣式,主要指的是CSS。

行為標(biāo)準(zhǔn):行為是指網(wǎng)頁(yè)模型的定義以及交互的編寫,主要包括DOM和JS兩部分。

HTML骨架格式


html標(biāo)簽:作用所有html中標(biāo)簽的一個(gè)根節(jié)點(diǎn)。

head標(biāo)簽:用于存放:title,meta,base,style,script,link等標(biāo)簽,其中head標(biāo)簽中必須要放置title標(biāo)簽。

title標(biāo)簽:讓頁(yè)面擁有一個(gè)屬于自己的標(biāo)題。

body標(biāo)簽:頁(yè)面的主題部分,用于存放所有的html標(biāo)簽,主要用來(lái)構(gòu)成頁(yè)面的結(jié)構(gòu)。

HTML標(biāo)簽分類

HTML頁(yè)面中,帶有“<>”符號(hào)的元素被稱為HTML標(biāo)簽,所謂的標(biāo)簽就是帶有某種功能或者語(yǔ)義的編碼命令,同時(shí)也稱為HTML標(biāo)簽或者HTML元素。常見(jiàn)的HTML標(biāo)簽的形式有兩種:雙標(biāo)記標(biāo)簽和單標(biāo)記標(biāo)簽。

雙標(biāo)記標(biāo)簽:

結(jié)構(gòu):<標(biāo)簽名>內(nèi)容</標(biāo)簽名>,雙標(biāo)記標(biāo)簽有開始標(biāo)簽也有結(jié)束標(biāo)簽。

常見(jiàn)雙標(biāo)記標(biāo)簽有:<html></html>/<title></title>/<body></body>/<h1~6></h1~6>等

單標(biāo)記標(biāo)簽:

結(jié)構(gòu):<標(biāo)簽名 />,單標(biāo)記標(biāo)簽也長(zhǎng)稱為空標(biāo)簽,是指用一個(gè)符號(hào)即可完整描述某個(gè)功能的標(biāo)簽。

HTML標(biāo)簽的關(guān)系:

1.嵌套關(guān)系(父子關(guān)系):

如html結(jié)構(gòu)中<head><title></title></head>head與titl即為嵌套關(guān)系。

2.并列關(guān)系(.兄弟關(guān)系)

如HTML結(jié)構(gòu)中的<head></head><body></body>head與body之間即為并列關(guān)系。

注意:在書寫html代碼時(shí)如果兩哥標(biāo)簽之間是并列關(guān)系則最好上下對(duì)齊,若是嵌套關(guān)系,則盡可能的將子元素縮進(jìn)一個(gè)tab鍵的身位。

常用的HTML標(biāo)簽:

標(biāo)題標(biāo)簽<hn>標(biāo)題文本</hn>(n從1到6):隨著n 的增大,標(biāo)題的字號(hào)逐漸減小,并且所有的h 標(biāo)簽的字體均默認(rèn)加粗。

注意:h1一般都是用作文本標(biāo)題或則給logo使用的,在使用標(biāo)題標(biāo)簽時(shí)盡量不要使用h1標(biāo)簽,一般情況下一個(gè)頁(yè)面中只允許使用一個(gè)h1標(biāo)簽。

段落標(biāo)簽<p>文本內(nèi)容</p>:段落標(biāo)簽可以將網(wǎng)頁(yè)中的文字有條理的顯示出來(lái)。默認(rèn)情況下,文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)切換行。

水平線標(biāo)簽<hr />:水平線標(biāo)簽是個(gè)單標(biāo)記標(biāo)簽,可以使用水平線標(biāo)簽將網(wǎng)頁(yè)中的文本段落隔開。

換行標(biāo)簽<br />:在html編輯過(guò)程中我們常用的空格合回車都不會(huì)再網(wǎng)頁(yè)中顯示效果,如果你想讓一段文字在固定的位置換行,只能添加<br />換行標(biāo)簽,網(wǎng)頁(yè)才是顯示效果。

圖像標(biāo)簽:<img src="插入圖片的路徑" alt="當(dāng)圖片不能正常顯示時(shí),圖片的文本描述" /> ,圖像標(biāo)簽是單標(biāo)記標(biāo)簽。

文本格式化標(biāo)簽:在網(wǎng)頁(yè)中,有時(shí)需要為文字設(shè)置粗體,斜體,下劃線效果,這是就需要使用文本格式化標(biāo)簽,使文字顯示出特殊效果。

常見(jiàn)的文本格式化標(biāo)簽有如下幾對(duì):

1,文本以粗體的形式顯示:<b></b>、<strong></strong>,在xthml中推薦使用strong

2、文本以斜體的方式顯示:<i></i>、<em></em>,在XHTML中推薦使用em

3、文本以加有刪除線的方式顯示:<s></s>、<del></del>,在XHTML中推薦使用del

4,文本以加有下劃線的方式顯示:<u></u>、<ins></ins>

標(biāo)簽屬性:

在使用html制作網(wǎng)頁(yè)時(shí),如果想讓HTML標(biāo)記提供更多的信息,可以使用HTML標(biāo)記屬性加以設(shè)置。其基本語(yǔ)法格式為:

<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2” ...>內(nèi)容</標(biāo)簽名>

標(biāo)簽的屬性室友鍵值對(duì)構(gòu)成的,一個(gè)標(biāo)簽可以有多個(gè)屬性,不同的屬性之間用空格隔開。

鏈接標(biāo)簽:用于在HTML頁(yè)面中創(chuàng)建超鏈接,其基本語(yǔ)法格式如下:

<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本、圖像</a>

上述標(biāo)簽中的屬性:

href:用于指定鏈接跳轉(zhuǎn)目標(biāo)的URL地址,當(dāng)標(biāo)記應(yīng)用href時(shí),則說(shuō)明該標(biāo)簽具有了超鏈接的功能。

traget:用于指定鏈接頁(yè)面的打開方式,其取值有_self:為默認(rèn)值,表示在當(dāng)前窗口中打開,_blank在新建窗口中打開鏈接頁(yè)面。

錨點(diǎn)定位:通過(guò)創(chuàng)建錨點(diǎn)鏈接,用戶能夠快速定位到目標(biāo)內(nèi)容,創(chuàng)建錨點(diǎn)定位的步驟:

1.使用“<a href="#id名">鏈接文本</a>”創(chuàng)建鏈接文本

2.使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置

HTML注釋:

注釋是為了讓編寫代碼的人員能夠清楚知道代碼的功能,HTML注釋標(biāo)簽結(jié)構(gòu):

<!--注釋文本-->注釋文本在網(wǎng)頁(yè)中顯示不出來(lái)

路徑介紹:

1、相對(duì)路徑:

(1)圖像文件和HTML文件位于同一個(gè)文件夾中:只需輸入圖像的文件名即可

(2)圖像文件位于HTML下一級(jí)文件夾:則引入文件時(shí)需要輸入文件夾名稱和文件名,文件夾名和文件名之間用/隔開

(3)圖像文件位于HTML文件的上一級(jí)文件:則引入文件時(shí)需要在文件名之前加上“../",如果是上兩級(jí)則需要加上兩個(gè)"../",依次類推

2、絕對(duì)路徑:

即文件所在位置的完整地址。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,506評(píng)論 19 139
  • 0.B/S結(jié)構(gòu) 瀏覽器服務(wù)器模式,web瀏覽器是客戶端最主要的應(yīng)用軟件.將客戶端使用web進(jìn)行統(tǒng)一,系統(tǒng)功能實(shí)現(xiàn)集...
    liusong007閱讀 1,144評(píng)論 0 1
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說(shuō)明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,520評(píng)論 1 41
  • 原 Blog 鏈接:HTML基礎(chǔ)學(xué)習(xí)筆記 自學(xué) html 基礎(chǔ)筆記 Web 前端簡(jiǎn)單介紹 web 前端包含: pc...
    任凱閱讀 1,485評(píng)論 0 5
  • HTML基礎(chǔ) 本文包括 HTML基本知識(shí)與結(jié)構(gòu) HTML常見(jiàn)標(biāo)簽 標(biāo)簽寫法與嵌套的討論 HTML、CSS、java...
    廖少少閱讀 2,205評(píng)論 2 21

友情鏈接更多精彩內(nèi)容