HTML基础知识点
1、HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言 (Hyper Text Markup Language) HTML 不是一種編程語言，而是一種標記語言
(markup language)
HTML 使用標記標簽來描述網頁
2、HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
HTML 標簽是由尖括號包圍的關鍵詞
HTML 標簽通常是成對出現的 標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
HTML存在自結束標簽，即不寫自結束的 /
3、HTML基本結構
<!--<!DOCTYPE html>為HTML5的文檔聲明（HTML的注釋可以用快捷鍵Ctrl+/生成）（注意：注釋：開始括號之后（左邊的括號）需要緊跟一個嘆號，結束括號之前（右邊的括號）不需要）--> <!DOCTYPE html> <!--<html lang="en">是告訴瀏覽器你寫的是英文網站，運行時會彈出“是否翻譯”，若不想彈出則應該改為<html lang="zh">--> <html lang="ch"><head><!-- <meta charset="UTF-8">是設置字符集與編輯器保持一致，若編碼解碼的字符集不一致將會出現亂碼問題 --><meta charset="UTF-8"><title>Hard Coder</title> </head> <!-- VSCode對齊快捷鍵為:Shift + Alt + F--> <!--HTML樣式 的background-color屬性為元素定義了背景顏色;text-align 屬性規定了元素中文本的水平對齊方式--><body style="background-color:yellow"><!--HTML標題標簽是通過 <h1> - <h6> 標簽進行定義的，重要性依次遞減，一般只用到h1-h3 --><!-- hgroup標簽將h標題分組 --><hgroup><h1 style="background-color:red;text-align: center">This is heading 1</h1><h2 style="background-color:red;text-align: center">This is heading 2</h2><h3 style="background-color:red;text-align: center">This is heading 3</h3><h4 style="background-color:red;text-align: center">This is heading 4</h4><h5 style="background-color:red;text-align: center">This is heading 5</h5><h6 style="background-color:red;text-align: center">This is heading 6</h6></hgroup><!--段落標簽，用p表示，是一個塊元素（即獨占一行） --><p style="background-color:green">這是段落1。</p><!-- <hr /> 標簽在 HTML 頁面中創建水平線 --><hr /><p style="background-color:green">這是段落2。</p><hr /><p style="background-color:green">這是段落3。</p><hr /><!--<br /> 標簽用于換行，<br /> 元素是一個空的 HTML元素 --><p style="background-color:green">這是段落4。<br />這是段落5。</p><!-- <b>定義粗體文本 --><b>This text is bold</b><br /><!-- <strong>定義加重語氣 --><strong>This text is strong</strong><br /><!-- <em>定義著重文字 --><em>This text is emphasized</em><br /><!-- <big>定義 大號字--><big>This text is emphasized</big><br /><!-- <small>定義 小號字 --><small>This text is emphasized</small><br />這是長的引用：<!--<blockquote>定義長的引用；瀏覽器通常會對 <blockquote> 元素進行縮進處理 --><blockquote>這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。</blockquote><!-- <q>定義短的引用；瀏覽器通常會為 <q> 元素包圍引號。 -->這是短的引用：<q>這是短的引用。</q> </body></html>顯示效果：
4、HTML 標簽可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。屬性總是以名稱/值對的形式出現，比如：name=“value”。屬性總是在 HTML 元素的開始標簽中規定。
屬性值應該始終被包括在引號內。雙引號是最常用的，也可以使用單引號。在某些個別的情況下，比如屬性值本身就含有雙引號，則必須使用單引號。
HTML 標簽參考手冊
5、HTML 超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
當把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。
我們通過使用 <a> 標簽在 HTML 中創建鏈接。
兩種使用 <a> 標簽的方式：
通過使用 href 屬性 - 創建指向另一個文檔的鏈接；
通過使用 name 屬性 - 創建文檔內的書簽。
效果展示：
6、在 HTML 中，圖像由 <img> 標簽定義。
<img> 是空標簽，即它只包含屬性，并且沒有閉合標簽。（img 屬于替換元素，屬于行內元素和替換元素之間的一種元素，即img這段代碼被具體的東西給替換了）
要在頁面上顯示圖像，需要使用源屬性（src），src 指 "source"且源屬性的值是圖像的 URL 地址。URL 指存儲圖像的位置。瀏覽器將圖像顯示在文檔中圖像標簽出現的地方。如果你將圖像標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。
alt 屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。當瀏覽器無法載入圖像時，替換文本屬性可告訴讀者他們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。請注意，如果把鼠標指針移動到圖像上，大多數瀏覽器會顯示 “alt” 文本。
顯示效果：
7、HTML 創建表格，表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
如果不定義邊框屬性，表格將不顯示邊框。表格的表頭使用 <th> 標簽進行定義。大多數瀏覽器會把表頭顯示為粗體居中的文本。在一些瀏覽器中，沒有內容的表格單元顯示得不太好。如果某個單元格是空的（沒有內容），瀏覽器可能無法顯示出這個單元格的邊框。
顯示效果：
8、HTML 支持有序、無序和定義列表。
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。無序列表始于 <ul> 標簽。每個列表項始于 <li>。
有序列表也是一列項目，列表項目使用數字進行標記。有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。
自定義列表不僅僅是一列項目，而是項目及其注釋的組合。自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd>。
注意：列表之間可以相互嵌套。
顯示效果：
8、內聯框架的iframe 用于在網頁內顯示網頁，其中屬性src指定要引入的網頁路徑，frameborder 只有0/1 兩個值分別表示顯示與不顯示邊框。
效果展示：
9、HTML的語義標簽
10、HTML 字符實體（相當于進行轉義）
HTML實體符號參考手冊
11、HTML媒體
WAVE 是因特網上最受歡迎的無壓縮聲音格式，所有流行的瀏覽器都支持它。如果需要未經壓縮的聲音（音樂或演講），應該使用 WAVE 格式。
MP3 是最新的壓縮錄制音樂格式。MP3 這個術語已經成為數字音樂的代名詞。
效果顯示：
12、HTML表單用于收集用戶輸入。<form> 元素定義 HTML 表單，表單元素指的是不同類型的 input 元素、復選框、單選按鈕、提交按鈕等。
表單元素語法：
<input type="text"（input元素類型）name="fname"（input元素名稱） value="text"（input元素的值）/>
文本框-語法：
密碼框-語法：
<input type="password "(密碼框) name="pass"(密碼框的名稱) size="20"(密碼框的長度) />單選按鈕-語法：
<input name="gen" type="radio"(單選按鈕框) value="男"(值) checked(單選按鈕選中狀態) />男 <input name="gen" type="radio" value="女" />女復選框-語法：
<input type="checkbox"(復選框) name="interest" value="sports"(值)/>運動 <input type="checkbox" name="interest" value="talk" checked(復選框選中狀態) />聊天 <input type="checkbox" name="interest" value="play"/>玩游戲列表框-語法：
<select(列表框) name="列表名稱" size="行數"> <option value="選項的值" selected="selected"(默認選中項)>…</option > <option(選項) value="選項的值">…</option > </select>按鈕-語法：
<input type="reset" (重置按鈕) name="butReset" value="reset按鈕"(按鈕上顯示的文字)> <input type="submit"(提交按鈕) name="butSubmit" value="submit按鈕"> <input type="button"(普通按鈕) name="butButton" value="button按鈕"/>多行文本域-語法：
<textarea(多行文本域) name="showText" cols="x"(顯示的列數) rows="y"(顯示的行數)>文本內容 </textarea >文件域-語法：
<form action="" method="post" enctype="multipart/form-data"（表單編碼屬性）><p><input type="file"(文件域) name="files" /><input type="submit" name="upload" value="上傳" /></p> </form>郵箱-語法：
<p>郵箱:<input type="email"（郵箱） name="email"/></p> <input type="submit"/>網址-語法：
<p>請輸入你的網址:<input type="url"（網址） name="userUrl"/></p> <input type="submit"/>數字-語法：
<p>請輸入數字:<input type="number"(數字) name="num" min="0"(允許的最小值) max="100"(允許的最大值) step(合法的數字間隔)="10"/></p> <input type="submit"/>滑塊-語法：
<p>請輸入數字:<input type="range"(滑塊) name="range1" min="0"(允許的最小值) max="10"(允許的最大值) step(合法的數字間隔)="2"/></p> <input type="submit"/>搜索框-語法：
<p>請輸入搜索的關鍵詞:<input type="search"(搜索框) name="sousuo"/></p> <input type="submit"/>總結
- 上一篇： html图片自动适应窗口大小,使用CSS
- 下一篇： es6知识总结 模块 承诺加载