HTML 教程：基础标签
什么是 HTML
HTML（Hypertext Markup Language），中文名超文本標記語言，是一種用于結構化 Web 網頁及其內容的標記語言。
嚴格意義上講，HTML 并不是一門編程語言，而是一種用于定義內容結構的標記語言。它由一系列的元素所構成，通過標簽與內容組合得到我們所需效果，使其以某種形式呈現。
HTML 中的基礎標簽
既然說了 HTML 是由一系列的元素組成，那我們就來看看元素相關的內容。
元素又是由一對標簽加上內容所共同構成，以下是一個簡單的文本標簽示例。
該元素中，主要組成部分如下：
- 開始標簽：由標簽名稱，大于號、小于號所組成，表示元素從此處開始生效。
- 結束標簽：類似于開始標簽，只是在標簽名之前多了一個斜杠 /，表示元素的結尾。
- 內容：元素的內容。
以下就來看看，HTML 中的各種常用標簽。
<!DOCTYPE html>
放在 HTML 文件中的首行，主要用于標識文檔類型。
<html>
HTML 文檔中的根標簽，包含了整個頁面的所有內容，其他所有標簽都包含在 html 標簽中。
<head>
這個元素中的內容對用戶是不可兼得，主要用于設置網頁字符編碼、CSS 樣式、頁面描述、搜索關鍵字等信息。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML 標題</title></head> </html><body>
網站主體內容，如果想讓我們的內容顯示在網頁中讓其他用戶在訪問該界面時看見，則內容需要寫在該標簽中，主要包括文本、圖形、視頻或其他內容。
以下是一個在網頁中顯示內容的實例。
<!DOCTYPE html> <html><body>公眾號：村雨遙</body> </html><title>
網頁標題，在 head 標簽中設置后，打開網頁時將顯示為網頁標題。
以下是一個實例。
<!DOCTYPE html> <html><head><title>HTML 標題</title></head> </html><p>
文本標簽，用于定義段落。該標簽會自動在其前后創建一些空白，瀏覽器將自動添加這些空間。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML 標題</title></head><body><p>這是一段文本</p></body> </html>標題
此處的標題不同與上邊的 title 標簽，title 設置的主要是網頁標題，二次數的標題主要是是針對 body 標簽中的標題。
這里的標題又可以分為 6 級，其對應標簽分別是：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML 標題</title></head><body><h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3><h4>四級標題</h4><h5>五級標題</h5><h6>六級標題</h6></body> </html></br>
表示換行，不同于 title 等標簽，它是一個單標簽，即開始標簽和結束標簽都是同一個，單詞放在標簽名之前。
<!DOCTYPE html> <html><body>公眾號</br>村雨遙</body> </html><img>
表示圖片標簽，通過該屬性我們可以在網頁中添加一張圖片。
此外，img 標簽提供 src 屬性用于設置圖片路徑，height 屬性設置圖片高度，width 屬性設置圖寬度。為了防止圖片失效造成誤解，我們還可以給圖片添加一個提示，此時使用 alt 屬性即可。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML 標題</title></head><body><imgsrc="https://p26-passport.byteacctimg.com/img/user-avatar/e10e488ad0fe9e3f7e55641f34a23806~300x300.image" width="100" height="100"/></body> </html> <!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML 標題</title></head><body><img src="img/1.jpg" width="100" height="100" alt="這里是一張圖片" /></body> </html><a>
在某一個網頁中，我們要通過超鏈接來跳轉到另一個頁面，則此時需要用到 <a> 標簽，當然該標簽中最重要的 href 屬性也不能少，它用于指示跳轉的目標網頁。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><a href="https://cunyu1943.github.io/JavaPark">JavaPark(Java 自學指南)</a></body> </html>列表
列表可以分為有序列表和無序列表，其中有序列表是由 ol 標簽標識。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML 標題</title></head><body><ol><li>《網球王子》</li><li>《灌籃高手》</li><li>《鬼滅之刃》</li></ol></body> </html>有序列表中，可以在 ol 標簽中添加 start 屬性，用于表示從第幾位開始，type 屬性用于標識所要顯示的類型。
| 1 | 顯示類型為數字類型 |
| A | 顯示類型為大寫字母類型 |
| a | 顯示類型為小寫字母類型 |
| I | 顯示類型為大寫羅馬數字類型 |
| i | 顯示類型為小寫羅馬數字類型 |
除開有序列表之外，還有無序列表，無序列表以 ul 標識。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML 標題</title></head><body><ul><li>嵩山派</li><li>泰山派</li><li>恒山派</li></ul></body> </html>無序列表雖然沒有順序之分，但是同樣提供了 type 屬性。
| disc | 小圓黑點，默認顯示方式 |
| circle | 空心圓圈 |
| square | 小黑方形 |
<b>
要實現對內容加粗，可以使用 <b> 標簽。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><b>重點</b>提醒</body> </html><u>
有時需要對內容做下劃線處理，則可以使用 <u> 標簽。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><u>下劃線</u> 展示</body> </html><i>
為了將文本以斜體的方式顯示給瀏覽器，可以使用 <i> 標簽。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><i>世界上只有一種真正的英雄主義，就是認清了生活的真相后還依然熱愛它 -- 羅曼.羅蘭</i></body> </html>上下標
有時候我們需要在網頁中顯示數學或者化學公式，那么此時需要用到上下標，其中上標用標簽 <sup> 表示，下標用標簽 <sub> 表示。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"></head><body>x<sub>1</sub><sup>2</sup> + x<sub>2</sub><sup>2</sup> = 100;</body> </html><table>
表格標簽 <table> 中又含有多個子標簽，常用的子標簽有如下。
- th：表頭列
- tr：行
- td：列
同樣的，表格標簽還提供了以下這些常用的屬性，用于給表格增加樣式。但現在大多都是用 CSS 來對表格進行修飾，所以這些屬性簡單了解即可，不用太過深入。
| border | 表格邊框的粗細 |
| width | 表格的寬度 |
| cellspacing | 單元格間距 |
| cellpadding | 單元格填充 |
<form>
<form> 表示文檔中的一個區域，主要包含交互空間，用來向服務器提交信息。<form> 標簽通常包含一個或者多個表單標簽，常用的表單標簽如下：
| <input> | 輸入框 |
| <textarea> | 文本域 |
| <button> | 按鈕 |
| <select> | 單選框 |
其中 action 屬性用來處理表單提交的 URL，method 屬性表示使用何種 HTTP 方式來提交表單，常用的值有 post 和 get。
總結
本文介紹了 HTML 的定義，然后對 HTML 中常用的標簽進行了舉例學習。
總結
以上是生活随笔為你收集整理的HTML 教程：基础标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jquery-210812-05---j
- 下一篇： chrome浏览器关闭安全模式