WSG6（1）

1、一個結(jié)構(gòu)必須展現(xiàn)出堅(jiān)實(shí)，有用和美麗的三個特質(zhì)。

  • 馬庫斯Vitruvius Pollio

2、頁面結(jié)構(gòu)語義
指定常見類型的頁面區(qū)域，如頁眉，頁腳和導(dǎo)航區(qū)域。<div>編碼人員不需要創(chuàng)建許多獨(dú)特的ID來包含這些常見的頁面元素，而是可以直接使用新元素并對其進(jìn)行設(shè)置。這種在頁面區(qū)域布局中長期實(shí)踐的規(guī)則化使盲人自動化系統(tǒng)（如搜索引擎和瀏覽器）更容易查找，突出顯示或跳過頁面上的結(jié)構(gòu)元素。

除了長期的HTML頁面結(jié)構(gòu)的標(biāo)簽，如<head>和<body>，在HTML5我們現(xiàn)在有這些新的標(biāo)簽來豐富頁面元素的描述：

標(biāo)題：定義頁面的標(biāo)題區(qū)域或節(jié)或文章的標(biāo)題。頁面標(biāo)題通常包含導(dǎo)航元素（<nav>）。文章，部分和旁白都可以包含自己的標(biāo)題區(qū)域。
導(dǎo)航：設(shè)計(jì)為包含主要導(dǎo)航元素的元素。這些通常是主要網(wǎng)站部分的全球?qū)Ш芥溄?，或?qū)Ш降奖镜胤植恐黝}。
主要：設(shè)計(jì)為包含頁面的所有主要內(nèi)容元素。該標(biāo)簽在屏幕閱讀器網(wǎng)頁瀏覽器的輔助功能中很有用，因?yàn)樗试S讀者直接跳轉(zhuǎn)到頁面內(nèi)容。它也可以使搜索引擎標(biāo)記頁面的中心內(nèi)容。
除此之外：該<aside>元素有兩個主要用途：作為頁面布局容器，如用于導(dǎo)航的側(cè)欄，或用于其他內(nèi)容“離開”主頁面內(nèi)容。一個<aside>元素也可以用來指定與頁面的主要內(nèi)容相關(guān)的括號內(nèi)容相關(guān)內(nèi)容，如在“邊欄”文章或注釋中。
頁腳：<footer>元素通常標(biāo)記頁面的結(jié)尾，通常包含有關(guān)網(wǎng)站的一般信息，版權(quán)或其他日期信息以及聯(lián)系信息。該<footer>元素還可以用在章節(jié)或文章的末尾，以便保存章節(jié)或文章末尾通常列出的腳注，參考書目或其他材料。

Page structure semantics ?頁面結(jié)構(gòu)語義

Header
Navigation
Main
Aside
Footer
<header>，常包 <nav>
<nav>
<main>
<aside>
<footer>

3、HTML5中的新內(nèi)容語義元素

文章：一個獨(dú)立或自立的內(nèi)容塊。設(shè)計(jì)作為一種手段來指定可能在不同頁面或網(wǎng)站上重復(fù)使用的內(nèi)容塊，并且在其原始上下文之外仍然是獨(dú)立和可理解的。請注意，既<section>不要使用<article>元素也不要僅用于視覺樣式或布局頁面上的內(nèi)容。<div>如果您只需要一個容器將CSS樣式應(yīng)用于頁面區(qū)域，請使用該元素。
旁白：內(nèi)容與主要內(nèi)容有關(guān)，但與主要內(nèi)容敘述不同。在印刷出版物旁邊通常被分開作為“邊欄”文章。一個<aside>元素也可以用來指定頁面布局的側(cè)邊欄列。
詳細(xì)信息：一個新的元素，用于指定可以被披露或隱藏的解釋性內(nèi)容，如由JavaScript驅(qū)動的彈出式注釋。點(diǎn)擊以透露詳情; 再次點(diǎn)擊以隱藏筆記。看到相關(guān)的<summary>元素。
圖：用于單個圖形或一組緊密相關(guān)的圖形（如插圖，照片，圖表等）的容器。
Figcaption：指定圖形的標(biāo)題。該<figcaption>元素應(yīng)嵌套在相關(guān)<figure>元素中。
標(biāo)記：定義標(biāo)記或突出顯示的文本或?yàn)槠渌Z義目的而區(qū)分的文本。
章節(jié)：定義文檔的一部分。這是一個故意寬泛的定義，主要由作者決定。一節(jié)可能只是一段或兩段，或者整章。
摘要：與彈出<details>元素關(guān)聯(lián)的可見文本。<summary>和<details>元件用于彈出的解釋性說明，通常是由JavaScript控制。用戶點(diǎn)擊一個摘要，一個<details>元素與解釋性文本一起出現(xiàn)，然后當(dāng)用戶再次單擊時，詳細(xì)信息文本消失。
時間：定義日期（通常以yyyy-mm-dd格式）或時間（24小時制）。例如：
<p>Curtain time for the play is <time>20:00</time>.</p>
<p>The first performance of the play is on <time>2016-05-15, 20:00</time>.</p>
畫布：該<canvas>元素允許您指定一個網(wǎng)頁的矩形區(qū)域，其中通過JavaScript或其他邏輯編程進(jìn)行腳本控制 - 您可以創(chuàng)建高度交互式的圖形和動畫，包括交互式3D對象的未來可能性。到目前為止，<canvas>元素已經(jīng)成為一種有趣的可能性，除了古怪的圖形演示和粗糙的動畫之外，其實(shí)際應(yīng)用很少。隨著最近對Adobe Flash Professional CC中的畫布交互性的支持，我們可能會看到更多有用的互動內(nèi)容，它利用了<canvas>元素中固有的可能性的優(yōu)勢，這次是Flash之類的專有文件格式。
視頻和音頻： HTML5包含將音頻和視頻文件嵌入到網(wǎng)頁中的標(biāo)準(zhǔn)方法，無需Adobe Flash等專有瀏覽器插件。不幸的是，HTML5視頻仍在進(jìn)行中，對各種視頻格式（.mov，.ogv，.m4v和其他格式）的點(diǎn)擊式瀏覽器支持可能會迫使您以多達(dá)三種不同的文件格式對每個視頻進(jìn)行編碼確保它可以在主流瀏覽器（Chrome，F(xiàn)irefox和Internet Explorer）上播放，并且在您的頁面上添加JavaScript以測試其他瀏覽器中是否缺少視頻支持。我們目前的建議是堅(jiān)持從Vimeo或YouTube嵌入視頻，直到HTML5視頻的瀏覽器支持更廣泛，更一致。
SVG：可縮放矢量圖形（SVG）由以xml文本格式描述為xy坐標(biāo)和曲線的幾何形狀組成。因?yàn)樗鼈兪鞘噶繄D形，所以SVG可以非常緊湊 - 考慮Adobe Illustrator文件（矢量圖形的專有形式），而不是Adobe Photoshop或由像素網(wǎng)格組成的jpeg位圖文件。在JavaScript控制下，SVG也可以是動畫和交互式的。SVG是HTML5的標(biāo)準(zhǔn)組件，并且在主流瀏覽器中得到廣泛支持，但與jpeg和png格式的圖形相比，它仍然很少被使用。有關(guān)Web圖形格式的更多信息，請參見第8章“圖形設(shè)計(jì)”。

Content semantic?內(nèi)容語義

<article>
<aside>
<summary>
<details>
<figure>
<figcaption>
<mark>
<section>
<time>
<canvas>
<video>
<audio>
<svg>

3、Content Management Systems (CMS)?內(nèi)容管理系統(tǒng)
CMS占有率最高的WordPress和Drupal目前并非全由HTML5元素構(gòu)成，然而即將迭代的版本將建立在HTML5和CSS3的基礎(chǔ)上。https://w3techs.com/

4、使用CSS設(shè)計(jì)頁面布局
級聯(lián)樣式表（CSS）

測試HTML5和CSS3元素和瀏覽器支持的當(dāng)前狀態(tài)：

目前的網(wǎng)頁瀏覽器統(tǒng)計(jì)

有兩項(xiàng)新功能突出表現(xiàn)為web技術(shù)的重大甚至基礎(chǔ)性增強(qiáng)：@media查詢是響應(yīng)的基礎(chǔ)網(wǎng)頁設(shè)計(jì)和@ font-face元素，最終將web排版從“web安全”操作系統(tǒng)字體或gimcrack字體替換方案的局限性中解放出來。

5、編碼頁面以獲得最佳的可訪問性和可讀性

HTML源順序是文檔源代碼中出現(xiàn)的元素（如網(wǎng)站標(biāo)識，導(dǎo)航，主要內(nèi)容，相關(guān)內(nèi)容和頁腳信息）的順序。
0

正確的HTML源代碼順序有以下幾個原因：

有些時候，由于網(wǎng)站技術(shù)故障導(dǎo)致正常的CSS樣式不存在，或者有時在移動或無線環(huán)境中，帶寬非常有限，導(dǎo)致HTML在瀏覽器中顯示為無格式。如果您的源代碼HTML是按照邏輯順序（圖6.4），讀者仍然可以訪問您的內(nèi)容和鏈接，盡管其格式很簡單。
源訂單對于輔助功能非常重要，因?yàn)槊と擞脩舻木W(wǎng)絡(luò)瀏覽器期望獲得特定的邏輯代碼順序，并且您的網(wǎng)站的盲人用戶將能夠快速跳過您的標(biāo)題和導(dǎo)航區(qū)域并進(jìn)入主頁面內(nèi)容。
在源訂單中保持主站點(diǎn)導(dǎo)航鏈接和主頁面內(nèi)容高，有助于搜索引擎優(yōu)化。標(biāo)題區(qū)域中包含太多CSS或JavaScript的頁面可能會將主頁內(nèi)容深深地埋藏在HTML文件中，導(dǎo)致搜索引擎蜘蛛無法看到它，或者由于代碼過多而對頁面內(nèi)容取消排名。
現(xiàn)代網(wǎng)頁使用樣式表來布置網(wǎng)頁上的內(nèi)容，圖形和導(dǎo)航元素，保持HTML內(nèi)容和視覺樣式的清晰分離。

頁面元素的選擇性顯示

6、響應(yīng)式設(shè)計(jì)

響應(yīng)式網(wǎng)頁設(shè)計(jì)圍繞三個概念構(gòu)建：

“流暢”或靈活的頁面布局，按照與瀏覽器窗口大小成比例的單位構(gòu)建。
靈活的，相稱大小的圖像和視聽媒體。
確定瀏覽器屏幕寬度并作出相應(yīng)響應(yīng)的CSS3媒體查詢。

基于液體布局和比例測量：
“流動”布局 - 即基于瀏覽器窗口寬度擴(kuò)展或縮小的網(wǎng)頁設(shè)計(jì)，而不是設(shè)置為固定寬度。

響應(yīng)式布局設(shè)計(jì)從液體布局網(wǎng)格開始，該網(wǎng)格基于百分比測量的比例集而不是固定像素寬度。按照瀏覽器窗口寬度的百分比指定列，排水溝，邊框區(qū)域和其他空間（多列布局），整個設(shè)計(jì)根據(jù)需要展開或收縮以“流暢地”適應(yīng)可用空間。更復(fù)雜的流體布局和CSS樣式也使得排版與基于em（或rem）單位的單一基本類型尺寸成比例。但是，如圖6.3所示，純粹的比例液體布局并不能完全解決許多屏幕尺寸的問題，因?yàn)樵谛∑聊簧?，寬度的?guī)格：100％會讓您在小屏幕上出現(xiàn)荒謬壓扁的布局，在大屏幕上出現(xiàn)荒謬?yán)斓牟季帧?/p>

基于Em的印刷尺寸（圖6.6）很重要，原因有兩個：

如果用戶的設(shè)備類型太大或太小，用戶可以輕松普遍地重新調(diào)整印刷格式，這對于具有視覺障礙的讀者來說是一種重要的輔助功??能。
相對字體大小可以在CSS控件下輕松縮放，通常在全局頁面縮放比例上使用font-size元素，如<html>or <body>標(biāo)簽。通過縮放em的值，您可以一次放大或縮小頁面上的所有版式，這是快速響應(yīng)式設(shè)計(jì)中的一項(xiàng)有用功能，您可以快速縮放頁面的版式，從而輕松地匹配整個屏幕大小和像素密度。

比例圖像和媒體
通過在圖像或視頻容器的CSS樣式中指定max-width：100％，您可以按比例調(diào)整容器大小，并確保容器中的圖像始終填充容器（最大寬度的100％），但始終不會超過容器的大小。因此，不僅頁面布局變得流暢地填充瀏覽器窗口，而且所有圖像也隨著空間的規(guī)定而流暢地改變大小。

媒體查詢
方向
長寬比
彩色或單色顯示
分辨率為dpi
掃描（用于電視監(jiān)視器，逐行掃描或隔行掃描

媒體查詢提供了一種有條件地測試用戶顯示屏各個方面的方法，然后有選擇地加載樣式表，以響應(yīng)這些條件并提供最合適的布局，排版和圖形。這些用于特定范圍屏幕尺寸的樣式表通常由CSS3媒體查詢觸發(fā)，這些查詢旨在以特定的最小尺寸或“斷點(diǎn)”進(jìn)行激活。
在您的臺式機(jī)或筆記本電腦上，逐漸減小網(wǎng)頁瀏覽器窗口的寬度，然后您會看到布局先擠壓以適合框架，然后突然跳到新的布局樣式，因?yàn)槟鷮ⅰ皵帱c(diǎn)”鍵入最低限度瀏覽器窗口的寬度。

響應(yīng)式設(shè)計(jì)不僅僅是拉伸或小型化頁面布局 - 而是關(guān)于如何為特定范圍的屏幕尺寸提供最佳優(yōu)化的內(nèi)容和導(dǎo)航的獨(dú)特布局。
大多數(shù)響應(yīng)式設(shè)計(jì)至少使用三種不同的布局樣式表，用于智能手機(jī)，平板電腦和更大的桌面或筆記本電腦屏幕的視口寬度斷點(diǎn)。
響應(yīng)式設(shè)計(jì)通常在每個響應(yīng)式樣式表中對不同網(wǎng)站的主要導(dǎo)航鏈接進(jìn)行樣式設(shè)置 - 例如，用于智能手機(jī)的緊湊型彈出式菜單，用于平板電腦屏幕的緊湊型鏈接布局以及用于桌面屏幕的更為廣泛和傳統(tǒng)的布局。

課堂提問：
1、為什么要使用HTML5新語義標(biāo)簽？
更注重于內(nèi)容而不是形式
對人友好：更加語義化，高度描述性，更加直觀，增加了代碼的可讀性
對計(jì)算機(jī)友好：瀏覽器更容易解析，搜索引擎更容易抓取文檔內(nèi)容
代碼更加簡潔

2、恰當(dāng)?shù)腍TML代碼順序很重要，因?yàn)椋?/p>

  1. 有時網(wǎng)站會因?yàn)榧夹g(shù)問題無法展示CSS樣式表，或手機(jī)或其他無線設(shè)備由于帶寬原因無法下載CSS，此時如果你的HTML文件順序邏輯清晰，瀏覽器仍然能夠成功獲取內(nèi)容和鏈接。

  2. HTML代碼順序是網(wǎng)頁可讀性的重要基礎(chǔ)。規(guī)范的內(nèi)容順序能夠讓視覺障礙用戶使用網(wǎng)頁時順利的找到需要的內(nèi)容。

  3. 讓網(wǎng)站的導(dǎo)航鏈接和主要網(wǎng)頁內(nèi)容在所有內(nèi)容中排序較高，能夠幫助網(wǎng)站優(yōu)化搜索結(jié)果。一個頭部區(qū)域放置了太多CSS和JavaScript文件的網(wǎng)頁會誤導(dǎo)搜索引擎無法發(fā)覺網(wǎng)頁的主要內(nèi)容。

3、RWD的三種技術(shù)
Liquid layouts and proportional measurements
Proportional images and media
Media queries

流式布局和比例測量

比例圖像和媒體

媒體查詢

4、HTML5 srcset屬性使瀏覽器可以選擇合適的圖片尺寸（小、中、大），從而提高頁面加載速度。

5、響應(yīng)式布局：導(dǎo)航欄的變化

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,150評論 1贊 92
  • 一:在制作一個Web應(yīng)用或Web站點(diǎn)的過程中，你是如何考慮他的UI、安全性、高性能、SEO、可維護(hù)性以及技術(shù)因素的...
    Arno_z閱讀 1,365評論 0贊 1
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的，因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,951評論 0贊 0
  • 有時候項(xiàng)目中有這樣的需求，頁面包含一個UITableVeiw，當(dāng)沒有數(shù)據(jù)的時候顯示一張占位圖片，點(diǎn)擊圖片可以重新刷...
    I_YoYo閱讀 700評論 0贊 0
  • 有人，在笑著訴說他的資產(chǎn)：房，車，公司，股票... ... 不斷強(qiáng)調(diào)著它們的價值。 有人，在面目猙獰的闡述著他們的...
    oneandone閱讀 211評論 0贊 0

友情鏈接更多精彩內(nèi)容