1 HTML（上）

Learn 學一點發表於2020-12-14
HTML

1 HTML

1.1 兩個概念

1.1.1 客戶端和服務端

客戶端 伺服器 HTTP請求 HTTP響應 客戶端 伺服器
瀏覽者使用的計算機客戶端，用來給伺服器傳送請求。
*注意：管理員使用的計算機也是客戶端（在伺服器上直接操作除外）。
存放網頁檔案的計算機是伺服器端。

1.1.2 檔名、基本名、副檔名

檔名由基本名和副檔名組成，比如demo.txt。
其中demo是基本名，txt 是副檔名。副檔名是用來區分檔案的型別。
思考：網頁的副檔名是什麼？
.html .htm：表示這個檔案是靜態網頁檔案。
後面介紹：.asp .aspx .php .jsp
Doc（Docx是Word的高階版本）:Word文件，PNG：圖片格式（無失真壓縮格式），Jpg圖片

1.2 開啟一個網頁的執行過程

客戶端給伺服器傳送一個請求，伺服器會把頁面的程式碼（HTML、CSS、JS）傳送到客戶端，這些程式碼通過瀏覽器解析執行就生成了頁面。

1.3 站點的介紹

一個網站中包括HTML頁面，CSS，js，圖片，fash動畫或gif動畫，都屬於頁面的資原始檔。為了方便管理，將這些靜態資源放置到一個資料夾下。這個資料夾我們叫做站點。
做網站為什麼需要站點？做網站的第一步先建站點。

1.4 什麼是HTML

全稱：HyperText Mark-up Language。首寫字母縮寫，譯稱：超文字標記語言。

1.5 HTML語言的規則

HTML語言規則：命令都要放到<>，大部分標記都是成對出現的，標籤大部分都是<tag>開始</tag>結束（tag是標籤的意思），
HTML語言不區分大小寫（注意：XHTML按照規範寫都是小寫）。
Eg:<a>   </a>  ，    <b>  </b>

1.6 網頁的基本框架

<html>:HTML頁面開始
<head>：頁面頭開始
<title>：標題開始
</title>：標題結束
</head>：頁面頭結束
<body>：主體開始
</body>：主體結束
</html>：HTML頁面結束
例題：在站點資料夾中新建一個txt檔案，在檔案中輸入如下程式碼：
<html> 
<head> 
<title>這是我的網頁</title>
</head>
<body>這是我的第一個網頁，怎麼樣，哈哈！</body> 
</html>
將檔案的副檔名改為.html或者.htm，雙擊網頁檔案，通過瀏覽器開啟，這個時候會出現亂碼，方法：設定一下瀏覽器的字元編碼，瀏覽器中檢視，編碼，改為簡體中文（GB2312）。

1.7 常見標記

1.<p></p>：段落標記（progragh）
2.<br>：換行標記
3.<hr>：水平線
*注意：環段和換行的關係、區別
4.<b></b>：粗體
5.<i></i>：斜體
6.<u></u>：下劃線
7.<strong></strong>：強調標記，通過加粗強調
8.<em></em>：強調標記，通過傾斜強調
*多學一招：從外觀看<b>和<strong>、<i>和<em>是一樣的，但是對於SEO（搜尋引擎優化）影響很大。<b>和<i>僅僅表示是字型，沒有強調的作用，在實際工作中建議使用強調標記。
9.<sup></sup>（p：top）：上標。例如：X<sup>2</sup>+Y<sup>2</sup>=Z<sup>3</sup>
10.<sub></sub>（b：bottom）：下標

1.8 標記的分類

標記分為兩類：
1、容器標記（圍堵標記）：成對出現的標記，例如：<b>我的祖國</b>。
2、空標記（單標記）：不成對出現的標記，例如：<hr/>。

1.9 屬性

  每一個標記就是一個物件，每一個物件都有屬性。一個物件有多個屬性，屬性與屬性之間是沒有順序的。
語法：<標記 屬性=‘值’ 屬性=‘值’……/> 
例如：<hr width（寬度）='600'px color='#DDCCOO' size（高度尺寸）=’1’ noshade=’noshade’/>值要用單引號或者雙引號括起來，屬性與屬性之間用空格隔開。

1.10 設定頁面解析時候的字元編碼

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
（character字元，set建立，gb2312（國標2312簡體中文，同時jbk也是簡體中文）基於瀏覽器的語言與utf-8（通用的編碼，推薦使用）類似）。Character作用：告訴瀏覽器用什麼編碼解析頁面程式碼，這個編碼要和檔案的編碼一致。

1.11 簡述W3C（全球資訊網協會）的（XHTML 1.0）規範

W3C定義的規範很多，重要的規範如下：
1、 一個頁面只能有一個根元素。
2、 標記必須成對出現（不允許空標記的存在）。
3、 區分大小寫。
 
<br />：既開始又結束（<br></br>）遵循W3C對的規定協議。World wide web consortium（WWWC）（3WC）（W3C）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">：宣告公認這個網頁面是遵循W3C規定的協議。

1.12 Dreamweaver介紹

  DW是一個前端開發非常強大的工具，有很多提示，引數設定的快捷鍵是Ctrl+U。
  修改程式碼提示在DW，編輯——首選項引數——程式碼提示，中修改。我們可以更改自動補全的時間。DW除了有和強大的提示功能以外，還可以管理站點資料夾。
  站點——新建站點，名字可以中英文隨便寫，路徑指向站點資料夾（自己建）。
  新建完畢後，就可以在DW中直接操作站點中的檔案。
  腳下留心：DW中新建站點是新建的站點資料夾和DW軟體之間的一個關聯，目的是為了更方便的管理站點目錄，如果DW中不建站點網站一樣開發。
  思考：如果刪除DW中的站點（站點——站點管理），站點資料夾是否被刪除？
  答：不會被刪除，刪除的是DW與軟體之間的關聯。
  新建站點以後，預覽網頁檔案按快捷鍵F12，可以編輯預設瀏覽器。設定完畢後再按F12就會用預設網頁開啟網頁。

1.13 滾動的文字

<b><marquee width='300px' direction="right" scrollamount="5" onmousemove="stop()" onmouseout="start()" behavior="">你是豬，你是豬！</marquee></b>
<br />
<br />
<br />
width：寬度<br/>
direction:方向<br />
scroll：滾動<br />
amount：數量<br />
behavior：行為<br />
alternate：交替出現<br />
onmouseover：當滑鼠移過它的時候，onmouseout：當滑鼠離開它的時候<br />

相關文章