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

HTML

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

發(fā)布時間：2025/3/21 HTML 74 豆豆

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

文章目錄

一、HTML
- 1.1、HTML概述
- 1.2、HTML的基本結(jié)構(gòu)
- 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、常見行內(nèi)標簽
- - 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，即超文本標記語言。網(wǎng)頁是用HTML 書寫的一種純文本文件。用戶通過瀏覽器所看到的包含了文字、圖像、動畫等多媒體信息的每一個網(wǎng)頁，其實質(zhì)是通過瀏覽器對該純文本文件進行了解釋，并引用相應(yīng)的圖像、動畫等資源文件，才生成了多姿多彩的網(wǎng)頁。

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

1.2、HTML的基本結(jié)構(gòu)

??HTML文本本質(zhì)是一個純文本文件，只是它的拓展名為.html 或.htm。任何純文本編輯軟件都能創(chuàng)建HTML 文本。下圖是HTML 的基本結(jié)構(gòu)：

1.3、HTML的基本模板

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

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

二、標簽

2.1、標簽的特點

① 尖括號包裹關(guān)鍵詞組成；

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

③ 標標簽不區(qū)分大小寫，推薦小寫；

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

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

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

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

2.2.1、標簽分類

類別標記名稱

文本結(jié)構(gòu)	html、head、body
頭部標記	title、meta、link、style、script、base
文本結(jié)構(gòu)標記	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	為元素引入行內(nèi)CSS樣式表	align	定義元素的水平對齊方式
class	為元素定義一個類名	src	定義元素引用的文件的URL
id	為元素定義一個唯一的id	href	定義超鏈接所指向的文件的URL
name	為元素定義一個名字	target	定義超鏈接中目標文件的打開方式
title	定義鼠標懸停在元素上時的提示文字	border	設(shè)置元素的邊框?qū)挾?/td>

2.3、常用塊級標簽

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

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>

結(jié)果展示：

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>

結(jié)果展示：

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>

結(jié)果展示：

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>

結(jié)果展示：

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>

結(jié)果展示：

2.3.4、div 標簽

用于分化一個一個的區(qū)域。

示例：

<!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>

結(jié)果展示：

2.4、常見行內(nèi)標簽

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

2.4.1、圖片標簽

用于向頁面插入圖片。

常見屬性：

屬性含義

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

示例：

<!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>

結(jié)果展示：

2.4.2、粗體/斜體標簽

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

示例：

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

結(jié)果展示：

2.4.3、超鏈接標簽

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

<a>屬性及其取值

屬性名說明屬性值

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

結(jié)果展示：

2.4.4、文本標簽

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

三、特殊符號

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

一些常見的特殊符號：

特殊符號書寫格式

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

四、表格

4.1、表格概述

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

4.2、表格繪制

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

table標記的屬性

屬性含義

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

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

示例：

<!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>

結(jié)果展示：

4.3、合并表格

合并表格三部曲:

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

根據(jù)先上后下，先左后右的原則找到目標單元格，再寫上合并方式，還有合并的數(shù)量
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>數(shù)學</td></table></body> </html>

結(jié)果展示：

五、表單

5.1、表單概述

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

5.2、表單文本和控件

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

type屬性值含義

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

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

屬性名功能示例

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

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

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

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

示例：

<!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>文本內(nèi)容</textarea><br>請選擇你喜歡的編程語言：<select><option>python</option><option>PHP</option><option>java</option><option>C++</option><option selected>C語言</option></select></body> </html>

結(jié)果展示：

5.3、表單域

由5.2示例結(jié)果運行得到的網(wǎng)站中，我們所設(shè)置的控件均不可使用，因此我們可以使用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>文本內(nèi)容</textarea><br>請選擇你喜歡的編程語言：<select><option>python</option><option>PHP</option><option>java</option><option>C++</option><option selected>C語言</option></select></form> </body> </html>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：学习笔记——使用下划线命名的规则
下一篇： vins 解读_代码解读 | VINS

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

HTML

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

文章目錄

一、HTML

1.1、HTML概述

1.2、HTML的基本結(jié)構(gòu)

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、常見行內(nèi)標簽

2.4.1、圖片標簽

2.4.2、粗體/斜體標簽

2.4.3、超鏈接標簽

2.4.4、文本標簽

三、特殊符號

四、表格

4.1、表格概述

4.2、表格繪制

4.3、合并表格

五、表單

5.1、表單概述

5.2、表單文本和控件

5.3、表單域

總結(jié)