競賽部第五次培訓總結
競賽部第五次培訓
文章目錄
HTML基礎語法
1. 什麼是網頁
網頁是一種可以在網際網路上傳輸，能被瀏覽器認識和翻譯成頁面並顯示出來的檔案，網頁是網站的基本構成元素。
網頁實際上就是一個檔案。一般網頁上都會有文字和圖片等資訊，而複雜一些的網頁上還會有聲音、視訊、動畫等多媒體內容。
網頁比報紙、廣播、電視等傳統媒介在資訊傳遞上更加迅速、多樣化，互動能力更強。
2. 什麼是網頁
靜態網頁
靜態網頁也稱為普通網頁，是相對網頁而言的。靜態網頁不是指網頁中的元素都是靜止不動的，而是指網頁檔案中沒有程式程式碼，只有HTML（超文字標記語言）標記，一般字尾為.htm、.html、.shtml或.xml等。在靜態網頁中，可以包括GIF動畫，滑鼠經過Flash按鈕時，按鈕可能會發生變化。
靜態網頁一經制成，內容就不會再變化，不管何人何時訪問，顯示的內容都是一樣的。
如果要修改網頁的內容，就必須修改其原始碼，然後重新上傳到伺服器上。
動態網頁
動態網頁是指在網頁檔案中除了HTML標記以外，還包括一些實現特定功能的程式程式碼，這些程式程式碼使得瀏覽器與伺服器之間可以進行互動，即伺服器端可以根據客戶端的不同請求動態產生網頁內容。動態網頁的字尾名通常根據所用的程式設計語言的不同而不同，一般為.asp、.aspx、cgi、.php、.perl、.jsp等。動態網頁可以根據不同的時間、不同的瀏覽者顯示不同的資訊。常見的留言板、論壇、聊天室都是用動態網頁實現的。
-
靜態網頁的特點
-
靜態網頁每個網頁都有一個固定的URL
-
網頁內容一經發布到網站伺服器上，無論是否有使用者訪問，每個靜態網頁的內容都是儲存在網站伺服器上的。無需經過伺服器的編譯，直接載入到客戶瀏覽器上顯示出來。
-
靜態網頁的內容相對穩定，因此容易被搜尋引擎檢索。
-
靜態網頁沒有資料庫的支援。
-
靜態網頁的互動性較差，
在功能方面有較大的限制
3. HTML基礎知識
HTML是超文字標籤語言（Hypertext Markup Language）的縮寫，它是當今多種標籤語言中的一種，是為Internet文件設計的標籤語言。HTML雖然非常簡單，容易掌握，但它也是重要的，因為它是網頁設計與Web應用程式開發的基礎。
- 常用文字標籤
為了對網頁中的文字元素進行修飾、排版，使網頁豐富多彩，往往需要使用大量的標籤符，文字標籤分為文字的基本設定與文字的修飾設定。
注：
1.HTML 標籤是由尖括號包圍的關鍵詞
2.HTML 標籤通常是成對出現的
3.標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
4.開始和結束標籤也被稱為開放標籤和閉合標籤
- HTML基本結構
<html>
<head>
<title>標題</title>
</head>
<body>
body標籤對之間的文字是可見的頁面內容
</body>
</html>
- HTML5基本結構
<!DOCTYPE html> 位於 HTML5 文件中的第一行，也就是位於 <html> 標籤之前,
該標籤告知瀏覽器文件所使用的 HTML 規範。
<html >
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
-
HTML各種標籤對
<head></head> - <head> 標籤用於定義文件的頭部，它是所有頭部元素的容器。 - <body></body> -
body 元素
定義文件的主體。body 元素包含文件的所有內容（比如文字、超連結、影象、表格和列表等等。） -
標題標籤
<hn>(n=1,2,3,4,5…)
<hn>標籤用於設定網頁中各個層次的標題文字，被設定的文字將以黑體顯示，並自成段落。- 語法格式舉例：<h1 align="center">標題部分</h1> - 屬性說明：align屬性用於設定標題的對齊方式，其引數為 left、center、right。 -
段落標籤
<p></p>
瀏覽器是以無格式的方式顯示HTML文件的，也就意味著HTML文件中的空格和Enter鍵是被瀏覽器所忽略的。
要將文字劃分段落就必須使用分段標籤<p>。
<p>標籤是非空元素標籤，所標識的文字，代表同一個段落，必須成對使用。兩個段落間的間距等於兩次換行的距離。
- 語法格式舉例：<p align="center"> 段落內容 </p>
- 屬性說明：align（對齊）屬性的屬性值有3個引數：left（預設）、center和right。
- 換行標籤
<br>是換行標籤，在網頁設計中比較常用。使用<br>標籤能夠使文件在該標籤處強制換行，這一點與<p>相同。
但與<p>不同的是換行後行之間不留空白行，頁面看起來比較緊湊。
屬於空標籤，沒有結束標籤。
- 水平線標籤
<hr>
<hr>標籤是水平線標籤，可以在頁面中產生一條水平線，用於分隔文件和修飾網頁。<hr>屬於空元素標籤，沒有結束標籤。
- 語法格式舉例：<hr 屬性>
- 常用屬性說明：hr標籤的常用屬性如下表所示。
- 特定文字樣式標籤
定文字樣式標籤用來設定特殊的文字樣式，以實現文字的特殊效果。這類標籤是成對使用的，沒有屬性。
例如， a<sup>2</sup>+b<sup>2</sup>表示a2+b2。
- 列表標籤
HTML中列表標籤可分為：
- 無序列表
- 有序列表
- 巢狀列表
- 自定義列表
- 無序列表標籤
<ul>
<ul>稱為無序列表標籤或專案列表標籤，用來在頁面中顯示專案形式的列表，列表中每一項的前面會加上○、●或■等符號，每一項需用<li>標籤，所以需要同<li>結合使用。
-語法格式舉例：
<ul>
<li type="circle">列表項1</li>
<li type="square">列表項2</li>
</ul>
-屬性說明：<ul>的常用屬性只有一個type，用來設定列表項前面出現的符號，
可取屬性值有：
disc：列表項前面加上符號●。
circle：列表項前面加上符號○。
square：列表項前面加上符號■。
-
有序列表標籤
<ol>-<ol>稱為有序列表標籤或編號列表標籤，用來在頁面中顯示編號形式的列表， 列表中每一項的前面會加上如A、a、i或I等形式的編號，編號會根據列表項的增刪自動調整。 每一項需要用<li>標籤，所以需要同<li>結合使用。 語法格式舉例： <ol type="A" start="2"> <li>列表項1</li> <li>列表項2</li> </ol> 屬性說明：<ol>標籤的兩個屬性type和start用來控制順序編號。 <li>用來標籤列表的一項，需同<ul>或<ol>一起使用，它的屬性有： type：用來設定列表項的符號，如果<li>用在<ul>裡， 屬性取值為disc、circle或square，如果<li>用在<ol>裡，則屬性取值為1、a、A、i或I。 value：此屬性僅當<li>用在<ol>裡有效，屬性值為一整數，用來設定當前項的編號， 其後的專案將以此值為起始數目遞增，前面各項不受影響。 -
超連結標籤
<a>超連結是網頁的靈魂，web上的網頁正是靠點選設定在文字、影象、flash等元素上的超連結才能實現相互間的訪問。 建立超連結的標籤是一對<a>…</a>，它是網頁中最為常用的標籤。 由於定義超連結時常常需要設定檔案的路徑，所以先介紹檔案路徑的寫法，然後再介紹連結標籤的用法。 連結是用標籤<a>來定義的， 定義的語法為： <a href=“http://www.bilibili.com/” target=“_blank” title=“不要點開”>嗶哩嗶哩</a> 屬性說明：<a>標籤的屬性如下表所示。
-
影象標籤
<img>Web上常用的影象格式有三種：JPEG、GIF、PNG。使用<img>在網頁上加入影象的語法舉例為： <img src="image/tu.jpg" width="100%" height="100" border="1" alt="圖片"/> <img>不需要結束標籤，只需在開始標籤裡設定屬性即可。 -
表格標籤
<table>使用表格是網頁中用來定位元素的重要方法，同時表格也是網頁佈局結構裡不可或缺的一部分。 表格由一行或多行組成，每行又由一個或多個單元格組成。 HTML中一個表格通常是由<table>、<tr>、<td>三個標籤來定義的，這三個標籤分別表示表格、表格行、單元格。 在對錶格進行設定時，可以設定整個表格(<table>)或表格中的行(<tr>)或單元格(<td>)的屬性， 它們優先順序為：單元格(<td>)優先於行(<tr>)，行(<tr>)優先於表格(<table>)。 例如，如果將某個單元格的背景色屬性設定為紅色， 然後將整個表格的背景色屬性設定為藍色，則紅色單元格不會變為藍色。 在html文件中，表格是由table、th、tr、td等標籤構成的。
<table>稱為表格標籤，整個表格始於<table>而終於</table>，
它是一個容器標籤，用於宣告一個表格，<tr>、<td>等只能在它的範圍內使用。
< table border="1">
<tr>
<td>第一行第一格</td>
<td>第一行第二格</td>
</tr>
<tr>
<td>第二行第一格</td>
<td>第二行第二格</td>
</tr>
</table>
-
<td>標籤<td>在表格中表示一個單元格，是表格中具體內容的容器，使用時要放在<tr>與</tr>之間。 -
<th>標籤<th>在表格中也表示一個單元格，用法與<td>相同， 不同的是，<th>所標籤的單元格中文字內容預設以粗體顯示，且居中對齊。 -
文字框
<input type="text"> 文字框除了type屬性外，其它常用屬性有：name：用來設定文字框的名稱，所選名稱必須在表單內唯一標識該文字框，名稱字串中不能包含空格或特殊字元，可以使用字母數字字元和下劃線 (_) 的任意組合。表單提交到伺服器後需要使用指定的名稱來獲取文字框的值。
value：用來設定文字框的預設值，也就是使用者輸入前文字框裡顯示的文字。 size：用來設定文字框最多可顯示的字元數，也就是文字框的長度。 maxlength：用來設定文字框中最多可輸入的字元數。通過此屬性可以將郵政編碼限制為6位數，將密碼限制為10個字元，等等。 -
密碼框
密碼框用來讓使用者輸入密碼，當用戶在密碼框中鍵入時， 輸入內容顯示為專案符號或星號，以保護它不被其他人看到。定義密碼框的語法為： <input type="password"> 密碼框的其它屬性設定與文字框相同。 -
單選按鈕
單選按鈕用來讓使用者只能從一組選項中選擇一個選項，例如，性別的選擇。 單選按鈕通常成組地使用，在同一個組中的所有單選按鈕必須具有相同的名稱。定義單選按鈕的語法為： <input type="radio"> 單選按鈕除type外其它常用屬性有： name：用來設定單選按鈕的名稱，作用同文本框的name。同一組中所有單選按鈕的此屬性必須設定相同的值，否則，各選項不會相互排斥。 value：用來設定在單選按鈕被選中時傳送給伺服器的值。 checked：用來確定在瀏覽器中載入表單時，該單選按鈕是否被選中。如果開始標籤里加入checked一詞，則初始被選中。 -
複選框
複選框用來讓使用者可以從一組選項中選擇多個選項。定義複選框的語法為：
<input type="checkbox"> 複選框除type外其它常用屬性有： name：用來設定複選框的名稱，作用同文本框的name。 value：用來設定在複選框被選中時傳送給伺服器的值。 checked：用來確定在瀏覽器中載入表單時，該複選框是否被選中。如果開始標籤里加入checked一詞，則初始被選中。 -
下拉選單
下拉選單，也稱下拉列表，用來讓訪問者從一個列表中選擇一個專案。當頁面空間有限，但需要顯示許多選單項時，下拉選單非常有用。
定義一個下拉選單的語法為：
<select>
<option selected>競賽部</option>
<option>祕書部</option>
<option>計算機專案部</option>
</select>
一個下拉選單由<select>和<option>來定義，<select>提供容器，它的name屬性意義同文本框的相同。
<option>用來定義一個選單項，<option>與</option>之間的文字是呈現給訪問者的，
而選中一項後傳送的值是由value屬性指定的，如果省略value屬性，則value的值與文字相同，加入selected屬性可以使選單項初始為選中狀態。
- 列表
列表的作用與下拉列表相似，但顯示的外觀不同，列表在瀏覽器中顯示時列出部分或全部選項，另外列表允許訪問者選擇一個或多個專案。定義列表的語法如下：
<select size="5" multiple>
<option>競賽部</option>
<option>祕書部</option>
<option>計算機專案部</option>
</select>
跟下拉列表相比，多了兩個屬性：size和multiple。
size用來設定列表中顯示的選項個數；加入multiple屬性允許使用者從列表中選擇多項。
-
文字區域
<textarea>文字區域使使用者可以輸入多行資訊，例如，輸入留言、自我介紹等。定義文字區域的語法為： <textarea>略略略略</textarea> 開始標籤與結束標籤之間的文字為初始值，可以為空，但結束標籤一定要有且正確。 -
按鈕
1.提交按鈕用來將表單資料提交到伺服器。 定義提交按鈕的語法為：<input type="submit"> 2.重置按鈕用來還原表單為初始狀態。 定義重置安鈕的語法為：<input type="reset"> 3.定義普通按鈕的語法為：<input type="button"> 三種按鈕的屬性除type外，其它常用屬性有： value：用來指定按鈕上顯示的文字。 name：用來指定按鈕的名稱。 -
<marquee>標籤<marquee>可以使其標籤的內容產生滾動效果，網上常見的滾動資訊公告板就是用它來實現的。 <marquee>標籤的使用語法： <marquee>我可以滾動哦~</marquee> -背景 <body>
擁有兩個配置背景的標籤。背景可以是顏色或者影象。
1.背景顏色
背景顏色屬性將背景設定為某種顏色。屬性值可以是十六進位制數、RGB 值或顏色名。
2.背景圖片
背景屬性將背景設定為影象。屬性值為影象的URL。如果影象尺寸小於瀏覽器視窗，那麼影象將在整個瀏覽器視窗進行復制。
URL可以是相對地址，如第一行程式碼。也可以使絕對地址，如第二行程式碼。
3.背景音樂
<bgsound src =“my.mp3" loop="-1">
loop中的數值是音樂迴圈的次數，可設定為任意正整數，若設為“-1”的話，音樂將永遠迴圈。
src 的數值是背景音樂的地址
-
HTML註釋
註釋標籤用於在原始碼中插入註釋。註釋不會顯示在瀏覽器中。可使用註釋對您的程式碼進行解釋，這樣做有助於在以後的時間 對程式碼的編輯。當編寫了大量程式碼時尤其有用。
使用註釋標籤來隱藏瀏覽器不支援的指令碼也是一個好習慣。
使用註釋的語法：
- 其他標籤
<meta>標籤
<meta>屬於頭部標籤，應放在<head>與</head>之間，它的用法比較多，但最常用的是它的重新整理功能。
實現重新整理功能的語法：
該語句表示：頁面開啟5秒鐘後自動轉到百度主頁。如果把url部分省略，則表示頁面每5秒鐘就自動重新整理一次。
-
特殊字元
特殊用途的字元在HTML中無法直接顯示成原來的樣式，想要在瀏覽器中顯示這些字元就必須輸入特殊字元實體來代替。
例如：© ™ ×… 這些符號怎麼打呢？
