站長(zhǎng)資訊網(wǎng)本篇文章帶大家了解一下HTML（超文本標(biāo)記語(yǔ)言），介紹一下HTML的本質(zhì)，HTML文檔的結(jié)構(gòu)、HTML文檔的基本標(biāo)簽和圖像標(biāo)簽、列表、表格標(biāo)簽、媒體元素、表單，希望對(duì)大家有所幫助！
HTML 到底是什么？
HTML 英文全稱是 Hyper Text Markup Language，中文譯為“超文本標(biāo)記語(yǔ)言”，專門用來(lái)設(shè)計(jì)和編輯網(wǎng)頁(yè)。
我們從 HTML 中文全稱來(lái)分析一下它的本質(zhì)：
1) 超文本
也即超越純文本，這意味著 HTML 文檔不僅能包含文本（文字），還能包含圖片、音視頻、表格、列表、鏈接、按鈕、輸入框等高級(jí)內(nèi)容。
超鏈接是互聯(lián)網(wǎng)的紐帶，它能將眾多網(wǎng)頁(yè)連接起來(lái)，讓它們交織在一起，形成一張“網(wǎng)”。沒(méi)有超鏈接，就沒(méi)有互聯(lián)網(wǎng)。
2) 標(biāo)記語(yǔ)言
HTML 是一種計(jì)算機(jī)語(yǔ)言，但它不能編程，只能用來(lái)標(biāo)記網(wǎng)頁(yè)中的內(nèi)容。HTML 通過(guò)不同的標(biāo)簽來(lái)標(biāo)記不同的內(nèi)容、格式、布局等，例如：
-
<img> 標(biāo)簽表示一張圖片；
-
<a> 標(biāo)簽表示一個(gè)鏈接；
-
<table> 標(biāo)簽表示一個(gè)表格；
-
<input> 標(biāo)簽表示一個(gè)輸入框；
-
<p> 標(biāo)簽表示一段文本；
-
<strong> 標(biāo)簽表示文本加粗效果；
-
<div> 標(biāo)簽表示塊級(jí)布局。
HTML文檔結(jié)構(gòu)
HTML 頁(yè)面的基本結(jié)構(gòu)如下所示，其中包含了各種創(chuàng)建網(wǎng)頁(yè)所需的標(biāo)簽（例如 doctype、html、head、title 和 body 等）。
<!--這是html的注釋信息--> <!--這是DOCTYPE聲明--> <!DOCTYPE html> <!--這是根--> <html> <!--這是頭--> <head> <!-- 描述性標(biāo)簽 --> <meta charset = "UTF-8"> <!--標(biāo)題欄--> <title>Hello</title> </head> <!--網(wǎng)頁(yè)體--> <body> <!--這里的內(nèi)容顯示到網(wǎng)頁(yè)上--> 這是我的第一個(gè)HTML頁(yè)面 </body> </html>
語(yǔ)法說(shuō)明如下：
-
<!DOCTYPE html>：這是文檔類型聲明，用來(lái)將文檔聲明為 HTML 文檔（從技術(shù)上來(lái)說(shuō)它并不是標(biāo)簽），doctype 聲明不區(qū)分大小寫； -
<html> </html>：該標(biāo)簽是 HTML 頁(yè)面的根標(biāo)簽，其他所有的標(biāo)簽都需要在 <html> 和 </html> 標(biāo)簽之間定義； -
<head> </head>：該標(biāo)簽中用來(lái)定義 HTML 文檔的一些信息，例如標(biāo)題、編碼格式等等； -
<meta charset="UTF-8">：用來(lái)指明當(dāng)前網(wǎng)頁(yè)采用 UTF-8 編碼，UTF-8 是全球通用的編碼格式，絕大多數(shù)網(wǎng)頁(yè)都采用 UTF-8 編碼； -
<title> </title>：該標(biāo)簽用來(lái)定義網(wǎng)頁(yè)的標(biāo)題，網(wǎng)頁(yè)標(biāo)題會(huì)顯示在瀏覽器的標(biāo)簽欄； -
<body> </body>：該標(biāo)簽用來(lái)定義網(wǎng)頁(yè)中我們能通過(guò)瀏覽器看到的所有內(nèi)容，例如段落、標(biāo)題、圖片、鏈接等等；
由于 HTML 文檔屬于文本文件，所以我們可以使用任何文本編輯器來(lái)創(chuàng)建和修改 HTML 文件，對(duì)于初學(xué)者來(lái)說(shuō)最好使用系統(tǒng)自帶的文本編輯器，例如 Windows 記事本、Linux Vim 和 Mac OS TextEdit，當(dāng)有了一定的基礎(chǔ)之后再選用專業(yè)的文本編輯器，例如 Notepad++、Sublime Text、VS Code 等。
另外，您必須將 HTML 文檔保存為.html或者.htm格式才可以直接在瀏覽器中打開并瀏覽其中的內(nèi)容。例如上面的示例代碼，將其保存在一個(gè)名為 index.html 的文件中，雙擊即可在瀏覽器中看到運(yùn)行結(jié)果。
HTML文檔的基本標(biāo)簽
-
標(biāo)題標(biāo)簽
-
段落標(biāo)簽
-
換行標(biāo)簽
-
水平線標(biāo)簽
-
字體樣式標(biāo)簽
-
注釋和特殊符號(hào)
<!--這是html的注釋信息--> <!--這是根--> <html> <!--這是頭--> <head> <!-- 描述性標(biāo)簽 --> <meta charset = "UTF-8"> <!--標(biāo)題欄--> <title>基本標(biāo)簽</title> </head> <!--網(wǎng)頁(yè)體--> <body> <!--標(biāo)題標(biāo)簽--> <h1>一級(jí)標(biāo)簽</h1> <h2>二級(jí)標(biāo)簽</h2> <h3>三級(jí)標(biāo)簽</h3> <h4>四級(jí)標(biāo)簽</h4> <h5>五級(jí)標(biāo)簽</h5> <h5>六級(jí)標(biāo)簽</h5> HTML是一種超文本標(biāo)記語(yǔ)言，是一種瀏覽器上的規(guī)范 超文本是指，流媒體，聲音，視頻，圖片等 標(biāo)記語(yǔ)言 由大量的標(biāo)簽組成 <!--段落標(biāo)簽--> <p>HTML是一種超文本標(biāo)記語(yǔ)言，是一種瀏覽器上的規(guī)范</p> <p>超文本是指，流媒體，聲音，視頻，圖片等</p> <p>標(biāo)記語(yǔ)言 由大量的標(biāo)簽組成</p> <!--換行標(biāo)簽--> HTML是一種超文本標(biāo)記語(yǔ)言，是一種瀏覽器上的規(guī)范 <br> 超文本是指，流媒體，聲音，視頻，圖片等 <br> 標(biāo)記語(yǔ)言 由大量的標(biāo)簽組成 <!--水平線標(biāo)簽--> <hr/> <!--字體樣式標(biāo)簽--> <!--粗體，斜體--> <br> 粗體：<strong>THER</strong> 斜體：<em>THER</em> <!--特殊符號(hào)標(biāo)簽--> <br> 空 格 空 格 <br> 大于號(hào)：> <br> 小于號(hào)：< </body> </html>
HTML文檔的圖像標(biāo)簽
常見的圖像格式：JPG,GIF,PNG,BMP……
<html> <head> <meta charset = "UTF-8"> <title>圖像標(biāo)簽學(xué)習(xí)</title> </head> <body> <!--img學(xué)習(xí) src（必填）：圖片地址：相對(duì)地址，絕對(duì)地址 alt（必填）:圖片名字 title：懸停文字 width：寬度 height：高度 --> <img src="../resources/image/Cat.png" alt="Cat"title="一只可愛(ài)的貓貓（懸停文字）"width="500"height="300"> </body> </html>
超鏈接標(biāo)簽及應(yīng)用
- a標(biāo)簽
- href：必填，表示要跳轉(zhuǎn)到那個(gè)界面
- target：表示新標(biāo)簽頁(yè)在哪里打開（默認(rèn)在當(dāng)前標(biāo)簽）
- _blank:新一個(gè)標(biāo)簽頁(yè)
- _self：當(dāng)前標(biāo)簽頁(yè)
- 錨鏈接 （頁(yè)面內(nèi)的跳轉(zhuǎn)）
- 1.需要一個(gè)錨標(biāo)記
- 2.跳轉(zhuǎn)到標(biāo)記處
- 功能性鏈接
- 郵件鏈接：mailto：
- QQ鏈接：qq推廣
舉例：
<html> <head> <meta charset = "UTF-8"> <title>鏈接標(biāo)簽學(xué)習(xí)</title> </head> <body> <!--使用name作為標(biāo)記--> <a name="top"></a> <!--a標(biāo)簽 href：必填，表示要跳轉(zhuǎn)到那個(gè)界面 target：表示新標(biāo)簽頁(yè)在哪里打開（默認(rèn)在當(dāng)前標(biāo)簽） _blank:新一個(gè)標(biāo)簽頁(yè) _self：當(dāng)前標(biāo)簽頁(yè) --> <a href="hello.html"target="_parent">點(diǎn)擊我跳轉(zhuǎn)到頁(yè)面1</a> <br> <a href="圖像標(biāo)簽.html"target="_self"><strong>點(diǎn)擊我跳轉(zhuǎn)到頁(yè)面2</strong></a> <br> <a href="基本標(biāo)簽.html">點(diǎn)擊我跳轉(zhuǎn)到頁(yè)面3</a> <br> <a href="鏈接標(biāo)簽.html">點(diǎn)擊我跳轉(zhuǎn)到頁(yè)面4</a> <br> <!--a標(biāo)簽的嵌套使用--> <a href="http://liukaixuan.cn"target="_blank"> <img src="../resources/image/Cat.png" alt="Cat"title="點(diǎn)擊跳轉(zhuǎn)到我的博客"width="500"height="300"> </a> <br> <!--a標(biāo)簽的嵌套使用--> <a href="http://liukaixuan.cn"target="_blank"> <img src="../resources/image/Cat.png" alt="Cat"title="點(diǎn)擊跳轉(zhuǎn)到我的博客"width="500"height="300"> </a> <br> <!--a標(biāo)簽的嵌套使用--> <a href="http://liukaixuan.cn"target="_blank"> <img src="../resources/image/Cat.png" alt="Cat"title="點(diǎn)擊跳轉(zhuǎn)到我的博客"width="500"height="300"> </a> <br> <!--a標(biāo)簽的嵌套使用--> <a href="http://liukaixuan.cn"target="_blank"> <img src="../resources/image/Cat.png" alt="Cat"title="點(diǎn)擊跳轉(zhuǎn)到我的博客"width="500"height="300"> </a> <br> <!--錨鏈接 （頁(yè)面內(nèi)的跳轉(zhuǎn)） 1.需要一個(gè)錨標(biāo)記 2.跳轉(zhuǎn)到標(biāo)記處 --> <a href="#top">點(diǎn)我回到頂部</a> <a href="圖像標(biāo)簽.html#第四張照片的位置">點(diǎn)我跳轉(zhuǎn)到指定位置</a> <!--功能性鏈接 郵件鏈接：mailto： QQ鏈接：qq推廣 --> <a href="mailto:1920914318@qq.com">點(diǎn)擊聯(lián)系我</a> <br> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="點(diǎn)擊這里給我發(fā)消息" title="點(diǎn)擊這里給我發(fā)消息"/> </a> </body> </html>
行內(nèi)元素和塊元素
- 塊元素
- 無(wú)論內(nèi)容多少，該元素獨(dú)占一行
- 例如（p/h1-h6……）
- 行內(nèi)元素
- 內(nèi)容撐開寬度，左右都是行內(nèi)元素的可以排在一行
- 例如（a、strong、em……）
列表
列表的分類
- 無(wú)序列表：ol標(biāo)簽
- 有序列表：ul標(biāo)簽 應(yīng)用范圍：導(dǎo)航，菜單欄
- 自定義列表
- dl：標(biāo)簽
- dt：列表名稱
- dd：列表內(nèi)容
列表中也可以實(shí)現(xiàn)嵌套
示例代碼：
<html> <head> <meta charset = "UTF-8"> <title>列表學(xué)習(xí)</title> </head> <body> <!--有序列表--> <ol> <li>java</li> <ol> <li>java</li> <li>python</li> <li>c++</li> </ol> <li>python</li> <li>c++</li> </ol> <hr> <!--無(wú)序列表--> <ul> <li>java</li> <ul> <li>java</li> <li>python</li> <li>c++</li> </ul> <li>python</li> <li>c++</li> </ul> <hr> <!--自定義列表--> <dl> <dt>學(xué)科</dt> <dd>Java</dd> <dd>Python</dd> <dd>C++</dd> <dt>地點(diǎn)</dt> <dd>陜西</dd> <dd>河南</dd> <dd>曹縣</dd> </dl> </body> </html>
表格標(biāo)簽
- 為什么學(xué)習(xí)表格?
- 簡(jiǎn)單通用
- 結(jié)構(gòu)穩(wěn)定
- 基本結(jié)構(gòu)
- 單元格
- 行
- 列
- 跨行
- 跨列
<html> <head> <meta charset = "UTF-8"> <title>表格學(xué)習(xí)</title> </head> <body> <!--表格table 行：tr 列：td --> <table border="1px"> <tr> <!-- colspan跨列--> <td colspan="4">1-1</td> </tr> <tr> <!-- rowspan跨行--> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> </tr> </table> </body> </html>
媒體元素
- 視頻元素
- video
- 音頻元素
- audio
<html> <head> <meta charset = "UTF-8"> <title>媒體元素學(xué)習(xí)</title> </head> <body> <!--音頻和視頻--> <!--視頻 src：資源路徑 controls：控制條 autoplay：自動(dòng)播放 --> <video src="../resources/video/video.mp4"controls autoplay></video> <!--音頻--> <audio src="../resources/audio/We_Are_The_Brave.mp3" controls autoplay></audio> <audio src="../resources/audio/天空之城.mp3" controls autoplay></audio> </body> </html>
頁(yè)面結(jié)構(gòu)分析
| 元素名 | 描 述 |
|---|---|
| header | 標(biāo)題頭部區(qū)域的內(nèi)容（用于整個(gè)頁(yè)面或頁(yè)面中的一塊區(qū)域） |
| footer | 標(biāo)題腳部區(qū)域的內(nèi)容（用于整個(gè)頁(yè)面或頁(yè)面中的一塊區(qū)域） |
| section | Web頁(yè)面中的一塊獨(dú)立區(qū)域 |
| article | 獨(dú)立的文章內(nèi)容 |
| aside | 相關(guān)內(nèi)容或應(yīng)用（常用于側(cè)邊欄） |
| nav | 導(dǎo)航類的輔助內(nèi)容 |
iframe內(nèi)聯(lián)框架
<html lang = "en"> <head> <meta charset = "UTF-8"> <title>iframe內(nèi)聯(lián)框架學(xué)習(xí)</title> </head> <body> <!--iframe src（必填）：引用頁(yè)面地址 name:框架標(biāo)識(shí)名 --> <iframe src="http://liukaixuan.cn" name="博客" width="1200" height="800" ></iframe> <iframe src="列表.html" ></iframe> </body> </html>
HTML表單
表單語(yǔ)法：
- 表單form
- action：表單提交的位置，可以是網(wǎng)站，也可以是一個(gè)請(qǐng)求處理的地址
- method:post,get提交方式
- get:我們可以在url中看到我們提交的信息，不安全，高效
- post：在url看不到提交的信息，安全，可以傳輸大文件。
表單基本控件示例代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表單學(xué)習(xí)--登錄注冊(cè)</title> </head> <body> <h1>注冊(cè)</h1> <!--表單form action：表單提交的位置，可以是網(wǎng)站，也可以是一個(gè)請(qǐng)求處理的地址 method:post,get提交方式 get:我們可以在url中看到我們提交的信息，不安全，高效 post --> <form action="Hello.html" method="post"> <!-- 文本輸入框--> <p>名字：<input type="text"name="username" placeholder="請(qǐng)輸入用戶名" required maxlength="11" size="20"></p> <p>密碼：<input type="password" name="password" maxlength="10" size="20"></p> <!-- 單選框標(biāo)簽 input type="radio" value：?jiǎn)芜x框的值 --> <p>性別： <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl"name="sex"/>女 </p> <!-- 多選框標(biāo)簽 input type="checkbox" --> <p>愛(ài)好： <input type="checkbox"value="sleep"name="hobby">睡覺(jué) <input type="checkbox"value="eat"name="hobby">吃飯 <input type="checkbox"value="play"name="hobby">打豆豆 </p> <!-- 按鈕 input type="button" 普通按鈕 input type="image" 圖像按鈕 <input type="submit"> 提交按鈕 <input type="reset"> 重置按鈕 --> <p>按鈕： <input type="button" name="button1" value="點(diǎn)擊此處"> <!-- <input type="image" src="../resources/image/Cat.png">--> </p> <!-- 下拉框，列表框--> <p>選項(xiàng)： <select name="列表名稱"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> <option value="d">D</option> </select> </p> <!-- 文本域 textarea name="textarea" cols="50" rows="20" --> <p> <textarea name="textarea" cols="50" rows="20">文本內(nèi)容</textarea> </p> <!-- 文件域 input type="file" name="files" --> <p> <input type="file" name="files"> <input type="button"value="上傳"name="upload"> </p> <!-- 郵件驗(yàn)證--> <p>郵件： <input type="email" name="email"> </p> <!-- URL驗(yàn)證--> <p>URL： <input type="url" name="url"> </p> <!-- 數(shù)字驗(yàn)證--> <p>數(shù)字： <input type="number" name="num"max="100" min="0" step="10"> </p> <!-- 滑塊--> <p>滑塊： <input type="range"min="0"max="100"name="voice"step="2"> </p> <!-- 搜索框 <input type="search" --> <p>搜索： <input type="search"name="search"> </p> <!-- 增強(qiáng)鼠標(biāo)可用性--> <p> <label for="1">點(diǎn)擊此處輸入信息</label> <input type="text" id="1"> </p> <p>自定義郵箱： <input type="text"name="diymail" pattern="^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$"> </p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html>
表單的應(yīng)用
- 隱藏域：hidden
- 只讀：readonly
- 禁用：disabled
表單初級(jí)驗(yàn)證
- 常用方式：
- placeholder：提示信息，用在輸入框控件中
- required：不能為空，必須有值才能提交，用在輸入框控件
- pattern：正則表達(dá)式驗(yàn)證
