2-HTML常見(jiàn)的一些標(biāo)簽

HTML常見(jiàn)的一些標(biāo)簽

HTML介紹

HTML：超文本標(biāo)記語(yǔ)言
其實(shí)它就是文本，游覽器負(fù)責(zé)將它解析成具體的網(wǎng)頁(yè)內(nèi)容

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、成都小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了廣饒免費(fèi)建站歡迎大家使用！

HTML組成

跟XML類(lèi)似，HTML由N個(gè)標(biāo)簽（節(jié)點(diǎn)、元素、標(biāo)記）組成

上圖：<>中的內(nèi)容都屬于標(biāo)簽，其中div標(biāo)簽最多

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：通過(guò)webstorm來(lái)開(kāi)發(fā)。我們創(chuàng)建了一個(gè)html文件，默認(rèn)會(huì)生成圖中的部分內(nèi)容，我們先將其刪掉。

在webstorm中html中的注釋通過(guò) ctrl+/ 或 ctrl+shift+/ 來(lái)添加

<!--最外層標(biāo)簽-->
<!--最外層標(biāo)簽-->
<html>
    <!--頭部：標(biāo)題-->
    <head>
        <!--標(biāo)題-->
        <title>我的第一個(gè)HTML5</title>
        <!--編碼-->
        <meta charset="UTF-8">

    </head>

    <!--body：內(nèi)容、結(jié)構(gòu)-->
    <body>

    </body>

</html>

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：通過(guò)webstorm右上角，將當(dāng)前的代碼通過(guò)已安裝的瀏覽器打開(kāi)

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：可以看到瀏覽器的標(biāo)簽頁(yè)中的內(nèi)容，就是標(biāo)題的內(nèi)容

<!--最外層標(biāo)簽-->
<html>
    <!--頭部：標(biāo)題-->
    <head>
        <!--標(biāo)題-->
        <title>我的第一個(gè)HTML5</title>
        <!--編碼-->
<!--        <meta charset="UTF-8">--> 

    </head>

    <!--body：內(nèi)容、結(jié)構(gòu)-->
    <body>

    </body>

</html>

代碼：我們將meta charset="UTF-8"給注釋掉了，然后在通過(guò)瀏覽器打開(kāi)該代碼或刷新已打開(kāi)的網(wǎng)頁(yè)

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：可以看到不使用UTF-8就顯示亂碼了。

<!--最外層標(biāo)簽-->
<html>
    <!--頭部：標(biāo)題-->
    <head>
        <!--標(biāo)題-->
        <title>我的第一個(gè)HTML5</title>
        <!--編碼-->
        <meta charset="UTF-8">

    </head>

    <!--body：內(nèi)容、結(jié)構(gòu)-->
    <body>
        hello world，你好 世界！
    </body>

</html>

代碼；在body添加內(nèi)容

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：body中的內(nèi)容在頁(yè)面顯示

HTML常用的標(biāo)簽

標(biāo)題標(biāo)簽

2-HTML常見(jiàn)的一些標(biāo)簽

以上幾個(gè)圖都是標(biāo)題標(biāo)簽

<html>
<head>
    <meta charset="UTF-8">
    <title>常用標(biāo)簽</title>
</head>
<body>
    <!--標(biāo)題標(biāo)簽-->
    <h2>我是h2標(biāo)題</h2>
    <h3>我是h3標(biāo)題</h3>
    <h4>我是h4標(biāo)題</h4>
    <h5>我是h5標(biāo)題</h5>
    <h6>我是h6標(biāo)題</h6>
    <h7>我是h7標(biāo)題</h7>
</body>
</html>

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：標(biāo)題標(biāo)簽的不同級(jí)別大小不同

表單標(biāo)簽

<html>
<head>
    <meta charset="UTF-8">
    <title>常用標(biāo)簽</title>
</head>
<body>
    <!--標(biāo)題標(biāo)簽-->
    <h2>我是h2標(biāo)題</h2>
    <h3>我是h3標(biāo)題</h3>
    <h4>我是h4標(biāo)題</h4>
    <h5>我是h5標(biāo)題</h5>
    <h6>我是h6標(biāo)題</h6>
    <h7>我是h7標(biāo)題</h7>

    <!--表單標(biāo)簽-->
    <input>
    <input placeholder="我是提示文字">
    <input value="默認(rèn)值">
</body>
</html>

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：
表單標(biāo)簽可以提供輸入框；
表單標(biāo)簽的placeholder元素可以顯示提示內(nèi)容；
表單標(biāo)簽的value元素可以提供輸入的默認(rèn)內(nèi)容。

標(biāo)簽手冊(cè)： http://www.w3school.com.cn/html/html_headings.asp

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：隨意點(diǎn)擊一個(gè)，及惹怒標(biāo)簽參考手冊(cè)

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：標(biāo)題下面就是HTML中的各種標(biāo)簽

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：進(jìn)入input標(biāo)簽

2-HTML常見(jiàn)的一些標(biāo)簽

上2圖：點(diǎn)進(jìn)去標(biāo)簽以后可以看到，標(biāo)簽相關(guān)的屬性（元素）；其中就包括我們上面使用的placeholder屬性。

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：type屬性

<html>
<head>
    <meta charset="UTF-8">
    <title>常用標(biāo)簽</title>
</head>
<body>
    <!--標(biāo)題標(biāo)簽-->
    <h2>我是h2標(biāo)題</h2>
    <h3>我是h3標(biāo)題</h3>
    <h4>我是h4標(biāo)題</h4>
    <h5>我是h5標(biāo)題</h5>
    <h6>我是h6標(biāo)題</h6>
    <h7>我是h7標(biāo)題</h7>

    <!--表單標(biāo)簽-->
    <input>
    <input placeholder="我是提示文字">
    <input value="默認(rèn)值">
    <input type="color">
</body>
</html>

代碼：增加了input標(biāo)簽的color屬性

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：增加了顏色，并且可以更改顏色。

<input type="date">

代碼：增加了日期

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：可以選擇日期

<input type="file">

代碼：增加了文件選擇

2-HTML常見(jiàn)的一些標(biāo)簽

<input type="checkbox">
<input type="radio">

代碼：checkbox是復(fù)選框； radio是單選

2-HTML常見(jiàn)的一些標(biāo)簽

<p>我是段落，我是段落，我是段落，我是段落，</p>
<p>我是段落，我是段落，我是段落，我是段落，</p>
<p>我是段落，我是段落，我是段落，我是段落，</p>

代碼：增加段落標(biāo)簽

2-HTML常見(jiàn)的一些標(biāo)簽

圖片

<img src="/upload/otherpic48/bd_logo1.png" alt="提示文字" width="200">

代碼：
加載網(wǎng)絡(luò)圖片；通過(guò)Google瀏覽器到www.baidu.com首頁(yè)去復(fù)制圖片地址；
alt設(shè)置提示文字
width設(shè)置圖片大小

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：這是我們從百度復(fù)制來(lái)的圖片效果

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：我們從本地copy一個(gè)圖片到webstorm關(guān)聯(lián)的目錄，與我們當(dāng)前編輯的html文件在同一級(jí)目錄；

<img src="images/img_01.jpg" alt="風(fēng)景" width="300">

代碼：因?yàn)槭峭?jí)目錄，所以加載圖片的時(shí)候，將同級(jí)相對(duì)路徑下的圖片加載過(guò)來(lái)就好。

2-HTML常見(jiàn)的一些標(biāo)簽
上圖：加載好的圖片

換行標(biāo)簽

<br>
<p>換行測(cè)試?。。。。。?！</p>
<br><br><br><br>
<p>換行測(cè)試?。。。。。。?lt;/p>
<p>換行測(cè)試?。。。。。?！</p>

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：每個(gè)br就是一個(gè)換行

超鏈接

<a href="#">我是超鏈接</a>
<a  target="_blank">我是超鏈接</a>

代碼：
href用于關(guān)聯(lián)連接
“#”會(huì)跳轉(zhuǎn)到本頁(yè)面
target='_blank'表示當(dāng)跳轉(zhuǎn)時(shí)，用新的頁(yè)面來(lái)顯示網(wǎng)頁(yè)（當(dāng)前網(wǎng)頁(yè)還會(huì)繼續(xù)存在）。
target='_self'，會(huì)用當(dāng)前頁(yè)面進(jìn)行跳轉(zhuǎn)（不會(huì)保留原有網(wǎng)頁(yè)）

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：點(diǎn)擊超鏈接就會(huì)跳轉(zhuǎn)到關(guān)聯(lián)的網(wǎng)址頁(yè)面

列表標(biāo)簽

2-HTML常見(jiàn)的一些標(biāo)簽

上2圖：兩個(gè)圖都屬于列表標(biāo)簽
列表標(biāo)簽是非常常用的標(biāo)簽。

列表分為：有序列表、無(wú)序列表

<ul>
    <li>我是無(wú)序列表</li>
    <li>我是無(wú)序列表</li>
    <li>我是無(wú)序列表</li>
</ul>

2-HTML常見(jiàn)的一些標(biāo)簽

分割線換行標(biāo)簽

<ul>
    <li>我是無(wú)序列表</li>
    <hr>
    <li>我是無(wú)序列表</li>
    <li>我是無(wú)序列表</li>
</ul>

代碼：<hr>是分割線換行標(biāo)簽

2-HTML常見(jiàn)的一些標(biāo)簽

上圖：可以看到被分割線給分割了

div標(biāo)簽

<div>我是div，我是div，我是div，</div>
<div>我是div，我是div，我是div，</div>
<div>我是div，我是div，我是div，</div>

代碼：
div標(biāo)簽就是你輸入什么，就得到什么（所見(jiàn)即所得）；div標(biāo)簽是用的最多的。
div是一個(gè)容器，div里可以嵌套div，或嵌套其他。

 <div>
        我是div，我是div，我是div，我是div
        <li>我是嵌套的無(wú)序列表</li>
        <p>我是嵌套的段落</p>
    </div>

2-HTML常見(jiàn)的一些標(biāo)簽

小結(jié)：

src與href

相同點(diǎn)：

src與href都是用來(lái)鏈接外部資源的；

不通點(diǎn)：

src：引用；引用的資源是必須的。
href：引入；引入不是必須的。

單標(biāo)簽與雙標(biāo)簽

單標(biāo)簽：<>是不需要寫(xiě)內(nèi)容的
雙標(biāo)簽：<>這里是需要寫(xiě)內(nèi)容的<>

所有代碼

<html>
<head>
    <meta charset="UTF-8">
    <title>常用標(biāo)簽</title>
</head>
<body>
    <!--標(biāo)題標(biāo)簽-->
    <h2>我是h2標(biāo)題</h2>
    <h3>我是h3標(biāo)題</h3>
    <h4>我是h4標(biāo)題</h4>
    <h5>我是h5標(biāo)題</h5>
    <h6>我是h6標(biāo)題</h6>
    <h7>我是h7標(biāo)題</h7>

    <!--表單標(biāo)簽-->
    <input>
    <input placeholder="我是提示文字">
    <input value="默認(rèn)值">
    <input type="color">
    <input type="date">
    <input type="file">
    <input type="checkbox">
    <input type="radio">

    <!--我是段落標(biāo)簽-->
    <p>我是段落，我是段落，我是段落，我是段落，</p>
    <p>我是段落，我是段落，我是段落，我是段落，</p>
    <p>我是段落，我是段落，我是段落，我是段落，</p>

    <!--
    圖片
    -->
    <img src="/upload/otherpic48/bd_logo1.png" alt="提示文字" width="200">
    <img src="images/img_01.jpg" alt="風(fēng)景" width="300">

    <!--換行標(biāo)簽-->
    <br>
    <p>換行測(cè)試?。。。。。?！</p>
    <br><br><br><br>
    <p>換行測(cè)試?。。。。。?！</p>
    <p>換行測(cè)試?。。。。。?！</p>

    <!--超鏈接標(biāo)簽-->
    <br>
    <a href="#">我是超鏈接</a>
    <a  target="_blank">我是超鏈接</a>

    <!--列表標(biāo)簽-->
    <ul>
        <li>我是無(wú)序列表</li>
        <li>我是無(wú)序列表</li>
        <li>我是無(wú)序列表</li>
    </ul>

    <!--分割換行標(biāo)簽-->
    <ul>
        <li>我是無(wú)序列表</li>
        <hr>
        <li>我是無(wú)序列表</li>
        <li>我是無(wú)序列表</li>
    </ul>

    <!--div標(biāo)簽-->
    <div>我是div，我是div，我是div，</div>
    <div>我是div，我是div，我是div，</div>
    <div>我是div，我是div，我是div，</div>

    <!--div嵌套-->
    <div>
        我是div，我是div，我是div，我是div
        <li>我是嵌套的無(wú)序列表</li>
        <p>我是嵌套的段落</p>
    </div>

</body>
</html>

名稱(chēng)欄目：2-HTML常見(jiàn)的一些標(biāo)簽
文章源于：http://aaarwkj.com/article38/gghjpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站制作、微信公眾號(hào)、微信小程序、、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

2-HTML常見(jiàn)的一些標(biāo)簽

HTML常見(jiàn)的一些標(biāo)簽

HTML介紹

HTML常用的標(biāo)簽