1.1 html概述和基本結構 html概述 HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標簽，是一種用來製作網頁的語言，這種語言由一個個的標簽組成，用這種語言製作的文件保存的是一個文本文件，文件的擴展名為htm ...

1.1 html概述和基本結構

html概述

HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標簽，是一種用來製作網頁的語言，這種語言由一個個的標簽組成，用這種語言製作的文件保存的是一個文本文件，文件的擴展名為html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。

html基本結構

一個html的基本結構如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>            
 4         <meta charset="UTF-8">
 5         <title>網頁標題</title>
 6     </head>
 7     <body>
 8           網頁顯示內容
 9     </body>
10 </html>

第一行是文檔聲明，第二行“<html>”標簽和最後一行“</html>”定義html文檔的整體，“<html>”標簽中的‘lang=“en”’定義網頁的語言為英文，定義成中文是'lang="zh-CN"',不定義也沒什麼影響，它一般作為分析統計用。 “<head>”標簽和“<body>”標簽是它的第一層子元素，“<head>”標簽裡面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，“<body>”內編寫網頁上顯示的內容。

html文檔規範

xhtml制定了文檔的編寫規範，html5可部分遵守，也可全部遵守，看開發要求。

1、所有的標簽必須小寫

2、所有的屬性必須用雙引號括起來

3、所有標簽必須閉合

4、img必須要加alt屬性(對圖片的描述)

html註釋：

html文檔代碼中可以插入註釋，註釋是對代碼的說明和解釋，註釋的內容不會顯示在頁面上，html代碼中插入註釋的方法是：

1

1.2 html標題

通過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,標簽可以在網頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關係，比如說： <h1>用作主標題（最重要的），其後是 <h2>（次重要的），再其次是 <h3>，以此類推。搜索引擎會使用標題將網頁的結構和內容編製索引，所以網頁上使用標題是很重要的。

1 <h1>這是一級標題</h1>
2 <h2>這是二級標題</h2>
3 <h3>這是三級標題</h3>

1.3 html段落、換行與字元實體

html段落

<p>標簽定義一個文本段落，一個段落含有預設的上下間距，段落之間會用這種預設間距隔開，代碼如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>段落</title>
 6 </head>
 7 <body>
 8     <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超
 9     文本指的是超鏈接，標記指的是標簽，是一種用來製作網頁的語言，這種語言由一個個的
10     標簽組成，用這種語言製作的文件保存的是一個文本文件，文件的擴展名為html或者htm。
11     </p>
12 
13     <p>一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方
14     式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網
15     頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>
16 </body>
17 </html>

html換行

代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在代碼的段落中插入<br />來強制換行，代碼如下：

1 <p>
2 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br />
3 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br />
4 渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
5 </p>

html字元實體

代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字元實體,代碼如下：

1 <!--  在段落前想縮進兩個文字的空格，使用空格的字元實體：&nbsp;   -->
2 <p>
3 &nbsp;&nbsp;一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br />
4 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br />
5 渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>

在網頁上顯示 “<” 和 “>” 會誤認為是標簽，想在網頁上顯示“<”和“>”可以使用它們的字元實體，比如：

1 <!-- “<” 和 “>” 的字元實體為 &lt; 和 &gt;  -->
2 <p>
3     3 &lt; 5 <br>
4     10 &gt; 5
5 </p>

1.4 html塊、含樣式的標簽

html塊

1、div標簽塊元素，表示一塊內容，沒有具體的語義。
2、span標簽行內元素，表示一行中的一小段內容，沒有具體的語義。

含樣式和語義的標簽

1、em標簽行內元素，表示語氣中的強調詞
2、i標簽行內元素，原本沒有語義，w3c強加了語義，表示專業辭彙
3、b標簽行內元素，原本沒有語義，w3c強加了語義，表示文檔中的關鍵字或者產品名
4、strong標簽行內元素，表示非常重要的內容

語義化的標簽

語義化的標簽，就是在佈局的時候多使用語義化的標簽，搜索引擎在爬網的時候能認識這些標簽，理解文檔的結構，方便網站的收錄。比如：h1標簽是表示標題，p標簽是表示段落，ul、li標簽是表示列表，a標簽表示鏈接，dl、dt、dd表示定義列表等，語義化的標簽不多。

1.5 html圖像、絕對路徑和相對路徑

html圖像

<img>標簽可以在網頁上插入一張圖片，它是獨立使用的標簽，通過“src”屬性定義圖片的地址，通過“alt”屬性定義圖片載入失敗時顯示的文字，以及對搜索引擎和盲人讀屏軟體的支持。

1 <img src="images/pic.jpg" alt="產品圖片" />

絕對路徑和相對路徑

像網頁上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對地址和相對地址。

絕對地址：相對於磁碟的位置去定位文件的地址
相對地址：相對於引用文件本身去定位被引用的文件地址

絕對地址在整體文件遷移時會因為磁碟和頂層目錄的改變而找不到文件，相對路徑就沒有這個問題。相對路徑的定義技巧：

“ ./ ” 表示當前文件所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。
“ ../ ” 表示當前文件所在目錄下的上一級目錄，比如：“../images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。

前端開發之基礎知識-HTML（一）