有一個最佳的屏幕尺寸可以設計。網站應在不同的瀏覽器和平臺上以所有屏幕分辨率快速響應地進行轉換。無障礙。移動友好。首先為您的訪客設計。從360×640到1920×1080的設計。

• 適用于1024×768至1920×1080的臺式顯示器的設計
• 適用于360×640至414×896的移動顯示器的設計
• 適用于601×962至1280×800的平板顯示器的設計
• 檢查百度統計并針對目標受眾的最常見分辨率大小進行優化
• 不要設計一種顯示器尺寸或屏幕分辨率。屏幕大小和瀏覽器窗口狀態因訪問者而異。
• 設計應該響應迅速。使用可轉換為當前用戶窗口大小的自適應或響應式布局。
• 監控百度站長工具的移動設備友好性和可用性警告

它仍然應該看起來不錯，并且在所有尺寸下都可以正常工作，現在我們的建議是建設一個自適應/響應式網站。

針對特定屏幕尺寸優化頁面布局的三個主要標準是：

• 網頁的初始可見性：屏幕上方是否可見所有關鍵信息，以便用戶無需滾動即可查看？這是在顯示多少個項目與每個項目顯示多少細節之間的權衡。
• 網頁可讀性：給定頁面寬度，閱讀各列中的文本是否容易？
• 網頁美學：當元素的大小和屏幕大小合適時，頁面的外觀如何？是否所有元素都正確對齊？標題是否緊挨著圖片等？

可用性準則還建議您考慮所有大小的所有三個條件。檢查瀏覽器窗口的屏幕分辨率為360×640到1920×1080。

在整個分辨率范圍內，您的網頁在所有條件上的得分都應該很高。

您的頁面也應該以更大或更小的尺寸工作，盡管這種極端情況不那么重要。

盡管此類用戶當然應該能夠訪問您的網站，但為他們提供小于設計的外觀有時是可以接受的折衷方案。

十大最常見的屏幕分辨率

2020年的前6個月中，對451,027個訪客進行了訪客分析：

屏幕分辨率測試用戶數11920×108088,378（19.53％）21366×76867,912（15.01％）31440×90043,687（9.65％）41536×86432,872（7.26％）52560×144025,954（5.73％）61680×105020,068（4.43％）71280×72015,138（3.34％）81280×80014,007（3.09％）9360×64011,085（2.45％）101600×90010,193（2.25％）

響應式網站模板是一個很好的選擇

響應式Web設計：在相同的URL上提供相同的HTML代碼，而不管用戶的設備（例如，臺式機，平板電腦，移動設備，非可視瀏覽器）如何，但是可以根據屏幕大小來不同地呈現顯示。 百度建議使用響應式Web設計，因為它是最容易實現和維護的設計模式。

在當今世界，許多人正在使用手持設備（平板電腦和智能手機）瀏覽網頁，而響應式網站設計（RWD）已經成為解決屏幕尺寸挑戰的極有可能的解決方案。

此方法不再使用固定寬度的網站，而是使用CSS樣式表中的“媒體查詢”來創建一個網站，該網站在大小上響應手持設備的不同視口以及人們使用的較小屏幕。

因此，無論人們使用什么設備來查看您的網站，您都可以為他們提供最完整的體驗。

百度首選適合移動設備的網站

如果您想為高競爭力的關鍵詞在百度獲得高排名，您就需要一個適合移動設備的網站。

網站對移動設備的友好程度如何影響各種設備對網站的排名效果。如果您為小型企業創建網站，您會知道他們想要一個在百度自然搜索中表現良好的網站。

目前從本質上講，這意味著網站設計具有響應性并且對移動設備友好，尤其是對于百度而言。

全球桌面屏幕分辨率統計，2019年5月– 2020年5月

作為參考，以下是最近（2020年）記錄的當前全球頂級屏幕分辨率的列表：

• 1366×768 – 23.49％
• 1920×1080 – 19.91％
• 1536×864 – 8.65％
• 1440×900 – 7.38％
• 1280×720 – 4.89％
• 1600×900 – 4.01％
• 1280×800 – 3.33％

全球移動屏幕分辨率統計，2019年5月– 2020年5月

• 360×640 – 17.91％
• 375×667 – 7.61％
• 414×896 – 6.52％
• 360×780 – 5.56％
• 360×760 – 5.06％
• 414×736 – 3.74％

全球平板電腦屏幕分辨率統計，2019年5月– 2020年5月

• 768×1024 – 51.98％
• 1280×800 – 7.11％
• 800×1280 – 5.34％
• 601×962 – 4.47％
• 600×1024 – 2.85％
• 1024×1366 – 1.96％

臺式機，手機與平板電腦的全球市場份額2019年5月– 2020年5月

1. 手機– 50.48％
2. 臺式機– 46.51％
3. 平板電腦– 3.0％

如何設計在每個瀏覽器和分辨率下看起來都相同的網站？

你不能。不可能將網站設計成在每個瀏覽器，平臺和屏幕分辨率下看起來都一樣，所以請避免嘗試。

您可以選擇不帶表格的流暢布局來進行設計，其寬度百分比可以擴展和收縮以適合訪問者瀏覽器的設置，或者您可以考慮研究能夠實現相同效果的響應式設計解決方案。

搜索引擎偏愛響應式設計，這對于采用它的人來說是個好消息。移動技術正在興起-因此，如果要開發一個新網站-您必須從一開始就考慮您的網站對移動設備的友好程度。

在實際編寫代碼時，我們的目標是使事情簡單。從經驗中我們知道的是， 對于您而言，確定您的受眾及其使用的設備，并從整體上構建適合該受眾的網站至關重要，受眾也包括搜索引擎。

您的移動網站是否重定向到您網站的另一個URL和版本？

好吧，那不是理想的。實際上，它從未如此。

追溯到今天-一些人使用網站的純文本版本為不支持其網站元素的用戶/瀏覽器生成內容-試圖（通常是徒勞的）使他們的內容更易于訪問。

W3C甚至曾經推薦它，我們認為如果其他所有方法都失敗了：

為訪問者目的而向訪問者傳遞一個URL始終是理想的選擇，并且如果您正在考慮創建網站的“移動”版本，則在傳遞移動或智能手機內容時沒有任何區別。

百度可能會在不久的將來對您的移動體驗做出主要評價-因此，我們所有人都確實需要意識到我們可能很快會在百度的SERP中看到巨大的變化。

當百度作為“訪問者”時，由于搜索引擎的典型URL挑戰，通常只提供一個URL甚至更為重要-在前一段時間實施規范鏈接元素之前就是這種情況。

因此，理想的情況是始終提供一個URL。

百度在這方面給出了建議：“如果您具有“智能手機”內容（我們將其視為普通的Web內容，因為它通常是普通的HTML頁面，只是在布局上進行了調整以顯示較小的內容），則可以使用rel=canonical指向您的桌面版本。這有助于我們專注于網絡搜索的桌面版本。當用戶使用智能手機訪問該桌面版本時，您可以將他們重定向到移動版本。無論URL結構如何，此方法均有效，因此您無需為智能手機移動網站使用子域/子目錄。 然而，更好的方法是使用相同的URL并顯示內容的適當版本而無需重定向?！?/span>

百度還提供了以下提示，以檢查您的網站是否準備好使用移動優先索引，但是從本質上講，如果您正在為網站使用響應式網頁設計模板，則此更改的問題應該很?。?/span>

• 確保網站的移動版本還具有重要的高質量內容。這包括文本，圖像（帶有alt屬性）和視頻-采用通常的可檢索和可索引格式。
• 結構化數據對于用戶喜歡的索引和搜索功能很重要：它應該同時在網站的移動版和臺式機上。確保結構化數據中的URL已更新為移動頁面上的移動版本。
• 元數據應同時存在于網站的兩個版本中。它提供有關頁面內容的提示，以供索引和投放。例如，確保網站上所有頁面的兩個版本的標題和元描述都相同。
• 與單獨的移動網址（單點網站）相互鏈接無需更改。對于使用單獨移動URL的網站，請在這些版本之間保留現有的鏈接rel=canonical和鏈接rel=alternate元素。
• 檢查單獨的移動網址上的hreflang鏈接。當使用link rel=hreflang元素進行國際化時，移動URL和桌面URL之間分別進行鏈接。您的移動URL的hreflang應該指向其他移動URL上的其他語言/區域版本，并且類似地使用hreflang鏈接元素將桌面與其他桌面URL鏈接。
• 確保承載站點的服務器有足夠的容量來處理可能增加的爬網速度。這不會影響使用響應式網頁設計和動態服務的網站，只會影響移動版本位于單獨主機上的網站，例如m.example.com。

用戶期望向下滾動頁面

過去的網頁用戶通常不需要滾動，但多年來，這種情況已經改變。

因此，在設計時，應考慮如果用戶只滾動一個完整屏幕或兩個屏幕，可以看到多少內容。超過五個屏幕的長度可能表示您頁面上的內容過多。當然，用戶希望等待更短的時間來查看更全面的內容。

滾動和初始可見性顯然都取決于屏幕尺寸：較大的屏幕在屏幕上方會顯示更多內容，并且需要較少的滾動。

對響應式移動網站的更改會導百度帶來更多流量嗎？

不一定，但是有可能。

與百度優化有關的許多事情–建立一個適合移動設備的網站或多或少可以確保您保持已經獲得的訪問量，并不一定能為您提供來自百度的更多免費訪問量。

百度及其用戶再次提高了質量標準，如果您想在更具競爭力的SERP中競爭，這是小企業克服困難的又一個障礙。

從長遠來看，這種移動轉化僅對您的用戶來說是一件好事，但從短期來看，對小型企業的轉化率不會產生什么影響，因為通過移動設備獲得的轉化率通常低于桌面。

百度表示，這種適用于移動設備的算法對SERP的影響更大，隨著時間的流逝，我們將發現更多信息。

如何在您的網站上檢查重要的移動可用性問題

百度站長工具

您應該能夠在百度站長工具中跟蹤移動設備錯誤，并且如果您的網站配置正確，錯誤會隨著時間的流逝而消失。

、html的介紹

1.1 html的定義

HTML 的全稱為：HyperText Mark-up Language, 指的是超文本標記語言。標記：就是標簽, <標簽名稱></標簽名稱>，比如：<html></html>、<h1></h1>等，標簽大多數都是成對出現的。

所謂超文本，有兩層含義:

0. 因為網頁中還可以圖片、視頻、音頻等內容(超越文本限制)
1. 它還可以在網頁中跳轉到另一個網頁，與世界各地主機的網頁鏈接(超鏈接文本)

1.2 html的作用

html是用來開發網頁的，它是開發網頁的語言。

1.3 小結

• html是開發網頁的語言
• html中的標簽大多數都是成對出現的, 格式: <標簽名>

二、html的基本結構

2.1 結構代碼

<!DOCTYPE html>
<html>
   <head>            
       <meta charset="UTF-8">
       <title>網頁標題</title>
   </head>
   <body>
        網頁顯示內容
   </body>
</html>

0. 第一行<!DOCTYPE html>是文檔聲明, 用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔。
1. <html>...</html>標簽是開發人員在告訴瀏覽器，整個網頁是從<html>這里開始的，到html結束,也就是html文檔的開始和結束標簽。
2. <head>...</head>標簽用于定義文檔的頭部,是負責對網頁進行設置標題、編碼格式以及引入css和js文件的。
3. <body>...</body>標簽是編寫網頁上顯示的內容。

2.2 瀏覽網頁文件

網頁文件的后綴是.html或者.htm, 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁。

2.3 小結

三、vscode的基本使用

3.1 vscode 的基本介紹

全拼是 Visual Studio Code (簡稱 VS Code) 是由微軟研發的一款免費、開源的跨平臺代碼編輯器，目前是前端(網頁)開發使用最多的一款軟件開發工具。

3.2 vscode 的安裝

0. 下載網址: https://code.visualstudio.com/Download
1. 選擇對應的安裝包進行下載:

0. 根據下載的安裝包雙擊進行安裝即可，當然為了更好的使用 vscode 還可以安裝對應的插件。

3.3 vscode 的插件安裝

插件名說明Chinese (Simplified) Language Pack for VS Code中文(簡體)漢化包open in browser右擊在瀏覽器打開html

0. 漢化插件安裝

0. open in browser插件安裝

0. 注意: 如果在vscode打開的html文檔中右擊沒有出現 open in browser 類型的選項，需要把當前打開的文件關掉，重新打開這個文件就好了。

3.4 vscode 的插件卸載

點擊對應安裝的插件，然后再點擊卸載按鈕即可。

3.5 vscode 的使用

0. 打開文件夾創建文件

0. 快速創建html文檔的基本結構

0. 右擊在瀏覽器打開html文檔

3.6 設置字體大小

3.7 設置顏色主題

3.8 設置默認瀏覽器[可選]

0. 可以根據自己的需要設置默認使用的瀏覽器

3.9 小結

• vscode 是由微軟研發的一款免費、開源的跨平臺代碼編輯器
• 通過資源管理器打開文件夾創建HTML文件，編寫 HTML 代碼
• 可以根據需要安裝對應的插件
• 可以設置字體大小和顏色主題

eb開發是一個很依賴經驗的領域，然而這對初學者很不友好。

知識一旦脫離了應用場景就會變得晦澀、空洞，且知識本身也滿足“二八定律”，“抓大放小”是提高學習效率的關鍵。

下文向大家介紹了HTML和CSS之間的關系。內容選自《HTML 5與CSS 3核心技法（全彩）》一書。本書主線清晰，講解簡潔，并提供在線效果演示效果，非常適合小白上手！

1 HTML是骨架

很難想象一個人在桌前對著一塊砧板坐一夜，隔一會兒就噼里啪啦敲幾下，一會兒哭一會兒笑，是一種什么景象。事實上，在貓眼中我們就是這樣的。只不過我們面對的是一塊會發光的“砧板”而已。但為什么這塊“板子”如此吸引人？“上網”到底是在做什么？

獲取信息。

重點在“信息”，一種看不見摸不著卻真實存在的東西。無論“1 + 1=2”這段字符顯示得多么粗糙，都不會影響它傳遞了完整的信息，以及這條信息的內在邏輯是正確的，不是嗎？HTML就是用來盛放最核心的內容——信息。

所以，在CSS和JavaScript出現之前，HTML就出現了。這是必然的，因為如果連最核心的信息都無法有效傳遞，那圍繞著它的一切裝飾物和附屬品都是毫無意義的。

除滿足承載核心信息的需求外，HTML還解決了一個重要的問題——將信息結構化。

試想有這樣一篇文章：

背影

我說道：“爸爸，你走吧?！彼囃饪戳丝矗f：“我買幾個橘子去。你就在此地，不要走動?！蔽铱茨沁呍屡_的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難?？墒撬┻^鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。

評論

王花花 大概，天底下的父親，老去的樣子都有些共同的特質吧

李拴蛋 我們都不愿意承認他老了

劉備備 想吃橘子...

此時上面的信息基本沒有結構，只能通過斷行或縮進盡可能讓內容更易讀，編輯時的狀態就是其最終的顯示效果。

HTML就派上了用場，見下方的代碼：

代碼

<artcle>

<h1>背影</h1>

<p>

我說道：“爸爸，你走吧?！彼囃饪戳丝?，說：“我買幾個橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難?？墒撬┻^鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。

</p>

</artcle>

<section id="comment-list">

<div class="title">評論</div>

<div class="comment">

<strong class="username">王花花</strong>

<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質吧</span>

</div>

<divclass="comment">

<strong class="username">李拴蛋</strong>

<span class="content">我們都不愿意承認他老了</span>

</div>

<div class="comment">

<strong class="username">劉備備</strong>

<span class="content">想吃橘子...</span>

</div>

</section>

一頭霧水沒關系，后面我們會細說每一個部分?？傊@段內容給人感覺反而更繁瑣。但繁瑣是代價，重要的是現在這段信息有結構了。這就意味著計算機可以通過結構的規律將其顯示得更便于閱讀（甚至是交互）。

以下是不加任何裝飾性內容直接讓瀏覽器呈現的結果：

效果

這是純HTML在沒有引入任何裝飾時的顯示效果。很明顯，即便是這樣也比純文字狀態易讀了許多。但注意，HTML本身沒有樣式，字體大小和粗細有變化的原因是瀏覽器的默認樣式起了作用，與HTML沒有關系。而重點就在這里，這意味著我們可以基于這個結構設計自己的頁面效果，見下方的示例。

代碼

<style>

body { font-family: 'Microsoft YaHei', sans-serif; }

#comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }

#comment-list .comment { margin-top: 10px; margin-bottom: 10px; }

#comment-list .title {

color: #777; font-size: 1.1rem; padding-bottom: 5px;

border-bottom: 1px solid #ccc;

}

</style>

<artcle>

<h1>背影</h1>

<p>

我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個橘子去。你就在此地，不要走動?！蔽铱茨沁呍屡_的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。

</p>

</artcle>

<section id="comment-list">

<div class="title">評論</div>

<div class="comment">

<strong class="username">王花花</strong>

<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質吧</span>

</div>

<div class="comment">

<strong class="username">李拴蛋</strong>

<span class="content">我們都不愿意承認他老了</span>

</div>

<div class="comment">

<strong class="username">劉備備</strong>

<span class="content">想吃橘子...</span>

</div>

</section>

效果

這里只是舉了一個小示例。你可以輕而易舉地讓頁面的風格千變萬化，進而讓用戶體驗有所差異（或差距）?！扒ё內f化”因CSS靈活、強大，“輕而易舉”因HTML簡潔、有序。結構的力量！

CSS是皮膚

一個充滿活力的生態是不滿足于現狀的。人們在適應了便利地瀏覽核心信息之后，就會想方設法改進瀏覽的體驗。比如，讓自己的博客以多欄顯示，以便在視覺上區分不同板塊；修改字體顏色，以便強調一些重要信息等。

起初的做法是——準備幾種特殊的標簽，專門用于樣式的指定。涉及布局的地方，如果沒有特殊標簽就直接用表格布局。以下沒有任何樣式的狀態（以下代碼均不需要看懂）：

代碼

<h1>標題</h1>

<p>

從前有座山，山里有個廟，廟里...

</p>

效果

此時的頁面結構下。

如果想讓標題居中，則需要給其添加元素<center>，見下方的示例。

代碼

<center>

<h1>標題</h1>

</center>

<p>

從前有座山，山里有個廟，廟里...

</p>

效果

此時的頁面結構如下。

居中標題的目的確實達到了，但是有一個很大的問題：如果我改變主意了，不想讓其居中了，那么我還得再去將<center>元素去掉。這對于簡單的頁面確實可行，但如果是復雜的頁面，這種做法的工作量就是噩夢，因為每個地方都得修改，無論是對齊方式、顏色、背景色，還是大的布局都必須通過修改結構才能完成。這種做法的最大問題是可維護性太差，很多時候為了一種樣式要修改很多不必要的結構，枯燥、重復、削足適履的工作太多，基本上寫一次就再也不想改了。

這個問題亟待解決，而且解決方案還要兼容現有規則?，F有規則是什么？HTML的語法及結構。不過既然HTML已經有結構了，為什么不好好利用呢？

以前面示例中的文章頁面為例，如果我們想更改標題，是否可以先統一選中所有標題，然后說明想要什么樣式規則呢？就像下面這樣：

所有h1 元素聽著

對齊方式 居中。

字體顏色 黑色。

如果想將所有段落字體放大，則像下面這樣：

所有p 元素聽著

字體大小 150%。

這種方式的確很高效！同時這個規則與HTML語法無關，相當于另一種語言。這樣結構和樣式就不會互相影響，結構是結構，樣式是樣式，兩者隔離開了。如果想修改樣式，則完全不需要勞HTML大駕，只需要修改樣式文件即可，更便于管理和維護。這就是CSS，只不過其語法更簡潔。

下面以修改標題對齊方式為例：

h1 { /* 所有h1 元素聽著 */

text-align: center; /* 對齊方式 居中 */

}

通過批量選擇和處理，極大地提高了開發效率，降低了維護成本，四兩撥千斤。

（完）

圖書推薦

《HTML 5與CSS 3核心技法（全彩）》

表嚴肅 著

本書能夠為自學Web開發初學者建立一套HTML與CSS的核心知識框架，同時借助豐富的示例讓初學者有一個愉悅、輕松的學習過程。

想從事前端開發的，可將本書作為學習的起點。正從事前端開發的，可將本書作為速查的手冊。