目錄
HTML基礎語法
一、網頁
-
網頁是指在英特網上根據一定的規則，使用HTML等制作的用於展示特定內容相關的網頁集合
-
HTML不是一種編程語言，而是一種標記語言（標記標簽）；HTML是指超文本標記語言——可以加入圖片、音樂等超越了文本限制|超級鏈接文本，它是用來描述一個網頁的一種語言
-
瀏覽器：IE,Chrome,Firefox
- 瀏覽器內核（渲染引擎）：負責讀取網頁內容，整理信息，計算網頁的顯示方式並顯示頁面
-
web標准：結構、表現和行為相分離
-
標准 說明 結構 結構用於對網頁元素進行整理和分類，HTML等 表現 表現用於設置網頁元素的板式、顏色、大小等外觀樣式，CSS等 行為 行為是指網頁元素的定義及交互的編寫，JavaScript等
-
頁面整體分為兩部分：
-
一部分是head部分，主要是頁面的整體信息和配置，內容不會出現在瀏覽器內部。
-
一部分是body部分，這部分內容則會在瀏覽器中展示出來
二、HTML標簽
1、標簽語法規范
HTML標簽是有尖括號包圍的關鍵字
HTML通常是成對出現的，稱為雙標簽
<!-- <html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center> -->
<!-- 語法規范 -->
<html>
</html>
有些特殊的標簽必須是單個標簽，稱為單標簽
<br><hr><img><input><param><meta><link>
標簽關系
- 包含關系
<head>
<title></title>
</head>
- 並列關系
<head></head>
<body></body>
2、HTML基本結構標簽
（骨架標簽）
| 標簽名 | 定義 | 說明 |
|---|---|---|
| <html></html> | HTML標簽 | 頁面最大的標簽，我們稱為根標簽 |
| <head></head> | 文檔的頭部 | 注意在head標簽中我們必須要設置的標簽是title |
| <title></title> | 文檔的標題 | 讓頁面擁有一個屬於自己的網頁標題 |
| <body></body> | 文檔的主體 | 元素包括文檔的所有內容，頁面內容基本都是放到body標簽里面的 |
<!DOCTYPE html> <!-- 文檔類型聲明標簽 -->
<html lang="en"> <!-- 設定網頁的語言，中文為lang="zh-CN" -->
<head>
<meta charset="UTF-8"> <!-- 編碼格式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <!-- 文檔的標題 -->
</head>
<body>
</body>
</html>
3、開發工具
VS Code的使用
快捷方式
- VS Code生成HTML骨架的快捷方式：!
-
新建文件：Ctrl + N
-
保存文件：Ctrl + S
-
格式化代碼：Shift + Alt + F
插件的安裝
- Chinese插件：漢化VS Code
- Open in Browser插件：右鍵選擇瀏覽器打開
- Auto Rename Tag插件：自動重命名配對HTML/XML標簽
4、HTML常用標簽
語義標簽
-
標題標簽<h1> - <h6>（head）——作為標題使用，並且重要性依次遞減
-
<h1>一級標簽</h1>
-
-
段落標簽<p>（paragraph）——可以把HTML文檔分為若干個段落
-
<p>我是段落標簽</p>
-
-
換行標簽<br>（break）——文本強制換行
-
開始<br>換行
-
-
文本格式化標簽
語義 標簽 說明 加粗 <strong></strong>或<b></b> 更推薦使用<strong>標簽加粗，語義更強烈 傾斜 <em></em>或<i></i> 更推薦使用<em>標簽傾斜，語義更強烈 刪除線 <del></del>或<s></s> 更推薦使用<del>標簽添加，語義更強烈 下划線 <ins></ins>或<u></u> 更推薦使用<ins>標簽添加，語義更強烈 -
<strong>加粗</strong> <em>傾斜</em> <del>刪除線</del> <ins>下划線</ins>
-
盒子標簽
沒有語義，一個盒子，用來裝內容的。
- <div>：用來布局，一行只能放一個<div>，大盒子
- <span>：用來布局，一行可以放多個<span>，小盒子
圖像標簽
語法：<img src="圖像URL">
| 屬性 | 說明 |
|---|---|
| src | 必須屬性，指定圖片文件的路徑和文件名（超鏈接） |
| alt | 替換文本，圖片不能顯示時顯示該內容（文本） |
| title | 提示文本，鼠標放到圖像上時顯示的文字（文本） |
| width | 設置圖像的寬度（像素值或百分比） |
| height | 設置圖像的高度（像素值或百分比） |
| border | 設置圖像邊框的粗細（像素值） |
圖像標簽可以擁有多個屬性，必須寫在標簽名后面
屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開
屬性采取鍵值對的格式，即key="value"的格式，屬性="屬性值"
路徑
- 目錄文件夾：就是普通的文件夾，里面只不過是放了我們做網頁所需要的相關素材，比如html文件、圖片等
- 根目錄：打開目錄文件夾的第一層就是根目錄
- 相對路徑：以html文件所在位置作為參考基礎，而建立的目錄路徑
- 同級相對路徑：文件名
- 下一級相對路徑：./文件夾/文件名
- 上一級相對路徑：../文件名
- 絕對路徑：指目錄下的絕對位置，直接到達目標位置，通常是從盤符開始的路徑
超鏈接標簽
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
| 屬性 | 作用 |
|---|---|
| href | 用於指定鏈接目標的url地址（必須屬性），當為標簽應用href屬性時，它就有了超鏈接功能 |
| target | 用於指定鏈接頁面的打開方式，其中_self為默認值，_blank為在新窗口打開 |
鏈接類型
| 類型 | 作用 |
|---|---|
| 空鏈接（#） | 使得文本等元素呈現鏈接形式 |
| 外部鏈接 | 訪問外部網站 |
| 內部鏈接 | 網站內部頁面之間的相互鏈接，直接鏈接內部名稱即可 |
| 下載鏈接 | 如果href里面地址是一個文件或者壓縮包，會下載文件 |
| 網頁元素鏈接 | 在網頁中的各種網頁元素，如文本、圖像、表格、音頻、視頻等（當做文本類型放入即可）都可以添加超鏈接 |
| 錨點鏈接 | 點擊鏈接，可以快速定位到頁面中的位置 |
錨點鏈接的實現
- 在鏈接文本的href屬性中，設置屬性值為#名字的形式，如<a href="#test">第二級</a>
- 找到目標位置標簽，里面添加id="剛才的名字"，如<h3 id="test">第二級目錄</h3>
注釋標簽
<!-- 要注釋的內容 --> 快捷鍵：Ctrl + /
特殊字符
| 字符 |
數字參考 |
實體參考 |
描述 |
| " | " | " | Quotation mark |
| & | & | & | Ampersand |
| < | < | < | Less than |
| > | > | > | Greater than |
| (空白) |   | | Non-breaking space |
| ¡ | ¡ | ¡ | Inverted exclamation |
| ¢ | ¢ | ¢ | Cent sign |
| £ | £ | £ | Pound sterling |
| ¤ | ¤ | ¤ | General currency sign |
| ¥ | ¥ | ¥ | Yen sign |
| ¦ | ¦ | ¦ | broken vertical bar |
| § | § | § | Section sign |
| ¨ | ¨ | ¨ | Diæresis / umlaut |
| © | © | © | Copyright |
| ª | ª | ª | Feminine ordinal |
| « | « | « | Left angle quote |
| ¬ | ¬ | ¬ | Not sign |
| | ­ | &sny; | Soft hyphen |
| ® | ® | ® | Registered trademark |
| ¯ | ¯ | ¯ | Macron accent |
| ° | ° | ° | Degree sign |
| ± | ± | ± | Plus or minus |
| ² | ² | ² | Superscript two |
| ³ | ³ | ³ | Superscript three |
| ´ | ´ | ´ | Acute accent |
| µ | µ | µ | Micro sign |
| ¶ | ¶ | ¶ | Paragraph sign |
| · | · | · | Middle dot |
| ¸ | ¸ | ¸ | Cedilla |
| ¹ | ¹ | &supl; | Superscript one |
| º | º | º | Masculine ordinal |
| » | » | » | Right angle quote |
| ¼ | ¼ | ¼ | Fraction one quarter |
| ½ | Ç | ½ | Fraction one half |
| ¾ | ¾ | ¾ | Fraction three-quarters |
| À | À | ¿ | Inverted question mark |
| À | À | À | Capital A, grave accent |
| Á | Á | Á | Capital A, acute accent |
| Â | Â | Â | Capital A, circumflex |
| Ã | Ã | Ã | Capital A, tilde |
| Ä | Ä | Ä | diæresis / umlau |
| Å | Å | Å | Capital A, ring |
| Æ | Æ | Æ | Capital AE, ligature |
| Ç | Ç | Ç | Capital C, cedilla |
| È | È | È | Capital E, grave accent |
| É | É | É | Capital E, acute accent |
| Ê | Ê | Ê | Capital E, circumflex |
| Ë | Ë | Ë | diæresis / umlau |
| Ì | Ì | Ì | Capital I, grave accent |
| Í | Í | Í | Capital I, acute accent |
| Î | Î | Î | Capital I, circumflex |
| Ï | Ï | &Imul; | diæresis / umlau |
| Ð | Ð | Ð | Capital ETH, Icelandic |
| Ñ | Ñ | Ñ | Capital N, tilde |
| Ò | Ò | Ò | Capital O, grave accent |
| Ó | Ó | Ó | Capital O, acute accent |
| Ô | Ô | Ô | Capital O, circumflex |
| Õ | Õ | Õ | Capital O, tilde |
| Ö | Ö | Ö | diæresis / umlau |
| × | × | × | Multiplication sign |
| Ø | Ø | Ø | Capital O, slash |
| Ù | Ù | Ù | Capital U, grave accent |
| Ú | Ú | Ú | Capital U, acute accent |
| Û | Û | Û | Capital U, circumflex |
| Ü | Ü | Ü | diæresis / umlau |
| Ý | Ý | Ý | Capital Y, acute accent |
| Þ | Þ | Þ | Capital Thorn,Icelandic, |
| ß | ß | ß | German sz |
| à | à | à | Small a, grave accent |
| á | á | á | Small a, acute accent |
| â | â | â | Small a, circumflex |
| ã | ã | ã | Small a, tilde |
| ä | ä | ä | diæresis / umlau |
| å | å | å | Small a, ring |
| æ | æ | æ | Small ae ligature |
| ç | ç | ç | Small c, cedilla |
| è | è | è | Small e, grave accent |
| é | é | é | Small e, acute accent |
| ê | ê | ê | Small e, circumflex |
| ë | ë | ë | diæresis / umlau |
| ì | ì | ì | Small i, grave accent |
| í | í | í | Small i, acute accent |
| î | î | î | Small i, circumflex |
| ï | ï | ï | diæresis / umlau |
| ð | ð | ð | Small eth, Icelandic |
| ñ | ñ | ñ | Small n, tilde |
| ò | ò | ò | Small o, grave accent |
| ó | ó | ó | Small o, acute accent |
| ô | ô | ô | Small o, circumflex |
| õ | õ | õ | Small o, tilde |
| ö | ö | ö | diæresis / umlau |
| ÷ | ÷ | ÷ | Division sign, |
| ø | ø | ø | Small o, slash |
| ù | ù | ù | Small u, grave accent |
| ú | ú | ú | Small u, acute accent |
| û | û | û | Small u, circumflex |
| ü | ü | ü | diæresis / umlau |
| ý | ý | ý | Small y, acute accetn |
| þ | þ | þ | Small thorn, Icelandic |
| ÿ | ÿ | ÿ | diæresis / umlaut |
表格標簽
- <table></table>：用於定義表格標簽
- <tr></tr>：標簽用於定義表格中的行，必須嵌套在<table>標簽中
- <td></td>：用於定義表格中的單元格，必須嵌套在<tr>標簽中
- <th></th>：表示HTML表格中的表頭部分，一般位於第一行或第一列
<table align="center" border="1">
<tr><th>屬性名</th><th>屬性值</th><th>描述</th></tr>
<tr><td>align</td><td>left、center、right</td><td>規定表格相對周圍元素的對齊方式</td></tr>
<tr><td>border</td><td>1 或 ""</td><td>規定表格單元格之間是否擁有邊框，默認為""，表示沒有邊框</td></tr>
<tr><td>cellpadding</td><td>像素值</td><td>規定單元格邊沿與其內容之間的空白，默認像素1</td></tr>
<tr><td>cellspacing</td><td>像素值</td><td>規定單元格之間的空白，默認2像素</td></tr>
<tr><td>width</td><td>像素值或百分比</td><td>規定表格的寬度</td></tr>
</table>
表格的屬性（了解）
屬性要寫到<table>里面去
| 屬性名 | 屬性值 | 描述 |
|---|---|---|
| align | left、center、right | 規定表格相對周圍元素的對齊方式 |
| border | 1 或 "" | 規定表格單元格之間是否擁有邊框，默認為""，表示沒有邊框 |
| cellpadding | 像素值 | 規定單元格邊沿與其內容之間的空白，默認像素1 |
| cellspacing | 像素值 | 規定單元格之間的空白，默認2像素 |
| width | 像素值或百分比 | 規定表格的寬度 |
結構標簽
在表格標簽中，分別用：
-
<thead>標簽表示表格的頭部區域：標簽內部必須擁有<tr>標簽，一般位於第一行
-
<tbody>標簽表示把表格的主體區域：主要放數據的主體
其要在<table>標簽里面
合並單元格
-
方式
-
跨行合並：rowspan="合並單元格的個數"
-
跨列合並：colspan="合並單元格的個數"
-
-
目標單元格
-
跨行：最上側單元格為目標單元格，寫合並代碼
-
跨列：最左側單元格為目標單元格，寫合並代碼
-
-
步驟
-
先確定跨行合並還是跨列合並
-
找到目標單元格，寫上合並方式=合並單元格的數量，例如：<td colspan="2"></td>
-
刪除多余的單元格
<table> <tr><th></th><th clospan="2"></th></tr> <tr><td></td><td></td><td></td></tr> </table> -
列表標簽
無序列表*
在HTML標簽中，<ul>（unordered list）標簽表示HTML頁面中項目的無序列表，一般會以項目符號呈現表項，而列表使用<li>標簽定義列表項
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>···</li>
</ul>
- 無需列表的各個列表項之間沒有順序區別之分，是並列的
- <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽輸入其他標簽或者文字的做法是不允許的
- <li>與<ul>之間相當於一個容器，可以容納所有的元素
- 無序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用CSS來設置
有序列表
在HTML標簽中，<ol>（ordered list）標簽用於定義有序列表，列表順序以數字來顯示，並且使用<li>標簽來定義列表項
<ol>
<li>列表1</li>
<li>列表2</li>
<li>···</li>
</ol>
- <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>標簽中輸入其他標簽或者文字的做法是不允許的
- <li>與</li>之間相當於一個容器，可以容納所有元素
- 有序列表會帶有自己樣式屬性，但在實際使用時，我們會使用CSS來設置
自定義列表*
自定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號
在HTML標簽中，<dl>標簽用於定義描述列表（或定義列表），該標簽會與<dt>（定義項目/名字）和<dd>（描述每一個項目/名字）一起使用
<dl>
<dt>名詞</dt>
<dd>名詞解釋1</dd>
<dd>名詞解釋2</dd>
</dl>
- <dl></dl>里面只能包含<dt>和<dd>
- <dt>和<dd>個數沒有限制，經常是一個<dt>對應多個<dd>
表單標簽
使用表單目的是為了搜集用戶信息
在HTML中，一個完整的表單通常由表單域、表單控件（也稱為表單元素）和提示信息3個部分構成
表單域
表單域是一個包含表單元素的區域
在HTML標簽中，<form>標簽用於定義表單域，以實現用戶信息的搜集和傳遞
<form>會把它范圍內的表單元素信息提交給服務器
<form action="url地址" method="提交方式" name="表單域名稱">
各種表單控件
</form>
在我們寫表單元素之前，應該有個表單域把他們進行包含
表單域是<form>標簽
常用屬性
| 屬性 | 屬性值 | 作用 |
|---|---|---|
| action | url地址 | 用於指定接收並處理表單數據的服務器程序的url地址 |
| method | get/post | 用於設置表單數據的提交方式 |
| name | 名稱 | 用於指定表單的名稱，以區分同一個頁面中的多個表單域 |
表單控件
在表單域中可以定義各種表單元素，這些表單元素就是允許用戶在表單中輸入或者選擇的內容控件
-
input輸入表單元素
-
在<input>標簽（單標簽）中，包含一個type屬性，根據不同type屬性值，輸入字段擁有很多形式
-
（提示：）<input type="屬性值"> <!--比如--> name:<input type="text" name="username"> passwd:<input type="password" name="pwd"> sex:boy<input type="radio" name="sex">gril<input type="radio" name="sex">屬性值 描述 button 定義可點擊按鈕（多數情況下，用於通過JavaScript啟動腳本） checkbox 定義復選框 file 定義輸入字段和瀏覽按鈕，供文件上傳 hidden 定義隱藏的輸入字段 image 定義圖像形式的提交按鈕 password 定義密碼字段。該字段中的字符被掩碼 radio 定義單選按鈕 reset 定義重置按鈕。重置按鈕會清除表單中的所有數據 submit 定義提交按鈕。提交按鈕會把表單數據發送到服務器 text 定義單行的輸入字段，用戶可以在其中輸入文本，默認寬度為20個字符 date 選擇時間，年月日 - radio：選項 <input type="radio">------------------|\checked="checked"此屬性當打開頁面時可以默認選中這個按鈕
- checkbox：選項 <input type="checkbox" >-----|/
-
除type屬性外，<input>標簽還有其他很多屬性
屬性 屬性值 描述 name 由用戶定義 定義input元素的名稱 value 由用戶定義 規定input元素的值，默認顯示的文字 checked checked 規定此input元素首次加載時應當被選中 maxlenth 正整數 規定輸入字段中的字符的最大長度 name和value是每個表單元素都有的屬性值，主要給后台人員使用
name表單元素的名字，要求單選按鈕和復選框要有相同的name值
<label>標簽：其為input元素定義標注（標簽）
<label>標簽用於綁定一個表單元素，當點擊<label>標簽內的文本時，瀏覽器就會自動將焦點（光標）轉到或者選擇對應表單元素上，用來增加用戶體驗
<label for="sex">男</label>
<input type="radio" id="sex" name="sex">
-
-
select下拉表單元素
使用場景：在頁面中，如果多個選項讓用戶選擇，並且想要節約頁面空間時，我們可以使用<select>標簽控件定義下拉列表
<select> <option>選項一</option> <option>選項二</option> </select><select>標簽中至少包含一對<option>
在<option>中定義select="selected"時，當前項即為默認選中項——》<option select="selected">選項<option>
-
textarea文本域元素
使用場景：當用戶輸入內容較多數情況下，我們就不能使用文本框表單了，此時我們可以使用<textarea>標簽
<textarea cols="一行多少個字" rows="行數"> 文本內容 </textarea>- 通過<textarea>標簽可以輕松地創建多行文本輸入框
- cols="每行中的字符數", rows="顯示的行數"，我們在實際開發中不會使用，都是用CSS來改變大小的
三、查閱文檔
經常查閱文檔是有一個非常好的習慣