<li id="kfify"></li>

<ol id="kfify"></ol>

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×

忘記密碼？

登錄注冊×

獲取短信驗證碼

其他方式登錄

點擊登錄注冊即表示同意《億速云用戶服務(wù)條款》

用戶登錄×

賬戶密碼登錄

請使用微信掃描上方二維碼

使用幫助

請求超時！

請點擊重新獲取二維碼

2-HTML常見的一些標簽

發(fā)布時間：2020-06-02 08:41:30 來源：網(wǎng)絡(luò) 閱讀：150 作者：代碼老兵欄目：web開發(fā)

HTML常見的一些標簽

HTML介紹

HTML：超文本標記語言
其實它就是文本，游覽器負責將它解析成具體的網(wǎng)頁內(nèi)容

2-HTML常見的一些標簽

HTML組成

跟XML類似，HTML由N個標簽（節(jié)點、元素、標記）組成

2-HTML常見的一些標簽

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

2-HTML常見的一些標簽

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

在webstorm中html中的注釋通過 ctrl+/ 或 ctrl+shift+/ 來添加

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

    </head>

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

    </body>

</html>

2-HTML常見的一些標簽

上圖：通過webstorm右上角，將當前的代碼通過已安裝的瀏覽器打開

2-HTML常見的一些標簽

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


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

    </head>

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

    </body>

</html>

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

2-HTML常見的一些標簽

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

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

    </head>

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

</html>

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

2-HTML常見的一些標簽

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

HTML常用的標簽

標題標簽

2-HTML常見的一些標簽

2-HTML常見的一些標簽

2-HTML常見的一些標簽

以上幾個圖都是標題標簽

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

2-HTML常見的一些標簽

上圖：標題標簽的不同級別大小不同

表單標簽

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

    <!--表單標簽-->
    <input>
    <input placeholder="我是提示文字">
    <input value="默認值">
</body>
</html>

2-HTML常見的一些標簽

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

標簽手冊： http://www.w3school.com.cn/html/html_headings.asp

2-HTML常見的一些標簽

上圖：隨意點擊一個，及惹怒標簽參考手冊

2-HTML常見的一些標簽

上圖：標題下面就是HTML中的各種標簽

2-HTML常見的一些標簽

上圖：進入input標簽

2-HTML常見的一些標簽

2-HTML常見的一些標簽

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

2-HTML常見的一些標簽

上圖：type屬性

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

    <!--表單標簽-->
    <input>
    <input placeholder="我是提示文字">
    <input value="默認值">
    <input type="color">
</body>
</html>

代碼：增加了input標簽的color屬性

2-HTML常見的一些標簽

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

<input type="date">

代碼：增加了日期

2-HTML常見的一些標簽

上圖：可以選擇日期

<input type="file">

代碼：增加了文件選擇

2-HTML常見的一些標簽

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

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

2-HTML常見的一些標簽

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

代碼：增加段落標簽

2-HTML常見的一些標簽

圖片

<img src="https://www.baidu.com/img/bd_logo1.png" alt="提示文字" width="200">

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

2-HTML常見的一些標簽

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

2-HTML常見的一些標簽

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

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

代碼：因為是同級目錄，所以加載圖片的時候，將同級相對路徑下的圖片加載過來就好。

2-HTML常見的一些標簽
上圖：加載好的圖片

換行標簽

<br>
<p>換行測試?。。。。。?！</p>
<br><br><br><br>
<p>換行測試！?。。。。?！</p>
<p>換行測試?。。。。。?！</p>

2-HTML常見的一些標簽

上圖：每個br就是一個換行

超鏈接

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

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

2-HTML常見的一些標簽

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

列表標簽

2-HTML常見的一些標簽

2-HTML常見的一些標簽

上2圖：兩個圖都屬于列表標簽
列表標簽是非常常用的標簽。

列表分為：有序列表、無序列表

<ul>
    <li>我是無序列表</li>
    <li>我是無序列表</li>
    <li>我是無序列表</li>
</ul>

2-HTML常見的一些標簽

分割線換行標簽

<ul>
    <li>我是無序列表</li>
    <hr>
    <li>我是無序列表</li>
    <li>我是無序列表</li>
</ul>

代碼：<hr>是分割線換行標簽

2-HTML常見的一些標簽

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

div標簽

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

代碼：
div標簽就是你輸入什么，就得到什么（所見即所得）；div標簽是用的最多的。
div是一個容器，div里可以嵌套div，或嵌套其他。

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

2-HTML常見的一些標簽

小結(jié)：

src與href

相同點：

src與href都是用來鏈接外部資源的；

不通點：

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

單標簽與雙標簽

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

所有代碼


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

    <!--表單標簽-->
    <input>
    <input placeholder="我是提示文字">
    <input value="默認值">
    <input type="color">
    <input type="date">
    <input type="file">
    <input type="checkbox">
    <input type="radio">

    <!--我是段落標簽-->
    <p>我是段落，我是段落，我是段落，我是段落，</p>
    <p>我是段落，我是段落，我是段落，我是段落，</p>
    <p>我是段落，我是段落，我是段落，我是段落，</p>

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

    <!--換行標簽-->
    <br>
    <p>換行測試?。。。。。。?lt;/p>
    <br><br><br><br>
    <p>換行測試！?。。。。?！</p>
    <p>換行測試?。。。。。。?lt;/p>

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

    <!--列表標簽-->
    <ul>
        <li>我是無序列表</li>
        <li>我是無序列表</li>
        <li>我是無序列表</li>
    </ul>

    <!--分割換行標簽-->
    <ul>
        <li>我是無序列表</li>
        <hr>
        <li>我是無序列表</li>
        <li>我是無序列表</li>
    </ul>

    <!--div標簽-->
    <div>我是div，我是div，我是div，</div>
    <div>我是div，我是div，我是div，</div>
    <div>我是div，我是div，我是div，</div>

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

</body>
</html>

向AI問一下細節(jié)

推薦閱讀：

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

上一篇新聞：
無線設(shè)備的流控方案，記錄WSG-500E的一次組網(wǎng)應(yīng)用。
下一篇新聞：
OSSIM best practice 順利登上美國主力電商平臺

猜你喜歡

AI
助
手

產(chǎn)品服務(wù)

地區(qū)劃分

專題活動

幫助支持

關(guān)于我們

售后咨詢

7*24小時在線電話：400-100-2938

7*24小時在線 QQ：800811969

關(guān)注億速云

億速云公眾號

手機網(wǎng)站二維碼