【整理+总结】pink老师前端三件套之HTML笔记（二）HTML标签
本筆記整理自pink老師前端課程【黑馬程序員pink老師前端入門教程，零基礎必看的h5(html5)+css3+移動端前端視頻教程】 https://www.bilibili.com/video/BV14J4114768/?share_source=copy_web&vd_source=fa9140cd462dd1671714ea50d46fe8fc
| （一）HTML簡介 | https://blog.csdn.net/weixin_42771853/article/details/128199710 |
目錄
- 一、 HTML預備知識
- 1. 基本語法規范
- 2. 基本結構標簽
- 3. VSCode 工具生成骨架標簽新增代碼
- 3.1 文檔類型聲明標簽
- 3.2 lang 語言種類
- 3.3 charset 字符集
- 二、HTML基礎標簽
- 1. 標題標簽
- 2. 段落和換行標簽
- 3. 文本格式化標簽
- 4.注釋和特殊字符號
- 5. 超鏈接標簽
- 5.1 鏈接的語法格式
- 5.2 鏈接分類
- 6. 圖像標簽和路徑
- 6.1 圖像標簽
- 6.2 路徑
- 7. div 和 span 標簽
- 三、HTML高階標簽
- 1. 表格標簽
- 1.1 表格的基本語法
- 1.2 表格屬性
- 1.3 表格結構標簽
- 1.4 合并單元格
- 2. 列表標簽
- 2.1 無序列表
- 2.2 有序列表
- 2.3 自定義列表
- 3. 表單標簽
- 3.1 表單組成
- 3.2 表單域
- 3.3 表單控件
- 3.3.1 `<input>` 表單元素
- 3.3.2 `<select>`下拉表單元素
- 3.3.3 `<textarea>` 文本域元素
- 四、搜索優化
- 1. TDK 標簽 SEO 優化
- 1.1 title 網站標題
- 1.2 description 網站說明
- 1.3 keywords 關鍵字
- 2. LOGO SEO 優化
一、 HTML預備知識
1. 基本語法規范
2. 基本結構標簽
每個網頁都會有一個基本的結構標簽（也稱為骨架標簽），頁面內容也是在這些基本標簽上書寫。
| html /html | HTML標簽 | 頁面中最大的標簽，稱為根標簽 |
| head /head | 文檔的頭部 | 注意在head標簽中必須要設置的是title |
| title /title | 文檔的標題 | 讓頁面擁有一個屬于自己的網頁標題 |
| body /body | 文檔的主體 | 元素包含文檔的所有內容，頁面內容基本放于此 |
3. VSCode 工具生成骨架標簽新增代碼
3.1 文檔類型聲明標簽
!<DOCTYPE> 文檔類型聲明，告訴瀏覽器使用何種 HTML 版本來顯示網頁。
<!DOCTYPE html>此代碼表明：當前頁面采用的是 HTML5 版本來顯示網頁。
注意：
3.2 lang 語言種類
用來顯示當前文檔顯示的語言。
<html lang="zh-CN"><html lang="en"></html></html>3.3 charset 字符集
<meta charset="UTF-8" />字符集（character set）是多個字符的集合，以便計算機能夠識別和存儲各種文字。
在<head>標簽內，可以通過<meta>標簽的charset 屬性來設置文檔使用何種字符編碼。
charset常用的值有：GBK、UTF-8，其中UTF-8被稱為萬國碼，基本包含了全世界所有國家需要用到的字符。
二、HTML基礎標簽
1. 標題標簽
為了使網頁具有語義化，經常使用標題標簽，HTML 提供 6 個等級的網頁標題標簽即 <h1>-<h6>。
**特點：
2. 段落和換行標簽
- 在 html 中，<p> 標簽用于定義段落，將整個網頁分成若干個段落。
p 指paragraph，意為段落。把文字有條理的顯示出來就需要將文字分段顯示。
特點：
- 在 html 中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后才自動換行。如果希望 某段文本強制換行顯示，就需要使用換行標簽 <br/>。
<br/> 是 break 縮寫，意為打斷、換行。
特點：
3. 文本格式化標簽
| 加粗 | <strong></strong>或<b></b> | 更推薦<strong>，語義更強烈 |
| 斜體 | <em></em>或<i></i> | 更推薦使用<em>，語義更強烈 |
| 刪除線 | <del></del>或<s><s/> | 更推薦使用<del>，語義更強烈 |
| 下劃線 | <ins></ins>或<u></u> | 更推薦使用<ins>，語義更強烈 |
4.注釋和特殊字符號
注釋: <!--注釋--> VSCode 中快捷鍵：Ctrk + /
字符實體
| | 空格 |
| < | < |
| > | > |
| © | ? |
補充：（使用較少，按需查閱）
5. 超鏈接標簽
5.1 鏈接的語法格式
a 是單詞 anchor 的簡寫，是錨的意思。
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>| href | 指定鏈接地址 url，為必須屬性。 |
| target | 指定頁面打開方式，_self為默認值，_blank為在新窗口中打開 |
5.2 鏈接分類
- 在鏈接文本的 href 屬性中，設置屬性值為 #名字 的形式，如：<a href="#two">第二季</a>。
- 找到目標位置標簽，里面添加一個 id 屬性 = 剛才的名字 ，如：<h3 id="two">第二季介紹</h3>
6. 圖像標簽和路徑
6.1 圖像標簽
在 HTML 標簽中，<img /> 標簽用于定義 HTML 標簽頁面中的圖像。
<img src="圖像url" />標簽內屬性
| src | 圖片路徑 | 必須屬性 |
| alt | 文本 | 替換文本，當圖片不顯示時顯示文字 |
| title | 文本 | 提示文本。鼠標放到圖像上顯示文字 |
| width | 像素 | 圖像寬度 |
| height | 像素 | 圖像高度 |
| border | 像素 | 圖像邊框粗細 |
圖像標簽屬性注意點：
6.2 路徑
- 相對路徑： 以引用文件位置為參考基礎，而建立出來的目錄路徑。是圖片相對于 HTML 頁面的位置。
| 同級路徑 | 同一級 | |
| 下一級路徑 | / | 圖像文件位于HTML文件下一級 |
| 上一級路徑 | ../ | 圖像文件位于HTML文件上一級 |
- 絕對路徑： 是指目錄下的絕對位置，直接到達目標位置，通常是從盤符開始的路徑或者完整的網絡地址。
例如，D:\web\img\logo.gif或完整的網絡地址“http://www.itcast.cn/images/logo.gif”。
7. div 和 span 標簽
<div> 和 <span> 是沒有語義的，它們是一個盒子，用來裝內容的。
div 是 division 的縮寫，表示分割、分區。span 意思是跨度、跨距。
<div>這是頭部</div> <span>今日價格</span>特點：
1. div 標簽用來布局，一行只能放一個 div大盒子。
2. span 標簽用來布局，一行可以多個 span小盒子。
三、HTML高階標簽
1. 表格標簽
1.1 表格的基本語法
1.2 表格屬性
只作了解，后期通過 CSS 來設置。 這些屬性都要寫到 <table></table> 標簽中
| align | left、center、right | 表格元素對齊方式 |
| border | 1或"" | 規定是否有邊框，默認為""，表示沒有邊框 |
| cellpadding | 像素值 | 規定單元邊沿與其內容之間空白，默認1px |
| cellspacing | 像素值 | 規定單元格之間的空白，默認為2px |
| width | 像素值或百分比 | 規定表格寬度 |
| hight | 像素值或百分比 | 規定表格高度 |
1.3 表格結構標簽
場景：表格可能很長，將表格分割為表格頭部和表格主題兩大部分。
<thead> 表示頭部區域，<tbody> 表示主體區域，更好區分表格結構。
注意：
1.4 合并單元格
- 跨行合并：rowspan=“合并單元格個數”
- 跨列合并：colspan=“合并單元格個數”
合并三部曲：
2. 列表標簽
2.1 無序列表
<ul> 標簽標識 HTML 頁面項目中的無序列表，一般以項目符號呈現列表項，而列表項使用<li>標簽定義。
<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li> </ul>注意：
2.2 有序列表
使用 <ol> 標簽來定義有序列表，<li> 來定義列表項。
<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li> </ol>與無序列表類似，有自己的樣式屬性，通過 CSS 設置。
2.3 自定義列表
自定義列表的列表項前沒有任何項目符號。
<dl> 定義描述列表，與 <dt> 和 <dd> 標簽配合使用。
<dl><dt>名詞1</dt><dd>名詞1解釋1</dd><dd>名詞1解釋2</dd> </dl>注意
3. 表單標簽
3.1 表單組成
在 HTML 中，一個完整的表單通常由表單域、表單控件（也稱為表單元素）和 提示信息3個部分構成。
3.2 表單域
表單域是一個包含表單元素的區域。 使用 <form> 標簽用于定義表單域，以實現用戶信息的收集和傳遞。
<form>標簽會將它范圍內的表單元素信息提交給服務器。
常用屬性：
| action | url地址 | 指定接受并處理表單數據的服務器的 url 地址 |
| method | get/post | 設置表單數據的提交方式 |
| name | 名稱 | 用于指定表單名稱，區分同一個頁面中的多個表單域 |
注意：
3.3 表單控件
3.3.1 <input> 表單元素
<input> 標簽用于收集用戶信息。
input 標簽包含 type 屬性，決定了輸入字段的不同形式：***文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等。
<input type="屬性值" />- input 標簽為單標簽
- type 屬性設置不同屬性值來指定不同控件類型
type 常用屬性值
| text | 輸入字段。用戶可輸入文本，默認寬度為 20 個字符。 |
| button | 可點擊按鈕，后期結合js搭配使用。 |
| radio | 單選按鈕 |
| checkox | 復選框 |
| password | 密碼字段。字符被掩碼。 |
| file | 定義輸入字段和“瀏覽”按鈕，供文件上傳 |
| submit | 提交按鈕。會把表單數據發送到服務器。 |
| reset | 重置按鈕，清除表單所有數據。 |
| image | 定義圖像形式的提交按鈕 |
| hidden | 定義隱藏的輸入字段 |
input 的其他屬性
| name | 自定義 | 定義 input 元素名稱 |
| value | 自定義 | 規定 input 元素的值（可以顯示出來） |
| checked | checked | 規定此 input 元素首次加載時應當被選中 |
| maxlength | 正整數 | 規定輸入字段字符的最大長度 |
label標簽
<label> 標簽為 input 元素定義標注。
<label> 標簽用于綁定一個表單源深路，當點擊 label 標簽內的文本時，瀏覽器自動將焦點轉到或者選擇對應的表單元素上，提升用戶體驗。
核心： <lable>標簽的 for 屬性與input元素的 id 屬性相同。
3.3.2 <select>下拉表單元素
<select><option>選項1</option><option>選項2</option><option>選項3</option> </select>注意
3.3.3 <textarea> 文本域元素
<textarea rows="3" cols="20">文本內容 </textarea>- cols=“每行的字符數”，rows=“顯示的行數”。**我們在實際開發中不會使用，都是用 CSS 來改變大小。
四、搜索優化
1. TDK 標簽 SEO 優化
SEO（Search Engine Optimization），即搜索引擎優化，是一種利用搜索引擎的規則提高網站在有關搜索引擎內自然排名的方式。
SEO 的目的是對網站進行深度優化，從而幫助網站獲得免費流量，進而在搜索引擎上提升網站排名，提高網站知名度。
頁面必須有三個標簽用來進行 SEO 優化。
- title
- description
- keyword
1.1 title 網站標題
title 具有不可替代性，是我們內頁的第一個重要標簽，是搜索引擎了解網頁的入口和對網頁主題歸屬的最佳判斷點。
建議：網站名（產品名）- 網站的介紹（盡量不要超過30個漢字）
例如：
- 京東(JD.COM) - 綜合網購首選-正品低價、品質保障、配送及時、輕松購物！
- 小米商城 - 小米5s、紅米Note 4、小米MIX、小米筆記本官方網站
1.2 description 網站說明
簡要說明我們網站主要是做什么的。
我們提倡，description 作為網站的總體業務和主題概括，多采用“我們是…”、“我們提供…”、“×××網作為…”、“電話：010…”之類語句。
例如：
<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!">1.3 keywords 關鍵字
- keywords 是頁面關鍵詞，是搜索引擎的關注點之一。
- keywords 最好限制為6～8 個關鍵詞，關鍵詞之間用英文逗號隔開，采用關鍵詞1,關鍵詞2 的形式。
例如：
<meta name= " keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東">2. LOGO SEO 優化
- 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后overflow:hidden ，淘寶的做法。
- 方法2：直接給font-size: 0; 就看不到文字了，京東的做法。
總結
以上是生活随笔為你收集整理的【整理+总结】pink老师前端三件套之HTML笔记（二）HTML标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 你是人见人捏的“软柿子”吗
- 下一篇： Python算法教程第三章知识点：求和式