當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML基础知识点

發布時間：2023/12/14 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML基础知识点小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、HTML 是用來描述網頁的一種語言。

HTML 指的是超文本標記語言 (Hyper Text Markup Language) HTML 不是一種編程語言，而是一種標記語言
(markup language)
HTML 使用標記標簽來描述網頁

2、HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。

HTML 標簽是由尖括號包圍的關鍵詞
HTML 標簽通常是成對出現的標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
HTML存在自結束標簽，即不寫自結束的 /

3、HTML基本結構

<!DOCTYPE html>  <html lang="ch"><head><meta charset="UTF-8"><title>Hard Coder</title> </head>  <body style="background-color:yellow"><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 style="background-color:green">這是段落1。</p><hr /><p style="background-color:green">這是段落2。</p><hr /><p style="background-color:green">這是段落3。</p><hr /><p style="background-color:green">這是段落4。<br />這是段落5。</p><b>This text is bold</b><br /><strong>This text is strong</strong><br /><em>This text is emphasized</em><br /><big>This text is emphasized</big><br /><small>This text is emphasized</small><br />這是長的引用：<blockquote>這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。</blockquote>這是短的引用：<q>這是短的引用。</q> </body></html>

顯示效果：

4、HTML 標簽可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。屬性總是以名稱/值對的形式出現，比如：name=“value”。屬性總是在 HTML 元素的開始標簽中規定。
屬性值應該始終被包括在引號內。雙引號是最常用的，也可以使用單引號。在某些個別的情況下，比如屬性值本身就含有雙引號，則必須使用單引號。
HTML 標簽參考手冊

5、HTML 超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
當把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。
我們通過使用 <a> 標簽在 HTML 中創建鏈接。

兩種使用 <a> 標簽的方式：

通過使用 href 屬性 - 創建指向另一個文檔的鏈接；
通過使用 name 屬性 - 創建文檔內的書簽。

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Hard Coder</title> </head><body><a href="https://www.baidu.com/">超鏈接1</a><br /><a href="./practice.html">超鏈接2</a><br /><a href="Test\test1.html">超鏈接3</a><br /><a href="http://www.w3school.com.cn/" target="_blank">超鏈接4</a><br /><br /><p><a href="#C4">查看 Chapter 4。</a></p><h2>Chapter 1</h2><p>This chapter explains ba bla bla</p><h2>Chapter 2</h2><p>This chapter explains ba bla bla</p><h2>Chapter 3</h2><p>This chapter explains ba bla bla</p><h2><a id="C4">Chapter 4</a></h2><p>This chapter explains ba bla bla</p><h2>Chapter 5</h2><p>This chapter explains ba bla bla</p><h2>Chapter 6</h2><p>This chapter explains ba bla bla</p><h2>Chapter 7</h2><p>This chapter explains ba bla bla</p><h2>Chapter 8</h2><p>This chapter explains ba bla bla</p><h2>Chapter 9</h2><p>This chapter explains ba bla bla</p><h2>Chapter 10</h2><p>This chapter explains ba bla bla</p><h2>Chapter 11</h2><p>This chapter explains ba bla bla</p><h2>Chapter 12</h2><p>This chapter explains ba bla bla</p><h2>Chapter 13</h2><p>This chapter explains ba bla bla</p><h2>Chapter 14</h2><p>This chapter explains ba bla bla</p><h2>Chapter 15</h2><p>This chapter explains ba bla bla</p><h2>Chapter 16</h2><p>This chapter explains ba bla bla</p><h2>Chapter 17</h2><p>This chapter explains ba bla bla</p><a href="#">回到頂部</a></body></html>

效果展示：

6、在 HTML 中，圖像由 <img> 標簽定義。
<img> 是空標簽，即它只包含屬性，并且沒有閉合標簽。（img 屬于替換元素，屬于行內元素和替換元素之間的一種元素，即img這段代碼被具體的東西給替換了）
要在頁面上顯示圖像，需要使用源屬性（src），src 指 "source"且源屬性的值是圖像的 URL 地址。URL 指存儲圖像的位置。瀏覽器將圖像顯示在文檔中圖像標簽出現的地方。如果你將圖像標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。
alt 屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。當瀏覽器無法載入圖像時，替換文本屬性可告訴讀者他們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。請注意，如果把鼠標指針移動到圖像上，大多數瀏覽器會顯示 “alt” 文本。

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Hard Coder</title> </head> <body background="huawen.png"><img src="wiliuqi.jpg" width=500px><br /><img src="wuliuiq.gif" height=200px><br /><img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" /><h2>未設置對齊方式的圖像：</h2><p>圖像 <img src="eg_cute.gif"> 在文本中</p><h2>已設置對齊方式的圖像：</h2><p>圖像 <img src="eg_cute.gif" align="bottom"> 在文本中</p><p>圖像 <img src="eg_cute.gif" align="middle"> 在文本中</p><p>圖像 <img src="eg_cute.gif" align="top"> 在文本中</p><p><img src ="eg_cute.gif" align ="left"> 帶有圖像的一個段落。圖像的 align 屬性設置為 "left"。圖像將浮動到文本的左側。</p><p><img src ="eg_cute.gif" align ="right"> 帶有圖像的一個段落。圖像的 align 屬性設置為 "right"。圖像將浮動到文本的右側。</p> </body></html>

顯示效果：

7、HTML 創建表格，表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
如果不定義邊框屬性，表格將不顯示邊框。表格的表頭使用 <th> 標簽進行定義。大多數瀏覽器會把表頭顯示為粗體居中的文本。在一些瀏覽器中，沒有內容的表格單元顯示得不太好。如果某個單元格是空的（沒有內容），瀏覽器可能無法顯示出這個單元格的邊框。

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Hard Coder</title> </head><body><h4>這個表格沒有邊框：</h4><table><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table><h4>水平表頭：</h4><table border="1"><tr><th>姓名</th><th>電話</th><th>性別</th></tr><tr><td>Bill Gates</td><td>123 456 789</td><td>男</td></tr></table><h4>垂直表頭：</h4><table border="1"><tr><th>姓名</th><td>Bill Gates</td></tr><tr><th>電話</th><td>123 456 789</td></tr><tr><th>性別</th><td>男</td></tr></table><h4>這個表格有一個標題和粗邊框：</h4><table border="6"><caption>我的標題</caption><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table><h4>橫跨兩列的單元格：</h4><table border="1"><tr><th>姓名</th><th colspan="2">電話</th></tr><tr><td>Bill Gates</td><td>123 456 789</td><td>123 456 789</td></tr></table><h4>橫跨兩行的單元格：</h4><table border="1"><tr><th>姓名</th><td>Bill Gates</td></tr><tr><th rowspan="2">電話</th><td>123 456 789</td></tr><tr><td>123 456 789</td></tr></table><h4>背景顏色：</h4><table border="1" bgcolor="red"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table><h4>背景圖像：</h4><table border="1" background="huawen.png"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table><table width="400" border="1"><tr><th align="left">消費項目</th><th align="right">一月</th><th align="right">二月</th></tr><tr><td align="left">衣服</td><td align="right">100</td><td align="right">100</td></tr><tr><td align="left">化妝品</td><td align="right">300</td><td align="right">300</td></tr><tr><td align="left">食物</td><td align="right">500</td><td align="right">500</td></tr><tr><th align="left">總計</th><th align="right">900</th><th align="right">900</th></tr></table> </body></html>

顯示效果：

8、HTML 支持有序、無序和定義列表。
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。無序列表始于 <ul> 標簽。每個列表項始于 <li>。

有序列表也是一列項目，列表項目使用數字進行標記。有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。

自定義列表不僅僅是一列項目，而是項目及其注釋的組合。自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd>。
注意：列表之間可以相互嵌套。

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Hard Coder</title> </head><body><h4>Disc 項目符號列表：</h4><ul type="disc"><li>蘋果</li><li>香蕉</li><li>檸檬</li><li>桔子</li></ul><h4>Circle 項目符號列表：</h4><ul type="circle"><li>蘋果</li><li>香蕉</li><li>檸檬</li><li>桔子</li></ul><h4>Square 項目符號列表：</h4><ul type="square"><li>蘋果</li><li>香蕉</li><li>檸檬</li><li>桔子</li></ul><h4>數字列表：</h4><ol><li>蘋果</li><li>香蕉</li><li>檸檬</li><li>桔子</li></ol><h4>字母列表：</h4><ol type="A"><li>蘋果</li><li>香蕉</li><li>檸檬</li><li>桔子</li></ol><h4>小寫字母列表：</h4><ol type="a"><li>蘋果</li><li>香蕉</li><li>檸檬</li><li>桔子</li></ol><h4>大寫羅馬字母列表：</h4><ol type="I"><li>蘋果</li><li>香蕉</li><li>檸檬</li><li>桔子</li></ol><h4>小寫羅馬字母列表：</h4><ol type="i"><li>蘋果</li><li>香蕉</li><li>檸檬</li><li>桔子</li></ol><h4>一個嵌套列表：</h4><ul><li>咖啡</li><li>茶<ul><li>紅茶</li><li>綠茶<ul><li>中國茶</li><li>非洲茶</li></ul></li></ul></li><li>牛奶</li></ul><h2>一個定義列表：</h2><dl><dt>計算機</dt><dd>用來計算的儀器 ... ...</dd><dt>顯示器</dt><dd>以視覺方式顯示信息的裝置 ... ...</dd></dl></body></html>

顯示效果：

8、內聯框架的iframe 用于在網頁內顯示網頁，其中屬性src指定要引入的網頁路徑，frameborder 只有0/1 兩個值分別表示顯示與不顯示邊框。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Hard Coder</title> </head> <body><iframe src="https://www.w3school.com.cn" frameborder="0" width=800 height=400></iframe></body> </html>

效果展示：

9、HTML的語義標簽

10、HTML 字符實體（相當于進行轉義）

HTML實體符號參考手冊
11、HTML媒體

WAVE 是因特網上最受歡迎的無壓縮聲音格式，所有流行的瀏覽器都支持它。如果需要未經壓縮的聲音（音樂或演講），應該使用 WAVE 格式。
MP3 是最新的壓縮錄制音樂格式。MP3 這個術語已經成為數字音樂的代名詞。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Hard Coder</title> </head> <body><audio controls><source src="還是會想你 .mp3" > </audio><video controls><source src="敬禮.mp4"></video></body> </html>

效果顯示：

12、HTML表單用于收集用戶輸入。<form> 元素定義 HTML 表單，表單元素指的是不同類型的 input 元素、復選框、單選按鈕、提交按鈕等。

表單元素語法：

文本框-語法：

密碼框-語法：

單選按鈕-語法：

<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>

按鈕-語法：

多行文本域-語法：

<textarea(多行文本域) name="showText" cols="x"(顯示的列數) rows="y"(顯示的行數)>文本內容 </textarea >

文件域-語法：

郵箱-語法：

網址-語法：

<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基础知识点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： html图片自动适应窗口大小,使用CSS
下一篇： 2017年html5行业报告,云适配发布