Node.js中npx命令的使用方法及場景分析
該隨筆為pink老師前端入門教程html篇的筆記
Web標準主要包括結構（Structure）、表現（Presentation）和行為（Behavior）三個方面。
結構：用於對網頁元素進行整理和分類（HTML）
表現：設定網頁元素的版式顏色大小等外觀樣式（CSS）
行為：網頁模型的定義及互動的編寫（JavaScript）
HTML語法規範
所有標籤在<>內且大多數成對出現，如：
<html></html>
HTML基本結構標籤
| 標籤名 | 定義 | 說明 |
|---|---|---|
<html></html> |
HTML標籤 | 根標籤 |
<head></head> |
文件的頭部 | head標籤中我們必須要設定的標籤是title |
<title></title> |
文件的標籤 | 讓頁面擁有一個屬於自己的頁面標籤 |
<body></body> |
文件的主體 | 元素包含文件的所有內容，頁面內容基本都是放到body裡面 |
VSCode 工具生成骨架標籤新增程式碼
<!DOCTYPE html> <html lang="en"> <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>
-
<!DOCTYPE>標籤文件型別宣告標籤，用於告訴瀏覽器HTML版本
當前頁面採用html5顯示：
<!DOCTYPE html>注意：
- 該宣告位於文件最前面，處於
<html>標籤之前 <!DOCTYPE>不是一個HTML標籤，是文件型別宣告標籤
- 該宣告位於文件最前面，處於
-
lang語言定義當前文件的顯示語言
- en定義語言為英文
- zh-CN定義語言為中文
其實對於文件顯示，en也可以顯示中文，zh-CN也可以顯示中文
-
charset字符集在
<head>標籤內，可以通過<meta>標籤的charset屬性來規定HTML文件應該使用哪種字元編碼<meta charset="UTF-8">
HTML常用標籤
-
標題標籤
<h1>-<h6>標籤語義：作為標題使用，並依據重要性遞減
特點：一個標題獨佔一行
-
段落標籤
<p>標籤語義：把文字分段；
特點：文字根據瀏覽器大小自動換行 段落之間保有空隙
-
換行標籤
<br/>標籤語義：強制換行；
特點：單標籤，知識單純的換行，不會插入垂直的間距
-
文字格式化標籤
<strong>或<b>加粗<em>或<i>傾斜<del>或<s>刪除線<ins>或<u>下劃線 -
<div>和<span>沒有語義，像一個盒子。div（division）分割、分割槽；span跨度
div單獨佔一行，是一個大盒子；span一行可以放多個，是一個小盒子
-
影象標籤
<img src="影象URL"/>為單標籤src為
<img>標籤的必須屬性，用於指定影象檔案的路徑和檔名其他屬性：
屬性 屬性值 說明 src 圖片路徑 必須屬性 alt 文字 替換文字，影象不能顯示的文字 title 文字 提示文字，滑鼠放到圖片上，顯示的文字 width 畫素 設定影象的寬度 heigh 畫素 設定影象的高度 border 畫素 設定影象的邊框粗細 提示：
- 寬度和高度只修改一個時，另外一個等比例縮放；
- border不常用；
- 屬性之間沒有順序，採用鍵值對的格式（key = "value"）
相對路徑：以引用檔案所在的位置為參考基礎，而建立處的目錄路徑
相對路徑分類 符號 說明 同一級 如 <img src="baidu.gif" />下一級 /如 <img src="images/baidu.gif" />上一級 ../如 <img src="../baidu.gif" />絕對路徑：例如
"C:\image\img.jpg"或者完整的網路地址
-
超連結標籤
<a>：從一個頁面連結到另一個頁面(anchor 錨)<a href="跳轉目標" target="目標視窗彈出方式">文字或影象</a>href屬性為必須屬性，target預設為
_self(_blank：在新視窗開啟)連結分類：
- 外部連結：
<a href="http://www.baidu.com">百度</a> - 內部連結：網站內部頁面直接相互連線
<a href="index.html">首頁</a> - 空連線：
<a href="#">空連線</a> - 下載連線：如果href內為壓縮包或者檔案等形式
<a herf="img.zip">下載</a> - 網頁元素的連線：在網頁中的各種網頁元素，如文字、影象、表格、音訊等都可以新增超連結
<a href="#"><img src="img.jpg"/></a> - 錨點連線：快速定位到頁面中的某個位置
- 在連結文字的href屬性中，設定屬性名為#名字的形式：
<a href="#one">第一</a> - 找到目標位置標籤，裡面新增一個id 屬性 = 名字 ：
<h3 id="one"> 第一個</h3>
- 在連結文字的href屬性中，設定屬性名為#名字的形式：
- 外部連結：
註釋和特殊字元
註釋：
<!--laala--> 快捷鍵 ctrl+/
特殊字元：
空格符
小於號<<
大於號>>
表格標籤
目的：用來展示資料
基本語法：
<table>
<tr>
<td>單元格內的文字</td>
...
</tr>
...
</table>
<table></table>定義表格<tr></tr>定義表格中的行，必須放在<table></table>標籤內<td></td>定義表格中的單元格，必須在<tr></tr>標籤內- td（table data）
表頭單元格標籤
表頭單元格里的文字加粗居中顯示，一般位於表格的第一行或第一列
<th></th> (放在<tr></tr>標籤內)
表格屬性用css（與html屬性名相同）；html中用於table標籤內
| 屬性名 | 屬性值 | 描述 |
|---|---|---|
| align | left、center、right | 規定表格內容的對齊方式 |
| border | "1"或"" | 規定表格單元是否有邊框，預設為""（沒有邊框） |
| cellpadding | 畫素值 | 規定單元格邊沿與其內部之間的空白，預設為1 |
| cellspacing | 畫素值 | 規定單元格之間的空白，預設為2 |
| width | 畫素值或百分比 | 規定表格的寬度 |
| height | 畫素值或百分比 | 規定表格的高度 |
表格結構標籤
將表格分為表格頭部和表格主體兩大部分，必須放在<table></table>標籤內
<thead>標籤 ：表格的頭部區域，內部必須包含<tr></tr>標籤
<tbody>標籤 ：表格的主體區域，用於存放資料本體
合併單元格
把多個單元格合併，主要方式：跨行合併rowspan 、跨列合併colspan
目標單元格：寫合併程式碼的地方
- 跨行：最上側單元格為目標單元格
- 跨列：最左側單元格為目標單元格
合併單元格步驟：
- 確定跨行合併/跨列合併
- 找到目標單元格，寫上合併方式=合併的單元格數量：
<td colspan="2"></td> - 刪除多餘單元格
列表標籤
目的：用來佈局
分為三大類：無序列表、有序列表和自定義列表
無序列表
<ul>標籤表示HTML頁面中專案的無序列表，一般會以專案符號呈現列表項，而列表項使用<li>標籤定義。
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
...
</ul>
<ul>中只能放<li>，直接輸入其他標籤或者文字是不允許的<li>相對於一個容器，可以容納任何元素- 無序列表會帶有自己的樣式屬性，但在實際使用時會使用CSS來設定
有序列表
<ol>用於有序列表，列表順序用數字表示，用<li>定義列表項
<ol>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
...
</ol>
<ol>標籤內只能巢狀<li>，直接輸入其他標籤或者文字是不允許的<li>相對於一個容器，可以容納任何元素- 有序列表會帶有自己的樣式屬性，但在實際使用時會使用CSS來設定
自定義列表
常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何專案符號
<dl>標籤用於定義描述列表，與<dt>(定義專案/名字)和<dd>(描述每一個專案/名字)一起使用。
基本語法如下：
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
</dl>
<dl>標籤內只能巢狀<dt>和<dd>- 通常一個
<dt>對於多個<dd>
表單標籤
目的是為了收集使用者資訊
一個完整的表單由表單域。表單控制元件（表單元素）和提示資訊3個部分組成。
表單域
是一個包含表單元素的區域
<form>標籤用於定義表單域，實現使用者資訊的收集和傳遞
<form>會吧它範圍內的表單元素資訊提交給伺服器
<form action="url地址" method="提交方式" name="表單域名稱">
各種表單元素控制元件
</form>
-
action：用於指定接收並處理表單資料的伺服器程式的url地址
-
method：用於設定表單資料的提交方式，其取值為get或post
-
name：指定表單名稱，用於區分同一頁面多個表單域
input輸入表單元素
主要用於收集使用者資訊
<input type="屬性值" />
<input/>為單標籤- type屬性設定不同的屬性值來指定不同的控制元件型別
type屬性的屬性值：
| 屬性值 | 描述 |
|---|---|
| button | 定義可點選按鈕（多數情況下，用於通過JavaScript啟動指令碼） |
| checkbox | 定義複選框 |
| file | 定義輸入欄位和"瀏覽"按鈕，供檔案上傳 |
| hidden | 定義隱藏的輸入欄位 |
| image | 定義影象形式的提交按鈕 |
| password | 定義密碼欄位，該欄位中的字元被掩碼 |
| radio | 定義單選按鈕 |
| reset | 定義重置按鈕，重置會清除表單的所有資料 |
| submit | 定義提交按鈕，提交會把表單資料傳送到伺服器 |
| text | 定義單行輸入欄位，使用者可輸入文字，預設20個字元 |
<input>標籤其他屬性：
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| name | 由使用者自定義 | 定義input元素名稱 |
| value | 由使用者自定義 | 定義input元素值 |
| checked | checked | 規定此input元素首次載入時應當被選中 |
| maxlength | 正整數 | 規定輸入欄位的字元最大長度 |
- 單選按鈕radio和複選框checkbox必須有相同的name。
- radio與checkbox設定value時，並不在頁面顯示，主要用於後臺。
- name和value是每個表單元素都有的屬性值，主要給後臺人員使用。
- 單選按鈕和複選框可以設定checked屬性，當頁面開啟時預設選中
<label>標籤
為input元素定義標註，用於增強使用者體驗
<label>用於繫結一個表單元素，當點選<label>標籤內的文字時，瀏覽器就會自動將焦點轉到或者選擇對應的表單元素上，增強了使用者體驗。
<label for="nan">男</label>
<input type="radio" name="sex" id="nan" />
<label> 標籤的for屬性與相關元素的id屬性相同
select下拉表單元素
目的：節約頁面空間
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
<select>內至少包含一對<option>- 在
<option>中定義selected="selected"時，當前項為預設選中項
textarea文字域元素
可以定義多行文字輸入
<textarea rows="3" cols="20">
文字內容
</textarea>
- cols="每行中的字元數" ，rows="顯示的行數" （實際應用中都是用css來改變大小）