【HTML】重点知识内容~快速上手
推薦前端學習路線如下：
HTML、CSS、JavaScript、noodJS、組件庫、JQuery、前端框架（Vue、React）、微信小程序和uniapp、TypeScript、webpack 和 vite、Vue 和 React 碼源、NextJS、React Native、后端內容。。。。。。
HTML基本結構：
<!-- doc document 文檔 ?type 類型 ? html hyper text markup language 超文本標記語言 --><html></html> ? ? ?根<head></head> ? ? ?頭部 ?放置頁面相關信息<body></body> ? ? ?身體 ?放置內容<title><title> ? ? 標題網頁結構展示：
<!DOCTYPE html> <html><head><meta charset="utf-8"><!-- meta 元 charest 字符集 utf-8 字符編碼 --><title></title></head><body>【HTML】重點知識內容~快速上手</body> </html>常用標簽：
h1~h6
表示一級到六級標簽 文本標題標簽自帶加粗，有自己的文本大小，并且獨占一行，有默認間距
<h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6>p
標識一個段落(段落與段落之間有段間距)；
默認情況，在網頁上，頁面上的內容不會按照我們寫的代碼進行換行。`回車` 會被渲染成一個 `空格`；
<p>這是一段文字</p><p>這是一段文字 </p>img
image的縮寫，img是一個單標簽，功能是在一個網頁上展示一個圖片。
屬性
- src
source的縮寫，表示圖片的源，在src可以設置圖片地址 - alt
當圖片加載失敗時顯示對應的alt中的文本內容 - title
當鼠標放在圖片上時，顯示一段提示文字 - width 寬
- height 高
src
可以是絕對路徑，也可以是相對路徑
- 絕對路徑
可以使用電腦中的文件的路徑?E:\H5\02_HTML\代碼\xxx.jpg
也可以使用網絡路徑?https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png?未來我們的網頁上，最后上線，幾乎都是網絡地址 - 相對路徑
一般情況下，我們在做靜態頁面時，頁面中的背景圖，圖標等不常更改的資源。一般存放在項目中，做相對路徑引入。
相對路徑記住兩個概念?./?和?../，分別表示當前目錄和上一級目錄。一般我們在正常的項目結構中。
推薦一個使用方法，在src中直接輸入?./?接下來根據提示選擇對應的文件夾及對應的文件
- 項目文件夾- css- img- js- 網頁1.html- 網頁2.html大小設置
我們可以給圖片添加width和height兩個屬性，設置圖片的寬高
- 數字
- 百分比
注意！！！寬高只要設置一邊，就會等比縮放，如果都設置，除非都是等比例縮放，否者會變形
<img src="圖片地址" alt="圖片加載失敗時顯示的文字" title="鼠標懸停后顯示的內容" width="100" height="100"/>文字的樣式屬性（強調屬性）
em i
可以讓文字傾斜，em表示強調，i表示文字斜體。在項目中，很多人把?i?作為圖標展示的標簽。
stong b
可以讓文字加粗，stong表示強調，b表示文字加粗。
br
可以在網頁中實現換行，就像是一個回車。
如果我們在項目開發中，主動頻繁使用?br，說明寫的有問題
hr
分割線，在網頁上實現一條橫線，也很少使用
<em>傾斜</em> <i>傾斜</i> <strong>加粗</strong> <b>加粗</b> <br> <hr>特殊標簽：
2<sup>3</sup> 上標 0<sub>2</sub> 下標 <del></del> 刪除線 <u></u> 下劃線 <s><s> 刪除線特殊符號
  空格 > 大于號 < 小于號 © 版權a
超鏈接，在網頁上，存在著很多的超鏈接。一定要會用
屬性
- href 必填屬性
超鏈接跳轉路徑的設置，可以是網址，也可以是相對路徑 - target 設置窗口的打開方式； _blank 頁面打開時在新的窗口中打開，如果不設置，則在當前窗口打開； _self 默認值，打開本窗口
- title
當鼠標放在超鏈接上時，顯示一段提示文字
列表
- 有序列表
- 無序列表
- 定義列表
無序列表在網頁中應用最多
有序列表
<ol type="" start=""><li></li><li></li><li></li> </ol>type類型：
type="A/a/I/i/1"
start="4"
定義開始位置，屬性值必須是數字。
無序列表
<ul type=""><li></li><li></li><li></li> </ul>type類型：
type="disc" 實心圓
type="circle" 空心圓
type="square" ?方形
type="none" ? 沒有
定義列表
<dl><dt>標題 關鍵詞（可以插圖片和文本）</dt><dd>對內容的詳細解釋</dd><dd></dd><dd></dd><dd></dd><dd></dd> <dl>表格（table）
這是一個重要的標簽，但是前期我們所做的面向用戶的網站中，不常用。
插件：表格寬*高=table>tr*n>td*n
<table><thead><tr><th></th><th></th><th></th><th></th><th></th></tr></thead><tbody><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr></tbody><tfoot></tfoot> </table>在寫表格時，thead , tbody , tfoot 可以省略不寫。
表格的屬性
-width="" ? ? ? ? ? ?表格的寬度
-height="" ? ? ? ? ? 表格的高度
-border="" ? ? ? ? ? 表格的邊框
-bordercolor="" ? ? ?表格邊框的顏色
-bgcolor="" ? ? ? ? ?背景顏色
-cellspacing="" ? ? ?單元格之間的間距
-cellpadding="" ? ? ?內容到邊框的間距
-aligen="" ?left ?center ?right ? ? 水平對齊方式 ?
-valign="" top bottom ?middle ?basline ? ?垂直對齊方式
跨行
如果我們想讓某一個單元格，跨多行，給這個td添加 `rowspan` 可以實現跨行操作
-rowspan="所要合并單元格的行數" ? 合并行
跨列
如果我們想讓某一個單元格，跨多列，給這個td添加 `colspan` 可以實現跨列操作
-cowspan="所要合并單元格的列數" ? 合并列
form表單
表單標簽未來不太常用，因為form已經逐漸被ajax替代了。但是我們前期寫頁面時，還是要使用
我們應該把所有的表單內元素包裹在一個form中（非必須）
<form method="post"></form>method 方式，方法，定義表單提交的方法。
get是獲取
method="get" 從服務器上獲取數據，在數據傳輸的過程中，用可以在地址欄上看到過程，默認傳遞方式，安全性比較低。
post 是傳遞數據
method="post" 向服務器傳送數據，在數據傳遞過程，用戶在地址欄上看不到，安全性比較高。
<form action=""></form>action設置數據傳遞之后給誰？
input(行內塊、置換元素)
input有很多種形態，需要通過type屬性進行控制
<form><input type="text"> </form>type
- text
文本輸入框，最常用，讓用戶在文本框中輸入我們想要獲取的內容 - password
密碼，讓文本以密文顯示（不安全） - radio
單選（必須加一個name屬性,且同組的屬性值必須一樣），多個選項只選其一時使用，如性別 - checkbox
多選，當有多個選項需要選擇時，如愛好 - submit
提交按鈕，自動顯示提交兩個字，可以通過value修改 - reset
重置按鈕，自定顯示重置兩個字，可以通過value修改 - button
普通按鈕，沒有功能，需要通過value配置顯示文本 - file
文件上傳，可以進行本地文件的上傳功能
value
一般情況下，value用來獲取對應用戶輸入的值,用來幫助系統顯示內容。
name
如果我們要使用表單提交，則所有的表單內元素都需要加name屬性
<input type="radio" name="sex" id="qita"><label for="qita">不明</label> 點擊文字即可選中 <label for=""><input type="radio" name="sex" checked>男</label> 方便修改文本樣式placeholder
設置提示信息
button
普通按鈕，如果把button放在表單里，則button自動會有提交功能
<button>按鈕</button> <input type="button"> 兩種的作用相同select > option
下拉選擇框，需要用select包裹多個option
<select><option value="123">選項2</option><option value="123">選項3</option><option value="123">選項1</option><option value="123">選項4</option> 選項顯示在瀏覽器，123是提交給服務器的數據 </select>textarea
文本域，用于輸入多行文本時使用
<textarea></textarea>表單內元素的狀態
- blur
失去焦點 - focus
獲取焦點 - checked 給radio和checkbox添加，用于設置對應選項的選中狀態，添加則表示選中
- selected 給option添加，用于設置默認被選中的選項
- readonly 只讀，添加到輸入框，無法修改內容，只能查看
- disabled 添加到元素上，則對應元素禁用，樣式變灰
頁面劃分
<div>用來劃分頁面區域的</div> <span>修飾獨立小部分內容</span>兩者沒有固定的格式表現。對他應用樣式（CSS）時，他才會產生視覺上的變化。
總結
以上是生活随笔為你收集整理的【HTML】重点知识内容~快速上手的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 5G NSA 和SA 介绍
- 下一篇： HTML5七夕情人节表白网页(烂漫的空中