在網(wǎng)頁(yè)開發(fā)中，我們需要掌握的常用HTML標(biāo)簽有哪些？

果想開發(fā)一個(gè)網(wǎng)站，除了要精通后端開發(fā)語(yǔ)言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標(biāo)記語(yǔ)言，它包含有眾多的標(biāo)簽，我們可以通過(guò)這些標(biāo)簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個(gè)統(tǒng)一的文檔中，這就形成了我們可以看得見(jiàn)的網(wǎng)頁(yè)。那么，HTML都有哪些常用的標(biāo)簽?zāi)兀?/p>

一、文檔類型聲明。

html5文檔類型聲明：<!doctype html>

html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主標(biāo)簽。

這個(gè)標(biāo)簽是html最外層的標(biāo)簽，所有其它的HTML標(biāo)簽都要放在這個(gè)標(biāo)簽的內(nèi)部。

<html>

</html>

三、雙標(biāo)簽和單標(biāo)簽。

在HTML標(biāo)簽中，有的標(biāo)簽是成雙成對(duì)的，如：<html></html>（如下圖）；而有的標(biāo)簽是單個(gè)的，如：<hr>橫線標(biāo)簽。

四、head頭部標(biāo)簽。

head頭部有以下幾種常用標(biāo)簽：

meta：主要提供有關(guān)頁(yè)面的元信息。

link：用來(lái)定義文檔與外部資源的關(guān)系，最常用的是調(diào)用CSS樣式文件。

title：頁(yè)面標(biāo)題的標(biāo)簽。

script：用來(lái)調(diào)用JS文件或JS代碼。當(dāng)然，script標(biāo)簽也可以在body主體中使用。

五、body主體標(biāo)簽。

1、塊級(jí)標(biāo)簽。

塊級(jí)標(biāo)簽的特性是：獨(dú)自占有一行；標(biāo)簽的高與寬、邊距可以修改；沒(méi)有設(shè)置寬與高時(shí)，默認(rèn)繼承父標(biāo)簽。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端頁(yè)面顯示的效果如下圖：

常用的塊級(jí)標(biāo)簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、內(nèi)聯(lián)標(biāo)簽。

內(nèi)聯(lián)標(biāo)簽與塊級(jí)標(biāo)簽不同，它不能獨(dú)自占有一行，會(huì)與其它內(nèi)聯(lián)標(biāo)簽在同一樣展示；內(nèi)聯(lián)標(biāo)簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS樣式代碼跟塊級(jí)標(biāo)簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒(méi)有效果。如下圖：

常用的內(nèi)聯(lián)標(biāo)簽有：span、a、b、strong、i、em 。

3、內(nèi)聯(lián)塊級(jí)標(biāo)簽。

內(nèi)聯(lián)塊級(jí)標(biāo)簽，既有一些內(nèi)聯(lián)標(biāo)簽的特性，也有一些塊級(jí)標(biāo)簽的特點(diǎn)：它不能獨(dú)自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS樣式代碼跟塊級(jí)標(biāo)簽的那個(gè)例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個(gè)圖片不能獨(dú)自占有一行，而是在同一行。如下圖：

常用的內(nèi)聯(lián)塊級(jí)標(biāo)簽有：img、input、textarea。

4、區(qū)域標(biāo)簽。

所謂區(qū)域標(biāo)簽，就是主要用來(lái)劃分布局頁(yè)面區(qū)域的。如：頭部、主體內(nèi)容、側(cè)邊欄、底部。這樣劃分的好處是：讓頁(yè)面布局更加清晰明了。

常用的區(qū)域標(biāo)簽有：header（頭部）、footer（底部）、nav（導(dǎo)航）、aside（側(cè)邊欄）、section（主體）、article（獨(dú)立內(nèi)容）。

5、表單標(biāo)簽。

這個(gè)表單標(biāo)簽我們也是會(huì)經(jīng)常用到的，如：登錄網(wǎng)站的時(shí)候、提交數(shù)據(jù)的時(shí)候。如下圖的評(píng)論表單：

?表單常用的標(biāo)簽有：form、input、select、option、textarea 。

以上就是我們開發(fā)網(wǎng)頁(yè)時(shí)，會(huì)常用到的HTML標(biāo)簽。當(dāng)然，HTML標(biāo)簽遠(yuǎn)不止這些，尤其是html5出來(lái)后，新增了許多的新標(biāo)簽。但是，有些標(biāo)簽在我們開發(fā)中很少用到，所以，這里就沒(méi)有做相應(yīng)的介紹。

tml由element組成。element分兩種，正常element和空element。

正常element

<p class=“wd”>world</p>

element由tag和content構(gòu)成

開始tag <p class=“wd”>
結(jié)束tag</p>

content

可以是直接在頁(yè)面上顯示的內(nèi)容
也可包含別的tag

<ul>
<li>first</li>
<li>second</li>
</ul>

空element

沒(méi)有content和結(jié)束tag的element。比如

換行<br>
<img src=“bg.png”>
<input type=“text” name=“name”>

element之間存在三種關(guān)系

父子關(guān)系。
祖孫關(guān)系
兄弟關(guān)系

<div>
<h1>title</h1>
<p>p1</p>
<p>p<strong>2</strong ></p>
</div>

div和h1，div和p，p和strong是父子關(guān)系。

div和strong是祖孫關(guān)系。

h1和p是兄弟關(guān)系。

這篇文章中，我們將對(duì)對(duì)話頁(yè)面進(jìn)行編碼。

? 來(lái)源：linux.cn ? 作者：Nicolás Parada ? 譯者：XianLei Gao ?

（本文字?jǐn)?shù)：5504，閱讀時(shí)長(zhǎng)大約：6 分鐘）

本文是該系列的第九篇，也是最后一篇。

第一篇: 模式
第二篇: OAuth
第三篇: 對(duì)話
第四篇: 消息
第五篇: 實(shí)時(shí)消息
第六篇: 僅用于開發(fā)的登錄
第七篇: Access 頁(yè)面
第八篇: Home 頁(yè)面

在這篇文章中，我們將對(duì) 對(duì)話(conversation)頁(yè)面進(jìn)行編碼。此頁(yè)面是兩個(gè)用戶之間的聊天室。在頂部我們將顯示其他參與者的信息，下面接著的是最新消息列表，以及底部的消息表單。

聊天標(biāo)題

讓我們從創(chuàng)建 static/pages/conversation-page.js 文件開始，它包含以下內(nèi)容:

import http from '../http.js'
import { navigate } from '../router.js'
import { avatar, escapeHTML } from '../shared.js'

export default async function conversationPage(conversationID) {
    let conversation
    try {
        conversation = await getConversation(conversationID)
    } catch (err) {
        alert(err.message)
        navigate('/', true)
        return
    }

    const template = document.createElement('template')
    template.innerHTML = `
        <div>
            <a href="/">← Back</a>
            ${avatar(conversation.otherParticipant)}
            <span>${conversation.otherParticipant.username}</span>
        </div>
        <!-- message list here -->
        <!-- message form here -->
    `
    const page = template.content
    return page
}

function getConversation(id) {
    return http.get('/api/conversations/' + id)
}

此頁(yè)面接收路由從 URL 中提取的會(huì)話 ID。

首先，它向 /api/ conversations/{conversationID} 發(fā)起一個(gè) GET 請(qǐng)求，以獲取有關(guān)對(duì)話的信息。如果出現(xiàn)錯(cuò)誤，我們會(huì)將其顯示，并重定向回 /。然后我們呈現(xiàn)有關(guān)其他參與者的信息。

對(duì)話列表

我們也會(huì)獲取最新的消息并顯示它們。

let conversation, messages
try {
    [conversation, messages] = await Promise.all([
        getConversation(conversationID),
        getMessages(conversationID),
    ])
}

更新 conversationPage() 函數(shù)以獲取消息。我們使用 Promise.all() 同時(shí)執(zhí)行這兩個(gè)請(qǐng)求。

function getMessages(conversationID) {
    return http.get(`/api/conversations/${conversationID}/messages`)
}

發(fā)起對(duì) /api/conversations/{conversationID}/messages 的 GET 請(qǐng)求可以獲取對(duì)話中的最新消息。

<ol id="messages"></ol>

現(xiàn)在，將該列表添加到標(biāo)記中。

const messagesOList = page.getElementById('messages')
for (const message of messages.reverse()) {
    messagesOList.appendChild(renderMessage(message))
}

這樣我們就可以將消息附加到列表中了。我們以時(shí)間倒序來(lái)顯示它們。

function renderMessage(message) {
    const messageContent = escapeHTML(message.content)
    const messageDate = new Date(message.createdAt).toLocaleString()

    const li = document.createElement('li')
    if (message.mine) {
        li.classList.add('owned')
    }
    li.innerHTML = `
        <p>${messageContent}</p>
        <time>${messageDate}</time>
    `
    return li
}

每個(gè)消息條目顯示消息內(nèi)容本身及其時(shí)間戳。使用 .mine，我們可以將不同的 css 類附加到條目，這樣您就可以將消息顯示在右側(cè)。

消息表單

<form id="message-form">
    <input type="text" placeholder="Type something" maxlength="480" required>
    <button>Send</button>
</form>

將該表單添加到當(dāng)前標(biāo)記中。

page.getElementById('message-form').onsubmit = messageSubmitter(conversationID)

將事件監(jiān)聽器附加到 “submit” 事件。

function messageSubmitter(conversationID) {
    return async ev => {
        ev.preventDefault()

        const form = ev.currentTarget
        const input = form.querySelector('input')
        const submitButton = form.querySelector('button')

        input.disabled = true
        submitButton.disabled = true

        try {
            const message = await createMessage(input.value, conversationID)
            input.value = ''
            const messagesOList = document.getElementById('messages')
            if (messagesOList === null) {
                return
            }

            messagesOList.appendChild(renderMessage(message))
        } catch (err) {
            if (err.statusCode === 422) {
                input.setCustomValidity(err.body.errors.content)
            } else {
                alert(err.message)
            }
        } finally {
            input.disabled = false
            submitButton.disabled = false

            setTimeout(() => {
                input.focus()
            }, 0)
        }
    }
}

function createMessage(content, conversationID) {
    return http.post(`/api/conversations/${conversationID}/messages`, { content })
}

我們利用 partial application 在 “submit” 事件處理程序中獲取對(duì)話 ID。它從輸入中獲取消息內(nèi)容，并用它對(duì) /api/conversations/{conversationID}/messages 發(fā)出 POST 請(qǐng)求。然后將新創(chuàng)建的消息添加到列表中。

消息訂閱

為了實(shí)現(xiàn)實(shí)時(shí)，我們還將訂閱此頁(yè)面中的消息流。

page.addEventListener('disconnect', subscribeToMessages(messageArriver(conversationID)))

將該行添加到 conversationPage() 函數(shù)中。

function subscribeToMessages(cb) {
    return http.subscribe('/api/messages', cb)
}

function messageArriver(conversationID) {
    return message => {
        if (message.conversationID !== conversationID) {
            return
        }

        const messagesOList = document.getElementById('messages')
        if (messagesOList === null) {
            return

        }
        messagesOList.appendChild(renderMessage(message))
        readMessages(message.conversationID)
    }
}

function readMessages(conversationID) {
    return http.post(`/api/conversations/${conversationID}/read_messages`)
}

在這里我們?nèi)匀皇褂眠@個(gè)應(yīng)用的部分來(lái)獲取會(huì)話 ID。當(dāng)新消息到達(dá)時(shí)，我們首先檢查它是否來(lái)自此對(duì)話。如果是，我們會(huì)將消息條目預(yù)先添加到列表中，并向 /api/conversations/{conversationID}/read_messages 發(fā)起 POST 一個(gè)請(qǐng)求，以更新參與者上次閱讀消息的時(shí)間。

本系列到此結(jié)束。消息應(yīng)用現(xiàn)在可以運(yùn)行了。

源代碼
演示

via: nicolasparada.netlify.com

作者： Nicolás Parada 選題： lujun9972 譯者： gxlct008 校對(duì)： wxy

本文由 LCTT 原創(chuàng)編譯， Linux中國(guó) 榮譽(yù)推出

點(diǎn)擊“了解更多”可訪問(wèn)文內(nèi)鏈接

在線咨詢

上一篇：正則表達(dá)式在PHP8中的應(yīng)用案例-PHP8知識(shí)詳解
下一篇：為用戶和開發(fā)人員改進(jìn) HTML 圖像的 6 個(gè)步驟

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商