HTML 5 - 交互

HTML 5 也被稱為 Web Applications 1.0。為了實現這個目標，增加了幾個為 Web 頁面提供交互體驗的新元素：

details

datagrid

command

這些元素都可以根據用戶的操作和選擇改變顯示的內容，而不需要從服務器裝載新頁面。

details

details 元素表示在默認情況下可能不顯示的詳細信息。可選的 legend 元素可以提供詳細信息的摘要。

details 元素的用途之一是提供腳注和尾注。例如：

The bill of a Craveri's Murrelet is about 10% thinner

than the bill of a Xantus's Murrelet.

<legend>[Sibley, 2000]</legend>

<p>Sibley, David Allen, The Sibley Guide to Birds,

(New York: Chanticleer Press, 2000) p. 247

</p>

</details>

沒有指定具體的顯示方式。瀏覽器可以選用腳注、尾注和工具提示等方式。

每個 details 元素可以有一個 open 屬性。如果設置了這個屬性，那么詳細信息在最初就顯示出來。如果沒有設置這個屬性，那么會隱藏它們，直到用戶要求顯示它們。無論是哪種情況，用戶都可以通過單擊一個圖標或其他控件來顯示或隱藏詳細信息。

datagrid

datagrid 元素提供一個網格控件。可以用它顯示樹、列表和表格，用戶和腳本可以更新這些界面元素。與之相反，傳統的表格主要用來顯示靜態數據。

datagrid 從它的內容（一個 table、select 或其他 HTML 元素）獲得初始數據。例如，代碼 9 中的 datagrid 包含一張成績表。在這個示例中，datagrid 的數據來自一個 table。更簡單的一維 datagrid 可以從 select 元素獲得數據。如果使用其他 HTML 元素，那么每個子元素成為網格中的一行。

<table>

<tr><td>Jones</td><td>Allison</td><td>A-</td><td>B </td><td>A</td></tr>

<tr><td>Smith</td><td>Johnny</td><td>A</td><td>C </td><td>A</td></tr>

<tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>

<tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B </td><td>A</td></tr>

</table>

</datagrid>

這個元素與常規表格的區別在于，用戶可以選擇行、列和單元格；把行、列和單元格折疊起來；編輯單元格；刪除行、列和單元格；對網格排序；以及在客戶機瀏覽器中直接進行其他數據操作。可以用 JavaScript 代碼監視更新。Document Object Model（DOM）中增加了 HTMLDataGridElement 接口以支持這個元素（代碼 10　HTMLDataGridElement）。

interface HTMLDataGridElement : HTMLElement {

attribute DataGridDataProvider data;

readonly attribute DataGridSelection selection;

attribute boolean multiple;

attribute boolean disabled;

void updateEverything();

void updateRowsChanged(in RowSpecification row, in unsigned long count);

void updateRowsInserted(in RowSpecification row, in unsigned long count);

void updateRowsRemoved(in RowSpecification row, in unsigned long count);

void updateRowChanged(in RowSpecification row);

void updateColumnChanged(in unsigned long column);

void updateCellChanged(in RowSpecification row, in unsigned long column);

};

還可以使用 DOM 在網格中動態地裝載數據。也就是說，datagrid 可以不包含那些提供初始數據的子元素。可以用一個 DataGridDataProvider 對象設置它（代碼 11　DataGridDataProvider）。這樣就可以從數據庫、XmlHttpRequest 或者 JavaScript 代碼能夠訪問的任何資源裝載數據。

interface DataGridDataProvider {

void initialize(in HTMLDataGridElement datagrid);

unsigned long getRowCount(in RowSpecification row);

unsigned long getChildAtPosition(in RowSpecification parentRow,

in unsigned long position);

unsigned long getColumnCount();

DOMString getCaptionText(in unsigned long column);

void getCaptionClasses(in unsigned long column, in DOMTokenList classes);

DOMString getRowImage(in RowSpecification row);

HTMLMenuElement getRowMenu(in RowSpecification row);

void getRowClasses(in RowSpecification row, in DOMTokenList classes);

DOMString getCellData(in RowSpecification row, in unsigned long column);

void getCellClasses(in RowSpecification row, in unsigned long column,

in DOMTokenList classes);

void toggleColumnSortState(in unsigned long column);

void setCellCheckedState(in RowSpecification row, in unsigned long column,

in long state);

void cycleCell(in RowSpecification row, in unsigned long column);

void editCell(in RowSpecification row, in unsigned long column, in DOMString data);

};

menu 和 command

menu 元素實際上在 HTML 2 中就出現了。在 HTML 4 中廢棄了它，但是 HTML 5 又恢復了它并指定了新的意義。在 HTML 5 中，menu 包含 command 元素，每個 command 元素引發一個操作。例如，代碼 12 HTML 5 菜單　是一個彈出警告框的菜單。

<menu>

<commandlabel="Do 1st Command"/>

<commandlabel="Do 3rd Command"/>

</menu>

還可以用 checked="checked" 屬性將命令轉換為復選框。通過指定 radiogroup 屬性，可以將復選框轉換為單選按鈕，這個屬性的值是互相排斥的按鈕的組名。

除了簡單的命令列表之外，還可以使用 menu 元素創建工具欄或彈出式上下文菜單，這需要將 type 屬性設置為 toolbar 或 popup。例如，代碼　13. HTML 5 工具欄　顯示一個與 WordPress 等 blog 編輯器相似的工具欄。它使用 icon 屬性鏈接到按鈕的圖片。

<commandlabel="strong" icon="bold.gif"/>

<commandlabel="b-quote" icon="blockquote.gif"/>

<commandlabel="ul" icon="bullet.gif"/>

<commandlabel="ol" icon="number.gif"/>

<commandlabel="li" icon="item.gif"/>

</menu>

label 屬性提供菜單的標題。例如，代碼14. HTML 5 Edit 菜單　顯示一個 Edit 菜單。

<commandlabel="Cut"/>

</menu>

菜單可以嵌套在其他菜單中，形成層次化的菜單結構。

星 Galaxy Fold 和 Surface Duo 以及華為mate X等系列折疊屏手機問世至今已有三年多的時間。此后，三星 Galaxy Z Fold 3 和 Galaxy Z Flip 3、華為mate X2S、榮耀magic V系列等手機均已上市。可折疊設備可供購買，目前正在被消費者使用，隨之而來的是我們作為開發人員可以開始探索這種新型設備和響應式設計的下一個發展的機會。

這些 Web 平臺功能與現有概念（例如視口和媒體查詢）集成，因此開發人員和設計人員可以花更多時間思考如何利用兩個顯示器來創建增強體驗，而不是學習一組新代碼來構建它們。

使用新的 CSS 媒體功能檢測可折疊設備

雙屏和可折疊設備只是響應式設計的下一步，因此它們被視為另一個響應式設計目標，我們可以使用媒體功能為其設計樣式。我們今天已經使用媒體功能和查詢來定位臺式機、平板電腦和手機，現在我們擁有 CSS Viewport Segments 媒體功能來定位我們的可折疊和雙屏設備。

horizontal-viewport-segments

視口分段媒體查詢可以有兩個值。第一個是horizontal-viewport-segments，這表示設備鉸鏈垂直且視口被硬件鉸鏈拆分或折疊成列時的設備狀態。

當horizonal-viewport-segment鉸鏈處于垂直折疊姿勢時，目標是設備。

為了專門為這種方向的可折疊設備提供樣式，我們將編寫以下內容：

@media (horizontal-viewport-segments: 2) {
// Styles specific to the device in this orientation
}

整數表示設備方向中存在的視口數量。當設備像一本書一樣處于垂直折疊姿勢時，我們在水平方向有兩個不同的視口，在垂直方向只有一個視口。

我們還可以結合我們的媒體查詢來定位雙屏設備和某些視口寬度，以提供特定的樣式：

@media (horizontal-viewport-segments: 2) and (min-width: 540px) {
   body {
       background: yellow;
  }
}

vertical-viewport-segments

我們的視口分段媒體功能的第二個值是vertical-viewport-segments，這是設備鉸鏈水平時設備的狀態，并且硬件鉸鏈將我們的視口分成行。

vertical-viewport-segments目標設備處于水平折疊姿勢。

要定位在這個方向旋轉的設備，我們將使用以下代碼：

@media (vertical-viewport-segments: 2) {
  // Styles specific to the device in this orientation
}

使用 JavaScript 檢測可折疊設備

在某些情況下，您可能無法或不想使用 CSS 媒體查詢來檢測您的用戶是否在可折疊設備上，這就是 JavaScript API 的用武之地。最初，提出了一個名為 Windows Segments Enumeration 的全新 API ，但在開發者社區通過原始試驗獲得反饋后，在現有的Visual Viewport API 草案規范的基礎上構建更有意義。

視口段屬性

視口段表示位于彼此相鄰的單獨顯示器上的窗口區域。要檢測雙屏設備，您可以使用以下代碼查詢 segments 屬性：

const segments = window.visualViewport.segments;

此查詢返回的值將是一個數組DOMRects，指示有多少視口。如果只有一個視口段，則查詢將返回null，并以這種方式實現以防止將來出現兼容性問題，以免開發人員開始使用visualViewport.segments[0]針對單屏設備。

在雙屏設備上，查詢將返回 2 DOMRects，表示當瀏覽器窗口跨越折疊時可用的 2 個視口。

我們存儲在segments常量中的這個值是查詢屬性時設備狀態的不可變快照，如果瀏覽器窗口調整大小或設備旋轉，之前檢索到的視口段不再有效，需要查詢再次通過調整大小或方向事件（或兩者）。

如果您調整瀏覽器窗口的大小以僅跨越一個顯示區域，我們將觸發調整大小事件。

如果您旋轉設備，這將觸發調整大小和方向事件，您可以使用這些事件再次查詢屬性以獲取瀏覽器顯示區域的當前狀態。

window.addEventListener("resize", function() {
   const segments = window.visualViewport.segments;
   console.log(segments.length); *// 1*
});

何時使用 JAVASCRIPT API 與 CSS 媒體功能來檢測設備

CSS 媒體功能和 JavaScript 段屬性都將檢測雙屏設備，但 JavaScript 屬性最好在沒有使用 CSS 時使用，當您在 Canvas2D 和 WebGL 中處理對象時可能會發生這種情況。例如，您正在開發的游戲可以同時利用兩個屏幕。

使用 CSSenv()變量

除了 CSS 媒體功能之外，還引入了六個新的 CSS 環境變量，以幫助開發人員計算顯示區域的幾何形狀，計算鉸鏈區域在被 Surface Duo 等物理硬件功能遮擋時的幾何形狀，以及它們還可用于幫助將內容放置在每個顯示區域的邊界內。

六個新的環境變量如下：

env(viewport-segment-width <x> <y>);
env(viewport-segment-height <x> <y>);
env(viewport-segment-top <x> <y>);
env(viewport-segment-left <x> <y>);
env(viewport-segment-bottom <x> <y>);
env(viewport-segment-right <x> <y>);

x和位置表示由分隔每個視口段的硬件功能創建的y二維網格，坐標0,0從左上段開始。

當您的設備處于垂直折疊姿勢且視口并排時，左側的視口段將由表示env(viewport-segment-width 0 0)，而右側的視口段將由表示env(viewport-segment-width 1 0)。如果您將設備轉換為水平折疊姿勢，視口堆疊，頂部將由表示env(viewport-segment-height 0 0)，底部視口由表示env(viewport-segment-height 0 1)。

使用env(viewport-segment-width)andenv(viewport-segment-width)時，除了索引之外，我們還可以設置一個后備值，如下所示：

env(viewport-segment-width 0 0, 100%);

但是這個額外的后備值是可選的，由作者自行決定，如果他們想包含它。

計算鉸鏈寬度

當您的設備的鉸鏈被硬件功能遮擋時，您可以使用提供的環境變量來計算它。

我們可以使用環境變量計算設備鉸鏈。

在我們的示例中，我們有一個處于垂直姿勢的設備，并且想要找到鉸鏈寬度，這樣就不會遮擋任何內容。我們將從左顯示器的右視口段中減去右顯示器的左視口段：

calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));

使用 CSSenv()變量放置內容

我們可以使用 CSS 環境變量在顯示區域邊界內放置內容，如果您想將內容直接放置在鉸鏈或折疊處，這些特別有用。

在下面的示例中，我們將在左側第一個顯示區域的鉸鏈上直接放置圖像。該區域是視口的右側部分，因此我們將使用viewport-segment-right以下代碼放置它：

img {
  max-width: 400px;
}

@media (horizontal-viewport-segments: 2) {
  img {
      position: absolute;
      left: env(viewport-segment-right 0 0);
  }
}

如果我們在 Surface Duo 模式下在 Edge 開發人員工具中模擬我們的屏幕，我們將獲得以下布局：

最初使用環境變量將圖像放置在我們的布局中會將其放置在錯誤的顯示區域中。

這不是我們想要的。圖像應位于左側的顯示區域中。

因為圖像是使用屬性絕對定位的left，所以圖像的左邊緣最終與viewport-segment-right顯示區域對齊。

然后，我們需要從環境變量中減去圖像的寬度，以使圖像與正確的鉸鏈邊緣對齊：

img {
   max-width: 400px;
}

@media (horizontal-viewport-segments: 2) {
   img {
       position: absolute;
       left: calc(env(viewport-segment-right 0 0) - 400px);
  }
}

從視口段中減去圖像寬度會將其沿左側顯示中的鉸鏈放置。

現在我們將圖像放置在我們想要的位置。有關如何沿鉸鏈對齊項目的其他示例，您可以查看這個簡單的盒子演示。打開Edge Developer Tools>Device Emulation然后選擇Surface Duo并確保您Duo emulation處于校正方向姿勢。

把它們放在一起：讓我們構建一個適應雙屏設備的食譜頁面

作為一個在做飯時經常使用手機的人，當我在我的雙屏設備上時會適應的食譜網站會非常有幫助。讓我們來看看如何考慮為它調整一個單獨的食譜頁面。

我想考慮我將如何分塊我的主要內容。通常情況下，我至少會看到食譜標題、制作的份量、烹飪需要多長時間、一張或多張圖片、配料以及制作菜肴的步驟。

當我畫出我的線框時，我得到以下信息：

桌面上食譜頁面的標準布局

我希望我的標題和食譜詳細信息在最頂部，然后是一個占據整個內容寬度的圖像，然后是成分列表和食譜步驟。我不想堆疊后兩個內容組，因為如果我堆疊它們，成分列表的右側會有很多空白，所以我希望步驟坐在成分旁邊，給我兩列圖片下方。

用于布局的 CSS 網格或 FLEXBOX？

我知道我想如何在普通桌面屏幕上布置這個食譜，并且有多種方法可以對這個布局進行編碼和對內容進行分組，但我如何對其進行分組，以及我想在雙屏上實現什么布局在我編碼之前需要考慮設備。根據我為桌面視圖所做的草圖，我可以使用 flexbox 和 CSS Grid 的組合來實現我想要的布局，我將成分和步驟分組到一個 flex 容器中。但是讓我勾勒一下我希望我的頁面如何在雙屏上顯示。

垂直折疊位置的可折疊設備上的理想布局通過顯示屏將內容分開，因此不會被鉸鏈遮擋。

如果我想在布局上有更大的靈活性，那么我不能將我的成分和步驟分組到一個 flex 容器中，否則，無論圖像沒有進入哪一列，都會有很大的空白。

如果我只在這個布局中使用 flexbox，它會產生一些我想避免亂用的間距。

添加我們的內容

我將在桌面和雙屏布局中只使用 CSS Grid。所以，讓我們構建我們的內容。

<main>
  <section class="recipe">
      <div class="recipe-meta">
          … <!—Contains our recipe title, yield and servings -->
      </div>
      <img src="imgs/pasta.jpg" alt="Pasta carbonara photographed from above on a rustic plate" />
      <div class="recipe-details__ingredients">
          …<!— Contains our ingredients list -->
      </div>
      <div class="recipe-details__preparation">
          … <!— Contains our list of steps to put the ingredients together -->
      </div>
  </section>
</main>

接下來，讓我們構建頁面的結構。我要定義我的網格：我只想要三列，并且我希望它們是容器的相等部分。

.recipe {
display: grid;
grid-template-columns: repeat(3, 1fr);

接下來，我將定義我的行，并且我將使用grid-auto-rowswith minmax，這樣我的行是最小的，175px但可以增長到最大內容高度的最大值。

grid-auto-rows: minmax(175px, max-content);

然后我將添加更多屬性： my grip-gap、我的最大內容寬度和一個邊距，以使我的布局在頁面上居中。

grid-gap: 1rem;
max-width: 64rem;
margin: 0 auto;
}

然后，我將把我的內容放入我定義的網格中：

.recipe-meta {
   grid-column: 1 / 4;
}

.recipe-meta p {
   margin: 0;
}

img {
   width: 100%;
   grid-column: 1 / 4;
}

.recipe-details__ingredients {
   grid-row: 3;
}

.recipe-details__preparation {
   grid-column: 2 / 4;
   grid-row: 3;
}

這將根據我的草圖為我提供布局：

布局在桌面上按預期呈現

偉大的！但是我的雙屏布局呢？讓我們深入了解我們的horizontal-viewport媒體功能和雙屏網格。

使用媒體查詢和調整容器布局

首先，這是我現在在雙屏上的布局：

在沒有實現任何雙屏代碼的情況下，如果用戶想要將瀏覽器跨過兩個顯示器，那么頁面將是這樣的。

如果我們向下滾動：

如果用戶選擇跨越兩個顯示器，則內容會被鉸鏈遮擋。

不是很好。我們的內容被鉸鏈遮住了，所以讓我開始重新定義我的網格。

對于我的網格列，我仍將使用三列，但我希望一列占據左側的第一個視口段，另外兩列占據右側視口段，因此我將使用我的 CSS環境變量env(viewport-segment-width 0 0)告訴瀏覽器，對于我的第一列，我希望它占據第一個顯示區域的整個視口。

@media (horizontal-viewport-segments: 2) {

/* Body styles for smaller screens */
body {
       font: 1.3em/1.8 base, 'Playfair Display', serif;
       margin: 0;
  }

.recipe {
   grid-template-columns: env(viewport-segment-width 0 0 1fr 1fr;
   grid-template-rows: repeat(2, 175px) minmax(175px, max-content);
}

}

對于我的行，我希望在放置上更靈活一點，所以我將重復兩行175px，這是關于帶有配方標題、產量和時間信息的容器的高度，之后的行應該匹配我最初在網格中定義的內容。

如果我在 DevTools 中檢查我的設計，我可以看到我在配方容器上設置的width和margin最初將我想要與我的視口段對齊的網格線推到正確的視口段中。

添加我的代碼后，我的內容不再被遮擋，但仍需要一些間距調整。

要重置它，我將重置我的marginand max-width。

@media (horizontal-viewport-segments: 2) {

.recipe {
   grid-template-columns: env(viewport-segment-width 0 0) 1fr 1fr;
   grid-template-rows: repeat(2, 175px) minmax(175px, max-content);
   margin: 0;
   max-width: 100%;
}

}

重置我的邊距和填充會掩蓋右側顯示中的內容。

現在我要把我的內容放在網格中并調整我的布局。

.recipe-meta {
   grid-column: 1 / 2;
   padding: 0 2rem;
}

img {
   grid-column: 2 / 4;
   grid-row: 1 / 3;

   width: 100%;
   height: 100%;
   object-fit: cover;
   /* necessary to keep the image within the grid lines */
}

.recipe-details__ingredients {
   grid-row: 2;
   padding: 0 2rem;
}

.recipe-details__preparation {
   grid-column: 2 / 4;
   grid-row: 3;
   padding: 0 2rem 0 3rem;
}

我已經對內容應用了填充，除了我決定要跨越整個視口的圖像。對于圖像下方的內容，由于從物理鉸鏈下方開始的網格線的性質，我想添加額外的填充，因此它看起來左側的填充與其他帶有填充的項目相同。如果我不添加額外的，它會落得太靠近鉸鏈。因為我已經有一個 grid-gap1rem并且我想將 padding 加倍，所以我將添加3rem而不是4rem為我們提供雙屏設備上的最終布局：

我可以重新添加尺寸更合適的填充來顯示內容，因此它不會在帶有物理鉸鏈的設備上被遮擋。

只需對我們的 CSS 進行一些小的調整并使用其中一項新的媒體功能，我們就有了一個適應雙屏設備的布局。要查看體驗，請前往此處的 Edge 演示站點或基于 Chromium 的瀏覽器，然后打開瀏覽器開發人員工具以查看 Surface Duo 仿真。如果您在 Chrome 中打開該站點，請確保在下啟用了實驗性網絡平臺功能標志chrome://flags，以便演示正確顯示。

單屏響應式設計細節

為了確保我們考慮到小型單屏設備，我為手機布局選擇的代碼使用了 flexbox 并將所有內容放在一個列中：

@media (max-width: 48rem) {

   body {
       font: 1.3em/1.8 base, 'Playfair Display', serif;
  }

   .recipe-details {
       display: flex;
       flex-direction: column;
  }

}

API 瀏覽器可用性和無設備測試

默認情況下，這些雙屏 API 在 Microsoft Edge 和 Android 上的 Edge 中可用，從版本 97 開始。這些計劃很快就會出現在其他 Chromium 瀏覽器中，但具體時間尚未確定。要在 Chrome 中啟用這些 API，請轉到chrome://flags并啟用實驗性網絡平臺功能。

雖然這些是相對較新的設備，但許多現在已經進入第二代和第三代，因此公司正在投資它們。如果您無法使用物理設備，最好的測試方法是使用瀏覽器開發工具。我已經在仿真工具和 Surface Duo 上測試了我的網站，Duo 的仿真工具似乎是相同的。我的設計在設備上的外觀與在 DevTools 中的外觀相同。它使構建和設計雙屏設備就像開發桌面和單屏移動設備一樣容易。

如果您使用的是不支持這些 API 的桌面或設備，則可以為 Visual Viewport Segments 屬性提供一個 polyfill。CSS 媒體查詢沒有 API。目前，市場上的雙屏設備都是基于安卓的，這些API計劃在安卓上可用的基于Chromium的瀏覽器中。

如果可折疊設備上的瀏覽器不支持這些功能，您可以使用 polyfill 或確保您的網站在小單屏上仍能很好地呈現，因為用戶可以靈活選擇如何在雙屏上顯示網站屏幕設備。他們可以跨兩個顯示器跨越一個網站，或者他們可以選擇讓它跨一個顯示器，如果他們選擇后者，它將像在平板電腦或手機上一樣顯示。即使您的網站沒有雙屏實現，用戶仍然可以選擇單顯示視圖。雙屏 API 提供了一種方法來逐步增強擁有設備的用戶的體驗。

結束

雙屏設備只是響應式設計的下一個發展方向。如果您有 PWA 或網站，可用的 API 可以無縫集成到您現有的代碼庫中。還有其他方法可以為雙屏設備構建應用程序，您可以在Surface Duo 文檔https://docs.microsoft.com/en-us/dual-screen/中查看這些方法。這是在網絡上進行布局的激動人心的時刻，雙屏提供了獲得更多創意的機會。

為幫助到一部分同學不走彎路，真正達到一線互聯網大廠前端項目研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實企業項目開發，云服務器部署上線，從入門到精通

PC端項目開發（1個）
移動WebApp開發（2個）
多端響應式開發（1個）

共4大完整的項目開發！一行一行代碼帶領實踐開發，實際企業開發怎么做我們就是怎么做。從學習一開始就進入工作狀態，省得浪費時間。

從學習一開始就同步使用 Git 進行項目代碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠項目的開發標準和設計規范，命名規范，項目代碼規范，SEO優化規范

從藍湖UI設計稿到 PC端，移動端，多端響應式開發項目開發

真機調試，云服務部署上線；
Linux環境下的 Nginx 部署，Nginx 性能優化；
Gzip 壓縮，HTTPS 加密協議，域名服務器備案，解析；
企業項目域名跳轉的終極解決方案，多網站、多系統部署；
使用使用 Git 在線項目部署；

這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視頻+圖文教程+項目資料素材等。只為實力寵粉，真正一次掌握企業項目開發必備技能，不走彎路！

過程中【不涉及】任何費用和利益，非誠勿擾。

如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰學習計劃，來自！老師會邀請你進入學習，并給你發放相關資料。

30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程

果凍公開課，開講啦

修真院傾情奉獻的動畫課堂：

每堂幾分鐘，用趣味生動又邏輯清晰的方式，為你分享編程學習中的知識點及趣味小故事

本節課為大家帶來第一課：什么是HTML

”

動畫視頻：

文字解析：

45年前，北京時間10月29日上午10點，計算機向世界發出了它的第一句話“LOL”，標志著互聯網時代的誕生。

而今天的我們，在享受著互聯網便利的同時，是否產生過這樣的思考：

互聯網中我們最直接接觸的網頁，又是如何誕生的呢？

這個問題，可以追溯到更近的時間，25年前，HTML這門語言第一次誕生的時候。這是因為，網頁的基本構成可以簡單概括為由HTML、CSS和JS三部分構成。

當然，這三部分的出現時間也是有著先后關系的，從僅僅只有HTML，慢慢發展到有了CSS，最后到出現了JS。而我們今天也將簡單向大家介紹一下HTML、CSS和JS這三種網頁支柱語言。

HTML誕生于1993年，經過六年時間，從HTML1.0發展到了HTML4.0這個版本。之后，HTML經過了一個較為爭議的過程，出現了一個分支，XHTML和HTML5。

由于XHTML的不兼容性，造成眾多瀏覽器廠家和開發者的反對：W3C關閉了XHTML項目，合并了HTML5，歷經八年正式誕生了HTML 5這個版本——要知道哪吒也只是懷了3年而已。

HTML這門語言，主要是通過一個個被尖括號<>包裹的標簽對內容進行標記，來告訴瀏覽器如何顯示其中的內容。

例如文字如何處理，畫面如何安排，圖片如何顯示等。其中作為結束的標簽在<>中有一個反斜杠/

HTML中的標簽按照類別主要分為12大類，共119種，其中有30個是HTML 5中新推出的標簽。

我們來看看我們最常用的標簽都有哪些吧~

①基礎類

<title></title> 定義文檔的標題

我們平時看到的瀏覽器上面這個網頁標題就是用這個標簽實現的。

大多數的純文字內容都是用<p>標簽包住的，作用就是很簡單的告訴瀏覽器這一大段都是文字

②格式類

<b>可以將文字加粗

<big>可以將文本變為大號文本

<i>可以將文字傾斜

③表單類

<input>是我們常用的輸入控件，通常在網頁中我們可以進行輸入的地方都是用它進行標注的

<select>我們常見的下拉列表就是用它標注的，可以將所有選項折疊收縮，很方便對吧

<button>就是我們可以點擊的各種按鈕，不管是登錄還是取消，都是這個標簽

④圖像類

<img>用來定義圖像，大多數我們看到的圖片都是用這個標簽定義的

⑤音頻視頻類

<audio>用來定義我們的音頻內容，如果在網頁上看到這個音頻播放的東西，準是這個標簽的功勞

<video>用來定義視頻，網頁中你想放視頻的話，可以用這個標簽

⑥鏈接類

<a >IT修真院</a>

我們經常看到的這個藍色有下劃線的文字就是<a>的作用，點擊它我們可以去到新的頁面

⑦樣式類

<div></div>是用來標記一塊區域，用來告訴瀏覽器，這一塊是一個整體

<header></header>主要用來放頁面頭部的內容

<footer></footer>主要用來放頁面尾部的內容

⑧列表類

<ol>列表標簽，我們能看到的這種列表都是用它來實現

⑨表格類

<table>我們看到的這種表格就是用這個來實現的

大家發現了嗎？

HTML的標簽基本都是它標注內容的英文單詞或者是縮寫，十分的語義化

基本上這個標簽是干嘛的，只要看這個標簽是什么意思你就知道的八九不離十了，是不是很簡單~

本節課的內容就是這些啦，我們來復習一下：

1、網頁由HTML、CSS、JS三部分構成

2、歷經8年，從HTML1.0發展到現行的HTML5

3、HTML語言作為標記語言用標簽來告訴瀏覽器如何顯示內容

4、常用的九類標簽

是不是覺得HTML一下變得簡單明了起來了呢，下節課，我們將向大家分享CSS的相關內容，敬請期待~

這里是果凍公開課，一個用趣味的動畫來分享IT知識的課堂

我們將原本復雜、不易理解的編程知識，轉化為一個個有趣的動畫短視頻，為更多人提供生動有趣的IT內容/服務

無論是大咖還是小白，都可以快速學會并深度了解每一個知識點，讓IT，Q彈可口。

想了解更多就到我們官網看看吧

在線咨詢

上一篇：網站開發技術新潮：單頁面應用程序
下一篇：ASP.NET Web Forms-數據綁定

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML 5 - 交互

使用新的 CSS 媒體功能檢測可折疊設備

horizontal-viewport-segments

vertical-viewport-segments

使用 JavaScript 檢測可折疊設備

視口段屬性

何時使用 JAVASCRIPT API 與 CSS 媒體功能來檢測 設備

使用 CSSenv()變量

計算鉸鏈寬度

使用 CSSenv()變量 放置內容

把它們放在一起：讓我們構建一個適應雙屏設備的食譜頁面

用于布局的 CSS 網格或 FLEXBOX？

添加我們的內容

使用媒體查詢和調整容器布局

單屏響應式設計細節

API 瀏覽器可用性和無設備測試

結束

您的項目需求

何時使用 JAVASCRIPT API 與 CSS 媒體功能來檢測設備

使用 CSSenv()變量放置內容