什麼是網站
- 網站其實是由一個個的網頁構成的
- 網頁就是放在伺服器上面的一個檔案
- 我們瀏覽網頁的時候這個檔案裡的所有程式碼會被下載到我們本地的電腦，然後再由瀏覽器解析，渲染
- 網頁就是放在伺服器上面的一個檔案
- 而網站就是一個繫結了域名的資料夾，該資料夾中可以包含子資料夾以及各種各樣的檔案，這些檔案都可以透過域名來訪問
- 因此當我們在位址列中輸入一個URL時，它其實已經展示了伺服器上的目錄結構
- 如果我們給頂級目錄繫結一個域名如
www.bilibili.com，那麼使用者就可以透過www.bilibili.com來訪問資料夾中所有檔案
- 網際網路上所有的伺服器都是透過IP地址來定位的，域名只是IP地址的一種助記符，幫助使用者記住網站的連結以及品牌
- 使用域名訪問網站時，瀏覽器會先找到域名對應的IP地址，然後再透過IP地址請求伺服器上的檔案
- 這個過程叫做域名解析，是透過DNS伺服器來完成的。
- 使用域名訪問網站時，瀏覽器會先找到域名對應的IP地址，然後再透過IP地址請求伺服器上的檔案
什麼是伺服器
- 網站是放在伺服器上面執行的，而伺服器其實就是一臺計算機，他和普通的筆記本、臺式本並無區別
- 不過，伺服器一般是沒有顯示器的鍵盤，音響等外部裝置的，當然也支援這些裝置。
- 因為伺服器唯一的用途就是執行網站，並無其他的作用，所以也可以稱為二十四小時執行的電腦。
什麼是html
- HTML是Hyper Text Markup Language的縮寫，翻譯為"超文字標記語言"，是用來設計網頁的。
- 使用HTML編寫的檔案稱為"HTML"檔案，字尾是.html(也可以.htm)
- HTML是一種純文字檔案，可以使用Windows記事本，Linux Vim，Notepad++，Sublime Text，VS Code等編輯器來開啟或建立。
- 每個網頁都是一個HTML文件，使用瀏覽器訪問一個連結(URL)，本質就是把檔案從伺服器上下載到電腦裡面，然後由瀏覽器解析HTML這個文件。
- HTML並不是程式語言，因為它沒有處理邏輯的能力，沒有計算的功能，不能動態的生成內容，只能靜態的展示網頁資訊。
- 儲存HTML檔案的時候必須把檔案儲存為.html或者.htm格式才可以在瀏覽器中開啟。
超文字
- 即超越文字，表示著HTML不僅可以包含文字(文字)。
- 它與txt文字的區別在於他可以包含：圖片，音訊，表格，列表，連結，按鈕，輸入框等內容。
- 超連結是網際網路的紐帶，是它將各種網頁連結起來，沒有超連結就沒有網際網路。
- 這個東西可以是另外一個網頁的地址，也可以當前網頁中其他的位置，比如點選回到頂部，還可以是圖片，檔案，應用程式等
- 連結的兩端分別稱為源錨點(當前錨點)和目標錨點(其他的網頁)，透過點選源錨點就可以跳轉到目標錨點。
標記語言
- HTML是一種計算機語言，它不僅可以程式設計，還可以用來標記網頁的中的內容，它透過不同的標籤來標記不同的內容，格式，佈局等
示例：
<img>//該標籤表示一張圖片
<a>//該標籤表示一個連結
<div>//該標籤表示塊級佈局
總結
HTML是一種專門用來開發網頁的計算機語言，它透過標籤(標記式指令)將文字，音影片，圖片，表格，按鈕，輸入框等內容顯示出來，因此HTML是一種標記語言
html標籤
- HTML標籤由尖括號包圍的關鍵字構成，如：
<!DOCTYPE>. - 除了少數幾個標籤是是單個出現，其他的都是成雙成對如
<p>內容</p>. - 成對出現的標籤中，第一個標籤為開始標籤，第二個標籤為結束標籤(閉合)
- 語法格式：由開始的標籤，屬性，內容和結束的標籤組成，標籤的名字不區分大小寫，但大多數屬性的值需要區分大小寫
- 示例：
<p class="change">此表示可以顯示一段文字</p>
- 注意：
- 所有HTML都有
<>如果沒有就會被認為是文字 - html中不同標籤可以有不同的效果
- 如果使用了某個標籤，則必須使用對應的結束標籤來結尾(自閉合標籤除外，也稱為單標籤)。
- 所有HTML都有
自閉合標籤
- 沒有單獨的結束標籤，而是在開始標籤中新增/來進行閉合。
- 自閉合標籤不用包圍內容，所以不需要單獨的結束標籤，只有少部分標籤時自閉合標籤。
巢狀html標籤
- 一個html標籤裡面可以包含其他的html標籤，我們寫的html文件就是由相互巢狀的html標籤構成的
html網頁基本結構
在VSC中可以使用!（英文的）然後回車就可以生成出一個網頁的基本結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
可以看到很多的<>包圍起來的特殊標記，這就是HTML標籤(Tag),瀏覽器識別這些標籤來渲染出程式碼對應的效果，然後就構成了網頁。
html程式碼要透過瀏覽器開啟
基本標籤
<!DOCTYPE html>：
- 檔案宣告。宣告此文件為html文件。
- 該標籤不區分大小寫
<html></html>：
- 該標籤不區分大小寫
- html網頁的根標籤，包含整個網頁，所有程式碼都需要寫在html中。
`： - 網頁頭部，用來定義一些資訊。如標題、編碼等
<meta charset="UTF-8">： - 說明了網頁使用的編碼是UTF-8(全球通用編碼格式)
<html></html>： - 網頁的標題，標題會顯示在瀏覽器的標題欄中。
<body></body>： - 書寫我們可以在網頁的所看到的內容的程式碼
常見單標籤
<b>
- 此標籤用來加粗文字。
<hr> - 此標籤用來設定分隔線。
<br> - 此標籤用來換行。
<!-- ... --> - 註釋標籤，...中為註釋內容
<img> - 定義一張圖片。
- 專有屬性：
src;altsrc（必選屬性）：source的簡稱，為<img>提供對應的圖片路徑。可以使用相對路徑，也可以使用絕對路徑。alt（可選屬性）：用來描述影像資訊，當影像無法正常顯示的時候就會顯示alt裡面的資訊
其他常見雙標籤
<a></a>
- 定義一個超連結
<a>和</a>之間的內容可以是圖片，文字，內容被<a>標籤覆蓋後只要點選就可以跳到<a>標籤href填寫的網址處。- 預設樣式：
- 滑鼠樣式：滑鼠移入連結區域時，變成一隻小手；移出連結區域時，變回箭頭形狀。
- 顏色及下劃線:超連結被點選之前為藍色，超連結被點選之後為紫色。超連結預設帶有下劃線，下劃線顏色和文字顏色保持一致。
- 專有屬性：
href;targethref：提供連結地址(URL)href本質上就是指向一個檔案，這個檔案可以隨便格式，只要是瀏覽器支援此檔案，那麼他就可以在瀏覽器上顯示，如果瀏覽器不支援這個格式，那麼就提示使用者下載。href可以是絕對路徑，也可以是相對路徑，絕對路徑往往以域名為起點,如：https://www.bilibili.com/,相對路徑往往以當前檔案或者當前域名為起點，如/.../img/ag.jpg.- 示例
<a href="https://www.bilibili.com/">點選跳轉bilibili</a>
target（可選屬性）：用來指定在瀏覽器中開啟的方式- 沒有設定target屬性的話那麼就是瀏覽器預設的開啟方式，如果設定了的話那就是按照對應的方式開啟
- 屬性值：
_self:預設，在點選連結的視窗處開啟，原來的視窗被覆蓋。_blank:新建一個視窗裡面的內容就是點選連結的網頁。_parent:在當前框架的上一層開啟新的頁面。_top:在頂層框架中開啟新頁面。- 示例：
<a target="_blank">此連結到bilibili</a>
<picture></picture>
- 按照比例來放大或縮小圖片的尺寸以適應不同的裝置
- 可以包含
<source>標籤 - 透過
<soucre>標籤的media屬性可以==設定匹配條件= - 透過
srcset屬性可以定義圖片的路徑，另外，在<picture>標籤的最後還需要定一個<img>標籤 - 示例
<picture>
<source media="(min-width: 1000px)" srcset="logo-large.png">
<source media="(max-width: 500px)" srcset="logo-small.png">
<img src="logo-default.png" alt="C語言中文網預設Logo">
</picture>
- 瀏覽器將評估每個
<source>標籤，並選擇最合適的<source>標籤，如果沒有找到匹配項，則使用<img>標籤所定義的圖片 - 另外
<img>必須是<picture>標籤的最後一個元素
<p></p>
- 段落標籤
- 定義一個文字，將文件中的內容分割為若干個段落
- 開始標籤和結束標籤裡面的內容會被視為段落
- 瀏覽器內建樣式會在段落上下自動新增一定的空白區域(外邊距)，可以使用CSS中的margin屬性來設定空白區域的大小
段落中的空格/換行：
- 預設情況下，段落標籤會對文字中的空格符進行合併，將多個空格顯示為一個空格的效果
- 如果段落中出現多個連續的空格，瀏覽器會忽略這些空格只保留一個。
- 如果段落中出現多個連續的行，瀏覽器會將這些換行轉換成一個空格。
- 在想要在段落標籤中換行，需要專門的換行的標籤
<br>
<ul></ul> - 定義列表。
<li></li> - 定義列表的每一項。
<input> - 定義一個輸入框。
<h1/~/6></h1/~/6> - 標題標籤
<h1>標籤的級別最高，<h6>標籤的級別最低，透過這些標籤可以定義網頁的標籤- 在網頁上使用標籤時，瀏覽器內建的樣式會在每個標題上下新增一定的空白區域(外邊距)，後續可以透過CSS中的margin來設定空白區域的大小。
- 開始標籤和結束標籤裡面的內容會被視為標題
文字格式化標籤
<b></b>
- 加粗標籤中的字型。
<strong></strong> - 強調標籤中的內容，並將字型加粗。
- 預設情況下，
<strong>和<b>標籤都可以使文字以粗體展示其中的文字，但是<strong>標籤是說明標籤裡內容具有很高的重要性，而<b>標籤僅僅只是加粗並沒有別的含義
<i></i> - 定義標籤中的字型為斜體。
<em></em> - 強調標籤中的內容，並使標籤中的字型傾斜。
<em>標籤具有強調的語義，用來表示內容的重要性，但是<i>標籤僅僅只是用來定義斜體文字的。
`- 定義標籤中的字型為小號字型。
` - 定義上下標文字。
<sup></sup> - 定義上標文字。
<ins></ins>
定義文件的其餘部分之外的插入文字。
<del></del> - 在文字內容上新增刪除線。
<code></code>
定義一段程式碼。
<kbd></kbd> - 用來表示文字是透過鍵盤輸入的。
<samp></samp> - 定義程式的樣本。
<var></var> - 定義變數。
<pre></pre> - 定義預格式化的文字，被該標籤包裹的文字會保留所有的空格和換行符，字型也會呈現為等寬字型。
<abbr></abbr> - 用來表示標籤中的內容為縮寫形式。
<address></address> - 用來定義文件作者的聯絡資訊，被該標籤包裹的文字通常會以斜體呈現，並在文字前面換行。
<bdo></bdo> - 定義標籤中的文字方向。
<blockquote></blockquote> - 定義一段引用的文字，例如名人名言，文字會以換行輸入，並在左右兩邊進行縮排。
<q></q> - 定義一段短引用，瀏覽器會將引用的內容使用雙引號包裹起來。
<cite>...</cite> - 表示對某個文獻的引用，例如書籍或雜誌的名稱，文字會以斜體顯示。
<dfn></dfn>
html屬性
- 屬性就是對一個標籤額外的設定
- 屬性需要新增在開始的標籤裡面，語法格式為:
class="chang"- 其中
class為屬性名，value是屬性的值，屬性值必須使用雙引號""或者單引號' '包圍。但是在大部分時候都是使用雙引號。
- 其中
- 一個標籤可以沒有屬性，也可有多個屬性
- 通用屬性：可以在大部分或者所有的html標籤裡面使用
- 專用屬性：只能在一個或者幾個特定的html標籤裡面使用
常見通用屬性
id
- 賦予某個標籤唯一的名稱(識別符號)，當我們使用CSS或者JavaScript操作這個標籤時，就可以透過
id屬性來找到這個標籤。- 當使用CSS或者JavaScript操作HTML標籤時，如果標籤中帶有
id屬性作為唯一識別符號，透過id屬性可很方便的定位到該標籤 - 如果html文件中包含多個同名標籤，利用
id屬性的唯一性，可以很方便的區分他們。 - 示例：
- 當使用CSS或者JavaScript操作HTML標籤時，如果標籤中帶有
<b id="url">https://www.bilibili.com/</b>
<a href="https://www.bilibili.com/" id="content">bilibili</a>
class
- 為標籤定義名稱(識別符號)，不同的是
class屬性在整個html文件中不是唯一的，我可以為多個標籤定義相同的class屬性值，還可以為一個標籤定義多個class屬性值（他們之間需要使用空格隔開） - 當使用CSS或者JavaScript操作HTML標籤時，同樣可以使用class屬性來找到對應的HTML標籤
- 由於class屬性並不是唯一的，所以透過CSS或JavaScript對HTML標籤的操作會作用於所有具有同名的class屬性的標籤上。
- 示例：
<div class="Name1 Name2 Name3"></div>
<p class="cont"></p>
<div class="cont Name1"></div>
title
- 用來對標籤內容進行描述說明，當滑鼠移動到該標籤上面的時候會顯示出title屬性的值。
- 示例：
style
- 為所有的標籤定義CSS的樣式，如設定顏色，字型
- 示例：
<ul>
<li style="color: aquamarine;">此文字的顏色為青色</li>
<li>
<a href="https://www.bilibili.com/" style="color:red;">點選跳轉bilibili</a>
</li>
</ul>
設定寬度和高度
width;hight;style
- 預設情況下這些屬性都是以畫素為單位
- width和height只是臨時修改圖片的尺寸，並不會改變圖片原始檔案的大小
- 示例：
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.EpxMzbWHD39VZ-nmL0fs4AHaFj?w=195&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
alt="此圖片載入成功了？？" title="此圖片載入成功了"
width="150" height="150">
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.EpxMzbWHD39VZ-nmL0fs4AHaFj?w=195&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
alt="此圖片載入成功了？？" title="此圖片載入成功了"
style="width: 150;height: 150;">
- 一般建議為圖片設定width和height屬性，以便瀏覽器可以在載入圖片之前為其分配足夠了空間，否則圖片載入過程可能會到最後網頁佈局失真或閃爍
- 如果頁面使用了響應式佈局(自適應佈局)，建議在上圖圖片之前裁剪好尺寸，不要設定width和height屬性，，這樣圖片會跟著螢幕的寬度自動改變尺寸，從而不會變形，或者超出螢幕寬度
圖片對映
影像對映允許在一個圖片中定義超連結，其實就是在影像中劃分一些區域，並在這些區域定義超連結
- 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./img/06EE610BCC0208A67AFC6C4FB2DF97A2.jpg" usemap="#objects" alt="bilibili">
<map name="objects">
<area shape="rect" coords="0,0,82,126" href="https://www.bilibili.com/" alt="首頁">
<area shape="circle" coords="90,58,3" href="https://www.bilibili.com/anime/?spm_id_from=333.1007.0.0" alt="動漫">
<area shape="circle" coords="124,58,8" href="https://game.bilibili.com/platform/?spm_id_from=666.4.0.0" alt="遊戲">
</map>
</body>
</html>
<map>標籤的name屬性對應<img>標籤的usemap屬性，<area>標籤用於定義圖片可以點選的位置(區域)，不僅如此還可以再一張圖片中定義多個可點選區域。shape和coords屬性：- 在
<area>標籤中可以透過shape屬性來定義可點選區域的形狀，並透過coords屬性來定義==形狀所對應的座標= - 其中shape屬性的可選值
- rect(矩形)，circle(圓形)和poly(多邊形)
- coords屬性中座標的值取決於可點選區域的形狀。
- 在
表格、表單與列表
表格標籤
<table>
- 表示表格，表格的所有內容需要寫在
<table>和</table>之間。 - 一般情況下，HTML定義的表格是沒有邊框的，但是我們可以透過設定
<table>標籤的border屬性來設定表格的邊框寬度，單位是畫素(px). - HTML的
<table>標籤也支援單元格的合併，跨行合併和跨列合併rowspan：表示跨行合併，rowspan表示向下合併單元格。colspan：表示跨列合併，colspan表示向右合併單元格。- 每次合併n個單元格記得要n-1個
<td>標籤。
<tr>
- 是table row的簡稱，表示表格的每一行，表格中有多少個
<tr>標籤就表示有多少行資料。
<td> - 是table datacell的簡稱，表示表格的單元格，這是存放表格資料的標籤，單元格的資料可以是文字，圖片，列表，段落，表單，水平線，表格等多種形式。
<th> - 是table heading的簡稱，表示表格的表頭。
<th>其實是<td>單元格的一種變體，本質上還是一種單元格。 <th>一般位於第一行，充當每一列的標題。大多數的瀏覽器會把表頭顯示為粗體居中的文字。
<caption>- HTML允許使用此標籤當做表格的標題，需要注意的是：一個表格只能有一個標題。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- border這裡是設定邊框為1畫素 -->
<table border="1" style="border-collapse: collapse;">
<!-- 整個表格的標題 -->
<caption>此表格為網頁資訊表</caption>
<tr>
<!-- 第一行 -->
<th>網站名</th>
<th>網站地址</th>
<th>網站作用</th>
</tr>
<tr>
<td>bilibili</td>
<td>https://www.bilibili.com/?from_start_menu</td>
<td>以影片為主流的網站</td>
</tr>
<tr>
<!-- 向下合併一個單元格 -->
<td rowspan="2">淘寶</td>
<td>https://www.taobao.com/</td>
<td>以購物為主流的網站</td>
</tr>
<tr>
<!-- 向右合併一個單元格 -->
<td colspan="2">
https://uland.taobao.com/sem/tbsearch?refpid=mm_26632360_8858797_29866178&keyword=%E5%A5%B3%E8%A3%85&clk1=2d5e46421962bba06c0498319872fcd7&upsId=2d5e46421962bba06c0498319872fcd7
</td>
</tr>
</table>
</body>
</html>
表單標籤
- 表單可以接收使用者輸入的資訊，然後將其傳送到後端應用程式，如PHP,Java,Python等，後端應用程式將根據定義好的業務邏輯對錶單傳遞進來的資料進行處理。
- 其中包含了輸入框，核取方塊，單選按鈕，提交按鈕等不同的表單控制元件，使用者透過修改表單中的元素(如輸入文字，選擇某個選項等)來完成表單，透過表單中提交按鈕將表單資料提交給後端的程式
- 表單是用來收集使用者資料的，但是使用者的資料需要填寫在表單控制元件裡
<form> - 建立表單
- 示例
<form action="URL" method="GET|POST">
表單裡的元素
</form>
專有屬性
| 屬性 | 可選值 | 描述 |
|---|---|---|
| accept（不重要） | MIME_type | HTML5中不再支援，設定伺服器接收的檔案型別。 |
| accept-charset | character_set | 設定表單資料的字符集(預設為HTML文件字符集)。 |
| action | URL | 設定要將表單提交到何處(預設為當前頁面)。 |
| autocomplete | on，off | 設定是否啟用表單的自動完成功能(預設開啟)。 |
| enctype | application/x-www-form-urlencoded,multipart/form-data,text/plain | 設定在提交表單資料之前如何對資料進行編碼(適用於method="post"的情況)。 |
| method | get，post | 設定使用哪種HTTP方法來提交表單資料(預設為get)。 |
| name | text | 設定表單的名稱。 |
| novalidate | novalidate | 如果使用該資料，則提交表單時不進行驗證。 |
| target | _blank,_self,_parent,_top | 設定在何處開啟action屬性設定的連結(預設為_self) |
表單控制元件
| 控制元件/標籤 | 描述 |
|---|---|
<input>（單標籤） |
定義輸入框 |
<textarea> |
定義文字域(一個可以輸入多行文字的控制元件) |
<label> |
為表單中的各個控制元件定義標題 |
<fieldset> |
定義一組相關的表單元素，並使用邊框包裹起來 |
<legend> |
定義<fieldsel>元素的標題 |
<select> |
定義下拉選單 |
<optgroup> |
定義選項組 |
<option> |
定義下拉選單中的選項 |
<button> |
定義一個可以點選的按鈕 |
<datalist> |
指定一個預先定義的輸入控制元件選項列表 |
<keygen> |
定義表單的金鑰對生成器欄位 |
<output> |
定義一個計算結果 |
表單示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="./userinfo.php" method="POST">
<!-- 文字輸入框控制元件 -->
<label>使用者名稱： </label><input name="username" type="text"><br>
<!-- 密碼框控制元件 -->
<label>密 碼： </label><input name="password" type="password"><br>
<!-- 下拉選單控制元件 -->
<label>性 別：</label>
<select name="sex">
<option value="1">男</option>
<option value="2">女</option>
<option value="3">未知</option>
</select>
<br>
<!-- 核取方塊控制元件 -->
<label>愛 好：</label>
<input type="checkbox" name="hobby" value="1">聽音樂
<input type="checkbox" name="hobby" value="2">看電影
<input type="checkbox" name="hobby" value="3">運動
<br>
<!-- 單選按鈕控制元件 -->
<label>學 歷：</label>
<input type="radio" name="education" value="1">小學
<input type="radio" name="education" value="2">中學
<input type="radio" name="education" value="3">本科
<input type="radio" name="education" value="4">碩士
<input type="radio" name="education" value="5">博士
<br>
<!-- 按鈕 -->
<input type="submit" value="提 交">  
<input type="reset" value="重 置">
</form>
</body>
</html>
列表標籤
有序列表
<ol>+<li>標籤
<ol>標籤是用來表示有序列表，有序列表的每一項前面都會有一個數字表示這一項是這個列表的第幾個。其中的<li>表示列表的每一項，前面預設使用阿拉伯數字- 一般都是
<ol>和<li>一起出現，在有序列表中可以包含圖片，文字，連結，另一個列表。
無序列表
<ul>+<li>標籤
<ul>無序列表中沒有順序之分，每一項前面使用●表示，一般都是跟<li>標籤配合使用的。其中<li>表示列表的每一項，前面使用●符號作為每一項的標記
定義列表
<dl>+<dt>+<dd>標籤
<dl>標籤是用於建立列表的，定義的列表由標題和描述兩部分組成，描述是對標題的解釋，標題是最描述的總結和提煉<dt>是定義標題的<dd>是定義描述的、- 一般情況下，每個
<dt>搭配一個<dd>,一個<dl>可以包含多對<dt>和<dd>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>這裡存放了一個網頁的標題</title>
</head>
<body>
<dl>
<dt>有序列表示例</dt>
<dd>
<ol>
<li>有序列表第一項</li>
<li>有序列表第二項</li>
<li>有序列表第三項</li>
</ol>
</dd>
<dd>
上面定義了3個有序列表
</dd>
<dt>無序列表示例</dt>
<dd>
<ul>
<li>無序列表第一個</li>
<li>第二個</li>
<li>第三個</li>
</ul>
</dd>
<dd>上面定義了3個無序列表</dd>
<dt>為啥沒有定義列表的，因為它本身就是</dt>
</dl>
</body>
</html>
