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

HTML

学习笔记（一）——HTML学习

發布時間：2025/3/21 HTML 36 豆豆

生活随笔收集整理的這篇文章主要介紹了学习笔记（一）——HTML学习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

一、HTML
- 1.1、HTML概述
- 1.2、HTML的基本結構
- 1.3、HTML的基本模板
二、標簽
- 2.1、標簽的特點
- 2.2、標簽分類和一些常見屬性
- - 2.2.1、標簽分類
  - 2.2.2、一些常見屬性
- 2.3、常用塊級標簽
- - 2.3.1、標題標簽
  - 2.3.2、段落標簽
  - 2.3.3、列表標簽
  - 2.3.4、div 標簽
- 2.4、常見行內標簽
- - 2.4.1、圖片標簽
  - 2.4.2、粗體/斜體標簽
  - 2.4.3、超鏈接標簽
  - 2.4.4、文本標簽
三、特殊符號
四、表格
- 4.1、表格概述
- 4.2、表格繪制
- 4.3、合并表格
五、表單
- 5.1、表單概述
- 5.2、表單文本和控件
- 5.3、表單域

一、HTML

1.1、HTML概述

??HTML，即超文本標記語言。網頁是用HTML 書寫的一種純文本文件。用戶通過瀏覽器所看到的包含了文字、圖像、動畫等多媒體信息的每一個網頁，其實質是通過瀏覽器對該純文本文件進行了解釋，并引用相應的圖像、動畫等資源文件，才生成了多姿多彩的網頁。

??HTML 是一種標志語言。可以認為，HTML 代碼就是“普通文本+HTML 標記”，而不同的HTML 標記能表達不同的效果，如表格、圖像、表單、文字等。

1.2、HTML的基本結構

??HTML文本本質是一個純文本文件，只是它的拓展名為.html 或.htm。任何純文本編輯軟件都能創建HTML 文本。下圖是HTML 的基本結構：

1.3、HTML的基本模板

<!DOCTYPE html>  <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>

<!DOCTYPE html>標簽作用:在html文件最前面進行聲明，定義文檔類型，告知瀏覽器用html何種規范去解析文檔。

二、標簽

2.1、標簽的特點

① 尖括號包裹關鍵詞組成；

② 如果是成對的標簽，第一個沒有帶斜杠的標簽為開始標簽，第二個帶斜杠的標簽為結束標簽，如果是個單引號的標簽叫做自閉合標簽；

③ 標標簽不區分大小寫，推薦小寫；

④ 標簽可以嵌套，但不能交叉嵌套，如：

錯誤示例：<a><b></a></b> 正確示例：<a><b></b></a>

⑤ 在開始標簽或者是自閉合標簽中可以寫屬性，屬性名和屬性值之間是成對出現的，其中屬性值需要用單引號或者是雙引號標上。

2.2、標簽分類和一些常見屬性

2.2.1、標簽分類

類別標記名稱

文本結構	html、head、body
頭部標記	title、meta、link、style、script、base
文本結構標記	p、h1~h6、pre、marquee、br、hr
字體標記	font、b、i、u、strong、em
列表標記	ul、ol、li、dl、dt、dd
超文本標記	a、map、area
圖像及媒體元素標記	img、embed、object
表格標記	table、tr、td、th、tbody
表單標記	form、input、textarea、select、option、filedset、legend、label
容器標記	div、span

2.2.2、一些常見屬性

公共屬性含義特有屬性含義

style	為元素引入行內CSS樣式表	align	定義元素的水平對齊方式
class	為元素定義一個類名	src	定義元素引用的文件的URL
id	為元素定義一個唯一的id	href	定義超鏈接所指向的文件的URL
name	為元素定義一個名字	target	定義超鏈接中目標文件的打開方式
title	定義鼠標懸停在元素上時的提示文字	border	設置元素的邊框寬度

2.3、常用塊級標簽

塊級標簽：
① 設置寬高有效；
② 在不設置寬度的情況下，它的寬度始終和瀏覽器的寬度保持一致，與內容無關；
③ 獨占一行，而且自動換行；
④ 多個塊級標簽寫在一起時，排列方式是從上到下的。
⑤ 它可以容納內聯元素和其他塊元素

2.3.1、標題標簽

一般用在文章的標題，有h1~h6。

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>標題標簽</title> </head> <body><h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3><h4>四級標題</h4><h5>五級標題</h5><h6>六級標題</h6> </body> </html>

結果展示：

2.3.2、段落標簽

會把 HTML文檔分割成若干段落。

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>段落標簽</title> </head> <body><p>第一段</p><p>第二段</p><p>第三段</p> </body> </html>

結果展示：

2.3.3、列表標簽

列表標簽分為：有序列表<ol>、無序列表<ul>以及定義列表<dl>。每個列表標記都是配對的標記，列表標記中可包含若干個<li>標記，表示列表項；

1、有序列表示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>段落標簽</title> </head> <body><ol type="1" start="2"><li>HTML</li><li>CSS</li><li>PHP</li></ol> </body> </html>

結果展示：

2、無序列表示例：

type類型：circle空心圓、disc實心圓、square實心正方形、none取消默認圓圈 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>無序列表標簽</title> </head> <body><ul type="circle"><li>HTML</li><li>CSS</li><li>PHP</li></ul> </body> </html>

結果展示：

3、定義列表示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>定義列表標簽</title> </head> <body><dl><li>HTML</li><li>CSS</li><li>PHP</li></dl> </body> </html>

結果展示：

2.3.4、div 標簽

用于分化一個一個的區域。

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>定義列表標簽</title> </head> <body><dl><li>HTML</li><li>CSS</li><li>PHP</li></dl> </body> </html>

結果展示：

2.4、常見行內標簽

行內標簽特點：
① 設置寬高無效；
② 寬度只與內容有關，寬度就是其文字或圖片寬度，不可改變；
③ 不會自動換行，只有當一行的內容滿了之后才會自動換到第二行；
④ 當多個行內標簽寫在一起時，排列方式是從左到右；
⑤ 內聯元素只能容納文本或者其他內聯元素；
⑥ 設置margin只有左右margin有效，上下無效；
⑦ 設置padding只有左右padding有效，上下則無效，注意元素范圍是增大了，但是對元素周圍的內容是沒影響的。

2.4.1、圖片標簽

用于向頁面插入圖片。

常見屬性：

屬性含義

src	圖片文件的地址
alt	當圖片無法顯示時顯示該屬性指定的文本
title	光標停留在圖片上時顯示的說明文字
align	圖片的對齊方式，共有9種取值
width、height	圖片在網頁中的寬和高，單位為像素或百分比

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>圖片標簽</title> </head> <body><img src="https://www.silukew.com/cover/66/66612.jpg" title="大奉打更人"></body> </html>

結果展示：

2.4.2、粗體/斜體標簽

將文字加粗，斜體標簽將文字傾斜

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>文字標簽</title> </head> <body><b>字體加粗</b><br><i>字體傾斜</i></body> </html>

結果展示：

2.4.3、超鏈接標簽

超鏈接標簽其實就是 a 標簽，一般用于網頁之間的跳轉還能做錨點，進行跳轉

<a>屬性及其取值

屬性名說明屬性值

href	超鏈接的URL路徑	相對路徑或絕對路徑、Email、#錨點名
target	超鏈接的打開方式	_bank: 在新窗口打開 _self: 在當前窗口打開 _parent: 在當前窗口的父窗口打開 _top: 在整個瀏覽器窗口打開鏈接窗口或框架名: 在指定名稱的窗口或框架中打開
title	超鏈接上的提示文字	屬性值是任何字符串
id、name	錨點的id或名稱	自定義的名稱，如 id=“chl”。<a>標記作為錨點使用時，不能設置href屬性

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>超鏈接標簽</title> </head> <body><a href="http://www.bxwx66.com/read/119889/" target="_blank">大奉打更人</a></body> </html>

結果展示：

2.4.4、文本標簽

Span 標簽是單純的文字標簽，只有配合 CSS 才能有效果，其具體用法在下一節CSS基礎會提到。

三、特殊符號

特殊符號就是網頁上一些比較特殊的符號，比如>、<、@等等。特殊符號以 & 開頭，分號結尾。

一些常見的特殊符號：

特殊符號書寫格式

<	&it ;
>	>
"	"
&	&
字符空格
漢字空格	&emsp;

四、表格

4.1、表格概述

??表格在網頁中的應用非常廣泛,網頁中的表格不僅用來顯示數據，還可用來對網頁進行排版和布局，使用表格最明顯的好處就是能以行列對齊的方式來顯示文本或圖像信息，以達到精確控制文本和圖像在網頁中位置的目的。通過表格布局的網頁，網頁中所有元素都放置在表格的單元格(<td>標記)中。表格分為表頭，表身和表腳。

4.2、表格繪制

表格由<table>標記定義，一個表格被分為許多行<tr>，每行又被分為許多列td。表頭可以用<th>標記。它們是表格中三個最基本的標記。表格中的單元格可以容納網頁中的任何元素，如圖像、文本、列表、表格、表達等。

table標記的屬性

屬性含義

border	邊框的寬度，默認值為 0
bordercolor	邊框的顏色，若不設置，將顯示例題邊框效果
bgcolor	背景色
background	背景圖片
cellspacing	表格的間距，默認值為 1
cellpadding	表格的填充，默認值為 0
width、height	表格的寬和高，可以使用像素或百分比做單位
align	水平對齊屬性，默認為left
rules	只顯示表格的行邊框或列邊框

注意：可以用caption標簽在table標簽下設置表格標題

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表格標簽</title> </head> <body><table border="1" cellspacing="0"><tr><td>姓名</td><td>年齡</td></tr><tr><td>小明</td><td>18</td></tr></table> </body> </html>

結果展示：

4.3、合并表格

合并表格三部曲:

先確定是跨行合并還是跨列合并

根據先上后下，先左后右的原則找到目標單元格，再寫上合并方式，還有合并的數量
rowspan:跨行合并 colspan跨列合并

刪除多余的單元格

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表格標簽</title> </head> <body><table border="1" cellspacing="0" width="500" height="200"><caption>課程表</caption><tr><td rowspan="3">課程表</td><td colspan="2">星期一</td></tr><tr><td>上午</td><td>下午</td></tr><td>語文</td><td>數學</td></table></body> </html>

結果展示：

五、表單

5.1、表單概述

??表單是瀏覽器與服務器之間交互的重要手段，利用表單可以收集客戶端提交的有關信息。表單常應用于登錄注冊，搜索，文件上傳等。
??表單由表單界面和服務器端程序(如PHP)兩部分構成。表單界面由HTML代碼編寫,服務器端程序用來收集用戶通過表單提交的數據。本節只討論表單界面的制作。在HTML代碼中,可以用表單標記定義表單，并且指定接收表單數據的服務器端程序文件。
??表單處理信息的過程為:當單擊表單中的“提交”按鈕時，在表單中填寫的信息就會發送到服務器,然后由服務器端的有關應用程序進行處理，處理后或者將用戶提交的信息存儲在服務器端的數據庫中，或者將有關的信息返回到客戶端瀏覽器。

5.2、表單文本和控件

表單文本常用的標記是input標記，接下來讓我們看看其type的屬性取值含義吧

type屬性值含義

text	文本框
password	密碼框
submit	提交按鈕
reset	重置按鈕
radio	單選框
button	普通按鈕
checkbox	復選框
image	圖像按鈕
file	文件域
hidden	隱藏域

文本框和密碼框常用的屬性：

屬性名功能示例

value	設置文本框中的初始值，如不設置，則文本框顯示的初始值內容為空。用戶輸入的內容將會作為value屬性的最終值	value="請輸入"為度量單位
size	指定文本框的寬度，以字符個數	size=“16”
maxlength	設置用戶能夠輸入的最多字符個數	maxlength=“11”
readonly	文本框為只讀，用戶不能改變文本框中的值，但用戶仍能選中或復制其文本，其內容也會發送給服務器	readonly=“readonly”
disabled	禁用文本框，文本框將不能獲得焦點，提交表單時，也不能將文本框的名稱和值發送給服務器	disabled=“disabled”
placeholder	設置文本提示信息，不會被選中刪除，即文本灰顯	placeholder=“請輸入用戶名”

提示：readonly 可防止用戶對值進行修改，直到滿足某些條件為止(比如選中了一個復選框)，此時需要使用JavaScript 清除 readonly 屬性。disabled 可應用與所有表單元素。

復選框
<select>標記表示下拉框或列表框，是一個標記的含義由其size屬性決定的元素。如果該標記沒有設置size屬性,那么就表示是下拉列表框。如果設置了size屬性,則變成了列表框,列表的行數由size屬性值決定。如果還設置
了multiple屬性，則表示列表框允許多選。下拉列表框中的每一項由<option>標記定義，還可使用<optgroup>標記添加一個不可選中的選項,用于給選項進行分組。

文本域
<textarea>是多行文本域標記,用于讓瀏覽者輸人多行文本，如發表評論或留言等。<textarea>是一個雙標記，它沒有value屬性，而是將標記中的內容顯示在多行文本框中,提交表單時也是將多行文本框中的內容作為value值提交。
<textarea>的屬性有：
(1) cols——用來設置文本域的寬度，單位是字符
(2) rows——用來設置文本域的高度（行數）
① 關(off)——不讓文本換行。當用戶輸入內容超過文本區域的右邊界時，文本將向左側滾動，不會換行。用戶必須按Enter鍵才能將插入點移動到文本區域的下一行。
② 虛擬(virtual)——表示文本域中設置自動換行。當用戶輸入的內容超過文本域的右邊界時，文本換行到下一行。當提交數據進行處理時，換行符并不會添加到數據中。
③ 實體(physical)——文本在文本域中也會自動換行，但是當提交數據進行處理時，會把這些自動換行符轉換為<br/>標記添加到數據中。

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表單標簽</title> </head> <body>用戶名：<input type="text" value="python" placeholder="請輸入用戶名" name="username" disabled="disabled" ><br><br>密碼：<input type="password" name="pwd"><br><br>性別：男：<input type="radio" name="sex"/>&emsp;女:<input type="radio" name="sex" checked/><br><br>休閑方式：小說 <input type="checkbox" name="eat" checked/>&emsp;電影<input type="checkbox" name="eat" checked/>&emsp;游戲<input type="checkbox" name="eat" />&emsp;音樂<input type="checkbox" name="eat" />&emsp;運動<input type="checkbox" name="eat" /><br><br><input type="button" value="普通按鈕">&emsp;<input type="submit">&emsp;<input type="reset">&emsp;<input type="file">&emsp;<br>備注：<br><textarea>文本內容</textarea><br>請選擇你喜歡的編程語言：<select><option>python</option><option>PHP</option><option>java</option><option>C++</option><option selected>C語言</option></select></body> </html>

結果展示：

5.3、表單域

由5.2示例結果運行得到的網站中，我們所設置的控件均不可使用，因此我們可以使用form標簽將這些表單文本和控件包裹起來，從而使控件可以被使用。

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表單標簽</title> </head> <body><form action="/" method="post">用戶名：<input type="text" value="python" placeholder="請輸入用戶名" name="username" disabled="disabled" ><br><br>密碼：<input type="password" name="pwd"><br><br>性別：男：<input type="radio" name="sex"/>&emsp;女:<input type="radio" name="sex" checked/><br><br>休閑方式：小說 <input type="checkbox" name="eat" checked/>&emsp;電影<input type="checkbox" name="eat" checked/>&emsp;游戲<input type="checkbox" name="eat" />&emsp;音樂<input type="checkbox" name="eat" />&emsp;運動<input type="checkbox" name="eat" /><br><br><input type="button" value="普通按鈕">&emsp;<input type="submit">&emsp;<input type="reset">&emsp;<input type="file">&emsp;<br>備注：<br><textarea>文本內容</textarea><br>請選擇你喜歡的編程語言：<select><option>python</option><option>PHP</option><option>java</option><option>C++</option><option selected>C語言</option></select></form> </body> </html>

總結

以上是生活随笔為你收集整理的学习笔记（一）——HTML学习的全部內容，希望文章能夠幫你解決所遇到的問題。

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