HTML基本元素標(biāo)簽介紹
我要評(píng)論一、什么是HTML
HTML（Hypertext Markup Language）：即超文本標(biāo)記語(yǔ)言，是一種用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的標(biāo)記語(yǔ)言，用該語(yǔ)言編寫的文件，以.html或.htm為后綴，并且由瀏覽器解釋執(zhí)行，生成相應(yīng)的界面。網(wǎng)頁(yè)文件本身只是一種文本文件，我們通過(guò)在文本文件中添加標(biāo)記符號(hào)，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等），這些標(biāo)記符號(hào)就是html，我們學(xué)習(xí)html就是學(xué)習(xí)這些標(biāo)記符號(hào)，html標(biāo)記符號(hào)也稱為html元素。
二、HTML相關(guān)術(shù)語(yǔ)
標(biāo)記
標(biāo)記是用尖括號(hào)<>包圍的單詞，很多標(biāo)記是成對(duì)的，一個(gè)是開(kāi)始標(biāo)記，一個(gè)是結(jié)束標(biāo)記(單詞前加/)
元素
每一對(duì)尖括號(hào)包圍的部分：例如<body></body>包圍的部分就叫做body元素
元素通常由三個(gè)部分組成：
- 開(kāi)始標(biāo)記
- 內(nèi)容
- 結(jié)束標(biāo)記
屬性
用來(lái)修飾元素
每個(gè)屬性都有值
屬性放置開(kāi)始標(biāo)記中
示例：
三、HTML文檔的基本結(jié)構(gòu)
1、一個(gè)HTML文檔可以看成由以下兩個(gè)部分構(gòu)成：
文件頭
由<HEAD></HEAD>標(biāo)記標(biāo)識(shí)
文檔主體部分
由<BODY></BODY>標(biāo)記標(biāo)識(shí)
語(yǔ)法：<head>內(nèi)容</head>
HEAD元素包含了與當(dāng)前文檔相關(guān)的信息，如文檔的標(biāo)題，關(guān)鍵字以及一些和文檔內(nèi)容無(wú)關(guān)僅對(duì)文檔本身進(jìn)行說(shuō)明的數(shù)據(jù)信息。
2、head元素
1）、標(biāo)題元素
<title></title>:標(biāo)題元素
標(biāo)題元素的內(nèi)容出現(xiàn)在瀏覽器頂部。
沒(méi)有屬性。
必須出現(xiàn)在head元素中且只能有一個(gè)標(biāo)題元素。
2）、元數(shù)據(jù)元素
<meta>元數(shù)據(jù)元素：設(shè)置消息頭
meta的意思是“關(guān)于”，是關(guān)于某個(gè)網(wǎng)頁(yè)的基本信息。
搜索引擎對(duì)meta元素中數(shù)據(jù)進(jìn)行搜索可以幫助訪問(wèn)者找到該網(wǎng)頁(yè)
屬性
- name：指定特性名
- content：指定特性的值
- http-equiv：使得HTTP服務(wù)器根據(jù)http-equiv屬性的值獲取http響應(yīng)信息頭，以便讓瀏覽器按照指定的方式顯示頁(yè)面。
META作用舉例
給網(wǎng)頁(yè)添加說(shuō)明（比如網(wǎng)頁(yè)的作者，關(guān)鍵字等）
<meta name="Author" content="Dave Raggett">
給網(wǎng)頁(yè)增加關(guān)鍵字，提高網(wǎng)頁(yè)被瀏覽的機(jī)會(huì)
<meta name="Keywords" content="這里寫關(guān)鍵字">
定期刷新網(wǎng)頁(yè)，以秒為單位
<meta http-equiv="refresh" content="1">
<meta http-equiv="refresh" content="5;url='http://www.baidu.com'">
解決網(wǎng)頁(yè)亂碼問(wèn)題
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
讓網(wǎng)頁(yè)始終保持最新
瀏覽器為了節(jié)約時(shí)間，在本地硬盤上保存一個(gè)網(wǎng)上問(wèn)卷的臨時(shí)版本。當(dāng)反復(fù)瀏覽該網(wǎng)頁(yè)時(shí)，瀏覽器直接調(diào)用硬盤上的文件，使用meta強(qiáng)制性調(diào)用網(wǎng)上的最新版本
<meta http-equiv="Pragma" content="no-cache">
3、Body元素
<a>:超鏈接標(biāo)記
基本語(yǔ)法
開(kāi)始標(biāo)記:<a>必需
內(nèi)容：
內(nèi)聯(lián)元素（不能嵌套a元素）
結(jié)束標(biāo)記:</a>必需
主要屬性
Href:用來(lái)說(shuō)明鏈接資源的URL
Target：打開(kāi)鏈接的窗口，有四個(gè)值：
- <a href=url target="_self"> 顯示在本窗口 默認(rèn)在本窗口打開(kāi)，
- <a href=url target="_blank"> 顯示在新窗口
- <a href=url target="_parent"> 顯示在父窗口
- <a href=url target="_top"> 顯示在整個(gè)瀏覽器窗口
Title：提示信息：鼠標(biāo)放上去的提示
Name：錨點(diǎn)名稱
超鏈接標(biāo)記共有3種使用方式：
1、鏈接到其他頁(yè)面
語(yǔ)法：<A href="register.html">[免費(fèi)注冊(cè)]</A>
在同一個(gè)文件夾下有兩個(gè)HTML文件，從一個(gè)文件超鏈接到另一個(gè)文件的路徑有兩種方式：相對(duì)路徑和絕對(duì)路徑
相對(duì)路徑：指相對(duì)于當(dāng)前文件的文件位置， 相對(duì)路徑常使用../表示回到上一級(jí)目錄。
絕對(duì)路徑：指從根目錄到文件的完整路徑。
示例：
2、錨鏈接
從A頁(yè)面的甲位置跳轉(zhuǎn)到本頁(yè)中的乙位置（同一頁(yè)面）。
從A頁(yè)面的甲位置跳轉(zhuǎn)到B頁(yè)面的乙位置（兩個(gè)頁(yè)面）。
步驟：
- 1、創(chuàng)建錨點(diǎn)
在HTML的NAME屬性用于創(chuàng)建錨標(biāo)記，例如：
<a name="marker">乙位置</>
- 2、創(chuàng)建跳轉(zhuǎn)鏈接
使用錨點(diǎn),在HREF參數(shù)中使用該標(biāo)記，在錨點(diǎn)名前加上#，例如：
<a href="#marker">甲位置</a>
示例：
注意：
如果是鏈接在B頁(yè)面，只需要在href屬性里面加上B頁(yè)面的地址即可，例如：
<a href="b.html#marker">甲位置</a>
3、電子郵件鏈接
要鏈接電子郵件，可在鏈接標(biāo)簽中插入"mailto"
<A href="mailto:taobaoWebMaster@taobao.com">站長(zhǎng)信箱</A>
四、HTML基本語(yǔ)法
一般來(lái)說(shuō)，HTML的語(yǔ)法有三種表達(dá)方式，如下所示：
<標(biāo)記>內(nèi)容</標(biāo)記>
<標(biāo)記 屬性1=參數(shù)1 屬性2=參數(shù)2>內(nèi)容</標(biāo)記>
<標(biāo)記/>
五、HTML基本標(biāo)簽
1、標(biāo)簽元素
標(biāo)簽介紹
html元素包括一個(gè)或一對(duì)標(biāo)簽定義的包含范圍。而標(biāo)簽就是由兩個(gè)字符串“<”和“>”號(hào)組成，標(biāo)簽包括開(kāi)始標(biāo)簽“<>”和結(jié)束標(biāo)簽“</>”。
html標(biāo)簽元素有四種形式分別是：
空元素：<br>
帶有屬性的空元素：<hr color="red">
帶有內(nèi)容的元素：<titile>這是內(nèi)容</titile>
帶有內(nèi)容和屬性的元素:<font color="red">這是內(nèi)容</font>
這里有一點(diǎn)要說(shuō)的是在html文檔中，標(biāo)簽和屬性的名字是和大小無(wú)關(guān)的。
2、文本相關(guān)標(biāo)簽
標(biāo)題標(biāo)簽
<H#>......</H#> #=1,2,3,4,5,6
說(shuō)明：從<H1>到<H6>字體大小依次遞減。align為設(shè)置標(biāo)題對(duì)齊方式：包括Left、Center、Right。
注：H1到H6用于指定不同級(jí)別的標(biāo)題。
字體標(biāo)簽
設(shè)置字體，size為字體大小，從1到7的整數(shù)，數(shù)字越大，字體越大。
特殊符號(hào)
<b></b>
設(shè)置文本粗體顯示。
<i></i>
設(shè)備文本斜體顯示。
3、行的控制相關(guān)標(biāo)簽
段落標(biāo)簽:<p><p>
<p>可以看作是一個(gè)空行，用于創(chuàng)建段落
換行標(biāo)簽
<br>作用是換行
<hr color="#"> <hr>標(biāo)簽：作用是插入一條水平線，屬性color用于設(shè)置顏色。
4、圖像標(biāo)簽
常見(jiàn)的圖片格式：
圖像標(biāo)簽的基本語(yǔ)法：
<img src="來(lái)源"/>
- src：圖像的路徑（包括相對(duì)路徑或絕對(duì)路徑）。
- alt：表示圖像的替代文字，即圖像不能顯示時(shí)顯示的文字。例如：
<!--找不到圖片，顯示alt屬性的值--> <img src="images/bgImage333.jpg" alt="圖像不能顯示時(shí)替代的文字">
結(jié)果：
- title：鼠標(biāo)懸停時(shí)提示的文字。例如：
<img src="images/bgImage.jpg" title="鼠標(biāo)懸停時(shí)提示的文字">
結(jié)果：
align:設(shè)置圖像與文本的對(duì)齊方式，取值：middle、top、bottom
例如
<img src="images/adv.jpg"/>
5、滾動(dòng)標(biāo)簽
滾動(dòng)<MARQUEE>標(biāo)簽
語(yǔ)法：<MARQUEE scrolldelay="#" direction="#">
說(shuō)明：
- scrolldelay：表示滾動(dòng)延遲時(shí)間（以毫秒為單位，默認(rèn)90）
- direction：表示滾動(dòng)對(duì)象的方向（默認(rèn)right：從右向左）
示例：
6、列表元素標(biāo)簽
列表是指將具有相似特征或者是具有先后順序的幾行文字進(jìn)行對(duì)齊。
列表分為有序列表<ol>和無(wú)序列表<ul>兩種。
<li>列表項(xiàng)元素用來(lái)包含兩種列表的列表項(xiàng)，也就是列表內(nèi)容。
1、無(wú)序列表語(yǔ)法
語(yǔ)法：
<ul>
<li>列表項(xiàng)內(nèi)容一</li>
<li>列表項(xiàng)內(nèi)容最后一項(xiàng)</li>
</ul>
開(kāi)始標(biāo)記：必需
內(nèi)容：列表項(xiàng) <li>元素
結(jié)束標(biāo)記：必需
主要屬性：
id、class、align、type
Type：列表符號(hào)，可取值為disc（實(shí)心的圓圈）、square（實(shí)心的方形）、circle（空心的圓圈）。
說(shuō)明：
沒(méi)有順序，每個(gè)<li>標(biāo)簽獨(dú)占一行。
默認(rèn)<li>標(biāo)簽項(xiàng)前面有實(shí)心小圓點(diǎn)。
一般用于無(wú)序類型的列表，如導(dǎo)航，側(cè)邊欄新聞列表等。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>無(wú)序列表</title>
</head>
<body>
<!--顯示實(shí)心圓點(diǎn)，默認(rèn)樣式-->
<ul type="disc">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<!--顯示實(shí)心矩形-->
<ul type="square">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<!--顯示空心圓點(diǎn)-->
<ul type="circle">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html>
結(jié)果：
注意：
列表還可以進(jìn)行嵌套，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>無(wú)序列表</title>
</head>
<body>
<!--顯示實(shí)心圓點(diǎn)，默認(rèn)樣式-->
<ul type="disc">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<!--顯示實(shí)心矩形-->
<ul type="square">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<!--顯示空心圓點(diǎn)-->
<ul type="circle">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<!--列表嵌套-->
<ul>
<li>列表1</li>
<ul type="circle">
<li>嵌套列表1</li>
<li>嵌套列表2</li>
<li>嵌套列表3</li>
</ul>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html>
結(jié)果：
2、有序列表語(yǔ)法
語(yǔ)法：
<ol> <li>列表項(xiàng)內(nèi)容一</li> <li>列表項(xiàng)內(nèi)容最后一項(xiàng)</li> </ol>
開(kāi)始標(biāo)記：必需
內(nèi)容：列表項(xiàng) <li>元素
結(jié)束標(biāo)記：必需
主要屬性：id、class、align、type、start
type：列表符號(hào)，可取值為1，A，a，i，l
start：起始符號(hào)
說(shuō)明：
有順序，每個(gè)<li>標(biāo)簽獨(dú)占一行。
默認(rèn)<li>標(biāo)簽項(xiàng)前有順序標(biāo)記。
可以通過(guò)修改<ol>標(biāo)簽的type屬性更改顯示的順序標(biāo)記。
一般用于排序類型的列表，如試卷、問(wèn)卷選項(xiàng)等。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>有序列表</title>
</head>
<body>
<!--顯示數(shù)字默認(rèn)樣式-->
<ol >
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!--顯示大寫A-->
<ol type="A">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!--顯示小寫a-->
<ol type="a">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!--顯示大寫I-->
<ol type="I">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!--顯示小寫i-->
<ol type="i">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
</body>
</html>
結(jié)果：
注意：
和無(wú)序列表一樣，有序列表同樣可以嵌套，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>有序列表</title>
</head>
<body>
<!--顯示數(shù)字默認(rèn)樣式-->
<ol >
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!--顯示大寫A-->
<ol type="A">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!--顯示小寫a-->
<ol type="a">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!--顯示大寫I-->
<ol type="I">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!--顯示小寫i-->
<ol type="i">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!--有序列表嵌套-->
<ol>
<li>列表1</li>
<!--顯示小寫i-->
<ol type="i">
<li>嵌套列表1</li>
<li>嵌套列表2</li>
<li>嵌套列表3</li>
</ol>
<li>列表2</li>
<li>列表3</li>
</ol>
</body>
</html>
結(jié)果：
3、定義列表
語(yǔ)法：
<dl>
<dt>咖啡</dt>
<dd>黑色的熱飲料</dd>
<dt>Milk</dt>
<dd>白色的冷飲料</dd>
</dl>
說(shuō)明：
沒(méi)有順序，每個(gè)<dt>，<dd>標(biāo)簽獨(dú)占一行。
沒(méi)有默認(rèn)標(biāo)記，但有層次結(jié)構(gòu)。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定義列表</title>
</head>
<body>
<dl>
<dt>水果</dt>
<dd>蘋果</dd>
<dd>香蕉</dd>
<dd>橘子</dd>
<dt>鏈接</dt>
<dd><a href="https://www.baidu.com">打開(kāi)百度</a></dd>
</dl>
</body>
</html>
結(jié)果：
到此這篇關(guān)于HTML基本元素標(biāo)簽的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解HTML常用的標(biāo)簽中行內(nèi)元素和塊級(jí)元素
本文給大家詳細(xì)介紹了HTML常用的標(biāo)簽中行內(nèi)元素和塊級(jí)元素，需要的朋友參考下吧2018-01-03- 很多人可能都沒(méi)有把哪個(gè)叫標(biāo)簽，哪個(gè)叫元素這個(gè)概念搞清楚，包括之前的我也是，一直都是混淆著，特意搜索查閱了一些資料，現(xiàn)將我得出的結(jié)論寫出來(lái)，與大家分享下2013-04-22
- HTML元素(標(biāo)簽)大全及使用說(shuō)明2010-07-04
- 這篇文章主要介紹了HTML基本標(biāo)簽及結(jié)構(gòu)詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-23
詳解HTML/XHTML中img圖像標(biāo)簽的基本用法
這篇文章主要介紹了HTML/XHTML中img圖像標(biāo)簽的基本用法,文中列出了img標(biāo)簽的一些常用屬性,需要的朋友可以參考下2016-03-06入門：HTML的基本標(biāo)簽和屬性簡(jiǎn)單介紹
HTML是由標(biāo)志和屬性構(gòu)成的，它們一起被用來(lái)告訴瀏覽器應(yīng)該如何顯示一頁(yè)文檔。標(biāo)志用來(lái)引用一段文字或是一幅圖片等文檔部件，屬性是標(biāo)志的選項(xiàng)，在標(biāo)志中修飾，如顏色，對(duì)齊2009-04-02HTML基礎(chǔ):HTML的基本結(jié)構(gòu)
HTML的基本結(jié)構(gòu) 超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對(duì)這個(gè)文檔進(jìn)行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。 <HTML>2008-10-17入門：HTML的基本標(biāo)簽和屬性簡(jiǎn)單介紹
HTML是由標(biāo)志和屬性構(gòu)成的，它們一起被用來(lái)告訴瀏覽器應(yīng)該如何顯示一頁(yè)文檔。標(biāo)志用來(lái)引用一段文字或是一幅圖片等文檔部件，屬性是標(biāo)志的選項(xiàng)，在標(biāo)志中修飾，如顏色，對(duì)齊2008-10-17常用html元素總結(jié)包括基本結(jié)構(gòu)、文檔類型、頭部、主體等等
常用html元素包括基本結(jié)構(gòu)、文檔類型、頭部、主體、文本域、上傳文件、下拉菜單、有序列表、無(wú)序列表、多媒體、框架等等，本文羅列了一些示例，大家可以學(xué)習(xí)下2014-04-06html內(nèi)聯(lián)元素和塊級(jí)元素的基本概念及使用示例
html標(biāo)簽分為兩種，內(nèi)聯(lián)元素和塊級(jí)元素，塊級(jí)元素：一般是其它元素的容器；內(nèi)聯(lián)元素：只能容納文本或者其他內(nèi)聯(lián)元素；首先我們先了解一下內(nèi)聯(lián)元素和塊級(jí)元素的概念2013-11-18