HTML的基本語法以及如何使用HTML來創(chuàng)建網(wǎng)頁

一部分：HTML簡(jiǎn)介

什么是HTML？

HTML代表超文本標(biāo)記語言（Hypertext Markup Language）。它是一種用于構(gòu)建網(wǎng)頁的標(biāo)記語言。HTML文件包含一組標(biāo)簽，這些標(biāo)簽用于定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。瀏覽器讀取HTML文件，并根據(jù)標(biāo)記中的指示呈現(xiàn)網(wǎng)頁內(nèi)容。

HTML的主要作用是定義文本內(nèi)容、圖像、鏈接和其他媒體的排列方式，并提供交互元素，例如表單和按鈕。

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

每個(gè)HTML文檔都應(yīng)該遵循以下基本結(jié)構(gòu)：

<!DOCTYPE html>
<html>
<head>
    <title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
    <!-- 內(nèi)容在這里 -->
</body>
</html>

讓我們逐步解釋這個(gè)結(jié)構(gòu)：

<!DOCTYPE html>：這是文檔類型聲明，它告訴瀏覽器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
<html>：HTML文檔的根元素。所有其他元素都包含在<html>標(biāo)簽內(nèi)。
<head>：包含與文檔相關(guān)的元信息，如頁面標(biāo)題、字符集聲明和外部樣式表鏈接。
<title>：定義網(wǎng)頁的標(biāo)題，顯示在瀏覽器標(biāo)簽頁上。
<body>：包含網(wǎng)頁的主要內(nèi)容，如文本、圖像和其他媒體。

HTML標(biāo)簽和元素

HTML標(biāo)簽是由尖括號(hào)括起來的名稱，例如<p>表示段落，<img>表示圖像。標(biāo)簽通常成對(duì)出現(xiàn)，有一個(gè)開始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽。例如：

<p>這是一個(gè)段落。</p>

<p>是開始標(biāo)簽，</p>是結(jié)束標(biāo)簽，文本位于兩個(gè)標(biāo)簽之間。標(biāo)簽定義了元素的類型和結(jié)構(gòu)。

有些HTML標(biāo)簽是自封閉的，不需要結(jié)束標(biāo)簽，例如<img>用于插入圖像。

HTML注釋

在HTML中，你可以使用注釋來添加說明性文字，注釋不會(huì)在瀏覽器中顯示。HTML注釋使用結(jié)尾，如下所示：

<!-- 這是一個(gè)注釋 -->

注釋通常用于添加文檔說明、調(diào)試代碼或標(biāo)記未來的修改。

第二部分：HTML基本元素

文本

HTML中的文本通常包含在段落、標(biāo)題、列表等元素中。以下是一些常見的文本元素：

<p>：定義一個(gè)段落。
<h1>到<h6>：定義標(biāo)題，<h1>是最高級(jí)別的標(biāo)題，<h6>是最低級(jí)別的標(biāo)題。
<strong>：定義強(qiáng)調(diào)文本，通常以粗體顯示。
<em>：定義強(qiáng)調(diào)文本，通常以斜體顯示。
<a>：定義超鏈接，允許用戶點(diǎn)擊跳轉(zhuǎn)到其他頁面。

示例：

<p>這是一個(gè)段落。</p>
<h1>這是一個(gè)標(biāo)題</h1>
<p><strong>這是強(qiáng)調(diào)文本。</strong></p>
<p><em>這是斜體文本。</em></p>
<p>訪問<a href="https://www.example.com">示例網(wǎng)站</a></p>

圖像

要在網(wǎng)頁中插入圖像，可以使用<img>標(biāo)簽。它是一個(gè)自封閉標(biāo)簽，需要指定圖像的src屬性來指定圖像文件的路徑。

示例：

htmlCopy code
<img src="image.jpg" alt="圖像描述">

src：指定圖像文件的路徑。
alt：提供圖像的替代文本，用于無法加載圖像時(shí)的文字描述。

鏈接

通過使用<a>標(biāo)簽，可以在網(wǎng)頁中創(chuàng)建鏈接。鏈接通常包含在文本或圖像中，并使用href屬性指定目標(biāo)URL。

示例：

<a href="https://www.example.com">訪問示例網(wǎng)站</a>

href：指定鏈接的目標(biāo)URL。

列表

HTML支持有序列表（<ol>）、無序列表（<ul>）和定義列表（<dl>）。

無序列表

無序列表使用<ul>標(biāo)簽定義，每個(gè)列表項(xiàng)使用<li>標(biāo)簽。

示例：

<ul>
    <li>項(xiàng)目1</li>
    <li>項(xiàng)目2</li>
    <li>項(xiàng)目3</li>
</ul>

有序列表

有序列表使用<ol>標(biāo)簽定義，每個(gè)列表項(xiàng)使用<li>標(biāo)簽。

示例：

<ol>
    <li>第一項(xiàng)</li>
    <li>第二項(xiàng)</li>
    <li>第三項(xiàng)</li>
</ol>

定義列表

定義列表使用<dl>標(biāo)簽定義，每個(gè)定義項(xiàng)目使用<dt>標(biāo)簽定義術(shù)語，使用<dd>標(biāo)簽定義描述。

示例：

<dl>
    <dt>術(shù)語1</dt>
    <dd>描述1</dd>
    <dt>術(shù)語2</dt>
    <dd>描述2</dd>
</dl>

第三部分：HTML表單

HTML表單允許用戶與網(wǎng)頁進(jìn)行交互，提交數(shù)據(jù)。以下是HTML表單的基本元素：

<form>元素

<form>元素用于創(chuàng)建表單，可以包含文本字段、復(fù)選框、單選按鈕、下拉列表等。

示例：

<form action="submit.php" method="post">
    <!-- 表單元素在這里 -->
</form>

action：指定表單數(shù)據(jù)提交的目標(biāo)URL。
method：指定提交方法，通常是"post"或"get"。

輸入字段

輸入字段用于接收用戶輸入的數(shù)據(jù)，常見的輸入字段類型包括文本框、密碼框、單選按鈕、復(fù)選框等。

文本框

文本框使用<input>標(biāo)簽，type屬性設(shè)置為"text"。

示例：

<input type="text" name="username" placeholder="用戶名">

type：指定字段類型。
name：指定字段的名稱。
placeholder：設(shè)置文本框的占位符文本。

密碼框

密碼框使用<input>標(biāo)簽，type屬性設(shè)置為"password"。

示例：

htmlCopy code
<input type="password" name="password" placeholder="密碼">

單選按鈕

單選按鈕使用<input>標(biāo)簽，type屬性設(shè)置為"radio"。

示例：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

name：指定單選按鈕組的名稱。
value：指定每個(gè)選項(xiàng)的值。

復(fù)選框

復(fù)選框使用<input>標(biāo)簽，type屬性設(shè)置為"checkbox"。

示例：

<input type="checkbox" name="subscribe" value="yes">訂閱新聞

下拉列表

下拉列表使用<select>和<option>標(biāo)簽創(chuàng)建。<select>定義下拉列表，而<option>定義選項(xiàng)。

示例：

<select name="country">
    <option value="us">美國(guó)</option>
    <option value="ca">加拿大</option>
    <option value="uk">英國(guó)</option>
</select>

name：指定下拉列表的名稱。
每個(gè)<option>標(biāo)簽表示一個(gè)選項(xiàng)，使用value屬性定義選項(xiàng)的值。

第四部分：HTML樣式和CSS

HTML用于定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，但要使網(wǎng)頁看起來更吸引人，需要使用CSS（層疊樣式表）。CSS允許你定義字體、顏色、布局等樣式。

內(nèi)聯(lián)樣式

可以在HTML元素內(nèi)部使用style屬性來定義內(nèi)聯(lián)樣式。

示例：

<p style="color: blue; font-size: 16px;">這是一個(gè)藍(lán)色的段落。</p>

外部樣式表

外部樣式表將樣式規(guī)則保存在獨(dú)立的CSS文件中，并通過<link>標(biāo)簽將其鏈接到HTML文檔。

示例（style.css）：

/* style.css */
p {
    color: blue;
    font-size: 16px;
}

在HTML中鏈接外部樣式表：

<link rel="stylesheet" type="text/css" href="style.css">

這使得可以在整個(gè)網(wǎng)站上共享相同的樣式。

總結(jié)

HTML是構(gòu)建現(xiàn)代網(wǎng)頁的基礎(chǔ)。通過學(xué)習(xí)HTML的基本語法和元素，你可以創(chuàng)建吸引人且功能強(qiáng)大的網(wǎng)頁。無論是文本、圖像、鏈接還是表單，HTML提供了豐富的工具來呈現(xiàn)內(nèi)容和實(shí)現(xiàn)用戶交互。

這篇文章提供了HTML的基礎(chǔ)知識(shí)，但HTML是一個(gè)廣泛的主題，還有許多高級(jí)特性和技巧等待你探索。希望這篇文章對(duì)你入門HTML有所幫助，讓你能夠開始創(chuàng)建自己的網(wǎng)頁。繼續(xù)學(xué)習(xí)和實(shí)踐，你將成為一個(gè)熟練的網(wǎng)頁開發(fā)者。

習(xí)目標(biāo)

了解常用瀏覽器
掌握WEB標(biāo)準(zhǔn)

理解標(biāo)簽語義化
掌握常用的排版標(biāo)簽
掌握常用的文本格式化圖像鏈接等標(biāo)簽
掌握三種列表標(biāo)簽
掌握表格標(biāo)簽
掌握表格標(biāo)簽
掌握表單標(biāo)簽

HTML第一天目標(biāo)

能夠?qū)懗龌镜捻撁妫ɡ锩姘瑘D片、各種標(biāo)簽和鏈接）

開發(fā)工具

我們主要用的開發(fā)工具有chrome、hbuilder、Photoshop

瀏覽器顯示

瀏覽器是網(wǎng)頁顯示、運(yùn)行的平臺(tái)，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時(shí)稱為五大瀏覽器。

瀏覽器內(nèi)核（理解）

瀏覽器內(nèi)核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎：它負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計(jì)算網(wǎng)頁的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁的語法解釋會(huì)有不同，所以渲染的效果也不相同。
JS 引擎則是解析 Javascript 語言，執(zhí)行 javascript語言來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果。

最開始渲染引擎和 JS 引擎并沒有區(qū)分得很明確，后來 JS 引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。有一個(gè)網(wǎng)頁標(biāo)準(zhǔn)計(jì)劃小組制作了一個(gè) ACID 來測(cè)試引擎的兼容性和性能。內(nèi)核的種類很多，如果加上沒什么人使用的非商業(yè)的免費(fèi)內(nèi)核，可能會(huì)有10多種，但是常見的瀏覽器內(nèi)核可以分這四種：Trident、Gecko、Blink、Webkit。

了解一點(diǎn)：移動(dòng)端的瀏覽器內(nèi)核主要說的是系統(tǒng)內(nèi)置瀏覽器的內(nèi)核。
Android手機(jī)而言，使用率最高的就是Webkit內(nèi)核，大部分國(guó)產(chǎn)瀏覽器宣稱的自己的內(nèi)核，基本上也是屬于webkit二次開發(fā)。

iOS以及WP7平臺(tái)上，由于系統(tǒng)原因，系統(tǒng)大部分自帶瀏覽器內(nèi)核，一般是Safari或者IE內(nèi)核Trident的

Web標(biāo)準(zhǔn)

了解常用瀏覽器

1、讓W(xué)eb的發(fā)展前景更廣闊
2、內(nèi)容能被更廣泛的設(shè)備訪問
3、更容易被搜尋引擎搜索
4、降低網(wǎng)站流量費(fèi)用

5、使網(wǎng)站更易于維護(hù)
6、提高頁面瀏覽速度

web標(biāo)準(zhǔn)的結(jié)構(gòu)

結(jié)構(gòu)標(biāo)準(zhǔn)：結(jié)構(gòu)用于對(duì)網(wǎng)頁元素進(jìn)行整理和分類，咱們主要學(xué)的是HTML。最重要
表現(xiàn)標(biāo)準(zhǔn)：表現(xiàn)用于設(shè)置網(wǎng)頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為標(biāo)準(zhǔn)：行為是指網(wǎng)頁模型的定義及交互的編寫，咱們主要學(xué)的是 Javascript

HTML初識(shí)

HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標(biāo)簽語言”。是用來描述網(wǎng)頁的一種語言。

所謂超文本，因?yàn)樗梢约尤雸D片、聲音、動(dòng)畫、多媒體等內(nèi)容，不僅如此，它還可以從一個(gè)文件跳轉(zhuǎn)到另一個(gè)文件，與世界各地主機(jī)的文件連接。

注意：體會(huì) 文本標(biāo)簽語言幾個(gè)詞語

HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)

標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)

總結(jié)： HTML 作用就是用標(biāo)記標(biāo)簽來描述網(wǎng)頁，把網(wǎng)頁內(nèi)容在瀏覽器中展示出來。

HTML骨架格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

骨架結(jié)構(gòu)解析

1.HTML標(biāo)簽：
作用所有HTML中標(biāo)簽的一個(gè)根節(jié)點(diǎn)。最大的標(biāo)簽根標(biāo)簽
2 head標(biāo)簽：文檔的頭部
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在 Web 中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者。

注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title

3.title標(biāo)簽：文檔的標(biāo)題
作用：讓頁面擁有一個(gè)屬于自己的標(biāo)題。
4.body標(biāo)簽：文檔的主體以后我們的頁面內(nèi)容基本都是放到body里面的
body 元素包含文檔的所有內(nèi)容（比如文本、超鏈接、圖像、表格和列表等等。）

HTML標(biāo)簽分類

在HTML頁面中，帶有“< >”符號(hào)的元素被稱為HTML標(biāo)簽，如上面提到的 HTML、head、body都是HTML骨架結(jié)構(gòu)標(biāo)簽。所謂標(biāo)簽就是放在“< >” 標(biāo)簽符中表示某個(gè)功能的編碼命令，也稱為HTML標(biāo)簽或 HTML元素

1.雙標(biāo)簽

<標(biāo)簽名> 內(nèi)容 </標(biāo)簽名>

該語法中“<標(biāo)簽名>”表示該標(biāo)簽的作用開始，一般稱為“開始標(biāo)簽（start tag）”，“</標(biāo)簽名>” 表示該標(biāo)簽的作用結(jié)束，一般稱為“結(jié)束標(biāo)簽（end tag）”。和開始標(biāo)簽相比，結(jié)束標(biāo)簽只是在前面加了一個(gè)關(guān)閉符“/”。

比如 <body>我是文字 </body>

2.單標(biāo)簽

<標(biāo)簽名 />

單標(biāo)簽也稱空標(biāo)簽，是指用一個(gè)標(biāo)簽符號(hào)即可完整地描述某個(gè)功能的標(biāo)簽。

比如 <br />

HTML標(biāo)簽關(guān)系

標(biāo)簽的相互關(guān)系就分為兩種：

1.嵌套關(guān)系

2.并列關(guān)系

HTML常用標(biāo)簽

首先 HTML和CSS是兩種完全不同的語言，我們學(xué)的是結(jié)構(gòu)，就只寫HTML標(biāo)簽，認(rèn)識(shí)標(biāo)簽就可以了。不會(huì)再給結(jié)構(gòu)標(biāo)簽指定樣式了。

HTML標(biāo)簽有很多，這里我們學(xué)習(xí)最為常用的，后面有些較少用的，我們可以查下手冊(cè)就可以了。

排版標(biāo)簽

標(biāo)題標(biāo)簽（熟記）

單詞縮寫： head 頭部. 標(biāo)題 title 文檔標(biāo)題

為了使網(wǎng)頁更具有語義化，我們經(jīng)常會(huì)在頁面中用到標(biāo)題標(biāo)簽，HTML提供了6個(gè)等級(jí)的標(biāo)題，即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
其基本語法格式如下：

段落標(biāo)簽（熟記）

水平線標(biāo)簽（認(rèn)識(shí)）

<hr />是單標(biāo)簽

換行標(biāo)簽（熟記）

<br />

div span標(biāo)簽(重點(diǎn))

div span 是沒有語義的是我們網(wǎng)頁布局主要的2個(gè)盒子 css+div

div 就是 division 的縮寫分割，分區(qū)的意思其實(shí)有很多div 來組合網(wǎng)頁。

span, 跨度，跨距；范圍

語法格式：

文本格式化標(biāo)簽(熟記)

在網(wǎng)頁中，有時(shí)需要為文字設(shè)置粗體、斜體或下劃線效果，這時(shí)就需要用到HTML中的文本格式化標(biāo)簽，使文字以特殊的方式顯示。

b i s u 只有使用沒有強(qiáng)調(diào)的意思 strong em del ins 語義更強(qiáng)烈

標(biāo)簽屬性

使用HTML制作網(wǎng)頁時(shí)，如果想讓HTML標(biāo)簽提供更多的信息，可以使用HTML標(biāo)簽的屬性加以設(shè)置。其基本語法格式如下：

<標(biāo)簽名屬性1="屬性值1" 屬性2="屬性值2" …> 內(nèi)容 </標(biāo)簽名>

在上面的語法中，

1.標(biāo)簽可以擁有多個(gè)屬性，必須寫在開始標(biāo)簽中，位于標(biāo)簽名后面。

2.屬性之間不分先后順序，標(biāo)簽名與屬性、屬性與屬性之間均以空格分開。

3.任何標(biāo)簽的屬性都有默認(rèn)值，省略該屬性則取默認(rèn)值。

采取鍵值對(duì) 的格式 key="value" 的格式

比如:

屬性是寬度

值是 400

圖像標(biāo)簽img (重點(diǎn))

單詞縮寫： image 圖像

HTML網(wǎng)頁中任何元素的實(shí)現(xiàn)都要依靠HTML標(biāo)簽，要想在網(wǎng)頁中顯示圖像就需要使用圖像標(biāo)簽，接下來將詳細(xì)介紹圖像標(biāo)簽<img />以及和他相關(guān)的屬性。其基本語法格式如下：

該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標(biāo)簽的必需屬性。

鏈接標(biāo)簽(重點(diǎn))

單詞縮寫： anchor 的縮寫 [???k?(r)] 。基本解釋錨, 鐵錨的

在HTML中創(chuàng)建超鏈接非常簡(jiǎn)單，只需用標(biāo)簽環(huán)繞需要被鏈接的對(duì)象即可，其基本語法格式如下：

<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>

href：用于指定鏈接目標(biāo)的url地址，當(dāng)為標(biāo)簽應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能。 Hypertext Reference的縮寫。意思是超文本引用

target：用于指定鏈接頁面的打開方式，其取值有self和blank兩種，其中self為默認(rèn)值，blank為在新窗口中打開方式。

注意：

1.外部鏈接需要添加 http:// www.baidu.com

2.內(nèi)部鏈接直接鏈接內(nèi)部頁面名稱即可比如 < a href="index.html"> 首頁

3.如果當(dāng)時(shí)沒有確定鏈接目標(biāo)時(shí)，通常將鏈接標(biāo)簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時(shí)為一個(gè)空鏈接。

4.不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁中各種網(wǎng)頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。

錨點(diǎn)定位（難點(diǎn)）

通過創(chuàng)建錨點(diǎn)鏈接，用戶能夠快速定位到目標(biāo)內(nèi)容。

創(chuàng)建錨點(diǎn)鏈接分為兩步：

1.使用“a href=”#id名>“鏈接文本"</a>創(chuàng)建鏈接文本（被點(diǎn)擊的） <a href="#two"> 2.使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置。 <h3 id="two">第2集</h3>

base 標(biāo)簽基本的

base 可以設(shè)置整體鏈接的打開狀態(tài)

base 寫到 <head> </head> 之間

把所有的連接都默認(rèn)添加 target="_blank"

特殊字符標(biāo)簽（理解）

注釋標(biāo)簽

在HTML中還有一種特殊的標(biāo)簽——注釋標(biāo)簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標(biāo)簽。其基本語法格式如下：

ctrl + / 或者 ctrl +shift + /

注釋內(nèi)容不會(huì)顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分，也會(huì)被下載到用戶的計(jì)算機(jī)上，查看源代碼時(shí)就可以看到。

路徑(重點(diǎn)、難點(diǎn))

實(shí)際工作中，通常新建一個(gè)文件夾專門用于存放圖像文件，這時(shí)再插入圖像，就需要采用“路徑”的方式來指定圖像文件的位置。

路徑可以分為：相對(duì)路徑和絕對(duì)路徑

相對(duì)路徑

以引用文件之網(wǎng)頁所在位置為參考基礎(chǔ)，而建立出的目錄路徑。因此，當(dāng)保存于不同目錄的網(wǎng)頁引用同一個(gè)文件時(shí)，所使用的路徑將不相同，故稱之為相對(duì)路徑。

圖像文件和HTML文件位于同一文件夾：只需輸入圖像文件的名稱即可，如img src="logo.gif" /。
圖像文件位于HTML文件的下一級(jí)文件夾：輸入文件夾名和文件名，之間用“/”隔開，如img src="img/img01/logo.gif" /。

圖像文件位于HTML文件的上一級(jí)文件夾：在文件名之前加入“../” ，如果是上兩級(jí)，則需要使用 “../ ../”，以此類推，如img src="../logo.gif" /。

絕對(duì)路徑

絕對(duì)路徑以Web站點(diǎn)根目錄為參考基礎(chǔ)的目錄路徑。之所以稱為絕對(duì)，意指當(dāng)所有網(wǎng)頁引用同一個(gè)文件時(shí)，所使用的路徑都是一樣的

“D:webimglogo.gif”，或完整的網(wǎng)絡(luò)地址，例如“http://www.itcast.cn/images/l...”。

總結(jié)今天的思路貫穿線

列表標(biāo)簽

無序列表 ul （重點(diǎn)）

無序列表的各個(gè)列表項(xiàng)之間沒有順序級(jí)別之分，是并列的。其基本語法格式如下：

<ul> <li>列表項(xiàng)1</li> <li>列表項(xiàng)2</li> <li>列表項(xiàng)3</li> ...... </ul>

注意：

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。
<li>與</li>之間相當(dāng)于一個(gè)容器，可以容納所有元素。

無序列表會(huì)帶有自己樣式屬性，放下那個(gè)樣式，一會(huì)讓CSS來！

有序列表 ol （了解）

有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列定義，有序列表的基本語法格式如下：

<ol> <li>列表項(xiàng)1</li> <li>列表項(xiàng)2</li> <li>列表項(xiàng)3</li> ...... </ol>

所有特性基本與ul 一致。

但是實(shí)際工作中，較少用 ol img src="media/1.jpg" />

自定義列表（理解）

定義列表常用于對(duì)術(shù)語或名詞進(jìn)行解釋和描述，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號(hào)。其基本語法如下：

表格 table(會(huì)使用)

創(chuàng)建表格

在HTML網(wǎng)頁中，要想創(chuàng)建表格，就需要使用表格相關(guān)的標(biāo)簽。創(chuàng)建表格的基本語法格式如下：

在上面的語法中包含三對(duì)HTML標(biāo)簽，分別為 table</table、tr</tr、td</td，他們是創(chuàng)建表格的基本標(biāo)簽，缺一不可，下面對(duì)他們進(jìn)行具體的解釋
1.table用于定義一個(gè)表格。

2.tr 用于定義表格中的一行，必須嵌套在 table標(biāo)簽中，在 table中包含幾對(duì) tr，就有幾行表格。

3.td /td：用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)簽中，一對(duì) <tr> </tr>中包含幾對(duì)<td></td>，就表示該行中有多少列（或多少個(gè)單元格）。

注意：

1. <tr></tr>中只能嵌套<td></td> 2. <td></td>標(biāo)簽，他就像一個(gè)容器，可以容納所有的元素

表格屬性

表頭標(biāo)簽

表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設(shè)置了表頭的表格。設(shè)置表頭非常簡(jiǎn)單，只需用表頭標(biāo)簽th</th替代相應(yīng)的單元格標(biāo)簽td</td即可。

表格結(jié)構(gòu)（了解）

在使用表格進(jìn)行布局時(shí)，可以將表格劃分為頭部、主體和頁腳（頁腳因?yàn)橛屑嫒菪詥栴}，我們不在贅述），具體如下所示：

<thead></thead>：用于定義表格的頭部。

必須位于<table></table> 標(biāo)簽中，一般包含網(wǎng)頁的logo和導(dǎo)航等頭部信息。

<tbody></tbody>：用于定義表格的主體。

位于<table></table>標(biāo)簽中，一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容。

表格標(biāo)題

表格的標(biāo)題： caption
定義和用法

caption 元素定義表格標(biāo)題。

<table>    <caption>我是表格標(biāo)題</caption> </table>

caption 標(biāo)簽必須緊隨 table 標(biāo)簽之后。您只能對(duì)每個(gè)表格定義一個(gè)標(biāo)題。通常這個(gè)標(biāo)題會(huì)被居中于表格之上。

合并單元格(難點(diǎn))

跨行合并：rowspan 跨列合并：colspan

合并單元格的思想：

將多個(gè)內(nèi)容合并的時(shí)候，就會(huì)有多余的東西，把它刪除。例如把 3個(gè) td 合并成一個(gè)，那就多余了2個(gè)，需要?jiǎng)h除。公式：刪除的個(gè)數(shù) = 合并的個(gè)數(shù) - 1

合并的順序先上先左

總結(jié)表格

表格提供了HTML 中定義表格式數(shù)據(jù)的方法。
表格中由行中的單元格組成。

表格中沒有列元素，列的個(gè)數(shù)取決于行的單元格個(gè)數(shù)。
表格不要糾結(jié)于外觀，那是CSS 的作用。

表格的學(xué)習(xí)要求：能手寫表格結(jié)構(gòu)，并且能合并單元格。

表單標(biāo)簽(掌握)

表單控件：

包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。

提示信息：

一個(gè)表單中通常還需要包含一些說明性的文字，提示用戶進(jìn)行填寫和操作。

表單域：

他相當(dāng)于一個(gè)容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺(tái)服務(wù)器。

input 控件(重點(diǎn))

在上面的語法中，input /標(biāo)簽為單標(biāo)簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，input /標(biāo)簽還可以定義很多其他的屬性，其常用屬性如下表所示。

label標(biāo)簽(理解)

label 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)簽）。

作用：用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時(shí)候, 被綁定的表單元素就會(huì)獲得輸入焦點(diǎn)

如何綁定元素呢？

for 屬性規(guī)定 label 與哪個(gè)表單元素綁定。

<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要輸入大量的信息，就需要用到textarea/textarea標(biāo)簽。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語法格式如下：

<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">   文本內(nèi)容 </textarea>

下拉菜單

使用select控件定義下拉菜單的基本語法格式如下

<select>   <option>選項(xiàng)1</option>   <option>選項(xiàng)2</option>   <option>選項(xiàng)3</option>   ... </select>

注意：

select</select中至少應(yīng)包含一對(duì)option></option。
在option 中定義selected=" selected "時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。

表單域

在HTML中，form標(biāo)簽被用于定義表單域，即創(chuàng)建一個(gè)表單，以實(shí)現(xiàn)用戶信息的收集和傳遞，form中的所有內(nèi)容都會(huì)被提交給服務(wù)器。創(chuàng)建表單的基本語法格式如下：

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

常用屬性：

Action
在表單收集到信息后，需要將信息傳遞給服務(wù)器進(jìn)行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。
method
用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。

name
用于指定表單的名稱，以區(qū)分同一個(gè)頁面中的多個(gè)表單。

注意：每個(gè)表單都應(yīng)該有自己表單域。

如需轉(zhuǎn)載，請(qǐng)注明出處，否則將追究法律責(zé)任。

TML提交按鈕是一種HTML表單元素，允許用戶將表單數(shù)據(jù)提交到服務(wù)器。提交按鈕通常與表單元素（如文本框和下拉列表）一起使用，以便用戶可以輸入并提交信息。在HTML中，提交按鈕通常使用標(biāo)簽來定義。

如何編寫HTML提交按鈕代碼？

要?jiǎng)?chuàng)建HTML提交按鈕，您需要使用標(biāo)簽，并將type屬性設(shè)置為“submit”。例如，以下代碼會(huì)創(chuàng)建一個(gè)名為“submit”的提交按鈕：

```

在這個(gè)例子中，“action”屬性指定了表單數(shù)據(jù)提交到的URL，“method”屬性指定了提交表單的HTTP方法（通常是POST或GET）。按鈕的“value”屬性指定了按鈕上顯示的文本。

如何自定義HTML提交按鈕樣式？

默認(rèn)情況下，HTML提交按鈕的樣式取決于用戶的操作系統(tǒng)和瀏覽器。但是，您可以使用CSS樣式表來自定義按鈕的外觀。例如，以下代碼將創(chuàng)建一個(gè)紅色的提交按鈕：

```

在這個(gè)例子中，我們使用了style屬性來設(shè)置按鈕的背景顏色和文本顏色。您還可以使用其他CSS屬性來自定義按鈕的大小、邊框等。

如何使用JavaScript處理HTML提交按鈕？

您可以使用JavaScript來添加交互性和驗(yàn)證表單數(shù)據(jù)。例如，以下代碼將在用戶單擊提交按鈕時(shí)彈出一個(gè)提示框：

```

在這個(gè)例子中，我們使用了onsubmit屬性來指定當(dāng)表單提交時(shí)要運(yùn)行的JavaScript函數(shù)。此函數(shù)返回true或false，如果返回false，則表單將不會(huì)提交。在這個(gè)例子中，我們使用confirm()函數(shù)顯示一個(gè)提示框，并在用戶單擊“確定”時(shí)返回true。

總結(jié)

HTML提交按鈕是Web表單中的重要元素，允許用戶將表單數(shù)據(jù)提交到服務(wù)器。您可以使用標(biāo)簽來創(chuàng)建提交按鈕，并使用CSS樣式表自定義外觀。您還可以使用JavaScript添加交互性和驗(yàn)證表單數(shù)據(jù)。通過掌握HTML提交按鈕的知識(shí)，您可以創(chuàng)建復(fù)雜的Web表單，并收集和處理用戶數(shù)據(jù)。

在線咨詢

上一篇：Vue3 學(xué)習(xí)筆記，如何使用 watch 監(jiān)聽數(shù)據(jù)變
下一篇：JavaScript 移動(dòng)端圖片輪播-原生

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML的基本語法以及如何使用HTML來創(chuàng)建網(wǎng)頁

一部分：HTML簡(jiǎn)介

什么是HTML？

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

HTML標(biāo)簽和元素

HTML注釋

第二部分：HTML基本元素

文本

圖像

鏈接

列表

無序列表

有序列表

定義列表

第三部分：HTML表單

<form>元素

輸入字段

文本框

密碼框

單選按鈕

復(fù)選框

下拉列表

第四部分：HTML樣式和CSS

內(nèi)聯(lián)樣式

外部樣式表

總結(jié)

習(xí)目標(biāo)

HTML第一天目標(biāo)

開發(fā)工具

瀏覽器顯示

瀏覽器內(nèi)核（理解）

Web標(biāo)準(zhǔn)

web標(biāo)準(zhǔn)的結(jié)構(gòu)

HTML初識(shí)

HTML骨架格式

骨架結(jié)構(gòu)解析

HTML標(biāo)簽分類

HTML標(biāo)簽關(guān)系

HTML常用標(biāo)簽

標(biāo)題標(biāo)簽（熟記）

段落標(biāo)簽（熟記）

水平線標(biāo)簽（認(rèn)識(shí)）

換行標(biāo)簽（熟記）

div span標(biāo)簽(重點(diǎn))

文本格式化標(biāo)簽(熟記)

標(biāo)簽屬性

圖像標(biāo)簽img (重點(diǎn))

鏈接標(biāo)簽(重點(diǎn))

錨點(diǎn)定位 （難點(diǎn)）

base 標(biāo)簽 基本的

特殊字符標(biāo)簽 （理解）

注釋標(biāo)簽

路徑(重點(diǎn)、難點(diǎn))

相對(duì)路徑

絕對(duì)路徑

總結(jié)今天的思路貫穿線

列表標(biāo)簽

無序列表 ul （重點(diǎn)）

有序列表 ol （了解）

自定義列表（理解）

表格 table(會(huì)使用)

創(chuàng)建表格

表格屬性

表頭標(biāo)簽

表格結(jié)構(gòu)（了解）

表格標(biāo)題

合并單元格(難點(diǎn))

總結(jié)表格

表單標(biāo)簽(掌握)

input 控件(重點(diǎn))

label標(biāo)簽(理解)

textarea控件(文本域)

下拉菜單

表單域

您的項(xiàng)目需求

什么是HTML？

錨點(diǎn)定位（難點(diǎn)）

base 標(biāo)簽基本的

特殊字符標(biāo)簽（理解）

路徑(重點(diǎn)、難點(diǎn))