【筆記】【HTML】html快速入門
阿新 • • 發佈：2022-04-12
前言
此筆記為本人根據B站up主宇哥在學習釋出的【建議收藏】手把手帶你瞭解前端學習路線和時間規劃，學完找工作不是問題視訊所說的前端學習線路，重新對HTML知識進行系統整理。
線路圖：
注意：（標籤含義）
-
白色：-
字型：基礎，必須會。 -
帶星：重中之重，最好能講清楚原理或自己實現。
-
-
紅色：-
字型：有多餘的時間再看。 -
帶星：可以不看。 -
線：不影響學習進度，可以先跳過。
-
注意：
-
由於此前有一定HTML基礎，所以該筆記的內容過於簡略。
-
該筆記內容為路線圖中的白色基礎必會部分。
-
需要詳細學習可以移步：HTML 教程-菜鳥程式設計
常用標籤語法
常用標籤：
p（段落）
- 表示段落
格式：
<p>輸入新段落的內容</p>
注意：
-
p是塊級元素 - 瀏覽器會自動在段落的前後新增空行。
h1-h6（標題）
- 預設所有標題都以粗體顯示
- 字號：
h1>h2>h3>h4>h5>h6 - 每個標題之間的間隔是由瀏覽器預設的CSS製造的。
格式：
<h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6>
注意：
- 建立分級標題時，要避免跳過某些級別。（即避免高跳低，允許低跳到高）
- 不要使用
h1~h6標記副標題、標語以及無法成為獨立標題的子標題。
span（沒有其他合適的元素時才使用它）
- 用於對文件中的行內元素進行組合
- 沒有任何預設格式
- 只適合包圍字詞或短語內容。
格式：
<!--用id唯一地標識span包含的內容-->
<span id="name">建立希望包含在span裡的內容</span>
<!--用類標識-->
<span class="name">建立希望包含在span裡的內容</span>
注意：
- 可以同時新增
class和id屬性 -
class和id的區別
-
class:用於一組元素 -
id:用於標識頁面中單獨的、唯一的元素。
-
img（插入影象）
- 定義頁面中的影象
- 必須屬性
src和alt
格式：
<img src="imgae.url" alt="代替文字" width=”x“ height="y"/>
src:指示影象檔案在伺服器上的位置
alt:提供影象無法顯示時的替代文字
width:指定影象的寬度
height:指定影象的高度
注意：
- 影象必須先上傳到伺服器上，訪問者才可能看到。
- 不要用
alt文字代替影象的caption -
width和height以畫素為單位
a（連結）
- 定義超連結，用於從一個頁面連結到另一個頁面
格式：
<a href="連結地址" rel="連結標籤" title="連結描述"</a>
<!--塊級連結-->
<a href="連結地址" rel="連結標籤" title="連結描述">
<p></p>
<img/>
</a>
href:（指定連結的目標）
-
超文字引用
-
相對URL：指向站內網頁的連結 -
絕對URL：指向其他網站頁面的連結
-
-
當訪問者指向連結，在瀏覽器中、目標URL會顯示在狀態列中。
rel:
-
rel屬性是可選的。 - 不要讓連結的標籤太長。
佈局用到的一些標籤
div
- 定義一個分隔區或者一個區域部分
- 常用與組合塊級元素。
格式：
<div></div>
ul（無序列表)
-
ul預設情況下、無序列表前面顯示實心的圓點。
格式：
<ul>
<li>新增要包含在列表專案內的內容</li>
<li>文字</li>
<li>連結</li>
<li>img元素等</li>
</ul>
ol（有序列表）
-
ol預設使用阿拉伯數字建立帶編號的有序列表
格式：
<ol start="" type="" reversd="">
<li>新增要包含在列表專案內的內容</li>
<li>文字</li>
<li>連結</li>
<li>img元素等</li>
</ol>
start:指定編號起始值。
form（表單）和 input（輸入元素）
form
- 一個包含表單元素的區域
格式：
<form>
input元素
</form>
input
- 輸入型別是由
type定義的
input元素格式：
<input type="型別名 " name="" value="">
type:型別名
| 型別名 | 描述 |
|---|---|
| text | 文字域 |
| password | 密碼欄位 |
| radio | 單選按鈕 |
| checkbox | 複選框 |
| submit | 提交按鈕 |
table（表格）
- 搭配
-
th設定表頭 -
tr控制行數 -
td控制列數
-
格式：
<table border="1">
<tr>
<th>第一列表頭</th>
<th>第二列表頭</th>
</tr>
<tr>
<td>第一行，第一列</td>
<td>第一行，第二列</td>
</tr>
<tr>
<td>第二行，第一列</td>
<td>第二行，第二列</td>
</tr>
</table>
border:邊框屬性，若不定義表格預設無邊框
常用的文字標籤
b（粗體）
- 將文字變為粗體
- 做為最後的選擇，只有在沒有其他標記比較合適時才使用它。
格式：
<b>輸入需要顯示粗體的文字</b>
i（斜體）
- 將文字變為斜體
- 多用於分類名稱、技術術語、外語裡的慣用語、翻譯散文、西方文字中的船舶名稱等。
格式：
<i>輸入需要顯示斜體的文字</i>
small（旁註）
- 表示細則一類的旁註
- 顯示威小字號
- 一定要在符合內容語義的情況下使用，而不是為了減小字號而使用
- 只適用於短語，不要用它標記長的法律宣告。
格式：
<small>輸入表示免責宣告、註解、署名等型別的文字</small>
strong（重要程度）和em（強調文字）
- 表示內容的重要性，標記重要文字。
-
em表示內容的著重點，強調文字 - 兩個標籤既可以單獨使用，也可以一起使用
- 瀏覽器將
strong文字以粗體顯示。
格式：
<!--strong和em一起使用-->
<strong>輸入想標記為<em>輸入想要強調的文字</em>重要內容的文字</strong>
<!--strong和em分開使用-->
<strong>輸入想標記為重要內容的文字</strong><em>輸入想要強調的文字</em>
<!--strong巢狀使用，要比其他的strong文字更為重要-->
<strong>輸入想標記為<strong>輸入想要巢狀的重要內容文字</strong>重要內容的文字</strong>
<!--em巢狀使用-->
<em>輸入想強調<em>輸入想要巢狀的強調文字</em>的文字</em>
注意
- 不要使用
b元素代替strong,不要使用i元素代替em。 - HTML5中，
em表示強調的唯一元素，而strong表示重要程度 -
em用於所有層次的強調，strong用於表示重要性，其他情況使用b和i。
del （刪除線）
- 表示刪除線
- 既可以包圍短語內容（行類元素），又可以包圍塊級別內容的元素。
格式：
<del>新增需要刪除線的文字</del>
code（標記程式碼）
- 短語標標籤，用來定義計算機程式碼文字
格式：
<code>
print("Hello World");
</code>
放在頭部的標籤
title（標題）
- 必需的
- 一個HTML文件中只能有一個
title標籤 - 遺漏
title標籤，文件作為HTML是無效的。
格式：
<head>
<title >文件標題</title>
</head>
style（定義文件樣式資訊）
- 每個 HTML 文件能包含多個
style標籤。
格式：
<head>
<title >文件標題</title>
<style type="text/css">
/*文字樣式*/
</style>
</head>
type:規定樣式型別
script（定義客戶端指令碼）
格式：
<head>
<!--省略部分內容-->
<script src="外部指令碼的URL">
/*指令碼內容*/
</script>
</head>
src:如果使用src屬性，則script元素必須是空的
link（定義兩個連結文件之間的關係）
格式：
<head>
<link charset="字元編碼" href="被連結資源的URL">
</head>
HTML5新標籤和語義化
什麼是語義化？
說白了就是一看到標籤就知道它所定義的內容（當然這個能力需要一定的英語及基礎），如