整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
規模的可用性研究揭示了今天最常見和最具破壞性的網頁設計錯誤，它們并不令人驚訝或新奇，而是持續不斷的損害網站的可用性。
自1996年以來，我們一直在總結網頁設計十大問題的列表。今年，我們完成了一個大規模的可用性研究，在美國和英國有215名參與者，看看今天的網頁設計錯誤是什么。
在分析從小型本地企業到娛樂場所，非營利組織到全球組織的43個站點的結果后，我們確定了10個最常見和最具破壞性的網頁設計錯誤，這些錯誤對用戶造成了傷害。（通過傷害他們的用戶，這些設計缺陷絕對也會損害網站的商業指標）
這已經不是大新聞了，今天最重要的問題都不是新的或令人驚訝的。網頁設計已經走了很長的一段路，但是這些一貫的問題依然存現代設計模式和美學改變，潛在的用戶需求保持不變。用戶仍然需要查找信息，能夠閱讀信息，并知道要點擊的內容以及它所在的位置。
人們使用它們找不到信息，許多網站提供的類別名稱不完整，沒有充分或準確地描述其中的內容，其他的安排是基于公司而不是用戶對內容的想法。當網站結構不符合用戶的信息組織方式的心理模型（mental models）時，人們無法找到他們需要的東西。
讓用戶參與創建你的網站結構，一些可用性工作（如卡片分類，決策樹或可用性測試）可以在創建一個對用戶有意義的網站結構方面發揮很大的作用。
ATT.com：有關舊手機交易的信息是在現有客戶下，但用戶在智能手機下查找。
當用戶不能清楚區分相似的導航類別或鏈接時，他們很難找到恰當的內容路徑。類別和鏈接名稱本身需要有自己的涵義，同時也應該與站點上的其他選項結合。如果多個部分或頁面可以滿足特定的信息需求，用戶必須探索每一個路徑或努力做出最好的猜測。或者，他們可能會轉向搜索甚至離開網站。
BAM建筑網站上的用戶希望了解建設項目的細節，但不確定這些信息是否屬于關于我們，公司業務，或者公司技術，大部分是從我們的產品開始，但該部分包含了組織為客戶提供的工作類型的概述，而不是項目細節，項目信息和案例研究是我們的技術特色。
卡片分類和可用性測試有助于避免重疊類別名稱，鏈接太相似的問題通常源于糟糕的內容策略。
造成這些問題的兩個可能原因是：
有些站點上的信息比較碎片化，分散在站點上，它們之間幾乎沒有連接。
當用戶發現一個沒有相關信息的信息孤島時，他們沒有理由認為網站的另一個區域提供了補充材料。如果用戶需要更多的信息，他們會到競爭對手的網站或搜索谷歌。
試圖重新訪問信息的用戶可能最終會選擇在站點的另一個完全不同的領域，對內容的看法不同于第一次體驗。那些找出不連貫信息的信息，拼湊起來。無論哪種方式，他們都對網站留下了負面的印象。
從組織的角度來看，這不僅是用戶體驗的失敗，更是內容管理的噩夢：站點的某個區域的信息可能重復、不同或甚至與其他地方的信息相矛盾。
解決方案之一是在提供相關信息的頁面之間添加相關鏈接，一個更好的解決方案是考慮為什么信息分散在整個網站，挑選適當的時候，并選擇最佳位置。站點的其他區域可以引用關于該主題內容的位置，而不是復制信息。
即使用戶已經知道他們所需要信息在網站中的位置，但他們依然可能會遭受意外或者漫長工作流的阻礙。
Web團隊經常會問，要獲取內容需要多少點擊。沒有確切的數字（no magic number）， 點擊質量的重要性要遠遠大于其數量。當用戶在點擊頁面時應該更接近信息目標，用戶在選擇他們想到東西時需要重復的點擊，這會一次又一次的激怒客戶，并讓他們進行了不必要的努力。
團隊構建頁面有時候會閉門造車，從而沒有考慮到創建內容的流程。創建新頁面時，要考慮用戶如何到達那里并思考是否還有更直接的路徑。
紐約市政府綜合網站：讓用戶感到沮喪的是當點擊尋找消防站（Find a Firehouse）鏈接時，只能在下一個頁面中再點擊一次拼寫都不一樣的鏈接。
這種偏見也恰好說明了人們為什么忠誠于特定的產品、服務、網站或其他工具。我們會冒險使用其他可能更好用的方法，也可能會繼續使用已經嘗試過并且靠得住的工具。
人們想要了解價格、訂購費用、服務費用以及流程開始之前或之后的額外費用，在一些網站中用戶進行復雜的操作只為了尋找基本的信息，例如：他們不得不嘗試在AARP網站上購買會員 ，這樣才能查明會員費用，用戶應該要在進行復雜操作之前就能找到到這些信息。
為部分或者特殊內容單獨創建的網頁、次級頁面需要謹慎的處理這些網站上的用戶。在我們的許多研究中，當參與者沒有主動的跳轉到了一個新的站點或者子站點，然后努力的想要回到父站點，但是該站點并沒有提供返回選項。
有些人能夠通過多次使用瀏覽器的“后退”按鈕或重新輸入網站的網址來導航到父站點，但是許多人甚至沒有注意到他們已經切換了站點（因為父站點和子站點的外觀和感覺相似） 并且很疑惑為什么他們以前使用的導航消失了。
在創建一個單獨的子網站之前需要再三考慮，確保用戶可以根據需要輕松導航回到父站點。
英國紅十字會主站（www.redcross.org.uk – 上圖）及其培訓網站（英國（www.redcrossfirstaidtraining.co.uk -下圖））看起來非常相似，使用相同的LOGO鏈接到每個網站各自的主頁 ，以及相同的第一個導航類別（我們做什么（What We Do））。尋找急救課程的用戶被引導到了培訓網站，并在試圖返回主站點時迷失方向。
當用戶確切地知道他們在尋找什么的時候，用戶會選擇搜索作為最后的手段。在任何情況下，站點都需要通過提供強大的搜索結果來支持用戶。
不幸的是，網站搜索功能仍然是許多網站的主要弱點，有些站點的搜索結果與用戶的查詢不匹配。此外，有些搜索結果展現的只是網站的一部分內容而已，不會清楚的向用戶展示所有的搜索內容。
搜索結果名稱不全或者附有無用的摘要，會讓用戶不由的猜測鏈接背后的內容。散布在網站搜索結果中的廣告也會讓用戶感到訝異，這些廣告會讓他們頭也不回的離開網站。
定期查看搜索日志，了解更多有關用戶的搜索行為和搜索引擎成功與失敗的信息。使用網站內容標簽和網站搜索工具的功能，如“最佳匹配”，會搜索出針對特定查詢的最適合的結果。
功能模塊和過濾器通常能提高用戶體驗，利用它們，用戶可以將搜索范圍縮小到所需的資源、產品或內容。然而，簡單地添加功能模塊和過濾器并不能保證得到更好的可用性，這些工具需要支持真正的用戶和真正的用戶需求。
功能模塊和過濾器定義了用戶的搜索范圍，不同的篩選條件在不同地方也能給用戶提供不同的幫助。
假如：專門關注上星期二 ”關于可持續性” PPT演示文稿的員工，可以用文檔類型和日期來縮小搜索范圍，也可以通過搜索主題來找到內容。一個電子商務網站可能希望買鞋子的客戶通過鞋跟高度來縮小購買范圍，而購買外套的客戶則希望通過衣服特定的保暖等級，來縮小自己的搜索范圍。
當網站嘗試采用幾乎一刀切的方法時，網站所使用的“分面導航”（facets）和過濾器就會存在缺陷。相同的標準和特性可能不適合所有的內容類型，要謹慎地將用戶的選擇限制為二選一或者接近二選一。
購買家具的人可能在找藍色的椅子，或者他們在找藍色以外任何顏色的椅子（個人理解：前者是目標明確，我就要藍色的椅子；后者是我想要椅子，但是沒想好顏色，同時我不喜歡藍色），這兩個需求都應該得到支持。
給內容打的標簽必須正確且可靠，這樣用戶搜索時才能得到相關的結果。例如：在美國退休人員協會網上，用戶在搜索雞肉食譜時會感到很困惑，10個搜索結果的前6個沒一個食譜里有用到雞肉。
Maplin.com：用戶無法輕易的找到價格低于50￡的藍牙音箱，用戶沒有辦法通過網站的過濾器來搜尋符合他們價格要求的商品。相反，他們不得不通過幾個價格區間的選項進行查找。用戶必須一次只選擇一個價格區間（例如40￡-50￡和30￡-40￡），然后記住每個區間里他們想要的商品。
眉目不清的信息會讓用戶難以找到他們需要的信息，密集的“文字墻”讓發現感興趣的信息變得困難，信息量過載的頁面充滿了爭奪用戶注意力的內容。
請記住：用戶習慣掃視網頁，而不是閱讀網頁，你可以通過編排網頁內容，讓用戶能輕松的獲取他們感興趣的的信息——使用簡短的句子和段落、項目列表、標題和加粗的關鍵字。
一個狹窄的區域分了好幾個長段落，讓用戶很難看到重點，無法區分耳機的特點。
多年來，我們的可用性研究表明，用戶往往會忽略或無視長得像廣告或者被放置在通常是放置廣告的頁面位置的內容。這個問題依然存在，當內容與實際廣告一起列出時，情況就更糟了。
網站的設計師有時會認為，將更多的設計元素，如：邊框、背景色或圖形添加到鏈接上能讓鏈接脫穎而出，但結果通常是相反的：在鏈接周圍的設計越是奇特，用戶越是會誤認為它是一個廣告。
Pitfield London在網頁右邊的菜單信息里放有營業時間和鏈接，在下面放了一張咖啡杯的動態圖和一些前往其他網站的廣告圖。由于這些廣告的位置和顯示的樣式，導致用戶很難在這個頁面上找到咖啡菜單。這個網站還用了相似的設計畫了張banner，用來引導用戶前往Pitfield London。
我們可以放心地假設，沒有人會著手創建一個設計糟糕的網站。如果這些問題多年以來都是眾所周知的，那么它們為什么會持續存在呢?這個問題的潛在答案很多，可能會填滿一本書。其中的一些錯誤可能反映了一個更深層次的、具體到組織的UX戰略失敗。
例如：
這些問題背后的原因并不比解決這些問題重要，通過在網站開發過程中的用戶研究和可用性測試，并關注研究結果，可以很容易地識別上面列出的許多錯誤（如果不是全部的話）。
網站永遠不會是完美的，沒有網站是完美的。總有一個表格字段需要修改，還有一個內容需要編輯，還有一個導航類別需要確定，但是知道需要解決的問題對于朝著正確的方向前進是至關重要的。
在進行用戶研究時，要堅持以前的發現。當設計偏好在5年后改變時，那些舊的發現可能會使你避免在第二個、第三次或第四次中犯同樣的錯誤。
名詞解釋：
分面導航（facets/faceted navigation）：也稱多維度導航，是分析一系列的內容然后根據條件把不相關的內容排除掉，留下我們想要的內容。
（譯者注：a.具體想了解的話可以點擊這里；b.文章里用的是facets，但作者提供的鏈接里用的是faceted navigation，所以兩者應該是指同一個東西）。
譯文作者： 兔子翻譯組
本文由 @ 兔子翻譯組 翻譯發布于人人都是產品經理。未經許可，禁止轉載
題圖作者提供
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
HTML從入門到精通!
<br> <!--換行-->
歡迎學習HTML技術
<hr>
<p>
超級文本標記語言是 標準通用標記語言下的一個應用，也是一種規范，一種 標準，
HTML
HTML(16)
它通過標記符號來標記要顯示的網頁中的各個部分。網頁 文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴 瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。 瀏覽器按順序閱讀網頁 文件，然后根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的 瀏覽器，對同一標記符可能會有不完全 相 同的解釋，因而可能會有不同的顯示效果。
</p>
<p>
簡易性：超級文本標記語言 版本升級采用 超集方式，從而更加靈活方便。
</p>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h4>四級標題</h4>
<h6>六級標題</h6>
<hr>
<pre>
<<HTML從入門到精通>>
歡迎學習HTML技術
</pre>
</body>
</html>123456789101112131415161718192021222324252627282930313233343536效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-yw6CHVL1-1593240920356)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例4.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width:400px;height:100px;background:red">導航部分</div>
<div style="width:400px;height:500px;background:yellow">正文部分</div>
<div style="width:400px;height:100px;background:blue">版權部分</div>
<hr>
iphone XP 不要8888，也不要1888，只要<span style="font-size:50px;color:red">98
</span>
</body>
</html>123456789101112131415效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-qqLIPRpW-1593240920357)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例5.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>2020年網絡游戲排行榜</h3>
<ol type="a" start="3">
<li>吃雞</li>
<li>王者農藥</li>
<li>LOL</li>
<li>WOL</li>
</ol>
<hr>
<h3>親愛的同學們</h3>
<ul type="disc">
<li>馮樂</li>
<li>趙寧</li>
<li>木木</li>
<li>丹丹</li>
</ul>
<hr>
<h3>術語的解釋</h3>
<dl>
<dt>LOL</dt>
<dd>它是由騰訊公司代理的一款網絡游戲，中文稱為叫英雄聯盟</dd>
<dd>它分為pc端和移動端</dd>
<dt>HTML</dt>
<dd>是一種用來制作網頁的標記語言</dd>
<dt>JAVA</dt>
<dd>是一種跨平臺的編程語言</dd>
</dl>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435363738效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-CZHuTwuN-1593240920359)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例6.png)]
<!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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7sI2hPAB-1593240920359)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例7.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="google.png" alt="圖片加載失敗...."title="只是一個標志">
<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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-yU93yyiJ-1593240920360)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例8.png)]
<!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>
原價：<del>188元</del>, 優惠價：<span style="font-size:40px;color:#FF7300">
98元</span>
<hr>
主講:<ins>hector</ins>
<br>
<hr>
水的分子表達式:H<sub>2</sub>0 <br>
2<sup>3</sup>=8
<hr>
</body>
</html>1234567891011121314151617181920212223242526效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XdmsP4or-1593240920362)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例9.png)]
<!DOCTYPE html>
<html lang="en">
<!-- 設置字符編號 -->
<meta charset="UTF-8">
<!-- 設置關鍵字 -->
<meta name="keywords"content="IT教育，JAVA開發，WEB前端，
Aandroid開發，python">
<!-- 設置描述信息 -->
<meta name="descaription" content="做專業的IT教育.....">
<!-- 設置網站作者 -->
<meta name="author" content="hector">
<!-- 設置網站的跳轉 -->
<!-- <meta http-equiv="refrest" content="2";url=https://www.
baidu.com -->
<title>頭部標簽</title>
<!-- 定義內部的CSS樣式 -->
<style>
body{
color:red;
}
</style>
<!-- 引用外部的CSS樣式文件 -->
<link rel="stylesheet" href="CSS樣式文件的路徑">
<!-- 定義或引用腳本 -->
<<script>
alert("歡迎登錄")
</script>
<!-- 定義一個基礎路徑 -->
<base href="../image/">
</head>
<body>
IT教育，計算機等級考試--Hrctor
<img src="../image/google.png" alt="">
<img src="../image/p1.jpg" alt="">
</body>
</html>1234567891011121314151617181920212223242526272829303132333435效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-445E4McR-1593240920362)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例10.png)]
<!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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-IoPZWeC1-1593240920363)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例11.png)]
<!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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-xsXKs86m-1593240920364)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例12.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li><a href="#first">1 簡介</a></li>
<li><a href="#second">2 HTML版本</a></li>
<li><a href="#three">3 特點</a></li>
<li><a href="#four">4 編輯方式</a></li>
<li><a href="#five">5 整體結構</a></li>
<li><a href="#six">6 相關要求</a></li>
</ol>
<p>
<a name="first">簡介</a>
</p>
<P>
HTML的英文全稱是 Hypertext Marked Language，即超文本標記語言。HTML是由Web的發明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創立的一種標記語言，它是標準通用化標記語言SGML的應用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺(如UNIX， Windows等)。使用HTML語言，將所需要表達的信息按某種規則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件“翻譯”成可以識別的信息，即現在所見到的網頁。
</p>
<p>
自1990年以來，HTML就一直被用作WWW的信息表示語言，使用HTML語言描述的文件需要通過WWW瀏覽器顯示出效果。HTML是一種建立網頁文件的語言，通過標記式的指令(Tag)，將影像、聲音、圖片、文字動畫、影視等內容顯示出來。事實上，每一個HTML文檔都是一種靜態的網頁文件，這個文件里面包含了HTML指令代碼，這些指令代碼并不是一種程序語言，只是一種排版網頁中資料顯示位置的標記結構語言，易學易懂，非常簡單。HTML的普遍應用就是帶來了超文本的技術―通過單擊鼠標從一個主題跳轉到另一個主題，從一個頁面跳轉到另一個頁面，與世界各地主機的文件鏈接超文本傳輸協議規定了瀏覽器在運行HTML文檔時所遵循的規則和進行的操作。HTTP協議的制定使瀏覽器在運行超文本時有了統一的規則和標準。
</P>
<p><a name="second">HTML版本</a></p>
<p>HTML是用來標記Web信息如何展示以及其他特性的一種語法規則，它最初于1989年由GERN的Tim Berners-Lee發明。HTML基于更古老一些的語言SGML定義，并簡化了其中的語言元素。這些元素用于告訴瀏覽器如何在用戶的屏幕上展示數據，所以很早就得到各個Web瀏覽器廠商的支持。
</p>
<p>HTML歷史上有如下版本：
①HTML 1.0：在1993年6月作為互聯網工程工作小組(IETF)工作草案發布。<br>
②HTML 2.0：1995年1 1月作為RFC 1866發布，于2000年6月發布之后被宣布已經過時。 <br>
③HTML 3.2：1997年1月14日，W3C推薦標準。 <br>
④HTML 4.0：1997年12月18日，W3C推薦標準。<br>
⑤HTML 4.01（微小改進）：1999年12月24日，W3C推薦標準。<br>
⑥HTML 5：HTML5是公認的下一代Web語言，極大地提升了Web在富媒體、富內容和富應用等方面的能力，被喻為終將改變移動互聯網的重要推手。<br>
</p>
<p><a name="three">特點</a></p>
<p>
超級文本標記語言文檔制作不是很復雜，但功能強大，支持不同數據格式的文件鑲入，這也是萬維網（WWW）盛行的原因之一，其主要特點如下： [4]
簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便。 [4]
可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。 [4]
平臺無關性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文本標記語言可以使用在廣泛的平臺上，這也是萬維網（WWW）盛行的另一個原因。 [4]
通用性：另外，HTML是網絡的通用語言，一種簡單、通用的全置標記語言。它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
</p>
<p><a name="four">編輯方式</a></p>
<p>
HTML其實是文本，它需要瀏覽器的解釋，它的編輯器大體可以分為以下幾種：
基本文本、文檔編輯軟件，使用微軟自帶的記事本或寫字板都可以編寫，當然，如果你用WPS來編寫，也可以。不過存盤時請使用.htm或.html作為擴展名，這樣就方便瀏覽器認出直接解釋執行了。 [7]
半所見即所得軟件，如：FCK-Editer、E-webediter等在線網頁編輯器；尤其推薦：Sublime Text代碼編輯器（由Jon Skinner開發，Sublime Text2收費但可以無限期試用）。 [7]
所見即所得軟件，使用最廣泛的編輯器，完全可以一點不懂HTML的知識就可以做出網頁，如：AMAYA（出品單位：萬維網聯盟）；FRONTPAGE（出品單位：微軟）；Dreamweaver（出品單位Adobe）。Microsoft Visual Studio（出品公司：微軟）：其中所見即所得軟件與半所見即所得的軟件相比，開發速度更快，效率更高，且直觀的表現更強。任何地方進行修改只需要刷新即可顯示。缺點是生成的代碼結構復雜，不利于大型網站的多人協作和精準定位等高級功能的實現。
</p>
<p><a name="five">整體結構</a></p>
<p>
一個網頁對應多個HTML文件，超文本標記語言文件以.htm（磁盤操作系統DOS限制的外語縮寫）為擴展名或.html（外語縮寫）為擴展名。可以使用任何能夠生成TXT類型源文件的文本編輯器來產生超文本標記語言文件，只用修改文件后綴即可。標準的超文本標記語言文件都具有一個基本的整體結構，標記一般都是成對出現（部分標記除外例如：<br/>），即超文本標記語言文件的開頭與結尾標志和超文本標記語言的頭部與實體兩大部分。有三個雙標記符用于頁面整體結構的確認。 [10]
標記符<html>，說明該文件是用超文本標記語言（本標簽的中文全稱）來描述的，它是文件的開頭;而</html>，則表示該文件的結尾，它們是超文本標記語言文件的開始標記和結尾標記。
</p>
<p><a name="six">相關要求</a></p>
<p>
在編輯超文本標記語言文件和使用有關標記符時有一些約定或默認的要求。 [9]
文本標記語言源程序的文件擴展名默認使用htm（磁盤操作系統DOS限制的外語縮寫為擴展名）或
html（外語縮寫為擴展名），以便于操作系統或程序辨認，除自定義的漢字擴展名。在使用文本編輯器時，注意修改擴展名。而常用的圖像文件的擴展名為gif和jpg。 [9]
超文本標記語言源程序為文本文件，其列寬可不受限制，即多個標記可寫成一行，甚至整個文件可寫成
一行；若寫成多行，瀏覽器一般忽略文件中的回車符（標記指定除外）；對文件中的空格通常也不按源程序中的效果顯示。完整的空格可使用特殊符號（實體符）“ （注意此字母必須小寫，方可空格）”表示非換行空格；表示文件路徑時使用符號“/”分隔，文件名及路徑描述可用雙引號也可不用引號括起。 [9]
標記符中的標記元素用尖括號括起來，帶斜杠的元素表示該標記說明結束；大多數標記符必須成對使用，以表示作用的起始和結束；標記元素忽略大小寫，即其作用相同，但完整的空格可使用特殊符號“ （注意此字母必須小寫，方可空格）”；許多標記元素具有屬性說明，可用參數對元素作進一步的限定，多個參數或屬性項說明次序不限，其間用空格分隔即可；一個標記元素的內容可以寫成多行。 [9]
標記符號，包括尖括號、標記元素、屬性項等必須使用半角的西文字符，而不能使用全角字符。 [9]
HTML注釋由"<!--"號開始，由符號”-->“結束結束，例如<!--注釋內容-->。注釋內容可插入文本中任何位置。任何標記若在其最前插入驚嘆號，即被標識為注釋，不予顯示。
</p>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nQwkft9w-1593240920364)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例13.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li><a href="13.錨點鏈接.html#first" target="_blank">
簡介</a></li>
<li><a href="13.錨點鏈接.html#second" target="_blank">
HTML版本</a></li>
<li><a href="13.錨點鏈接.html#three" target="_blank">
特點</a></li>
<li><a href="13.錨點鏈接.html#four" target="_blank">
編輯方式</a></li>
<li><a href="13.錨點鏈接.html#five" target="_blank">
整體結構</a></li>
<li><a href="13.錨點鏈接.html#six" target="_blank">
相關要求</a></li>
</body>
</html>123456789101112131415161718192021效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-4Z1Yrksq-1593240920366)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例14.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="../image/hh.gif">點擊此處下載圖片</a>
<br>
<a href="mailto:422133899@qq.com">聯系我們</a>
</body>
</html>123456789101112效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-rSbm5qsd-1593240920366)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例15.png)]
<!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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-b7NrHKsq-1593240920367)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例01.png)]
<!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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-53fwwown-1593240920368)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例02.png)]
<!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>學生基本信息表</h2></caption>
<<thead bgcolor="cyan">
<td>學號</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">合計</td>
<td colspan="3">4</td>
</tfoot>
</table>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-rbf0ftcZ-1593240920368)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例03.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>用戶注冊</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>
愛 好: <input type="checkbox" name="hobby" value="eat" checked>吃飯
<input type="checkbox" name="hobby" value="sleep">睡覺
<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="注 冊">
<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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-X2qAPVMq-1593240920368)(C:\Users\lenovo\Desktop\project\result\案例04-2.png)]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
學 歷：
<select name="degree">
<option value="0">--請選擇你的學歷--</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">長治</option>
</optgroup>
<optgroup label="山東省">
<option value="jinan">濟南</option>
<option value="qingdao">青島</option>
<option value="rizhao">日照</option>
</optgroup>
<optgroup label="江蘇省">
<option value="nanjing">南京</option>
<option value="suzhou">蘇州</option>
<option value="yangzhou">揚州</option>
</optgroup>
</select>
<br>
服務協議；
<textarea name="introduce" rows="10" cols="100" readonly>
請遵守本網站的相關協議和國家的法律法規...
請遵守本網站的相關協議和國家的法律法規...
請遵守本網站的相關協議和國家的法律法規...
請遵守本網站的相關協議和國家的法律法規...
請遵守本網站的相關協議和國家的法律法規...
</textarea>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-slxqIosF-1593240920370)(C:\Users\lenovo\Desktop\project\result\案例05.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<fieldset>
<legend>個人信息</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>
學號：<input type="text" name="stuld"><br>
學校：<input type="text" name="stuSchool"><br>
專業：<input type="text" name="stuMajor"><br>
</fieldset>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-hlv43r7m-1593240920371)(C:\Users\lenovo\Desktop\project\result\案例06.png)]
<!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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BvKrpi8R-1593240920371)(C:\Users\lenovo\Desktop\project\result\案例07.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<article>
<header>標題</header>
<section>
第一段
</section>
<section>
第二段
</section>
<footer>腳注</footer>
</article>
<aside>廣告</aside>
<figure>
<figcaption>log標識</figcaption>
<img src="../../image/facebook.png" alt="">
<img src="../../image/google.png" alt="">
</figure>
<nav>
<ul>
<li>網頁</li>
<li>咨訊</li>
<li>視頻</li>
<li>圖片</li>
<li>知道</li>
<li>貼吧</li>
<li>采購</li>
<li>地圖</li>
</ul>
</nav>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435363738效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-AR5V99DS-1593240920373)(C:\Users\lenovo\Desktop\project\result\案例01…png)]
<!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日">情人節</time>有個會!
<hr>
<details>
<summary>HTML簡介</summary>
<p>HTML是一門用來制作網頁的標簽語言</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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-PcuZlH7Z-1593240920373)(C:\Users\lenovo\Desktop\project\result\案例02.。.png)]
<!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">個人主頁:</label>
<input type="url" name="home" id="home">
<br>
<label for="phone">電話：</label>
<input type="tel" name="phone" id="phone">
<br>
<label for="keywords">關鍵字:</label>
<input type="search" name="keywords" id="keywords">
<br>
<label for="num">數字：</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="請輸入用戶名" 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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ul7yIjAz-1593240920374)(C:\Users\lenovo\Desktop\project\result\案例03…png)]
<!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標簽，請更換瀏覽器
</audio>
<video src="../../video/volcano.mp4" controls="" width="400px" poster="../../image/ timg (1).jpg"></video>
</body>
</html>123456789101112131415161718效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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">關鍵字:</label>
<input type="search" name="keywords" id="keywords">
<br>
<label for="num">數字：</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="請輸入用戶名" 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```
效果
[外鏈圖片轉存中…(img-ul7yIjAz-1593240920374)]
<!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標簽，請更換瀏覽器
</audio>
<video src="../../video/volcano.mp4" controls="" width="400px" poster="../../image/ timg (1).jpg"></video>
</body>
</html>123456789101112131415161718效果
[外鏈圖片轉存中…(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
網頁實際是一個文件， 它存放在世界某個角落的的某一臺計算機中，而這臺計算機必須是與互聯網相連的，網頁經由網址（ URL ）來識別與存取。下面介紹怎樣設置網頁疊加，希望可以為您帶來幫助。
XP系統操作：
(1)右擊左下角"開始"菜單"
(2)選擇"內容"
(3)工具列
(4)類似工具列按鈕分組
Win7系統設定：
(1)右擊左下角"微軟Windows"圖標
(2)選擇"內容"
(3)點擊"工作列"
(4)選擇“工作列按鈕”
(5)選擇 "一律合并,隱藏標簽"
(6)確定
2
打開一個網頁后，在左上角選擇【工具】--【選項】。
在打開的選項設置界面，單擊【修改主頁】。
在彈出來的主頁設置對話框中輸入需要設置為主頁的網址。單擊確定。確定后就可以看到已經將主頁設置成功， 在單擊【鎖定主頁】，按照如圖的方法設置即可。
最后關閉退出，在重新打開網頁就是你剛設置的主頁了。
3
打開360安全瀏覽器，點擊右下角“縮放頁面比例”
顯示控制器頁
調節到150%，沒有勾選“縮放對所有頁面生效”時就只對本網頁進行放大150%
勾選“縮放對所有頁面生效”就會對所有網頁進行縮放大小
結果其它網頁也會跟本網頁一樣放大150%
4
第一步打開IE瀏覽器
點擊瀏覽器右上角的工具按鈕
然后點擊internet選項
然后點擊選項卡
打開的選項卡瀏覽設置頁面可以勾選各種顯示的方式
也可以點擊打開選項卡時顯示的是空白頁，新頁或是主頁，設置后點擊確定。
點擊左下角了解更多課程資訊
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
