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

HTML

Web前端三剑客之HTML基础

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

生活随笔收集整理的這篇文章主要介紹了 Web前端三剑客之HTML基础小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

常識簡介
- HTML元素
- 語法
- HTML文檔規范
- 頁面頭部元素
- 元信息元素
- - 設定網頁關鍵字：
  - 設定網頁描述信息：
  - 設置網頁字符集:
  - 設定網頁自動刷新：
  - 切記：
頁面主體元素
- 設置網頁文字和背景顏色
- 添加網頁背景圖片
文字與段落
- 更改字體
文字與段落元素
- 段落元素
- 預格式化元素
- 列表與表格元素
- 表格
- - 未跨多列的表格：
  - - 劃線后：
  - 跨多列的表格：
  - - 字體屬性好像對于下列標簽沒用:
  - 跨多行的表格：
圖片與滾動元素
- 圖片
- 滾動元素
超鏈接元素
- 超鏈接元素
- 錨（書簽）鏈接
表單對象
- 表單標簽
- 表單元素
- - 文本框基本語法
  - 密碼框基本語法
  - 單選按鈕基本語法
  - 復選框基本語法
  - 下拉列表
  - - 下拉列表1
    - 下拉列表2
  - 按鈕基本語法
  - 多行文本框基本語法
  - 隱藏域
  - 文件域file
  - 分組

常識簡介

HTML是Hypertext Markup Language的縮寫，中文編譯為超文本標記語言。

超文本是指信息節點（即Web頁面）通過超鏈接構成的具有一定邏輯結構和語義的網絡

HTML定義了一套標記標簽，并使用標記便簽來描述網頁，由標簽及文本內容組成的文檔叫HTML文檔，也叫Web頁面

HTML元素

HTML標簽又稱為HTML元素
HTML元素是由尖括號包圍的關鍵詞，通常成對出現，例如<body>和</body>

以下順序是從圖左往圖右：
藍顏色的也就是head元素(head title meta base link style noscript script)

黃顏色的也就是行內元素

棕色的也就是Web頁面的快捷元素

綠顏色的也就是表單元素

淺藍顏色也就是主體元素body，標題元素

白顏色的是html5新增加的

最右邊的棕色是和表單相關的元素

語法

HTML屬性元素可以給元素添加附加信息，屬性包括屬性名和屬性值兩部分

屬性值可以用雙引號，單引號包含起來，也可以不加引號

顏色值由十六進制來表示紅( R) 綠(G) 藍(B)，每個顏色的最低值為0（十六進制為00），最高值為255（十六進制為FF）

HTML文檔規范

標簽不區分大小寫，推薦使用小寫

子標簽內容使用TAB鍵進行縮進

避免一行代碼太長，影響可讀性，盡量一行代碼描述一個內容

頁面頭部元素

頁面頭部元素由<head></head>所包含的部分，可設置網頁的標題，字符集，關鍵字，描述信息等

常用頭部元素：

元素描述

title	設定顯示瀏覽器標題欄中的內容
meta	設定網頁的字符集，關鍵字，描述信息等內容
style	設置CSS層疊樣式表的內容
link	設置對外部CSS文件的鏈接
script	設置頁面腳本或鏈接外部腳本文件

元信息元素

元信息元素<meta>:用于定義網頁的字符集，關鍵字以及網頁內容的描述

屬性描述

http-equiv	以鍵/值對的形式設置一個HTTP標題信息
name	以鍵/值對的形式設置頁面描述信息
content	設置http-equiv或name屬性所設置項目對應的值

設定網頁關鍵字：

設定網頁描述信息：

設置網頁字符集:

設定網頁自動刷新：

切記：

千萬別寫成:content="3”;url=“http://www.baidu.com“（這樣的話并不會跳轉）

<!DOCTYPE html> <html><head><meta http-equiv="refresh" content="3;url=https://www.baidu.com" charset="utf-8"><title></title></head><body><p>該網頁三秒后自動跳轉到百度</p></body> </html>

頁面主體元素

使用body元素，可以設置頁面背景，文字顏色等頁面屬性

設置網頁文字和背景顏色

添加網頁背景圖片

<body background="images/bg.jpg" bgproperties="fixed"><!DOCTYPE html> <html><head><meta http-equiv="refresh" content="3;url=https://www.baidu.com" charset="utf-8"><title></title></head><body background="05.jpg" bgproperties="fixed" ><p>該網頁三秒后自動跳轉到百度</p></body> </html>

文字與段落

網頁中的文字可分為普通文字，空格，特殊文字和注釋語句

如何在網頁中輸入空格，大于，小于等特殊符號
常用特殊符號及其字符實體:

特殊符號字符實體

"	"
&	&
<	<
>	>
.	·
?	©
?	®

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body>普通文字     hello world <p>該網頁三秒后自動跳轉到百度</p></body> </html>

更改字體

默認情況下，中文網頁中的文字是以黑色，宋體，3號字的效果來顯示，如果希望改變默認的文字顯示效果，可使用<font face="隸書,宋體,黑體" size="4" color="#ffcc00">字體元素</font>

使用文字修飾元素，可以設置字體格式，如粗體，斜體，顯示下劃線等。

元素描述

<b>……</b>，<strong>……</strong>	設置粗體格式
<i>……</i>，<em>……</em>	設置斜體格式
<sup>……</sup>	設置上標
<sub>……</sub>	設置下標
<big>……</big>	設置大號字體
<small>……</small>	設置小號字體
<u>……</u>	設置下劃線
<s>……</s>，<strike>……</strike>	設置刪除線

文字與段落元素

標題元素根據字號大小分為6級，分別用<h1>-<h6>標簽定義

段落元素

使用<p>標簽，換行元素使用<br>標簽，水平線元素通過<hr>標簽

預格式化元素

<pre>
保留HTML文檔中的Enter鍵和空格鍵，使瀏覽器不解析<pre>中定義的文本

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><pre>離離原上草一歲一枯榮野火燒不盡春風吹又生</pre></body> </html>

列表與表格元素

使用列表元素可以使相關的內容以一種整齊的方式排列顯示，HTML支持有序列表和無序列表
有序列表用<ol>表示，無序列表用<ul>表示，列表項用<li>表示

<ol><li>coffee</li><li>milk</li></ol>

<body><ul><li>coffee</li><li>milk</li></ul></body>

默認情況下，有序列表是以阿拉伯數字作為列表項的前導符，使用type屬性可以改變有序列表的前導符，可分別取1,A,a,I,i.還可以設置start屬性，定義有序列表前導符的起始項
ul的type屬性值有：disc|square|circle

<ol type="A" start="3"><li>coffee</li><li>milk</li></ol>

<ul type="circle"><li>coffee</li><li>milk</li></ul>

表格

表格由<table>元素定義，每個表格均有若干行（<tr>標簽定義），每行被分割成若干單元格(<td>標簽定義),表格表頭使用<th>定義

未跨多列的表格：

劃線后：

<body><table width="70%" border="1" cellpadding="8" cellspacing="0" align="center"> <caption>電腦價格表</caption> <tr><th>電腦型號</th><th>價格</th></tr><tr><th>聯想</th><th>5000</th></tr><tr><th>戴爾</th><th>5100</th></tr><tr><th>華碩</th><th>5200</th></tr></table></body>

劃線代碼是這個屬性border=“1”
width="70%"大小占當前瀏覽器窗口70%
border="1"有邊框，邊框寬度為1
align="center"居中對齊
<caption>表格標題

跨多列的表格：

<body><table width="70%" border="1" cellpadding="8" cellspacing="0" align="center"><tr><th colspan="2">電腦價格表哦</th></tr><tr><th>聯想</th><th>5000</th></tr><tr><th>戴爾</th><th>5100</th></tr><tr><th>華碩</th><th>5200</th></tr></table></body>

字體屬性好像對于下列標簽沒用:

<body><table width="70%" border="1" cellpadding="8" cellspacing="0" align="center"><tr><td colspan="2">電腦價格表哦</td></tr><tr><td>聯想</td><td>5000</td></tr><tr><td>戴爾</td><td>5100</td></tr><tr><td>華碩</td><td>5200</td></tr></table></body>

跨多行的表格：

<body><table width="70%" border="1" cellpadding="8" cellspacing="0" align="center"><tr><td rowspan="2">電腦價格表哦</td><td>聯想</td><td>戴爾</td></tr><tr><td>5200</td><td>5100</td></tr></table></body>

圖片與滾動元素

圖片

圖片元素通過<img>標簽定義

src圖片相應的文件以及相應的路徑
width和height是圖片屬性，默認是像素，不需要加px
border用來指定圖片邊框的粗細
vcpace表示圖片相對于上面和下面垂直間距，默認是像素
hspace表示圖片相對于左面和右面的水平間距，默認是像素
align 表示位置

滾動元素

說明：
scrolldelay：表示滾動的延遲時間，默認值為90
direction：表示滾動的方向，默認為從右往左
behavior：設定滾動的方式，alternate：表示在兩端之間來回滾動。scroll：表示由一端滾動到另一端，會重復。slide：表示由一端滾動到另一端，不會重復

默認就是從右往左

<marquee ><p>我是水平滾動條</p></marquee>

<body><marquee ><p>我是水平滾動條</p></marquee><marquee direction="up" scrolldelay="100">垂直滾動</marquee></body>

<body><marquee ><p>我是水平滾動條</p></marquee><marquee direction="up" scrolldelay="100">垂直滾動</marquee><marquee height="500" width="600" scrolldelay="300" onmouseover="this.stop()" onmouseout="this.start()"><img src="05.jpg" width="50" height="50" border="0">二次元</marquee></body>

超鏈接元素

<a>

屬性href用來設置需要連接到的目標文件；屬性target用來鏈接目標窗口

<a href="welcome.html" target="_blank">這是一個鏈接</a> <body> <a href="http://www.baidu.com" target="_blank">歡迎訪問百度哦</a></body>

target="_blank"表示我們點擊超鏈接后，會新開一個窗口，用于跳轉目標文件
還可以取值_self（也就是直接當前窗口跳轉，不新開）

<body> <a href="http://www.baidu.com" target="_self">歡迎訪問百度哦</a></body>

如何從一個文件超鏈接到另一個文件呢？
兩種方式：相對路徑和絕對路徑
絕對路徑：文件的完整路徑，如http://www.baidu.com/index.html
相對路徑：相對于當前文件的路徑

<body> <a href="firstTest.html" target="_self">歡迎訪問firstTest.html哦</a></body>

仔細看，文件名是不是變了

錨（書簽）鏈接

錨（書簽）鏈接：指的是連接目標位置是網頁中的指定錨點位置（書簽）的鏈接。

在待鏈接的目標網頁中定義錨點（書簽）

創建指向錨點（書簽）的鏈接

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><ol><li><a href="#01">跳轉1</a></li><li><a href="#02">跳轉2</a></li><li><a href="#03">跳轉3</a></li><li><a href="#04">跳轉4</a></li></ol><pre>在VC++6.0中，類和結構體中的數據成員是根據它們在類或結構體中出現的順序來依次申請申請內存空間的，由于內存對齊的原因，它們并不一定會像數組那樣連續地排列。由于數據類型的不同，因此占用的內存空間大小也會不同，因此占用的內存空間大小也會不同，在申請內存時，會遵守一定的規則。要找對齊的話，我個人感覺應該先找到編譯器的指定對齊值，因為結構體中的當前數據成員類型長度為M，指定的對齊值是N，那么實際的對齊值為q=min（M，N），其成員的地址安排在q的倍數上。但是，并非設定了默認對齊值就將結構體的對齊值鎖定。如果結構體中的數據成員類型最大值為M，指定的對齊值是N，那么實際對齊值為q=min（M，N）三準則如下： a.數據成員對其規則：結構（或聯合）的數據成員，第一個數據成員放在offset為0的地方，以后每個數據成員存儲的子成員大小（只要該成員有子成員，比如說是數組，結構體等）的整數倍開始（比如int 在32位機為4字節則要從4的整數倍地址開始存儲）b.結構體作為成員：如果一個結構里有某些結構體成員，則結構體成員要從其內部最大元素的整數倍地址開始存儲.（struct a里存有 struct b，b里有 char ，int ，double 等元素，那b應該從8的整數倍開始存儲.）c.收尾工作：結構體的總大小，也就是sizeof的結果，必須是其內部最大成員的整數倍，不足的要補齊</pre><pre>在VC++6.0中，類和結構體中的數據成員是根據它們在類或結構體中出現的順序來依次申請申請內存空間的，由于內存對齊的原因，它們并不一定會像數組那樣連續地排列。由于數據類型的不同，因此占用的內存空間大小也會不同，因此占用的內存空間大小也會不同，在申請內存時，會遵守一定的規則。要找對齊的話，我個人感覺應該先找到編譯器的指定對齊值，因為結構體中的當前數據成員類型長度為M，指定的對齊值是N，那么實際的對齊值為q=min（M，N），其成員的地址安排在q的倍數上。但是，并非設定了默認對齊值就將結構體的對齊值鎖定。如果結構體中的數據成員類型最大值為M，指定的對齊值是N，那么實際對齊值為q=min（M，N）三準則如下：a.數據成員對其規則：結構（或聯合）的數據成員，第一個數據成員放在offset為0的地方，以后每個數據成員存儲的子成員大小（只要該成員有子成員，比如說是數組，結構體等）的整數倍開始（比如int 在32位機為4字節則要從4的整數倍地址開始存儲）b.結構體作為成員：如果一個結構里有某些結構體成員，則結構體成員要從其內部最大元素的整數倍地址開始存儲.（struct a里存有 struct b，b里有 char ，int ，double 等元素，那b應該從8的整數倍開始存儲.）c.收尾工作：結構體的總大小，也就是sizeof的結果，必須是其內部最大成員的整數倍，不足的要補齊</pre><h1><a name="01">1目的地</a></h1><pre>在VC++6.0中，類和結構體中的數據成員是根據它們在類或結構體中出現的順序來依次申請申請內存空間的，由于內存對齊的原因，它們并不一定會像數組那樣連續地排列。由于數據類型的不同，因此占用的內存空間大小也會不同，因此占用的內存空間大小也會不同，在申請內存時，會遵守一定的規則。要找對齊的話，我個人感覺應該先找到編譯器的指定對齊值，因為結構體中的當前數據成員類型長度為M，指定的對齊值是N，那么實際的對齊值為q=min（M，N），其成員的地址安排在q的倍數上。但是，并非設定了默認對齊值就將結構體的對齊值鎖定。如果結構體中的數據成員類型最大值為M，指定的對齊值是N，那么實際對齊值為q=min（M，N）三準則如下：a.數據成員對其規則：結構（或聯合）的數據成員，第一個數據成員放在offset為0的地方，以后每個數據成員存儲的子成員大小（只要該成員有子成員，比如說是數組，結構體等）的整數倍開始（比如int 在32位機為4字節則要從4的整數倍地址開始存儲）b.結構體作為成員：如果一個結構里有某些結構體成員，則結構體成員要從其內部最大元素的整數倍地址開始存儲.（struct a里存有 struct b，b里有 char ，int ，double 等元素，那b應該從8的整數倍開始存儲.）c.收尾工作：結構體的總大小，也就是sizeof的結果，必須是其內部最大成員的整數倍，不足的要補齊</pre><h2><a name="02">2目的地</a></h2><pre>在VC++6.0中，類和結構體中的數據成員是根據它們在類或結構體中出現的順序來依次申請申請內存空間的，由于內存對齊的原因，它們并不一定會像數組那樣連續地排列。由于數據類型的不同，因此占用的內存空間大小也會不同，因此占用的內存空間大小也會不同，在申請內存時，會遵守一定的規則。要找對齊的話，我個人感覺應該先找到編譯器的指定對齊值，因為結構體中的當前數據成員類型長度為M，指定的對齊值是N，那么實際的對齊值為q=min（M，N），其成員的地址安排在q的倍數上。但是，并非設定了默認對齊值就將結構體的對齊值鎖定。如果結構體中的數據成員類型最大值為M，指定的對齊值是N，那么實際對齊值為q=min（M，N）三準則如下：a.數據成員對其規則：結構（或聯合）的數據成員，第一個數據成員放在offset為0的地方，以后每個數據成員存儲的子成員大小（只要該成員有子成員，比如說是數組，結構體等）的整數倍開始（比如int 在32位機為4字節則要從4的整數倍地址開始存儲）b.結構體作為成員：如果一個結構里有某些結構體成員，則結構體成員要從其內部最大元素的整數倍地址開始存儲.（struct a里存有 struct b，b里有 char ，int ，double 等元素，那b應該從8的整數倍開始存儲.）c.收尾工作：結構體的總大小，也就是sizeof的結果，必須是其內部最大成員的整數倍，不足的要補齊</pre><h3><a name="03">3目的地</a></h3><pre>在VC++6.0中，類和結構體中的數據成員是根據它們在類或結構體中出現的順序來依次申請申請內存空間的，由于內存對齊的原因，它們并不一定會像數組那樣連續地排列。由于數據類型的不同，因此占用的內存空間大小也會不同，因此占用的內存空間大小也會不同，在申請內存時，會遵守一定的規則。要找對齊的話，我個人感覺應該先找到編譯器的指定對齊值，因為結構體中的當前數據成員類型長度為M，指定的對齊值是N，那么實際的對齊值為q=min（M，N），其成員的地址安排在q的倍數上。但是，并非設定了默認對齊值就將結構體的對齊值鎖定。如果結構體中的數據成員類型最大值為M，指定的對齊值是N，那么實際對齊值為q=min（M，N）三準則如下：a.數據成員對其規則：結構（或聯合）的數據成員，第一個數據成員放在offset為0的地方，以后每個數據成員存儲的子成員大小（只要該成員有子成員，比如說是數組，結構體等）的整數倍開始（比如int 在32位機為4字節則要從4的整數倍地址開始存儲）b.結構體作為成員：如果一個結構里有某些結構體成員，則結構體成員要從其內部最大元素的整數倍地址開始存儲.（struct a里存有 struct b，b里有 char ，int ，double 等元素，那b應該從8的整數倍開始存儲.）c.收尾工作：結構體的總大小，也就是sizeof的結果，必須是其內部最大成員的整數倍，不足的要補齊</pre><h4><a name="04">4目的地</a></h4></body> </html>

即可在文中點擊鏈接進行相應位置的跳轉

表單對象

表單標簽

表單對象元素由表單標簽<form>和表單元素兩部分組成

action 指定提交后，由服務器上那個處理程序處理(所以一般來說是個URL)
method 指定向服務器提交的方法：一般為post或get方法，post方法比較安全（GET上傳數據長度也有一定的限制）

表單元素

文本框基本語法

type表示是什么輸出框（例如text就是文本輸入框）
value表示輸入元素的默認值
size輸出框的文本區的寬度

密碼框基本語法

type表示是什么輸出框（例如password就是密碼框）
value表示初始密碼
size輸出框的密碼區的寬度

單選按鈕基本語法

type表示按鈕屬性（radio表示單選按鈕）
value表示初始值
checked 表示默認選中，后面checked可以省略，即縮寫

記住，單選框同一個組里面的name必須相同（名稱相同，單選按鈕也就會在同一個組中）

復選框基本語法

下拉列表

<select > <option>標簽定義下拉列表

下拉列表1

multiple=“multiple”
表示我們這個下拉列表可以進行多選
selected="selected"默認選中

下拉列表2

<select><option>標簽定義下拉列表 <select name="degree" > <option vaule="1" >幼兒園</option> <option vaule="2">小學生</option> <option vaule="3">初中生</option> <option vaule="4">高中生</option> </select>

按鈕基本語法

type按鈕類型（reset表示重置按鈕，submit表示提交按鈕，button普通按鈕）
name 按鈕名稱
value 按鈕上的標簽

多行文本框基本語法

name文本框的名字
cols文本框的列數
rows文本框的行數

<body><textarea name="textarea" cols="40" rows="6">我是小彪彪，哈哈哈今晚熬夜做筆記，噢噢噢</textarea></body>

隱藏域

隱藏域hidden,主要用于在不同頁面中傳遞隱藏域中設定的值

文件域file

文件域file,用于將本地文件上傳到服務器端

使用文件域上傳文件到服務器，需要在中修改表單的編碼，即設置

分組

<fieldset>元素用于分組，<legend>元素為每個分組定義標題

總結

以上是生活随笔為你收集整理的Web前端三剑客之HTML基础的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Python正则表达式之零宽断言（4）
下一篇： Web前端三剑客之CSS基础