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

HTML介紹

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

創(chuàng)新互聯(lián)專業(yè)IDC數(shù)據(jù)服務(wù)器托管提供商，專業(yè)提供成都服務(wù)器托管，服務(wù)器租用，成都服務(wù)器托管，成都服務(wù)器托管，成都多線服務(wù)器托管等服務(wù)器托管服務(wù)。

• HTML組成

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

上圖：<>中的內(nèi)容都屬于標(biāo)簽，其中div標(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)添加

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

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

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

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

    
    
        
        
        
        

    

    
    
        hello world，你好 世界！
    

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

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

HTML常用的標(biāo)簽

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

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

    
    


    
    
我是h2標(biāo)題
    
我是h3標(biāo)題
    
我是h4標(biāo)題
    
我是h5標(biāo)題
    
我是h6標(biāo)題
    我是h7標(biāo)題

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

• 表單標(biāo)簽

    
    


    
    
我是h2標(biāo)題
    
我是h3標(biāo)題
    
我是h4標(biāo)題
    
我是h5標(biāo)題
    
我是h6標(biāo)題
    我是h7標(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

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

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

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

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

上圖：type屬性

    
    


    
    
我是h2標(biāo)題
    
我是h3標(biāo)題
    
我是h4標(biāo)題
    
我是h5標(biāo)題
    
我是h6標(biāo)題
    我是h7標(biāo)題

    
    
    
    
    

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

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

代碼：增加了日期

上圖：可以選擇日期

代碼：增加了文件選擇

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

我是段落，我是段落，我是段落，我是段落，
我是段落，我是段落，我是段落，我是段落，
我是段落，我是段落，我是段落，我是段落，

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

• 圖片

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

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

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

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

上圖：加載好的圖片

• 換行標(biāo)簽

換行測(cè)試?。。。。。。?/p>





換行測(cè)試?。。。。。?！
換行測(cè)試?。。。。。?！

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

• 超鏈接

我是超鏈接
我是超鏈接

代碼：
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è)）

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

• 列表標(biāo)簽

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

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

    
我是無(wú)序列表
    
我是無(wú)序列表
    
我是無(wú)序列表

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

    
我是無(wú)序列表
    

    
我是無(wú)序列表
    
我是無(wú)序列表

代碼：

---

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

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

• div標(biāo)簽

我是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
        
我是嵌套的無(wú)序列表
        
我是嵌套的段落
    

小結(jié)：

• src與href

相同點(diǎn)：

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

不通點(diǎn)：

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

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

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

• 所有代碼

    
    


    
    
我是h2標(biāo)題
    
我是h3標(biāo)題
    
我是h4標(biāo)題
    
我是h5標(biāo)題
    
我是h6標(biāo)題
    我是h7標(biāo)題

    
    
    
    
    
    
    
    
    

    
    
我是段落，我是段落，我是段落，我是段落，
    
我是段落，我是段落，我是段落，我是段落，
    
我是段落，我是段落，我是段落，我是段落，

    
    
    

    
    

    
換行測(cè)試?。。。。。?！
    




    
換行測(cè)試！?。。。。?！
    
換行測(cè)試?。。。。。?！

    
    

    我是超鏈接
    我是超鏈接

    
    

        
我是無(wú)序列表
        
我是無(wú)序列表
        
我是無(wú)序列表
    

    
    

        
我是無(wú)序列表
        

        
我是無(wú)序列表
        
我是無(wú)序列表
    

    
    
我是div，我是div，我是div，
    
我是div，我是div，我是div，
    
我是div，我是div，我是div，

    
    

        我是div，我是div，我是div，我是div
        
我是嵌套的無(wú)序列表
        
我是嵌套的段落
    

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文標(biāo)題：2-HTML常見(jiàn)的一些標(biāo)簽-創(chuàng)新互聯(lián)
文章地址：http://weahome.cn/article/dpeggs.html