HTML---第一天筆記

WEB標準構成

web標準不是某個標準,而是有W3C和其他標準組織制定的一系列標準集合。主要包括:結構、表現和行為三個方面。

結構標準:結構用于對網頁元素進行整理和分類,主要包括XML和HTML兩個部分。

樣式標準:樣式用于設置網頁元素的版式、顏色。大小等外觀樣式,主要指的是CSS。

行為標準:行為是指網頁模型的定義以及交互的編寫,主要包括DOM和JS兩部分。

HTML骨架格式


html標簽:作用所有html中標簽的一個根節點。

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

title標簽:讓頁面擁有一個屬于自己的標題。

body標簽:頁面的主題部分,用于存放所有的html標簽,主要用來構成頁面的結構。

HTML標簽分類

HTML頁面中,帶有“<>”符號的元素被稱為HTML標簽,所謂的標簽就是帶有某種功能或者語義的編碼命令,同時也稱為HTML標簽或者HTML元素。常見的HTML標簽的形式有兩種:雙標記標簽和單標記標簽。

雙標記標簽:

結構:<標簽名>內容</標簽名>,雙標記標簽有開始標簽也有結束標簽。

常見雙標記標簽有:<html></html>/<title></title>/<body></body>/<h1~6></h1~6>等

單標記標簽:

結構:<標簽名 />,單標記標簽也長稱為空標簽,是指用一個符號即可完整描述某個功能的標簽。

HTML標簽的關系:

1.嵌套關系(父子關系):

如html結構中<head><title></title></head>head與titl即為嵌套關系。

2.并列關系(.兄弟關系)

如HTML結構中的<head></head><body></body>head與body之間即為并列關系。

注意:在書寫html代碼時如果兩哥標簽之間是并列關系則最好上下對齊,若是嵌套關系,則盡可能的將子元素縮進一個tab鍵的身位。

常用的HTML標簽:

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

注意:h1一般都是用作文本標題或則給logo使用的,在使用標題標簽時盡量不要使用h1標簽,一般情況下一個頁面中只允許使用一個h1標簽。

段落標簽<p>文本內容</p>:段落標簽可以將網頁中的文字有條理的顯示出來。默認情況下,文本在一個段落中會根據瀏覽器窗口的大小自動切換行。

水平線標簽<hr />:水平線標簽是個單標記標簽,可以使用水平線標簽將網頁中的文本段落隔開。

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

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

文本格式化標簽:在網頁中,有時需要為文字設置粗體,斜體,下劃線效果,這是就需要使用文本格式化標簽,使文字顯示出特殊效果。

常見的文本格式化標簽有如下幾對:

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>

標簽屬性:

在使用html制作網頁時,如果想讓HTML標記提供更多的信息,可以使用HTML標記屬性加以設置。其基本語法格式為:

<標簽名 屬性1=“屬性值1” 屬性2=“屬性值2” ...>內容</標簽名>

標簽的屬性室友鍵值對構成的,一個標簽可以有多個屬性,不同的屬性之間用空格隔開。

鏈接標簽:用于在HTML頁面中創建超鏈接,其基本語法格式如下:

<a href="跳轉目標" target="目標窗口的彈出方式">文本、圖像</a>

上述標簽中的屬性:

href:用于指定鏈接跳轉目標的URL地址,當標記應用href時,則說明該標簽具有了超鏈接的功能。

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

錨點定位:通過創建錨點鏈接,用戶能夠快速定位到目標內容,創建錨點定位的步驟:

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

2.使用相應的id名標注跳轉目標的位置

HTML注釋:

注釋是為了讓編寫代碼的人員能夠清楚知道代碼的功能,HTML注釋標簽結構:

<!--注釋文本-->注釋文本在網頁中顯示不出來

路徑介紹:

1、相對路徑:

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

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

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

2、絕對路徑:

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,933評論 18 139
  • 0.B/S結構 瀏覽器服務器模式,web瀏覽器是客戶端最主要的應用軟件.將客戶端使用web進行統一,系統功能實現集...
    liusong007閱讀 1,089評論 0 1
  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,321評論 1 41
  • 原 Blog 鏈接:HTML基礎學習筆記 自學 html 基礎筆記 Web 前端簡單介紹 web 前端包含: pc...
    任凱閱讀 1,415評論 0 5
  • HTML基礎 本文包括 HTML基本知識與結構 HTML常見標簽 標簽寫法與嵌套的討論 HTML、CSS、java...
    廖少少閱讀 2,121評論 2 21