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

HTML

【整理+总结】pink老师前端三件套之HTML笔记（二）HTML标签

發布時間：2024/3/13 HTML 57 豆豆

生活随笔收集整理的這篇文章主要介紹了【整理+总结】pink老师前端三件套之HTML笔记（二）HTML标签小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本筆記整理自pink老師前端課程【黑馬程序員pink老師前端入門教程，零基礎必看的h5(html5)+css3+移動端前端視頻教程】 https://www.bilibili.com/video/BV14J4114768/?share_source=copy_web&vd_source=fa9140cd462dd1671714ea50d46fe8fc

🔥前端三件套之HTML地址

（一）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. 基本語法規范

HTML 標簽是由尖括號包圍的關鍵詞，例如<html>。

雙標簽：HTML 標簽通常是成對出現的，例如<html>和<html/>，稱為雙標簽。第一個是開始標簽，第二個是結束標簽。

單標簽：有些特殊標簽必須是單個標簽（極少情況），例如<br/>，我們稱之為單標簽。

標簽關系：包含關系和并列關系。

2. 基本結構標簽

每個網頁都會有一個基本的結構標簽（也稱為骨架標簽），頁面內容也是在這些基本標簽上書寫。

標簽名定義說明

html /html	HTML標簽	頁面中最大的標簽，稱為根標簽
head /head	文檔的頭部	注意在head標簽中必須要設置的是title
title /title	文檔的標題	讓頁面擁有一個屬于自己的網頁標題
body /body	文檔的主體	元素包含文檔的所有內容，頁面內容基本放于此

3. VSCode 工具生成骨架標簽新增代碼

3.1 文檔類型聲明標簽

!<DOCTYPE> 文檔類型聲明，告訴瀏覽器使用何種 HTML 版本來顯示網頁。

<!DOCTYPE html>

此代碼表明：當前頁面采用的是 HTML5 版本來顯示網頁。

注意：

<!DOCTYPE> 聲明位于文檔最前面的位置，處于<html>標簽之前。

<!DOCTYPE> 不是一個 HTML 標簽，他就是文檔類型聲明標簽。

3.2 lang 語言種類

用來顯示當前文檔顯示的語言。

en 定義語言為英文。

zh-CN 定義語言為中文。

3.3 charset 字符集

字符集（character set）是多個字符的集合，以便計算機能夠識別和存儲各種文字。

在<head>標簽內，可以通過<meta>標簽的charset 屬性來設置文檔使用何種字符編碼。

charset常用的值有：GBK、UTF-8，其中UTF-8被稱為萬國碼，基本包含了全世界所有國家需要用到的字符。

二、HTML基礎標簽

1. 標題標簽

為了使網頁具有語義化，經常使用標題標簽，HTML 提供 6 個等級的網頁標題標簽即 <h1>-<h6>。

**特點：

加了標題的文字會加粗，字號也會依次變大。

一個標題獨占一行。

<h1>標題標簽</h1> <h1>標題一共六級選,</h1> <h2>文字加粗一行顯。</h2> <h3>由大到小依次減，</h3> <h4>從重到輕隨之變。</h4> <h5>語法規范書寫后，</h5> <h6>具體效果刷新見。</h6>

2. 段落和換行標簽

在 html 中，<p> 標簽用于定義段落，將整個網頁分成若干個段落。

p 指paragraph，意為段落。把文字有條理的顯示出來就需要將文字分段顯示。

特點：

文本在一個段落中會根據瀏覽器窗口的大小自動換行。

段落和段落之間保有空隙。

在 html 中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后才自動換行。如果希望某段文本強制換行顯示，就需要使用換行標簽 <br/>。

<br/> 是 break 縮寫，意為打斷、換行。

特點：

<br/> 是個單標簽。

<br/> 標簽只是簡單地開始新的一行，跟段落不一樣，段落之間會插入一些垂直的間距。

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 鏈接分類

外部鏈接：例如 <a href="http://www.baidu.com">百度</a>。

內部鏈接：網站內部頁面之間的相互鏈接. 直接鏈接內部頁面名稱即可，例如 <a href="index.html">首頁</a>。

空鏈接：#

下載鏈接：地址鏈接的是文件.exe、壓縮包.zip 等。<a href="img.zip">下載文件</a>

網頁元素鏈接：在網頁中的各種網頁元素，如文本、圖像、表格、音頻、視頻等都可以添加超鏈接。<a href="http://www.baidu.com"><img src="img.jpg"/></a>

**錨點鏈接：點擊鏈接，可以快速定位到頁面中的某個位置。

在鏈接文本的 href 屬性中，設置屬性值為 #名字的形式，如：<a href="#two">第二季</a>。
找到目標位置標簽，里面添加一個 id 屬性 = 剛才的名字，如：<h3 id="two">第二季介紹</h3>

6. 圖像標簽和路徑

6.1 圖像標簽

在 HTML 標簽中，<img /> 標簽用于定義 HTML 標簽頁面中的圖像。

標簽內屬性

屬性屬性值說明

src	圖片路徑	必須屬性
alt	文本	替換文本，當圖片不顯示時顯示文字
title	文本	提示文本。鼠標放到圖像上顯示文字
width	像素	圖像寬度
height	像素	圖像高度
border	像素	圖像邊框粗細

圖像標簽屬性注意點：

圖像標簽可以擁有多個屬性，必須寫在標簽名稱的后面。

屬性之間不分先后順序，標簽名稱與屬性、屬性與屬性之間均以空格分開。

屬性采取鍵值對的格式，即 key=“value" 的格式，屬性 =“屬性值”。

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 意思是跨度、跨距。

特點：

1. div 標簽用來布局，一行只能放一個 div大盒子。
2. span 標簽用來布局，一行可以多個 span小盒子。

三、HTML高階標簽

1. 表格標簽

1.1 表格的基本語法

<table></table> 用于定義表格的標簽。

<tr></tr> 標簽用于定義表格中的行，必須嵌套在 <table></table>中。

<th></th>（table head）標簽用于定義表格的表頭部分，必須嵌套在 <tr></tr> 中。常用于表格第一行，突出重要性，表頭單元格里面的文字會加粗居中顯示。

<td></td> （table data）標簽用于定義表格中的單元格，必須嵌套在 <tr></tr> 中。

<table><tr><th>表頭名稱</th>...</tr><tr><td>單元格內的文字</td>...</tr>...</table>

1.2 表格屬性

只作了解，后期通過 CSS 來設置。這些屬性都要寫到 <table></table> 標簽中

屬性名屬性值描述

align	left、center、right	表格元素對齊方式
border	1或""	規定是否有邊框，默認為""，表示沒有邊框
cellpadding	像素值	規定單元邊沿與其內容之間空白，默認1px
cellspacing	像素值	規定單元格之間的空白，默認為2px
width	像素值或百分比	規定表格寬度
hight	像素值或百分比	規定表格高度

1.3 表格結構標簽

場景：表格可能很長，將表格分割為表格頭部和表格主題兩大部分。

<thead> 表示頭部區域，<tbody> 表示主體區域，更好區分表格結構。

注意：

<thead></thead>：定義表格頭部，且內部必須有<tr>標簽。

<tbody></tbody>：定義表格主體，存放數據，且內部必須有<tr>標簽。

以上標簽都放在 <table></table> 里面。

<thead><tr><th>表頭名稱</th>...</tr> </thead><tbody><tr><td>單元格內的文字</td></tr>... </tbody>

1.4 合并單元格

跨行合并：rowspan=“合并單元格個數”
跨列合并：colspan=“合并單元格個數”

合并三部曲：

確定跨行 or 跨列。

找到目標單元格：跨行取最上面為目標單元格，跨列取最左邊為目標單元格。<td colspan="2"></td>

刪除多余單元格。

2. 列表標簽

2.1 無序列表

<ul> 標簽標識 HTML 頁面項目中的無序列表，一般以項目符號呈現列表項，而列表項使用<li>標簽定義。

注意：

無序列表的各個列表項之間沒有順序級別之分，是并列的。

<ul></ul>中只能包含<li></li>，寫入其他標簽或文字是不允許的。

<li></li>之間相當于一個容器，可以容納所有元素。

無序列表帶有自己的屬性，可用 CSS 修改樣式屬性。

2.2 有序列表

使用 <ol> 標簽來定義有序列表，<li> 來定義列表項。

與無序列表類似，有自己的樣式屬性，通過 CSS 設置。

2.3 自定義列表

自定義列表的列表項前沒有任何項目符號。

<dl> 定義描述列表，與 <dt> 和 <dd> 標簽配合使用。

注意

dl 里面只能包含 dt 和 dd。

dt和dd個數沒有限制，經常是一個dt對應多個dd。

3. 表單標簽

3.1 表單組成

在 HTML 中，一個完整的表單通常由表單域、表單控件（也稱為表單元素）和提示信息3個部分構成。

3.2 表單域

表單域是一個包含表單元素的區域。使用 <form> 標簽用于定義表單域，以實現用戶信息的收集和傳遞。
<form>標簽會將它范圍內的表單元素信息提交給服務器。

<form action="url地址" method="提交方式" name="表單域名稱">各種表單元素控件 </form>

常用屬性：

屬性屬性值作用

action	url地址	指定接受并處理表單數據的服務器的 url 地址
method	get/post	設置表單數據的提交方式
name	名稱	用于指定表單名稱，區分同一個頁面中的多個表單域

注意：

寫表單元素之前需要有表單域將其包含。

表單域是 form 標簽。

3.3 表單控件

3.3.1 <input> 表單元素

<input> 標簽用于收集用戶信息。

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	正整數	規定輸入字段字符的最大長度

name 和 value 是每個表單元素都有的屬性值,主要給后臺人員使用。

name：多選一或復選時，所有的單選按鈕和復選框要有相同的name值。

value：多選一或復選時，每個單選按鈕和復選框要有不同的value值。

checked 屬性主要針對于單選按鈕和復選框, 主要作用一打開頁面,就要可以默認選中某個表單元素。

maxlength 是用戶可以在表單元素輸入的最大字符數, 一般較少使用。

label標簽

<label> 標簽為 input 元素定義標注。
<label> 標簽用于綁定一個表單源深路，當點擊 label 標簽內的文本時，瀏覽器自動將焦點轉到或者選擇對應的表單元素上，提升用戶體驗。

核心： <lable>標簽的 for 屬性與input元素的 id 屬性相同。

3.3.2 <select>下拉表單元素

注意

select 中至少包含一對 option。

在 option 中定義屬性selected="selected"，當前項即為默認選項。

3.3.3 <textarea> 文本域元素

cols=“每行的字符數”，rows=“顯示的行數”。**我們在實際開發中不會使用，都是用 CSS 來改變大小。

四、搜索優化

1. TDK 標簽 SEO 優化

SEO（Search Engine Optimization），即搜索引擎優化，是一種利用搜索引擎的規則提高網站在有關搜索引擎內自然排名的方式。

SEO 的目的是對網站進行深度優化，從而幫助網站獲得免費流量，進而在搜索引擎上提升網站排名，提高網站知名度。

頁面必須有三個標簽用來進行 SEO 優化。

title
description
keyword

<title></title>  <meta name="description" content="">  <meta name="keywords" content="">

1.1 title 網站標題

title 具有不可替代性，是我們內頁的第一個重要標簽，是搜索引擎了解網頁的入口和對網頁主題歸屬的最佳判斷點。

建議：網站名（產品名）- 網站的介紹（盡量不要超過30個漢字）

例如：

京東(JD.COM) - 綜合網購首選-正品低價、品質保障、配送及時、輕松購物！
小米商城 - 小米5s、紅米Note 4、小米MIX、小米筆記本官方網站

1.2 description 網站說明

簡要說明我們網站主要是做什么的。

我們提倡，description 作為網站的總體業務和主題概括，多采用“我們是…”、“我們提供…”、“×××網作為…”、“電話：010…”之類語句。

例如：

1.3 keywords 關鍵字

keywords 是頁面關鍵詞，是搜索引擎的關注點之一。
keywords 最好限制為6～8 個關鍵詞，關鍵詞之間用英文逗號隔開，采用關鍵詞1,關鍵詞2 的形式。

例如：

2. LOGO SEO 優化

logo 首先放一個h1標簽，目的是為了提權，告訴搜索引擎，這個地方很重要。

h1里面再放一個a鏈接，可以返回首頁的，把logo 的背景圖片給a鏈接即可。

為了搜索引擎收錄我們，我們鏈接里面要放文字（網站名稱），但是文字不要顯示出來。

方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后overflow:hidden ，淘寶的做法。
方法2：直接給font-size: 0; 就看不到文字了，京東的做法。

最后給logo圖片一個title屬性，這樣鼠標放到 logo 上就可以看到提示文字了。

總結

以上是生活随笔為你收集整理的【整理+总结】pink老师前端三件套之HTML笔记（二）HTML标签的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：你是人见人捏的“软柿子”吗
下一篇： 2017年html5行业报告,云适配发布

HTML

【整理+总结】pink老师前端三件套之HTML笔记（二）HTML标签

目錄

一、 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 優化

總結