規(guī)模的可用性研究揭示了今天最常見(jiàn)和最具破壞性的網(wǎng)頁(yè)設(shè)計(jì)錯(cuò)誤，它們并不令人驚訝或新奇，而是持續(xù)不斷的損害網(wǎng)站的可用性。

自1996年以來(lái)，我們一直在總結(jié)網(wǎng)頁(yè)設(shè)計(jì)十大問(wèn)題的列表。今年，我們完成了一個(gè)大規(guī)模的可用性研究，在美國(guó)和英國(guó)有215名參與者，看看今天的網(wǎng)頁(yè)設(shè)計(jì)錯(cuò)誤是什么。

在分析從小型本地企業(yè)到娛樂(lè)場(chǎng)所，非營(yíng)利組織到全球組織的43個(gè)站點(diǎn)的結(jié)果后，我們確定了10個(gè)最常見(jiàn)和最具破壞性的網(wǎng)頁(yè)設(shè)計(jì)錯(cuò)誤，這些錯(cuò)誤對(duì)用戶造成了傷害。（通過(guò)傷害他們的用戶，這些設(shè)計(jì)缺陷絕對(duì)也會(huì)損害網(wǎng)站的商業(yè)指標(biāo)）

這已經(jīng)不是大新聞了，今天最重要的問(wèn)題都不是新的或令人驚訝的。網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)走了很長(zhǎng)的一段路，但是這些一貫的問(wèn)題依然存現(xiàn)代設(shè)計(jì)模式和美學(xué)改變，潛在的用戶需求保持不變。用戶仍然需要查找信息，能夠閱讀信息，并知道要點(diǎn)擊的內(nèi)容以及它所在的位置。

1. 想不到內(nèi)容的位置

人們使用它們找不到信息，許多網(wǎng)站提供的類別名稱不完整，沒(méi)有充分或準(zhǔn)確地描述其中的內(nèi)容，其他的安排是基于公司而不是用戶對(duì)內(nèi)容的想法。當(dāng)網(wǎng)站結(jié)構(gòu)不符合用戶的信息組織方式的心理模型（mental models）時(shí)，人們無(wú)法找到他們需要的東西。

讓用戶參與創(chuàng)建你的網(wǎng)站結(jié)構(gòu)，一些可用性工作（如卡片分類，決策樹(shù)或可用性測(cè)試）可以在創(chuàng)建一個(gè)對(duì)用戶有意義的網(wǎng)站結(jié)構(gòu)方面發(fā)揮很大的作用。

ATT.com：有關(guān)舊手機(jī)交易的信息是在現(xiàn)有客戶下，但用戶在智能手機(jī)下查找。

2. 相互矛盾的連接和導(dǎo)航分類

當(dāng)用戶不能清楚區(qū)分相似的導(dǎo)航類別或鏈接時(shí)，他們很難找到恰當(dāng)?shù)膬?nèi)容路徑。類別和鏈接名稱本身需要有自己的涵義，同時(shí)也應(yīng)該與站點(diǎn)上的其他選項(xiàng)結(jié)合。如果多個(gè)部分或頁(yè)面可以滿足特定的信息需求，用戶必須探索每一個(gè)路徑或努力做出最好的猜測(cè)。或者，他們可能會(huì)轉(zhuǎn)向搜索甚至離開(kāi)網(wǎng)站。

BAM建筑網(wǎng)站上的用戶希望了解建設(shè)項(xiàng)目的細(xì)節(jié)，但不確定這些信息是否屬于關(guān)于我們，公司業(yè)務(wù)，或者公司技術(shù)，大部分是從我們的產(chǎn)品開(kāi)始，但該部分包含了組織為客戶提供的工作類型的概述，而不是項(xiàng)目細(xì)節(jié)，項(xiàng)目信息和案例研究是我們的技術(shù)特色。

卡片分類和可用性測(cè)試有助于避免重疊類別名稱，鏈接太相似的問(wèn)題通常源于糟糕的內(nèi)容策略。

造成這些問(wèn)題的兩個(gè)可能原因是：

• 標(biāo)簽相似：鏈接導(dǎo)致內(nèi)容不同，但由于某種原因，它們有相似的標(biāo)簽。如果是這樣的話，試著重命名你的鏈接來(lái)區(qū)分它們。
• 內(nèi)容區(qū)分性差：如果高度信息相關(guān)的鏈接指向不同頁(yè)面，解決方案可能不是重命名鏈接，而是重新組織和合并內(nèi)容。

3. 信息孤島

有些站點(diǎn)上的信息比較碎片化，分散在站點(diǎn)上，它們之間幾乎沒(méi)有連接。

當(dāng)用戶發(fā)現(xiàn)一個(gè)沒(méi)有相關(guān)信息的信息孤島時(shí)，他們沒(méi)有理由認(rèn)為網(wǎng)站的另一個(gè)區(qū)域提供了補(bǔ)充材料。如果用戶需要更多的信息，他們會(huì)到競(jìng)爭(zhēng)對(duì)手的網(wǎng)站或搜索谷歌。

試圖重新訪問(wèn)信息的用戶可能最終會(huì)選擇在站點(diǎn)的另一個(gè)完全不同的領(lǐng)域，對(duì)內(nèi)容的看法不同于第一次體驗(yàn)。那些找出不連貫信息的信息，拼湊起來(lái)。無(wú)論哪種方式，他們都對(duì)網(wǎng)站留下了負(fù)面的印象。

從組織的角度來(lái)看，這不僅是用戶體驗(yàn)的失敗，更是內(nèi)容管理的噩夢(mèng)：站點(diǎn)的某個(gè)區(qū)域的信息可能重復(fù)、不同或甚至與其他地方的信息相矛盾。

解決方案之一是在提供相關(guān)信息的頁(yè)面之間添加相關(guān)鏈接，一個(gè)更好的解決方案是考慮為什么信息分散在整個(gè)網(wǎng)站，挑選適當(dāng)?shù)臅r(shí)候，并選擇最佳位置。站點(diǎn)的其他區(qū)域可以引用關(guān)于該主題內(nèi)容的位置，而不是復(fù)制信息。

4. 重復(fù)鏈接

即使用戶已經(jīng)知道他們所需要信息在網(wǎng)站中的位置，但他們依然可能會(huì)遭受意外或者漫長(zhǎng)工作流的阻礙。

Web團(tuán)隊(duì)經(jīng)常會(huì)問(wèn)，要獲取內(nèi)容需要多少點(diǎn)擊。沒(méi)有確切的數(shù)字（no magic number）， 點(diǎn)擊質(zhì)量的重要性要遠(yuǎn)遠(yuǎn)大于其數(shù)量。當(dāng)用戶在點(diǎn)擊頁(yè)面時(shí)應(yīng)該更接近信息目標(biāo)，用戶在選擇他們想到東西時(shí)需要重復(fù)的點(diǎn)擊，這會(huì)一次又一次的激怒客戶，并讓他們進(jìn)行了不必要的努力。

團(tuán)隊(duì)構(gòu)建頁(yè)面有時(shí)候會(huì)閉門造車，從而沒(méi)有考慮到創(chuàng)建內(nèi)容的流程。創(chuàng)建新頁(yè)面時(shí)，要考慮用戶如何到達(dá)那里并思考是否還有更直接的路徑。

紐約市政府綜合網(wǎng)站：讓用戶感到沮喪的是當(dāng)點(diǎn)擊尋找消防站（Find a Firehouse）鏈接時(shí)，只能在下一個(gè)頁(yè)面中再點(diǎn)擊一次拼寫(xiě)都不一樣的鏈接。

這種偏見(jiàn)也恰好說(shuō)明了人們?yōu)槭裁粗艺\(chéng)于特定的產(chǎn)品、服務(wù)、網(wǎng)站或其他工具。我們會(huì)冒險(xiǎn)使用其他可能更好用的方法，也可能會(huì)繼續(xù)使用已經(jīng)嘗試過(guò)并且靠得住的工具。

5. 隱藏費(fèi)用和價(jià)格

人們想要了解價(jià)格、訂購(gòu)費(fèi)用、服務(wù)費(fèi)用以及流程開(kāi)始之前或之后的額外費(fèi)用，在一些網(wǎng)站中用戶進(jìn)行復(fù)雜的操作只為了尋找基本的信息，例如：他們不得不嘗試在AARP網(wǎng)站上購(gòu)買會(huì)員 ，這樣才能查明會(huì)員費(fèi)用，用戶應(yīng)該要在進(jìn)行復(fù)雜操作之前就能找到到這些信息。

6. 在小型網(wǎng)站中擱淺用戶

為部分或者特殊內(nèi)容單獨(dú)創(chuàng)建的網(wǎng)頁(yè)、次級(jí)頁(yè)面需要謹(jǐn)慎的處理這些網(wǎng)站上的用戶。在我們的許多研究中，當(dāng)參與者沒(méi)有主動(dòng)的跳轉(zhuǎn)到了一個(gè)新的站點(diǎn)或者子站點(diǎn)，然后努力的想要回到父站點(diǎn)，但是該站點(diǎn)并沒(méi)有提供返回選項(xiàng)。

有些人能夠通過(guò)多次使用瀏覽器的“后退”按鈕或重新輸入網(wǎng)站的網(wǎng)址來(lái)導(dǎo)航到父站點(diǎn)，但是許多人甚至沒(méi)有注意到他們已經(jīng)切換了站點(diǎn)（因?yàn)楦刚军c(diǎn)和子站點(diǎn)的外觀和感覺(jué)相似） 并且很疑惑為什么他們以前使用的導(dǎo)航消失了。

在創(chuàng)建一個(gè)單獨(dú)的子網(wǎng)站之前需要再三考慮，確保用戶可以根據(jù)需要輕松導(dǎo)航回到父站點(diǎn)。

英國(guó)紅十字會(huì)主站（www.redcross.org.uk – 上圖）及其培訓(xùn)網(wǎng)站（英國(guó)（www.redcrossfirstaidtraining.co.uk -下圖））看起來(lái)非常相似，使用相同的LOGO鏈接到每個(gè)網(wǎng)站各自的主頁(yè) ，以及相同的第一個(gè)導(dǎo)航類別（我們做什么（What We Do））。尋找急救課程的用戶被引導(dǎo)到了培訓(xùn)網(wǎng)站，并在試圖返回主站點(diǎn)時(shí)迷失方向。

7. 糟糕的搜索結(jié)果

當(dāng)用戶確切地知道他們?cè)趯ふ沂裁吹臅r(shí)候，用戶會(huì)選擇搜索作為最后的手段。在任何情況下，站點(diǎn)都需要通過(guò)提供強(qiáng)大的搜索結(jié)果來(lái)支持用戶。

不幸的是，網(wǎng)站搜索功能仍然是許多網(wǎng)站的主要弱點(diǎn)，有些站點(diǎn)的搜索結(jié)果與用戶的查詢不匹配。此外，有些搜索結(jié)果展現(xiàn)的只是網(wǎng)站的一部分內(nèi)容而已，不會(huì)清楚的向用戶展示所有的搜索內(nèi)容。

搜索結(jié)果名稱不全或者附有無(wú)用的摘要，會(huì)讓用戶不由的猜測(cè)鏈接背后的內(nèi)容。散布在網(wǎng)站搜索結(jié)果中的廣告也會(huì)讓用戶感到訝異，這些廣告會(huì)讓他們頭也不回的離開(kāi)網(wǎng)站。

定期查看搜索日志，了解更多有關(guān)用戶的搜索行為和搜索引擎成功與失敗的信息。使用網(wǎng)站內(nèi)容標(biāo)簽和網(wǎng)站搜索工具的功能，如“最佳匹配”，會(huì)搜索出針對(duì)特定查詢的最適合的結(jié)果。

8. 不完美的過(guò)濾器和功能模塊

功能模塊和過(guò)濾器通常能提高用戶體驗(yàn)，利用它們，用戶可以將搜索范圍縮小到所需的資源、產(chǎn)品或內(nèi)容。然而，簡(jiǎn)單地添加功能模塊和過(guò)濾器并不能保證得到更好的可用性，這些工具需要支持真正的用戶和真正的用戶需求。

功能模塊和過(guò)濾器定義了用戶的搜索范圍，不同的篩選條件在不同地方也能給用戶提供不同的幫助。

假如：專門關(guān)注上星期二 ”關(guān)于可持續(xù)性” PPT演示文稿的員工，可以用文檔類型和日期來(lái)縮小搜索范圍，也可以通過(guò)搜索主題來(lái)找到內(nèi)容。一個(gè)電子商務(wù)網(wǎng)站可能希望買鞋子的客戶通過(guò)鞋跟高度來(lái)縮小購(gòu)買范圍，而購(gòu)買外套的客戶則希望通過(guò)衣服特定的保暖等級(jí)，來(lái)縮小自己的搜索范圍。

當(dāng)網(wǎng)站嘗試采用幾乎一刀切的方法時(shí)，網(wǎng)站所使用的“分面導(dǎo)航”（facets）和過(guò)濾器就會(huì)存在缺陷。相同的標(biāo)準(zhǔn)和特性可能不適合所有的內(nèi)容類型，要謹(jǐn)慎地將用戶的選擇限制為二選一或者接近二選一。

購(gòu)買家具的人可能在找藍(lán)色的椅子，或者他們?cè)谡宜{(lán)色以外任何顏色的椅子（個(gè)人理解：前者是目標(biāo)明確，我就要藍(lán)色的椅子；后者是我想要椅子，但是沒(méi)想好顏色，同時(shí)我不喜歡藍(lán)色），這兩個(gè)需求都應(yīng)該得到支持。

給內(nèi)容打的標(biāo)簽必須正確且可靠，這樣用戶搜索時(shí)才能得到相關(guān)的結(jié)果。例如：在美國(guó)退休人員協(xié)會(huì)網(wǎng)上，用戶在搜索雞肉食譜時(shí)會(huì)感到很困惑，10個(gè)搜索結(jié)果的前6個(gè)沒(méi)一個(gè)食譜里有用到雞肉。

Maplin.com：用戶無(wú)法輕易的找到價(jià)格低于50￡的藍(lán)牙音箱，用戶沒(méi)有辦法通過(guò)網(wǎng)站的過(guò)濾器來(lái)搜尋符合他們價(jià)格要求的商品。相反，他們不得不通過(guò)幾個(gè)價(jià)格區(qū)間的選項(xiàng)進(jìn)行查找。用戶必須一次只選擇一個(gè)價(jià)格區(qū)間（例如40￡-50￡和30￡-40￡），然后記住每個(gè)區(qū)間里他們想要的商品。

9. 壓到用戶的大量信息

眉目不清的信息會(huì)讓用戶難以找到他們需要的信息，密集的“文字墻”讓發(fā)現(xiàn)感興趣的信息變得困難，信息量過(guò)載的頁(yè)面充滿了爭(zhēng)奪用戶注意力的內(nèi)容。

請(qǐng)記住：用戶習(xí)慣掃視網(wǎng)頁(yè)，而不是閱讀網(wǎng)頁(yè)，你可以通過(guò)編排網(wǎng)頁(yè)內(nèi)容，讓用戶能輕松的獲取他們感興趣的的信息——使用簡(jiǎn)短的句子和段落、項(xiàng)目列表、標(biāo)題和加粗的關(guān)鍵字。

一個(gè)狹窄的區(qū)域分了好幾個(gè)長(zhǎng)段落，讓用戶很難看到重點(diǎn)，無(wú)法區(qū)分耳機(jī)的特點(diǎn)。

10. 隱藏鏈接

多年來(lái)，我們的可用性研究表明，用戶往往會(huì)忽略或無(wú)視長(zhǎng)得像廣告或者被放置在通常是放置廣告的頁(yè)面位置的內(nèi)容。這個(gè)問(wèn)題依然存在，當(dāng)內(nèi)容與實(shí)際廣告一起列出時(shí)，情況就更糟了。

網(wǎng)站的設(shè)計(jì)師有時(shí)會(huì)認(rèn)為，將更多的設(shè)計(jì)元素，如：邊框、背景色或圖形添加到鏈接上能讓鏈接脫穎而出，但結(jié)果通常是相反的：在鏈接周圍的設(shè)計(jì)越是奇特，用戶越是會(huì)誤認(rèn)為它是一個(gè)廣告。

Pitfield London在網(wǎng)頁(yè)右邊的菜單信息里放有營(yíng)業(yè)時(shí)間和鏈接，在下面放了一張咖啡杯的動(dòng)態(tài)圖和一些前往其他網(wǎng)站的廣告圖。由于這些廣告的位置和顯示的樣式，導(dǎo)致用戶很難在這個(gè)頁(yè)面上找到咖啡菜單。這個(gè)網(wǎng)站還用了相似的設(shè)計(jì)畫(huà)了張banner，用來(lái)引導(dǎo)用戶前往Pitfield London。

已經(jīng)取得進(jìn)展：有待進(jìn)一步發(fā)展

我們可以放心地假設(shè)，沒(méi)有人會(huì)著手創(chuàng)建一個(gè)設(shè)計(jì)糟糕的網(wǎng)站。如果這些問(wèn)題多年以來(lái)都是眾所周知的，那么它們?yōu)槭裁磿?huì)持續(xù)存在呢?這個(gè)問(wèn)題的潛在答案很多，可能會(huì)填滿一本書(shū)。其中的一些錯(cuò)誤可能反映了一個(gè)更深層次的、具體到組織的UX戰(zhàn)略失敗。

例如：

• 網(wǎng)站信息層次結(jié)構(gòu)的問(wèn)題可以與組織結(jié)構(gòu)或公司的內(nèi)部政治聯(lián)系起來(lái)。
• 不同的部門在不了解對(duì)方的情況下創(chuàng)建內(nèi)容，也沒(méi)有遵循總體的內(nèi)容策略，這時(shí)就會(huì)產(chǎn)生問(wèn)題。
• 較差的搜索結(jié)果可能是因?yàn)閮?nèi)容管理系統(tǒng)較差，內(nèi)容標(biāo)記有缺陷或缺失，或者搜索工具不佳。

這些問(wèn)題背后的原因并不比解決這些問(wèn)題重要，通過(guò)在網(wǎng)站開(kāi)發(fā)過(guò)程中的用戶研究和可用性測(cè)試，并關(guān)注研究結(jié)果，可以很容易地識(shí)別上面列出的許多錯(cuò)誤（如果不是全部的話）。

網(wǎng)站永遠(yuǎn)不會(huì)是完美的，沒(méi)有網(wǎng)站是完美的。總有一個(gè)表格字段需要修改，還有一個(gè)內(nèi)容需要編輯，還有一個(gè)導(dǎo)航類別需要確定，但是知道需要解決的問(wèn)題對(duì)于朝著正確的方向前進(jìn)是至關(guān)重要的。

在進(jìn)行用戶研究時(shí)，要堅(jiān)持以前的發(fā)現(xiàn)。當(dāng)設(shè)計(jì)偏好在5年后改變時(shí)，那些舊的發(fā)現(xiàn)可能會(huì)使你避免在第二個(gè)、第三次或第四次中犯同樣的錯(cuò)誤。

名詞解釋：

分面導(dǎo)航（facets/faceted navigation）：也稱多維度導(dǎo)航，是分析一系列的內(nèi)容然后根據(jù)條件把不相關(guān)的內(nèi)容排除掉，留下我們想要的內(nèi)容。

（譯者注：a.具體想了解的話可以點(diǎn)擊這里；b.文章里用的是facets，但作者提供的鏈接里用的是faceted navigation，所以兩者應(yīng)該是指同一個(gè)東西）。

譯文作者： 兔子翻譯組

本文由 @ 兔子翻譯組 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖作者提供

例4常用標(biāo)簽.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	HTML從入門到精通!
	<br>   <!--換行-->
	歡迎學(xué)習(xí)HTML技術(shù)

	<hr>

<p>
	超級(jí)文本標(biāo)記語(yǔ)言是 標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用，也是一種規(guī)范，一種 標(biāo)準(zhǔn)， 
HTML
HTML(16)
它通過(guò)標(biāo)記符號(hào)來(lái)標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分。網(wǎng)頁(yè) 文件本身是一種文本文件，通過(guò)在文本文件中添加標(biāo)記符，可以告訴 瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫(huà)面如何安排，圖片如何顯示等）。 瀏覽器按順序閱讀網(wǎng)頁(yè) 文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對(duì)書(shū)寫(xiě)出錯(cuò)的標(biāo)記將不指出其錯(cuò)誤，且不停止其解釋執(zhí)行過(guò)程，編制者只能通過(guò)顯示效果來(lái)分析出錯(cuò)原因和出錯(cuò)部位。但需要注意的是，對(duì)于不同的 瀏覽器，對(duì)同一標(biāo)記符可能會(huì)有不完全 相 同的解釋，因而可能會(huì)有不同的顯示效果。
</p>

<p>
	簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言 版本升級(jí)采用 超集方式，從而更加靈活方便。
</p>
	

	<h1>一級(jí)標(biāo)題</h1>
	<h2>二級(jí)標(biāo)題</h2>
	<h4>四級(jí)標(biāo)題</h4>
	<h6>六級(jí)標(biāo)題</h6>
	<hr>
			<pre>
				<<HTML從入門到精通>>
				歡迎學(xué)習(xí)HTML技術(shù)
			</pre>
	
</body>
</html>123456789101112131415161718192021222324252627282930313233343536

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-yw6CHVL1-1593240920356)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例4.png)]

案例5常用標(biāo)簽2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div style="width:400px;height:100px;background:red">導(dǎo)航部分</div>
	<div style="width:400px;height:500px;background:yellow">正文部分</div>
	<div style="width:400px;height:100px;background:blue">版權(quán)部分</div>
	<hr>

	iphone XP 不要8888，也不要1888，只要<span style="font-size:50px;color:red">98
	</span>
</body>
</html>123456789101112131415

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-qqLIPRpW-1593240920357)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例5.png)]

案例6常用標(biāo)簽3.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h3>2020年網(wǎng)絡(luò)游戲排行榜</h3>
	<ol type="a" start="3">
		<li>吃雞</li>
		<li>王者農(nóng)藥</li>
		<li>LOL</li>
		<li>WOL</li>
	</ol>
	<hr>

	<h3>親愛(ài)的同學(xué)們</h3>
	<ul type="disc">
		<li>馮樂(lè)</li>
		<li>趙寧</li>
		<li>木木</li>
		<li>丹丹</li>
	</ul>
	<hr>

	<h3>術(shù)語(yǔ)的解釋</h3>
	<dl>
		<dt>LOL</dt>
		<dd>它是由騰訊公司代理的一款網(wǎng)絡(luò)游戲，中文稱為叫英雄聯(lián)盟</dd>
		<dd>它分為pc端和移動(dòng)端</dd>
		<dt>HTML</dt>
		<dd>是一種用來(lái)制作網(wǎng)頁(yè)的標(biāo)記語(yǔ)言</dd>
		<dt>JAVA</dt>
		<dd>是一種跨平臺(tái)的編程語(yǔ)言</dd>
	</dl>


</body>
</html>1234567891011121314151617181920212223242526272829303132333435363738

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-CZHuTwuN-1593240920359)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例6.png)]

案例7常用標(biāo)簽4.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<hr color="#FF7300" size="10px">
	<hr color="red">
	<hr color="blue" width="400">
	<hr color="#00FF00" width="50%">
	<div style="width:600px;height:300px;background:#FF7300">
		<hr color="red" width="50%" size="9px" align="right">
	</div>
	
</body>
</html>12345678910111213141516

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-7sI2hPAB-1593240920359)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例7.png)]

案例8常用標(biāo)簽5.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="google.png" alt="圖片加載失敗...."title="只是一個(gè)標(biāo)志">
	<hr>



	<div style="width:800px;height:800px;background:red">
		<img src="mac(1).jpg" alt=""width="50%">
		<div style="width:500px;height:500px;background:#CCCCCC">
			<img src="mac(1).jpg" alt=""width="50%">
		</div>
	</div>

	<img src="mac(1).jpg" alt=""width="50%"> 父容器body
</body>
</html>123456789101112131415161718192021

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-yU93yyiJ-1593240920360)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例8.png)]

案例9其他標(biāo)簽.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	welcome <i>to</i>HTML! <br>
	welcome <em>to</em>HTML! <br>
	welcome to <address>上海市南京東路</address>
	<hr>

	HTML從<b>入門</b>到精通！
	HTML從<strong>入門</strong>到精通！
	<br>
	原價(jià)：<del>188元</del>, 優(yōu)惠價(jià)：<span style="font-size:40px;color:#FF7300">
	98元</span>
	<hr>
	主講:<ins>hector</ins>
	<br>
	<hr>
	水的分子表達(dá)式:H<sub>2</sub>0 <br>
	2<sup>3</sup>=8
	<hr>
	
</body>
</html>1234567891011121314151617181920212223242526

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-XdmsP4or-1593240920362)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例9.png)]

案例10頭部標(biāo)簽.html

<!DOCTYPE html>
<html lang="en">
	<!-- 設(shè)置字符編號(hào) -->
	<meta charset="UTF-8">
	<!-- 設(shè)置關(guān)鍵字 -->
	<meta name="keywords"content="IT教育，JAVA開(kāi)發(fā)，WEB前端，
	Aandroid開(kāi)發(fā)，python">
	<!-- 設(shè)置描述信息 -->
	<meta name="descaription" content="做專業(yè)的IT教育.....">
	<!-- 設(shè)置網(wǎng)站作者 -->
	<meta name="author" content="hector">
	<!-- 設(shè)置網(wǎng)站的跳轉(zhuǎn) -->
	<!-- <meta http-equiv="refrest" content="2";url=https://www.
	baidu.com -->
	<title>頭部標(biāo)簽</title>
	<!-- 定義內(nèi)部的CSS樣式 -->
	<style>
		body{
			color:red;
		}
	</style>
	<!-- 引用外部的CSS樣式文件 -->
	<link rel="stylesheet" href="CSS樣式文件的路徑">
	<!-- 定義或引用腳本 -->
	<<script>
		alert("歡迎登錄")
	</script>
	<!-- 定義一個(gè)基礎(chǔ)路徑 -->
	<base href="../image/">
</head>
<body>
	IT教育，計(jì)算機(jī)等級(jí)考試--Hrctor
	<img src="../image/google.png" alt="">
	<img src="../image/p1.jpg" alt="">
</body>
</html>1234567891011121314151617181920212223242526272829303132333435

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-445E4McR-1593240920362)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例10.png)]

案例11標(biāo)簽嵌套.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		alert("哈哈！ ");
	</script>
</head>
<body>
	<div style="width:200px;height:200px;background:red">
		<p>
		hello
		</p>
	</div>
	<p style="width:300px;height:300px;background:green">
		<div style="width:200px;height:200px;background:blue">
			worid
		</div>
</body>
</html>1234567891011121314151617181920

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-IoPZWeC1-1593240920363)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例11.png)]

案例12超鏈接.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="http://www.baidu.com">百度</a>
	<hr>
	<a href="d:/b.html" target="_self">b</a>
	<hr>
	<a href="c.html" target="_blank">c</a>
	<hr>
	<a href="../d.html">d</a>
	<hr>
	<a href="../../e.html">e</a>
</body>
</html>1234567891011121314151617

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-xsXKs86m-1593240920364)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例12.png)]

案例13錨點(diǎn)鏈接.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ol>
		<li><a href="#first">1 簡(jiǎn)介</a></li>
		<li><a href="#second">2 HTML版本</a></li>
		<li><a href="#three">3 特點(diǎn)</a></li>
		<li><a href="#four">4 編輯方式</a></li>
		<li><a href="#five">5 整體結(jié)構(gòu)</a></li>
		<li><a href="#six">6 相關(guān)要求</a></li>
	</ol>

	<p>
		<a name="first">簡(jiǎn)介</a>
    </p>
    <P>
    HTML的英文全稱是 Hypertext Marked Language，即超文本標(biāo)記語(yǔ)言。HTML是由Web的發(fā)明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創(chuàng)立的一種標(biāo)記語(yǔ)言，它是標(biāo)準(zhǔn)通用化標(biāo)記語(yǔ)言SGML的應(yīng)用。用HTML編寫(xiě)的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)(如UNIX， Windows等)。使用HTML語(yǔ)言，將所需要表達(dá)的信息按某種規(guī)則寫(xiě)成HTML文件，通過(guò)專用的瀏覽器來(lái)識(shí)別，并將這些HTML文件“翻譯”成可以識(shí)別的信息，即現(xiàn)在所見(jiàn)到的網(wǎng)頁(yè)。
    </p>
    <p>  
    自1990年以來(lái)，HTML就一直被用作WWW的信息表示語(yǔ)言，使用HTML語(yǔ)言描述的文件需要通過(guò)WWW瀏覽器顯示出效果。HTML是一種建立網(wǎng)頁(yè)文件的語(yǔ)言，通過(guò)標(biāo)記式的指令(Tag)，將影像、聲音、圖片、文字動(dòng)畫(huà)、影視等內(nèi)容顯示出來(lái)。事實(shí)上，每一個(gè)HTML文檔都是一種靜態(tài)的網(wǎng)頁(yè)文件，這個(gè)文件里面包含了HTML指令代碼，這些指令代碼并不是一種程序語(yǔ)言，只是一種排版網(wǎng)頁(yè)中資料顯示位置的標(biāo)記結(jié)構(gòu)語(yǔ)言，易學(xué)易懂，非常簡(jiǎn)單。HTML的普遍應(yīng)用就是帶來(lái)了超文本的技術(shù)―通過(guò)單擊鼠標(biāo)從一個(gè)主題跳轉(zhuǎn)到另一個(gè)主題，從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，與世界各地主機(jī)的文件鏈接超文本傳輸協(xié)議規(guī)定了瀏覽器在運(yùn)行HTML文檔時(shí)所遵循的規(guī)則和進(jìn)行的操作。HTTP協(xié)議的制定使瀏覽器在運(yùn)行超文本時(shí)有了統(tǒng)一的規(guī)則和標(biāo)準(zhǔn)。
    </P>
    <p><a name="second">HTML版本</a></p>
    <p>HTML是用來(lái)標(biāo)記Web信息如何展示以及其他特性的一種語(yǔ)法規(guī)則，它最初于1989年由GERN的Tim Berners-Lee發(fā)明。HTML基于更古老一些的語(yǔ)言SGML定義，并簡(jiǎn)化了其中的語(yǔ)言元素。這些元素用于告訴瀏覽器如何在用戶的屏幕上展示數(shù)據(jù)，所以很早就得到各個(gè)Web瀏覽器廠商的支持。 
    </p>
    <p>HTML歷史上有如下版本：  
    ①HTML 1.0：在1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布。<br>
    ②HTML 2.0：1995年1 1月作為RFC 1866發(fā)布，于2000年6月發(fā)布之后被宣布已經(jīng)過(guò)時(shí)。 <br> 
    ③HTML 3.2：1997年1月14日，W3C推薦標(biāo)準(zhǔn)。 <br>
    ④HTML 4.0：1997年12月18日，W3C推薦標(biāo)準(zhǔn)。<br> 
    ⑤HTML 4.01（微小改進(jìn)）：1999年12月24日，W3C推薦標(biāo)準(zhǔn)。<br> 
    ⑥HTML 5：HTML5是公認(rèn)的下一代Web語(yǔ)言，極大地提升了Web在富媒體、富內(nèi)容和富應(yīng)用等方面的能力，被喻為終將改變移動(dòng)互聯(lián)網(wǎng)的重要推手。<br>
    </p>

    <p><a name="three">特點(diǎn)</a></p>
    <p>
    超級(jí)文本標(biāo)記語(yǔ)言文檔制作不是很復(fù)雜，但功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)耄@也是萬(wàn)維網(wǎng)（WWW）盛行的原因之一，其主要特點(diǎn)如下： [4] 
    簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便。 [4] 
    可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。 [4] 
    平臺(tái)無(wú)關(guān)性：雖然個(gè)人計(jì)算機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，超級(jí)文本標(biāo)記語(yǔ)言可以使用在廣泛的平臺(tái)上，這也是萬(wàn)維網(wǎng)（WWW）盛行的另一個(gè)原因。 [4] 
    通用性：另外，HTML是網(wǎng)絡(luò)的通用語(yǔ)言，一種簡(jiǎn)單、通用的全置標(biāo)記語(yǔ)言。它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類型的電腦或?yàn)g覽器。
    </p>

    <p><a name="four">編輯方式</a></p>
    <p>
    HTML其實(shí)是文本，它需要瀏覽器的解釋，它的編輯器大體可以分為以下幾種：
基本文本、文檔編輯軟件，使用微軟自帶的記事本或?qū)懽职宥伎梢跃帉?xiě)，當(dāng)然，如果你用WPS來(lái)編寫(xiě)，也可以。不過(guò)存盤時(shí)請(qǐng)使用.htm或.html作為擴(kuò)展名，這樣就方便瀏覽器認(rèn)出直接解釋執(zhí)行了。 [7] 
半所見(jiàn)即所得軟件，如：FCK-Editer、E-webediter等在線網(wǎng)頁(yè)編輯器；尤其推薦：Sublime Text代碼編輯器（由Jon Skinner開(kāi)發(fā)，Sublime Text2收費(fèi)但可以無(wú)限期試用）。 [7] 
所見(jiàn)即所得軟件，使用最廣泛的編輯器，完全可以一點(diǎn)不懂HTML的知識(shí)就可以做出網(wǎng)頁(yè)，如：AMAYA（出品單位：萬(wàn)維網(wǎng)聯(lián)盟）；FRONTPAGE（出品單位：微軟）；Dreamweaver（出品單位Adobe）。Microsoft Visual Studio（出品公司：微軟）：其中所見(jiàn)即所得軟件與半所見(jiàn)即所得的軟件相比，開(kāi)發(fā)速度更快，效率更高，且直觀的表現(xiàn)更強(qiáng)。任何地方進(jìn)行修改只需要刷新即可顯示。缺點(diǎn)是生成的代碼結(jié)構(gòu)復(fù)雜，不利于大型網(wǎng)站的多人協(xié)作和精準(zhǔn)定位等高級(jí)功能的實(shí)現(xiàn)。
    </p> 


    <p><a name="five">整體結(jié)構(gòu)</a></p>
    <p>
    一個(gè)網(wǎng)頁(yè)對(duì)應(yīng)多個(gè)HTML文件，超文本標(biāo)記語(yǔ)言文件以.htm（磁盤操作系統(tǒng)DOS限制的外語(yǔ)縮寫(xiě)）為擴(kuò)展名或.html（外語(yǔ)縮寫(xiě)）為擴(kuò)展名。可以使用任何能夠生成TXT類型源文件的文本編輯器來(lái)產(chǎn)生超文本標(biāo)記語(yǔ)言文件，只用修改文件后綴即可。標(biāo)準(zhǔn)的超文本標(biāo)記語(yǔ)言文件都具有一個(gè)基本的整體結(jié)構(gòu)，標(biāo)記一般都是成對(duì)出現(xiàn)（部分標(biāo)記除外例如：<br/>），即超文本標(biāo)記語(yǔ)言文件的開(kāi)頭與結(jié)尾標(biāo)志和超文本標(biāo)記語(yǔ)言的頭部與實(shí)體兩大部分。有三個(gè)雙標(biāo)記符用于頁(yè)面整體結(jié)構(gòu)的確認(rèn)。 [10] 
    標(biāo)記符<html>，說(shuō)明該文件是用超文本標(biāo)記語(yǔ)言（本標(biāo)簽的中文全稱）來(lái)描述的，它是文件的開(kāi)頭;而</html>，則表示該文件的結(jié)尾，它們是超文本標(biāo)記語(yǔ)言文件的開(kāi)始標(biāo)記和結(jié)尾標(biāo)記。
    </p>

    <p><a name="six">相關(guān)要求</a></p>
    <p>
    在編輯超文本標(biāo)記語(yǔ)言文件和使用有關(guān)標(biāo)記符時(shí)有一些約定或默認(rèn)的要求。 [9] 
    文本標(biāo)記語(yǔ)言源程序的文件擴(kuò)展名默認(rèn)使用htm（磁盤操作系統(tǒng)DOS限制的外語(yǔ)縮寫(xiě)為擴(kuò)展名）或
    html（外語(yǔ)縮寫(xiě)為擴(kuò)展名），以便于操作系統(tǒng)或程序辨認(rèn)，除自定義的漢字?jǐn)U展名。在使用文本編輯器時(shí)，注意修改擴(kuò)展名。而常用的圖像文件的擴(kuò)展名為gif和jpg。 [9] 
    超文本標(biāo)記語(yǔ)言源程序?yàn)槲谋疚募淞袑捒刹皇芟拗疲炊鄠€(gè)標(biāo)記可寫(xiě)成一行，甚至整個(gè)文件可寫(xiě)成
    一行；若寫(xiě)成多行，瀏覽器一般忽略文件中的回車符（標(biāo)記指定除外）；對(duì)文件中的空格通常也不按源程序中的效果顯示。完整的空格可使用特殊符號(hào)（實(shí)體符）“ （注意此字母必須小寫(xiě)，方可空格）”表示非換行空格；表示文件路徑時(shí)使用符號(hào)“/”分隔，文件名及路徑描述可用雙引號(hào)也可不用引號(hào)括起。 [9] 
    標(biāo)記符中的標(biāo)記元素用尖括號(hào)括起來(lái)，帶斜杠的元素表示該標(biāo)記說(shuō)明結(jié)束；大多數(shù)標(biāo)記符必須成對(duì)使用，以表示作用的起始和結(jié)束；標(biāo)記元素忽略大小寫(xiě)，即其作用相同，但完整的空格可使用特殊符號(hào)“ （注意此字母必須小寫(xiě)，方可空格）”；許多標(biāo)記元素具有屬性說(shuō)明，可用參數(shù)對(duì)元素作進(jìn)一步的限定，多個(gè)參數(shù)或?qū)傩皂?xiàng)說(shuō)明次序不限，其間用空格分隔即可；一個(gè)標(biāo)記元素的內(nèi)容可以寫(xiě)成多行。 [9] 
    標(biāo)記符號(hào)，包括尖括號(hào)、標(biāo)記元素、屬性項(xiàng)等必須使用半角的西文字符，而不能使用全角字符。 [9] 
    HTML注釋由"<!--"號(hào)開(kāi)始，由符號(hào)”-->“結(jié)束結(jié)束，例如<!--注釋內(nèi)容-->。注釋內(nèi)容可插入文本中任何位置。任何標(biāo)記若在其最前插入驚嘆號(hào)，即被標(biāo)識(shí)為注釋，不予顯示。
    </p>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-nQwkft9w-1593240920364)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例13.png)]

案例14頁(yè)面間的錨點(diǎn)鏈接.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ol>
		<li><a href="13.錨點(diǎn)鏈接.html#first" target="_blank">
		簡(jiǎn)介</a></li>
		<li><a href="13.錨點(diǎn)鏈接.html#second" target="_blank">
		HTML版本</a></li>
		<li><a href="13.錨點(diǎn)鏈接.html#three" target="_blank">
		特點(diǎn)</a></li>
		<li><a href="13.錨點(diǎn)鏈接.html#four" target="_blank">
		編輯方式</a></li>
		<li><a href="13.錨點(diǎn)鏈接.html#five" target="_blank">
		整體結(jié)構(gòu)</a></li>
		<li><a href="13.錨點(diǎn)鏈接.html#six" target="_blank">
		相關(guān)要求</a></li>
</body>
</html>123456789101112131415161718192021

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-4Z1Yrksq-1593240920366)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例14.png)]

案例15功能鏈接.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="../image/hh.gif">點(diǎn)擊此處下載圖片</a>
	<br>

	<a href="mailto:422133899@qq.com">聯(lián)系我們</a>
</body>
</html>123456789101112

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-rSbm5qsd-1593240920366)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例15.png)]

案例01.表格.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="2" width="400px" height="300px" align="
	center" bordercolor="red" bgcolor="#cccccc" backgroud="../..image/timg (1).jpg" cellspacing="0" cellpading="1">
		<tr alige="center" bgcolor="cyain">
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
		<tr align="right">
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
		<tr align="leign" valign="top">
			<td>hello</td>
			<td align="right" bgcolor="blue">hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
		<tr align="right" valign="bottom" background="
		../../image/hh.gif">
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
	</table>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-b7NrHKsq-1593240920367)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例01.png)]

案例02.合并單元格.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- table>(tr>tb{hello$}*4)*4 -->
	<table border="1" width="500px" height="300px">
		<tr>
			<td colspan="4" align="center">hello1</td>
		</tr>
		<tr>
			<td rowspan="3">hello</td>
			<td>hello2</td>
			<td>hello3</td>
			<td>hello4</td>
		</tr>
		<tr>
			<td>hello2</td>
			<td rowspan="2" colspan="2">hello3</td>
		</tr>
		<tr>
			<td>hello2</td>
		</tr>
	</table>
</body>
</html>123456789101112131415161718192021222324252627

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-53fwwown-1593240920368)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例02.png)]

案例03.表格的高級(jí)標(biāo)簽.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- table>(tr>td*4)*6 -->
	<table border="1" width="500px" height="300px" align="
	center">
	<caption><h2>學(xué)生基本信息表</h2></caption>
	<<thead bgcolor="cyan">
			<td>學(xué)號(hào)</td>
			<td>姓名</td>
			<td>年齡</td>
			<td>性別</td>
	</thead>
	<tbody align="center" bgcolor="yellow">
	<tr>
			<td>1001</td>
			<td>小明</td>
			<td>19</td>
			<td>男</td>
		</tr>
		<tr>
			<td>1002</td>
			<td>小花</td>
			<td>18</td>
			<td>女</td>
		</tr>
		<tr>
			<td>1003</td>
			<td>小張</td>
			<td>19</td>
			<td>男</td>
		</tr>
		<tr>
			<td>1004</td>
			<td>小狗</td>
			<td>19</td>
			<td>男</td>
		</tr>
	</tbody>
		<tfoot bgcolor="#FF7300" align="center">
			<td width="%25">合計(jì)</td>
			<td colspan="3">4</td>
		</tfoot>
	</table>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-rbf0ftcZ-1593240920368)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例03.png)]

案例04.表單的基本用法.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h2>用戶注冊(cè)</h2>
	<form action="" method="get" enctype="multipart/form-data">
	用戶名：<input type="text" name="usname" maxlength="4" value="
	碧瑤" readonly="readonly">
	<br>
	密  碼：<input type="password" name="pwd" size="6">
	<br>
	年  齡：<input type="text" name="age" value="18" disabled="">
	<br>
	性	別: <input type="radio" name="sex" value="male">男
			<input type="radio" name="sex" value="female" checked>女
	<br>
	愛(ài)	好: <input type="checkbox" name="hobby" value="eat" checked>吃飯
			<input type="checkbox" name="hobby" value="sleep">睡覺(jué)
			<input type="checkbox" name="hobby" value="doudou">打豆豆
	<hr>
	頭  像: <input type="file" name="head" accept="image/jpg">
			<input type="hidden" name="usr_id" value="8888">
	<br>
	<input type="submit" value="注  冊(cè)">
	<input type="reset" value="重  置">
	<hr>
	<input type="image" src="../../image/tijiao.gif">
	<input type="image" src="../../image/chongtian.gif">
	<hr>
	<input type="button" value="普通按鈕">
	</form>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435

效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-X2qAPVMq-1593240920368)(C:\Users\lenovo\Desktop\project\result\案例04-2.png)]

案例05.特殊表單元素.html

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	學(xué)  歷：
	<select name="degree">
		<option value="0">--請(qǐng)選擇你的學(xué)歷--</option>
		<option value="dazhuan">大專</option>
		<option value="benke" selected>本科</option>
		<option value="yanjiusheng">研究生</option>
		<option value="shuoshi">碩士</option>
	</select>
	<br>
	城  市：
	<select name="city">
		<optgroup label="山西省>"
			<option value="taiyuan">太原</option>
			<option value="datong">大同</option>
			<option value="changzhi">長(zhǎng)治</option>
		</optgroup>
		<optgroup label="山東省">
			<option value="jinan">濟(jì)南</option>
			<option value="qingdao">青島</option>
			<option value="rizhao">日照</option>
		</optgroup>
		<optgroup label="江蘇省">
			<option value="nanjing">南京</option>
			<option value="suzhou">蘇州</option>
			<option value="yangzhou">揚(yáng)州</option>
		</optgroup>
	</select>
	<br>
	服務(wù)協(xié)議；
	<textarea name="introduce" rows="10" cols="100"  readonly>
		請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國(guó)家的法律法規(guī)...
		請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國(guó)家的法律法規(guī)...
		請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國(guó)家的法律法規(guī)...
		請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國(guó)家的法律法規(guī)...
		請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國(guó)家的法律法規(guī)...
	</textarea>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-slxqIosF-1593240920370)(C:\Users\lenovo\Desktop\project\result\案例05.png)]

案例06.其他表單元素.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<fieldset>
		<legend>個(gè)人信息</legend>
		<label for="name">用戶名</label>
		<input type="text" name="ursname" id="name"><br>
		<label for="email">郵  箱</label>
		<input type="text" name="email" id="email"><br>
	</fieldset>

	<hr>

	<input type="submit" value="提交按鈕">
	<input type="reset" value="重置按鈕">
	<input type="image" src="../../image/tijiao.gif">
	<input type="button" value="普通按鈕">
	<hr>

	<button type="submit">提交按鈕</button>
	<button type="reset">重置按鈕</button>
	<button type="button">普通按鈕</button>
	<button><img src="../../image/tijiao.gif" alt=""></button>
	<hr>
	<fieldset>
		<legend>院校信息</legend>
		學(xué)號(hào)：<input type="text" name="stuld"><br>
		學(xué)校：<input type="text" name="stuSchool"><br>
		專業(yè)：<input type="text" name="stuMajor"><br>
	</fieldset>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-hlv43r7m-1593240920371)(C:\Users\lenovo\Desktop\project\result\案例06.png)]

案例07.內(nèi)嵌框架.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<iframe src="top.html" width="100%" height="200px" frameborder="0" 
	scrolling="auto"></iframe>
	<h3>主體部分</h3>
	<br>
	<a href="01.表格.html" target="hello">01.html</a>
	<a href="02.合并單元格.html" target="hello">02.html</a>
	<br>
	<iframe src="./foot.html" width="600px" height="600px" frameborder="0" name="hello"></iframe>
</body>
</html>1234567891011121314151617

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-BvKrpi8R-1593240920371)(C:\Users\lenovo\Desktop\project\result\案例07.png)]

案例1>.html5新增.結(jié)構(gòu)相關(guān)的標(biāo)簽.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<article>
		<header>標(biāo)題</header>
		<section>
			第一段
		</section>
		<section>
			第二段
		</section>
		<footer>腳注</footer>
	</article>

	<aside>廣告</aside>

	<figure>
		<figcaption>log標(biāo)識(shí)</figcaption>
		<img src="../../image/facebook.png" alt="">
		<img src="../../image/google.png" alt="">
	</figure>
	<nav>
		<ul>
		<li>網(wǎng)頁(yè)</li>
		<li>咨訊</li>
		<li>視頻</li>
		<li>圖片</li>
		<li>知道</li>
		<li>貼吧</li>
		<li>采購(gòu)</li>
		<li>地圖</li>
	</ul>
	</nav>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435363738

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-AR5V99DS-1593240920373)(C:\Users\lenovo\Desktop\project\result\案例01…png)]

案例02.>HTML5新增.語(yǔ)義相關(guān).html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	welcome <mark>to</mark> html!
	<hr>
	我在<time datetime="2020年2月14日">情人節(jié)</time>有個(gè)會(huì)!
	<hr>
	<details>
		<summary>HTML簡(jiǎn)介</summary>
		<p>HTML是一門用來(lái)制作網(wǎng)頁(yè)的標(biāo)簽語(yǔ)言</p>
		<p>HTML可以包含文本、圖像、音頻、視頻等各種多媒體信息</p>
	</details>
	<meter max="100" min="1" value="30"></meter>
	<hr>

	<meter max="100" min="1" value="90" high="60" low="20" optimum="10"></meter>
	<hr>

	<meter max="100" min="1" value="90" high="60" low="20" optimum="65"></meter>
	<meter max="100" min="1" value="30" high="60" low="20" optimum="65"></meter>
	<meter max="100" min="1" value="10" high="60" low="20" optimum="65"></meter>
	<hr>

	<meter max="100" min="1" value="10" high="60" low="20" optimum="15"></meter>
	<meter max="100" min="1" value="65" high="60" low="20" optimum="15"></meter>
	<meter max="100" min="1" value="40" high="60" low="20" optimum="15"></meter>
	<meter max="100" min="1" value="15" high="60" low="20" optimum="15"></meter>
	<hr>

	<meter max="100" min="1" value="15" high="60" low="20" optimum="35"></meter>
	<meter max="100" min="1" value="70" high="60" low="20" optimum="35"></meter>
	<meter max="100" min="1" value="40" high="60" low="20" optimum="35"></meter>
	<hr>

	<progress value="10" max="50"></progress>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-PcuZlH7Z-1593240920373)(C:\Users\lenovo\Desktop\project\result\案例02.。.png)]

案例03>HTML5新增.表單相關(guān).html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="" autocomplete="on" id="myform">
		<label for="email">郵箱</label>
		<input type="email" name="email" id="email">

		<br>
		<label for="home">個(gè)人主頁(yè):</label>
		<input type="url" name="home" id="home">

		<br>
		<label for="phone">電話：</label>
		<input type="tel" name="phone" id="phone">

		<br>
		<label for="keywords">關(guān)鍵字:</label>
		<input type="search" name="keywords" id="keywords">

		<br>
		<label for="num">數(shù)字：</label>
		<input type="range" name="num" id="num" min="1" max="10" step="2">

		<br>
		<label for="birthday">出生日期：</label>
		<input type="datetime" name="birthday" id="birthday">

		<br>
		<label for="color">顏色：</label>
		<input type="color" name="color" id="color">

		<br>
		<label for="name">用戶名:</label>
		<input type="text" name="usrname" id="name" placeholder="請(qǐng)輸入用戶名" required="" autocomplete="on" autofocus="">

		<br>
		<label for="age">年齡：</label>
		<input type="text" name="age id="age pattern="\d{1,2}">
		<br>
		<label for="city">城市：</label>
		<input type="text" name+"city" id="city" list="citylist" autocomplete="off">
		<datalist id="citylist">
			<option value="1">北京</option>
			<option value="2">上海</option>
			<option value="3">深圳</option>
			<option value="4">廣州</option>
		</datalist>
		<hr>
		<input type="submit" form="myform">
	</form>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-ul7yIjAz-1593240920374)(C:\Users\lenovo\Desktop\project\result\案例03…png)]

案例04>HTML5新增.多媒體相關(guān).html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<!-- <audio src="../../audio/water.mp3" controls="" autoplay=""
loop="" muted="" preload="metadeta"></audio> -->
<audio controls="">
	<source src="../../audio/earth.ogg">
	<source src="../../audio/water.mp3">
	您的瀏覽器不支持audio標(biāo)簽，請(qǐng)更換瀏覽器
</audio>

<video src="../../video/volcano.mp4" controls="" width="400px" poster="../../image/ timg (1).jpg"></video>
</body>
</html>123456789101112131415161718

效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-vpMsaoe7-1593240920375)(C:\Users\lenovo\Desktop\project\result\案例04…png)]

<input type="url" name="home" id="home">

	<br>
	<label for="phone">電話：</label>
	<input type="tel" name="phone" id="phone">

	<br>
	<label for="keywords">關(guān)鍵字:</label>
	<input type="search" name="keywords" id="keywords">

	<br>
	<label for="num">數(shù)字：</label>
	<input type="range" name="num" id="num" min="1" max="10" step="2">

	<br>
	<label for="birthday">出生日期：</label>
	<input type="datetime" name="birthday" id="birthday">

	<br>
	<label for="color">顏色：</label>
	<input type="color" name="color" id="color">

	<br>
	<label for="name">用戶名:</label>
	<input type="text" name="usrname" id="name" placeholder="請(qǐng)輸入用戶名" required="" autocomplete="on" autofocus="">

	<br>
	<label for="age">年齡：</label>
	<input type="text" name="age id="age pattern="\d{1,2}">
	<br>
	<label for="city">城市：</label>
	<input type="text" name+"city" id="city" list="citylist" autocomplete="off">
	<datalist id="citylist">
		<option value="1">北京</option>
		<option value="2">上海</option>
		<option value="3">深圳</option>
		<option value="4">廣州</option>
	</datalist>
	<hr>
	<input type="submit" form="myform">
</form>
1234567891011121314151617181920212223242526272829303132333435363738394041

```

效果

[外鏈圖片轉(zhuǎn)存中…(img-ul7yIjAz-1593240920374)]

案例04>HTML5新增.多媒體相關(guān).html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<!-- <audio src="../../audio/water.mp3" controls="" autoplay=""
loop="" muted="" preload="metadeta"></audio> -->
<audio controls="">
	<source src="../../audio/earth.ogg">
	<source src="../../audio/water.mp3">
	您的瀏覽器不支持audio標(biāo)簽，請(qǐng)更換瀏覽器
</audio>

<video src="../../video/volcano.mp4" controls="" width="400px" poster="../../image/ timg (1).jpg"></video>
</body>
</html>123456789101112131415161718

效果

[外鏈圖片轉(zhuǎn)存中…(img-vpMsaoe7-1593240920375)]

原文鏈接：https://blog.csdn.net/WanXuang/article/details/106982782?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160513384519724835852804%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160513384519724835852804&biz_id=&utm_medium=distribute.pc_search_top_result.none-task-code-2~all~top_position~default-1-106982782-12.nonecase&utm_term=html

作者：WanXuang

出處：從CSDN

網(wǎng)頁(yè)實(shí)際是一個(gè)文件， 它存放在世界某個(gè)角落的的某一臺(tái)計(jì)算機(jī)中，而這臺(tái)計(jì)算機(jī)必須是與互聯(lián)網(wǎng)相連的，網(wǎng)頁(yè)經(jīng)由網(wǎng)址（ URL ）來(lái)識(shí)別與存取。下面介紹怎樣設(shè)置網(wǎng)頁(yè)疊加，希望可以為您帶來(lái)幫助。

XP系統(tǒng)操作：

(1)右擊左下角"開(kāi)始"菜單"

(2)選擇"內(nèi)容"

(3)工具列

(4)類似工具列按鈕分組

Win7系統(tǒng)設(shè)定：

(1)右擊左下角"微軟Windows"圖標(biāo)

(2)選擇"內(nèi)容"

(3)點(diǎn)擊"工作列"

(4)選擇“工作列按鈕”

(5)選擇 "一律合并,隱藏標(biāo)簽"

(6)確定

2

打開(kāi)一個(gè)網(wǎng)頁(yè)后，在左上角選擇【工具】--【選項(xiàng)】。

在打開(kāi)的選項(xiàng)設(shè)置界面，單擊【修改主頁(yè)】。

在彈出來(lái)的主頁(yè)設(shè)置對(duì)話框中輸入需要設(shè)置為主頁(yè)的網(wǎng)址。單擊確定。確定后就可以看到已經(jīng)將主頁(yè)設(shè)置成功， 在單擊【鎖定主頁(yè)】，按照如圖的方法設(shè)置即可。

最后關(guān)閉退出，在重新打開(kāi)網(wǎng)頁(yè)就是你剛設(shè)置的主頁(yè)了。

3

打開(kāi)360安全瀏覽器，點(diǎn)擊右下角“縮放頁(yè)面比例”

顯示控制器頁(yè)

調(diào)節(jié)到150%，沒(méi)有勾選“縮放對(duì)所有頁(yè)面生效”時(shí)就只對(duì)本網(wǎng)頁(yè)進(jìn)行放大150%

勾選“縮放對(duì)所有頁(yè)面生效”就會(huì)對(duì)所有網(wǎng)頁(yè)進(jìn)行縮放大小

結(jié)果其它網(wǎng)頁(yè)也會(huì)跟本網(wǎng)頁(yè)一樣放大150%

4

第一步打開(kāi)IE瀏覽器

點(diǎn)擊瀏覽器右上角的工具按鈕

然后點(diǎn)擊internet選項(xiàng)

然后點(diǎn)擊選項(xiàng)卡

打開(kāi)的選項(xiàng)卡瀏覽設(shè)置頁(yè)面可以勾選各種顯示的方式

也可以點(diǎn)擊打開(kāi)選項(xiàng)卡時(shí)顯示的是空白頁(yè)，新頁(yè)或是主頁(yè)，設(shè)置后點(diǎn)擊確定。

點(diǎn)擊左下角了解更多課程資訊