HTML精華三記（1）
阿新 • • 發佈：2018-12-20
本文旨在將用簡短的三講， 儘可能地覆蓋HTML所有知識點及細節。
HTML第一講
一、WEB基礎概念
- WWW：World Wide Web 全球資訊網
- WWW系統的組成部分：WWW伺服器，瀏覽器（WWW客戶端），HTML檔案和網路。
- WWW執行的三個概念：
- URL：Uniform Resource Locator 統一資源定位器， 本質就是找資源的一種路徑。
- HTTP：Hypertext Transfer Protocol 超文字傳輸協議
- HTML：Hypertext Markup Language 超文字標記語言
二、HTML簡介
- 超文字含義：旨在建立一個全球化的大文件，文件的各個部分分佈在不同的伺服器中。
- 超文字標記語言：強調“語言”，有了超文字的概念，總不能沒有實現超文字的工具。 這種語言是由瀏覽器解釋執行，是一種標記語言。
- 編寫工具：Editplus、Notepad++、Dreamweaver（但注意這些工具都不是必須的！）
- 執行工具：瀏覽器
三、HTML語法格式
-
標記的語法格式
<標記名稱 屬性=“屬性值” 屬性=“屬性值”…> …… </標記名稱>
- 標記是有屬性的， 屬性之間用空格隔開，有了屬性標記才能變得豐富多彩。
- 標記可以巢狀使用，但一定要注意順序。
- 標記的型別
- 單標記：只有開始標記，如<br/>、 <hr/>、<img/>等， 這三個單標籤是主要的。
- 雙標記： 具有開始標記和結束標記。
如<table> </table>
- 屬性
- 功能：可以對標記進行簡單的樣式設定，比如顏色，顯示的位置，字號等等。
- 檔案命名的格式
- 副檔名儘量以.htm或者.html結束。
- 檔名中儘可能由字母、數字、下劃線組成。
- 檔名中不要包含特殊符號，儘量不要用中文。
四、HTML文件
- 文件讀到<html>就知道這是一段用超文字標記語言寫的一段程式碼，如果寫錯該標記，那麼你所寫的文字原原本本就會輸出到瀏覽器中。
- 換句話說HTML將所有的除了文字本身以外的各種樣式（空格，換行，字型，圖片等等）都用同化為HTML中的標籤，所以你要想鍵盤打個空格、回車、tab，想讓它在瀏覽器顯示出來是不可能的。在<html>中的html的標籤才能是被瀏覽器識別出來。
- HTML不區分大小寫，是一種弱語言型別。
五、頁面頭部標記
- 頭標記就是用來設定上面圈住的內容的。
- <title>標記是用來設定第一個圈的
- <meta>標記用來設定剩下兩個；meta是元的意思。
屬性：
| 屬性 | 中文釋義 | 描述 | 屬性值 | |
|---|---|---|---|---|
| http-equiv | equiv是當量，等量的意思 | 設定http的訊息頭 | content-type：顯示字符集設定。 refresh重新整理並跳轉 |
|
| name | 名字 | 設定頁面的描述資訊 | keywords:設定關鍵字，就是第二個圈 description:網站內容，就是第三個圈 |
|
| content | 內容 | 我的觀點是有的屬性需要更精確的描述 | … |
<html>
<head>
<title>網頁字符集設計示例</title>
<meta http-equiv = “Content-Type” content = “text/html; charset=gb18030”>
</head>
<body>
中文亂碼示例
</body>
</html>
<html>
<head>
<title>頁面自動重新整理設定示例</title>
<meta http-equiv = “refresh” content = “3;url=http://www.sina.com.cn”>
<meta http-equiv = “Content-Type” content=“text/html; charset=gb18030”>
</head>
<body>
頁面每隔3
</body>
</html>
<html>
<head>
<title>網頁製作三劍客Dreamweaver、Flash、Firework綜合例項教程</title>
<meta name = “keywords” content ="網頁製作三劍客Dreamweaver、Flash、Fireworks綜合例項教程，計算機類">
</head>
<body>
</body>
</html>
- <style>用來嵌入CSS樣式
五、body屬性總結
| 屬性 | 功能 | 案例 |
|---|---|---|
| background | 設定背景圖片 | <body background=“apple.JPG”> |
| link | 設定網頁文字未訪問時的顏色 | <body link=“black” alink=“green” vlink=“gray”> |
| alink | 設定網頁文字正在訪問時的顏色 | 同上 |
| vlink | 設定網頁文字已被訪問時的顏色 | 同上 |
| bgcolor | 設定頁面的背景顏色 | <body bgcolor=“blue” text=“black”> |
| text | 設定網頁的文字顏色 | 同上 |
| [left][right][top][bottom]margin | 設定外邊距 | <body leftmargin=“120” topmargin=“20” rightmargin=“120” bottommargin=“20”> |
本文參考：《Web前端開發技術》