天天看點
傳回

HTML5HTML5HTML5的新特新

HTML5

學習目标

【了解】了解什麼是HTML

【掌握】HTML的基本結構

【了解】ISO-639 語言代碼

【掌握】HTML的編碼規範

【掌握】HTML的行級元素與塊級元素

【掌握】表單與表格的使用

【掌握】語義化與頁面常見布局

【了解】多媒體元素

【了解】圖像動畫元素、資料清單

一、Web開發

1.1 概念

  1. 全稱World Wide Web，縮寫：www 全球廣域網，又稱網際網路。
  2. World Wide Web Consortium，縮寫：W3C，網際網路聯盟。其負責制定和維護Web行業标準，也叫W3C标準

說明:

  1. W3C标準包括：
    • HTML内容：HTML、XHTML
    • 樣式美化：CSS
    • 結構文檔通路：DOM（Document Object Model）
    • 頁面互動：ECMAScript
  2. 通常情況下web主要指浏覽器與web應用伺服器的通信
  3. 通常web主要通過HTTP協定通信
  4. Web前端主要指浏覽器端呈現内容的開發，由于浏覽器是直接與使用者打交道故稱為Web前端

注意：

W3C 官方文檔： https://www.w3.org/standards/webdesign/

Web開發技術 MDN文檔：https://developer.mozilla.org/zh-CN/docs/Web

二、HTML基礎

2.1 什麼是HTML

HTML：(Hyper Text Markup Language) 超文本标記語言，通常情況下指代網頁的源碼

2.2 HTML的基本結構(3分鐘練習時間) 

<!DOCTYPE html>
<!-- 網頁的語言類型 -->
<html lang="zh_CN">

<!--網頁的頭部内容-->
<head>
    <!--網頁編碼設定-->
    <meta charset="UTF-8">
    
    <!-- 給搜尋引擎提供資訊 (項目完成上線後才開始書寫) -->
    <!-- 關鍵字 -->
    <meta name="keywords" content="百貨,數位,家電">
    <!-- 内容描述資訊 -->
    <meta name="description" content="第一家網上交易,各類産品...">

    <!--網頁标題-->
    <title>百度一下，你就知道</title>
    <!--設定網頁的标題的圖示-->
    <link rel="icon" href="img/favicon.ico" />
</head>
<!--網頁的主體顯示内容-->
<body>
    這是網頁的内容
</body>
</html>

該結構滿足W3C提倡的結構：

  1. 标簽成對出現，特殊标簽使用/>進行閉合
  2. 标簽均為小寫
  3. 元素結構層次清晰
  4. HTML内容結構 具有語義化

2.3 ISO-639 語言代碼清單

如果隻寫前面部分，則代表通用，例如zh，代表zh_CN、zh_TW、zh_HK

2.3.1 常用的

國家地區 語言辨別
簡體中文(中國) zh_CN
繁體中文(台灣地區) zh_TW
英語(美國) en_US
英語(英國) en_GB
韓文(南韓) ko_KR
日語(日本) ja_JP
法語(法國) fr_FR
德語(德國) de_DE
俄語(俄羅斯) ru_RU

2.3.2 不常用的

國家地區 語言辨別
繁體中文(香港) zh_HK
英語(香港) en_HK
英語(全球) en_WW
英語(加拿大) en_CA
英語(澳洲) en_AU
英語(愛爾蘭) en_IE
英語(芬蘭) en_FI
芬蘭語(芬蘭) fi_FI
英語(丹麥) en_DK
丹麥語(丹麥) da_DK
英語(以色列) en_IL
希伯來語(以色列) he_IL
英語(南非) en_ZA
英語(印度) en_IN
英語(挪威) en_NO
英語(新加坡) en_SG
英語(紐西蘭) en_NZ
英語(印度尼西亞) en_ID
英語(菲律賓) en_PH
英語(泰國) en_TH
英語(馬來西亞) en_MY
英語(阿拉伯) en_XA
荷蘭語(荷蘭) nl_NL
荷蘭語(比利時) nl_BE
葡萄牙語(葡萄牙) pt_PT
葡萄牙語(巴西) pt_BR
法語(盧森堡) fr_LU
法語(瑞士) fr_CH
法語(比利時) fr_BE
法語(加拿大) fr_CA
西班牙語(拉丁美洲) es_LA
西班牙語(西班牙) es_ES
西班牙語(阿根廷) es_AR
西班牙語(美國) es_US
西班牙語(墨西哥) es_MX
西班牙語(哥倫比亞) es_CO
西班牙語(波多黎各) es_PR
德語(奧地利) de_AT
德語(瑞士) de_CH
意大利語(意大利) it_IT
希臘語(希臘) el_GR
挪威語(挪威) no_NO
匈牙利語(匈牙利) hu_HU
土耳其語(土耳其) tr_TR
捷克語(捷克共和國) cs_CZ
斯洛文尼亞語 sl_SL
波蘭語(波蘭) pl_PL
瑞典語(瑞典) sv_SE
西班牙語 (智利) es_CL

三、 HTML的内容标簽

3.1 分類

  1. 塊級元素，沒有樣式修飾的情況下，在浏覽器中獨占一行的标簽。
  2. 行級元素，在沒有樣式修飾的情況下，在浏覽器中從左向右逐個顯示的标簽。

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-p86Oh95x-1611910236929)(https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java實訓/HTML5&CSS3/01-HTML5标簽/塊級元素與行級元素.png )]

說明:

  1. W3C官方HTML教程

    https://www.w3.org/community/webed/wiki/HTML/Training

  2. 标簽清單

    https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

  3. 菜鳥教程

    https://www.runoob.com/html/html-tutorial.html

  4. w3school

    https://www.w3school.com.cn/index.html

後兩個國内的工具網站，可能得到的不是最新或者有些時候會有一些瑕疵

3.2 網頁标準文檔流布局（重要）

在沒有任何樣式的修飾下，所有的元素，将從上至下，從左至右進行排列。

四、塊級元素(标簽)

4.1 标題

h1 ~ h6

示例

<h1>一級标題</h1>
<h2>二級标題</h2>
<h3>三級标題</h3>
<h4>四級标題</h4>
<h5>五級标題</h5>
<h6>六級标題</h6>

4.2 段落

<p></p>

示例

<body>
    <p>東海深處，有一仙島，名曰蓬萊。在東漢末年張角，率領黃巾教衆向漢室皇權三百餘年的統治，發起了有史以來最強力的挑戰。在這場戰争中，張角最大的倚仗并非麾下數十萬教衆，而是蓬萊島的至寶《南華經》。黃巾軍點燃的戰火，很快燒遍了神州大陸。裝備精良的禦林軍，本以為能夠輕松收拾這群手持木棒和農具的亂黨，但卻被張角通天徹地的法術幾度迎頭痛擊。</p>
    <p>黃巾軍攻勢迅猛。短短數月間，從山東到河北一帶，已被黃巾軍悉數占領。隻不過，縱然是手握《南華經》、命犯“天煞星”的張角，在曹操、劉備等亂世枭雄的圍攻下，最終還是難逃兵敗冀北的宿命。張角死後，收集四散的《南華經》殘頁，成了所有蓬萊弟子的至高使命。南華弟子以英雄骨血為憑，藉其生辰八字與命星的映照，幻化成一名擁有其全部戰鬥能力的化身英雄。就這樣，一場場戰鬥便在《英雄三國》中發生了。</p>
    《英雄三國》中把英雄人物分為四種，分别是法術型英雄、實體型英雄、防禦型英雄和輔助型英雄。同時每一個英雄還有自己的天命武器（類似被動技能），在遊戲中隻要金币足夠可以用金币直接強化而不用回基地商店。不同的英雄強化效果不同。
    遊戲中英雄可用的技能分為：單體指向性技能、區域指向性技能、即時使用技能、區域機關技能、被動技能。
</body>

4.3 分割線/水準線

<hr/>

 水準線是一個單标簽

示例

<h1>金克斯</h1>
<hr/>
<p>神經狂躁、沖動任性、劣迹斑斑……</p>
<p>金克絲出身自祖安，生來就愛不計後果地大搞破壞。</p>
<p>她就是一座人形自走軍火庫，所經之處必定會留下奪目的火光和震耳的爆炸。</p>

4.4 清單

4.4.1無序清單

ul - li

可以使用Emmet表達式快速編寫html代碼

Emmet官網：https://emmet.io/

idea可以直接在Plugins中安裝Emmet

HTML5HTML5HTML5的新特新
<h3>都市熱新聞</h3>
<ul>
    <li>推薦| 倘若愛情有悖論 千年骨語 我的未婚夫白狐大人</li>
    <li>熱文| 都市無敵醫聖 最廢女婿 愛不逢時，情無金堅</li>
    <li>優選| 總想渣自己怎麼辦 醫流戰神走巅峰 劍破蒼穹</li>
    <li>新書| 影帝的绯聞女友 都市王牌豪婿 末日拯救計劃</li>
</ul>

4.4.2 有序清單（用得較少）

ol - li

示例

<h3>都市熱新聞</h3>
<ol>
    <li>推薦| 倘若愛情有悖論 千年骨語 我的未婚夫白狐大人</li>
    <li>熱文| 都市無敵醫聖 最廢女婿 愛不逢時，情無金堅</li>
    <li>優選| 總想渣自己怎麼辦 醫流戰神走巅峰 劍破蒼穹</li>
    <li>新書| 影帝的绯聞女友 都市王牌豪婿 末日拯救計劃</li>
</ol>

用途

  1. 用于顯示新聞清單
  2. 用于制作頁面菜單
  3. 用于放置邏輯上歸為一組的内容

4.4.3 定義清單

dl-dt-dd

注意：dl下隻能放置dt、dt下隻能放置dd、dd下最好隻放置行級元素

示例

<dl>
    <dt>水果</dt>
    <dd>蘋果</dd>
    <dd>桃子</dd>
    <dd>李子</dd>
    
    <dt>蔬菜</dt>
    <dd>白菜</dd>
    <dd>黃瓜</dd>
    <dd>蕃茄</dd>
</dl>

用途

  • 解釋詞語的意思
    • 圖文混編的内容展示 - 商品介紹 - 圖檔-以及解釋圖檔的文字

4.5 塊級分區

<div></div>
  • 用途：通常當作結構化塊狀元素使用，作為邏輯分區（分塊）即容器來使用 。
    • 注意：一般需要配合CSS使用。

示例

<div>
    <h3>都市熱新聞</h3>
    <ul>
        <li>推薦| 倘若愛情有悖論 千年骨語 我的未婚夫白狐大人</li>
        <li>熱文| 都市無敵醫聖 最廢女婿 愛不逢時，情無金堅</li>
        <li>優選| 總想渣自己怎麼辦 醫流戰神走巅峰 劍破蒼穹</li>
        <li>新書| 影帝的绯聞女友 都市王牌豪婿 末日拯救計劃</li>
    </ul>
</div>
<div>
    <h3>都市熱新聞</h3>
    <ol>
        <li>推薦| 倘若愛情有悖論 千年骨語 我的未婚夫白狐大人</li>
        <li>熱文| 都市無敵醫聖 最廢女婿 愛不逢時，情無金堅</li>
        <li>優選| 總想渣自己怎麼辦 醫流戰神走巅峰 劍破蒼穹</li>
        <li>新書| 影帝的绯聞女友 都市王牌豪婿 末日拯救計劃</li>
    </ol>
</div>

五、行級元素（内聯元素）

5.1 字型樣式元素

5.1.1 加粗

strong與b

5.1.2 強調/傾斜

em與i

i标簽現在基本上已經被用于配合CSS，繪制小圖示

5.1.3 下劃線

u

示例

<strong>魯迅</strong>
<hr/>
<p>光緒七年<em>1881</em>年，生于<u>浙江紹興城</u>内東昌坊新台門周家。</p>
<p>光緒十八年<em>1881</em>年，入<u>三味書屋</u>從壽鏡吾讀書，課餘影描圖畫。</p>
<p>光緒十九年<em>1881</em>年，祖父周介孚因事下獄，家産中落，全家避難于鄉下。</p>
<p>光緒二十二年<em>1881</em>年，父親去世。家境益艱。于本年開始寫日記。</p>
<p>光緒二十三年<em>1881</em>年，家族開會分房，分給魯迅他們的既差且小。</p>

5.2 換行

<br/>
其作用是，強制換行，與p的差別在于其上下行文沒有間隔

5.3 圖像

<img/>

說明

  • src: 填寫圖檔檔案的路徑
  • alt：填寫當圖檔不存在時顯示的提示文字
  • title：填寫當滑鼠懸停到圖檔時顯示的提示文字
  • width：設定圖檔顯示的寬度（一般不使用該資料，以後都使用CSS來控制）
  • height：設定圖檔顯示的高度（一般不使用該資料，以後都使用CSS來控制）

5.4 超連結

<a></a>

 
<a href="./detail.html" target="_blank">
  <img src="./img/book.jpg" alt="心潮澎湃，無限幻想，迎風揮擊千層浪，少年不敗熱血！" width="260" height="336"/>
</a>
<p>
  <a href="./detail.html" target="_self">心潮澎湃，無限幻想，迎風揮擊千層浪，少年不敗熱血！</a>
</p>
<p>￥48.00</p>

說明

  1. 其内部可以放置塊級元素也可以放置行級元素
  2. 标簽的屬性
  • href：跳轉的頁面位址**（既可以是相對連結，也可以是外網位址）**
  • target：新頁面打開的方式
    • _self：在目前頁籤打開，預設值
    • _blank：在新選卡打開頁面
    • title：滑鼠懸停時的提示文字

5.5 行級分區

<span></span>

作用

在行的範圍内産生一個分區
  • 注意事項：一般需要和CSS樣式一起使用

5.6 注釋

<!--注釋内容-->

說明

被注釋的内容不會顯示

我們在書寫HTML的時候，一定要習慣使用注釋來表示一些關鍵結構所代表的意思

HTML5HTML5HTML5的新特新

六、表單

6.1 什麼是表單

表單是一個用來組裝使用者填寫資訊的容器，同時提供發送資料到指定的伺服器的功能

典型的應用案例：搜尋引擎、線上翻譯工具、各種網站的登入與注冊

6.2 文法

<form></form>

示例:

<form action="" method="post" enctype="application/x-www-form-urlencoded">
    <p>
        <span>名字：</span>
        <input name="name" type="text"/>
    </p>
    <p>
        <span>密碼：</span>
        <input name="pwd" type="password"/>
    </p>
    <p>
        <input type="submit" name="sub" value="送出"/>
        <input type="reset" name="res" value="重填"/>
    </p>
</form>

說明:

  • action：用于填寫送出的處理資料的伺服器位址
  • method：送出資料的方式
    • get：送出的資料會拼接到位址欄 ? 的後面
    • post：送出的資料會放在請求體中 格式為 FormData
  • enctype：用于指定表單在送出時，Content-Type的HTTP資料頭的值
    • application/x-www-form-urlencoded：預設值，表示這是已編碼為URL參數的表單資料
    • multipart/form-data ：資料将被分成多個部分，每個檔案獨占一個部分

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-T9m86nBz-1611910236936)(https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java實訓/HTML5&CSS3/01-HTML5标簽/FormData結構.png )]

6.3 表單輸入元素

6.3.1 文法

<input name="" type="" placeholder="" value="" size="" maxlength="" checked=""/>

說明（以下屬性，根據type的不同，所擁有的屬性也不同）

  • name：用于表單送出資料到伺服器後識别的名字
  • type：用于設定輸入元素的類型，确定不同的功能和顯示外觀
  • placeholder：用于設定輸入元素的提示文字
  • value: 用于設定元素的值
  • size：用于設定輸入元素的寬度，預設指占幾個字的寬度（一般不用，後續使用CSS來控制）
  • maxlength：用于設定輸入元素能接收使用者輸入最大字元個數
  • checked：用于設定輸入元素是否被選中

6.3.2 文本框元素

6.3.3 密碼框元素

6.3.4 按鈕元素 

<!-- 普通按鈕 - 一般會和JS腳本一起使用 -->
<input type="button" value="普通按鈕"/>

<!-- 必須放在表單form中才會起作用 -->
<!-- 表單送出按鈕 -->
<input type="submit" value="送出表單資料"/>
<!-- 表單重置按鈕 -->
<input type="reset" value="恢複表單輸入元素初始預設資料"/>

6.3.5 單選按鈕 

<input name="sex" type="radio" value="男" checked="checked"/>男
<input name="sex" type="radio" value="女"/>女

說明:

  • 單選按鈕的value是作為互動用的，并不會顯示，是以需要單獨書寫文本，作為顯示
  • 單選按鈕的互斥效果：name屬性一樣會分到同一組中，同組的按鈕自動實作互斥
  • checked="checked"可以直接省略為checked

6.3.6 複選框 

<h3>為什麼要解除安裝軟體？</h3>
<ul>
    <li><input name="rea" type="checkbox" value="1" checked >不好用</li>
    <li><input name="rea" type="checkbox" value="2">占記憶體</li>
    <li><input name="rea" type="checkbox" value="3">要錢</li>
    <li><input name="rea" type="checkbox" value="4">經常當機</li>
</ul>

說明:

  • 複選框的name屬性一樣會被分到同一組，友善後端的伺服器取出每一組資料

6.3.7 檔案域 

<form method="post" enctype="multipart/form-data">
    <input name="head" type="file" accept="image/png, image/jpeg" multiple />
    <input type="submit" value="上傳"/>
</form>

注意

  • 表單送出的方式必須是***POST***方式
  • 表單資料的編碼格式必須是 enctype="multipart/form-data"
  • accept用于限制檔案上傳的類型，如果确實該屬性，表示允許任何檔案上傳，詳細說明：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#Unique_file_type_specifiers
  • multiple用于控制是否開啟多選

6.3.8 下拉框（清單框）元素 

<form method="post" action="">
    出生日期：
    <input type="text" name="byear" placeholder="yyyy" maxlength="4"/>年
    <select name="bmon" size="5">
        <option value="">[選擇月份]</option>
        <option value="1" selected>一月</option>
        <option value="2">二月</option>
        <option value="3">三月</option>
        <option value="4">四月</option>
        <option value="5">五月</option>
        <option value="6">六月</option>
        <option value="7">七月</option>
        <option value="8">八月</option>
        <option value="9">九月</option>
        <option value="10">十月</option>
        <option value="11">十一月</option>
        <option value="12">十二月</option>
    </select>月
    <input type="text" name="bday" placeholder="dd" maxlength="2"/>日
</form>
  • size屬性：表示清單框需要顯示幾個清單項的内容在頁面（該屬性一般不會使用）
    • 根據HTML5規範，大小的預設值應為

      1

       ; 但是，在實踐中，發現它破壞了某些網站，并且目前沒有其他浏覽器這樣做，是以Mozilla選擇 暫時繼續使用Firefox傳回。
  • option元素的selected屬性：表示目前選中的項

6.3.9 文本域（多行文本框）元素

  • cols屬性：表示文本域寬度占幾個字的大小（本質是多少列）
  • rows屬性：表示文本域高度占幾行的大小（本質是多少行）
  • 注意：高度超過了rows的大小會顯示垂直的滾動條

6.3.10 表單元素的通用屬性 

- readonly：表示表單輸入元素不允許修改内容，隻讀
- disabled：表示表單輸入元素不允許使用，禁用

6.3.11 語義化表單元素

  • label元素：表單輸入元素的提示文本，提供點選文本元素獲得焦點或者選中 
<form>
    請選擇性别：
    <label for="male">男</label>
    <input type="radio" name="gender" id="male"/>
    <label for="female">女</label>
    <input type="radio" name="gender" id="female"/>
</form>

這裡需要注意：id的值要與for對應（不過我們也可以，把表單元素直接放到label裡面）

  • fieldset元素：對多個表單輸入元素進行分組
  • legend元素：對表單分組後顯示提示性文字 
<form>
    <fieldset>
        <legend>個人資訊:</legend>
        <label for="name">姓名:</label><input type="text" id="name"><br>
        <label for="mail">郵箱:</label><input type="text" id="mail"><br>
        <label for="birthday">生日:</label><input type="text" id="birthday">
    </fieldset>
</form>

七、表格

7.1 文法

7.1.1 普通表格

表格：

<table></table>

行：

<tr></tr>

table row

标題列:

<th></th>

table header ， 加粗并居中

普通列：

<td></td>

table data 表格的每個資料占一個格子

7.1.2 語義化表格

表格的标題：

<capation></capation>

表格的表頭：

<thead></thead>

表格的主體資料：

<tbody></tbody>

表格的表尾：

<tfoot></tfoot>

7.2 特征

同一行的高度是一樣的

同一列的寬度是一樣的

td标簽可以設定的屬性

​ colspan：一個格子占幾列

​ rowspan：一個格子占幾行

​ width：寬度（一般不用，後續用CSS來控制）

​ height：高度（一般不用，後續用CSS來控制）

​ align：水準對齊方式 left、center、right（一般不用，後續用CSS來控制）

注意： 在使用表格布局内容的時候一定要把邊框顯示出來

7.3 示例

HTML5HTML5HTML5的新特新
<table border="1">
    <!--表格的标題-->
    <caption>員工資訊表</caption>
    <!--表格的表頭-->
    <thead>
        <tr>
            <th colspan="2" rowspan="2">項目</th>
            <th colspan="2">本周發生</th>
        </tr>
        <tr>
            <th>收入</th>
            <th>支出</th>
        </tr>
    </thead>
    <!--  表格的主體 填寫資料  -->
    <tbody>
        <tr>
            <td rowspan="3">收入</td>
            <td>貸款收回</td>
            <td>1254545454</td>
            <td>5456456456.3</td>
        </tr>
        <tr>
            <td>内部轉款</td>
            <td>3432432.23432</td>
            <td>34432111.2212</td>
        </tr>
        <tr>
            <td>内部轉款</td>
            <td>3432432.23432</td>
            <td>34432111.2212</td>
        </tr>
        <tr>
            <td rowspan="5">支出</td>
            <td>采購支出</td>
            <td>1254545454</td>
            <td>5456456456.3</td>
        </tr>
        <tr>
            <td>基建支出</td>
            <td>3432432.23432</td>
            <td>34432111.2212</td>
        </tr>
        <tr>
            <td>工資支出</td>
            <td>3432432.23432</td>
            <td>34432111.2212</td>
        </tr>
        <tr>
            <td>其他支出</td>
            <td>3432432.23432</td>
            <td>34432111.2212</td>
        </tr>
        <tr>
            <td>支出合計</td>
            <td>3432432.23432</td>
            <td>34432111.2212</td>
        </tr>
    </tbody>
    <!-- 表格尾部，用得很少 -->
    <tfoot>

    </tfoot>
</table>

HTML5的新特新

一、頁面語義化标簽(記憶)

  • 為什麼要用語義化标簽：語義化标簽能夠更好的表示某個區域的含義，我們能夠更加清晰的看出整個HTML的結構
  • header：表示頁面的頭部内容
  • section：表示頁面的主體内容
  • article：獨立的文章内容
  • aside：表頁面的側邊欄，通常用于菜單
  • footer：表示頁面的底部，通常用于版權和友情連結，及底部的幫助
  • nav：用來表示導航，通常用于橫向菜單
HTML5HTML5HTML5的新特新

二、常見的布局(了解)

2.1 上中下布局

京東、淘寶就是典型的上中下布局

示例

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-qIzZ15wN-1611910236940)(https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java實訓/HTML5&CSS3/01-HTML5标簽/上中下布局.png )]

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上中下布局</title>
    <style type="text/css">
        body {
            margin: 0;
        }

        header, footer {
            height: 60px;
            line-height: 60px;
            text-align: center;
        }

        header {
            background-color: #0060ba;
            top: 0;
        }

        a {
            text-decoration: none;
        }

        header nav a {
            color: #fff;
        }

        section {
            background-color: lightgreen;
            height: calc(100vh - 120px);
            color: #1f991f;
            font-size: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        footer {
            background-color: #fff;
        }
    </style>
</head>
<body>
<header>
    <nav>
        <a href="#">頂部菜單1</a>
        <a href="#">頂部菜單2</a>
        <a href="#">頂部菜單3</a>
        <a href="#">頂部菜單4</a>
    </nav>
</header>
<section>
    <span>中間内容</span>
</section>
<footer>
    <nav>
        <a href="#">底部菜單1</a>
        <a href="#">底部菜單2</a>
        <a href="#">底部菜單3</a>
        <a href="#">底部菜單4</a>
    </nav>
</footer>
</body>
</html>

2.2 上中下+左右

各種背景管理系統經常會用到這種布局

示例

HTML5HTML5HTML5的新特新
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上中下布局</title>
    <style type="text/css">
        body {
            margin: 0;
        }

        header, footer {
            height: 60px;
            line-height: 60px;
            text-align: center;
        }

        header {
            background-color: #0060ba;
            top: 0;
        }

        a {
            text-decoration: none;
        }

        header nav a {
            color: #fff;
        }

        section::after {
            content: '';
            display: block;
        }

        section aside ul {
            margin: 0;
            padding: 0;
            color: #fff;
        }

        section aside, section div {
            height: calc(100vh - 120px);
            float: left;
        }

        section aside {
            width: 10%;
            background-color: cornflowerblue;
        }

        section div {
            width: 90%;
            background-color: lightgreen;
            color: #1f991f;
            font-size: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        footer {
            background-color: #fff;
        }
    </style>
</head>
<body>
<header>
    <nav>
        <a href="#">頂部菜單1</a>
        <a href="#">頂部菜單2</a>
        <a href="#">頂部菜單3</a>
        <a href="#">頂部菜單4</a>
    </nav>
</header>
<section>
    <!--左側菜單-->
    <aside>
        <ul>
            <li>左部清單一</li>
            <li>左部清單二</li>
            <li>左部清單三</li>
            <li>左部清單四</li>
        </ul>
    </aside>
    <div>右側内容</div>
</section>
<footer>
    <nav>
        <a href="#">底部菜單1</a>
        <a href="#">底部菜單2</a>
        <a href="#">底部菜單3</a>
        <a href="#">底部菜單4</a>
    </nav>
</footer>
</body>
</html>

三、多媒體元素(了解)

3.1 音頻元素

常用的格式：OGG,MP3,WAV

<audio controls>
    <source src="./sound/bgm.mp3">
    <source src="./sound/bgm.ogg">
    對不起浏覽器不支援，請更新浏覽器
</audio>

3.2 視訊元素

常用格式：OGG,MPEG4,MP4,WEBM,WAV

<video autoplay loop muted controls>
    <source src="./video/intro.mp4">
    不支援視訊播放，請更新浏覽器
</video>

3.3 常用屬性

  • controls：設定視訊和音頻元素的控制界面
  • autoplay：設定視訊和音頻自動播放 - 預設自動播放會失效
  • loop：設定循環播放
  • muted：設定靜音，當視訊靜音後可以實作自動播放

四、圖像動畫元素(了解)

4.1 畫布

<canvas></canvas>
需要使用Canvas 腳本 API 或者WebGL API在畫布上進行繪制

簡單的示例：

<body>
<canvas id="myCanvas" width="200" height="100"
        style="border:1px solid #000000;">
</canvas>
</body>
<script type="text/javascript">
    let c = document.getElementById("myCanvas");
    let ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
</script>

4.2 矢量圖

4.2.1 介紹

  1. 英文全稱為Scalable Vector Graphics，意思為可縮放的矢量圖形
  2. SVG 使用 XML 格式定義圖像
  3. SVG 是網際網路聯盟的标準
  4. 相關API文檔：https://developer.mozilla.org/zh-CN/docs/Glossary/SVG

4.2.2 直接使用img标簽導入圖像

矢量圖示擷取位址：https://www.iconfont.cn/home/index

4.2.3 直接使用svg标簽在頁面中繪制

矢量圖常用屬性

  • width：圖形的寬度
  • height：圖形的高度
  • x：圖形的水準坐标
  • y：圖形的垂直坐标
  • fill：圖形填充的顔色
  • fill-opacity：圖形填充顔色的透明度
  • stroke：圖形邊框繪制顔色
  • stroke-width：圖形邊框繪制的寬度
  • stroke-opacity：圖形邊框繪制的顔色的透明度 
<svg width="300" height="300">
    <rect
      x="20"
      y="50"
      width="200"
      height="200"
      fill="#FF0000"
      fill-opacity=".5"
      stroke="#0000FF"
      stroke-width="10"
      stroke-opacity=".7"
    />
</svg>

4.2.3 svg元素圖形混合使用 

<svg width="300" height="300">
    <rect width="300" height="300" fill="red"/>
    <circle cx="150" cy="150" r="150" fill="blue" fill-opacity=".5"/>
</svg>

4.2.4 svg繪制地圖統計 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用來示範使用矢量圖繪制地圖</title>
    <style>
        path:hover{
            fill: yellow;
        }
    </style>
</head>
<body>
<svg width="600" height="600">
    <!--  黑龍江  -->
    <path fill="red" fill-opacity="1" stroke="white" d="M464.838,96.639l6.787-1.19l2.854,5.241l4.285,3.095l2.856-1.188h2.386l4.285-2.501l3.094,3.094l2.024,0.357l5.357-2.023l3.813,2.023l1.666,4.288h2.857l1.43,1.904l3.689,4.049l1.426-0.833l-0.594-5.12l2.026-1.432l2.854,5.716l2.621,1.074l2.858,3.212l2.021-0.357l0.836-1.427l4.523-5.12l2.022,1.428l1.43-2.022l1.431,2.619l4.283,1.429h2.86l2.07,0.088l-1.238-2.113l-0.598-6.906l-5.115-7.978l2.855-2.857l2.616-4.883h9.646l1.785-1.665l-0.597-3.69l2.025-3.691l-0.596-2.024l0.832-3.451l-0.236-17.742l2.855-5.715l-3.214-3.692l0.595-2.261l-1.427-2.024l-3.69,1.429l-4.289,4.884l-4.283,2.023l-4.289,5.951l-10.598,3.692l-4.879-3.692l0.594-2.262l-2.5-3.689l-1.191-3.811l-4.047-0.239l-7.145-3.69l-2.859,1.071l-3.33-1.667l-4.887,0.834l-4.283-1.429l-2.621-3.69l-2.498-2.857l-0.951-2.857l-3.334-3.452l-2.026-3.099l-4.644-6.31l-1.428-3.69l-5.119-6.548l-1.432-3.454l-6.549-3.216l-4.287,1.429l-3.689-0.833l-8.336-1.668l-11.07,3.932l-2.024,1.786l2.262,3.096l-2.856,7.499l0.834,0.835l4.881,3.096l2.621-4.286l4.524,2.856l-0.235,2.022l1.664,5.119l2.854,3.218l5.717,0.833l1.668-1.787l3.451-0.477l6.547-5.476l8.576,6.31l-2.858,11.669l0.594,8.333v5.119l-2.26,1.191l-0.238,13.335l-0.597-0.476l-2.26-2.858h-1.192l-0.595,1.073c0,0-8.797,13.044-7.146,10.596c1.652-2.448-3.451,4.523-3.451,4.523l0.357,1.428l7.145,4.886l3.926-1.071l0.599,1.071l-0.834,1.189l-3.689,1.667l-0.359,3.214L464.838,96.639z"/>
    <text x="480" y="80">黑龍江</text>
    <path fill="red" stroke="white" d="M544.896,113.042l-2.07-0.088h-2.858l-4.285-1.431l-1.43-2.619l-1.431,2.024l-2.022-1.428l-4.523,5.12l-0.834,1.427l-2.022,0.357l-2.859-3.214l-2.621-1.072l-2.854-5.715l-2.027,1.431l0.594,5.12l-1.426,0.833l-3.689-4.05l-1.432-1.903h-2.854l-1.666-4.288l-3.813-2.023l-5.354,2.023l-2.025-0.357l-3.098-3.094l-4.285,2.5h-2.383l-2.857,1.191l-4.285-3.096l-2.854-5.24l-6.787,1.189l-2.621,3.099l-0.238,3.45l-7.502-2.023l-1.074,2.381l0.601,1.667l3.928,2.859v4.046l0.594,3.929l2.265,3.456l0.356,3.095l1.666,1.191l5.717-5.479l5.953,7.502v4.288l3.213,1.667l0.238-1.431l4.885,1.431l3.451,4.046l1.666-1.784l0.357-1.074l8.217,11.075l0.594,4.286l4.527,5.239l0.592,4.761l4.051-2.499l3.689-10.598l1.67-0.595l4.047,2.263l6.549-0.834l2.26-2.024l-3.092-4.763l0.832-1.191c0,0,7.84-2.611,6.072-2.022c-1.766,0.588,2.5-4.883,2.5-4.883l3.215-1.428l0.238-4.766l0.832-3.212l1.785-0.596l1.668,1.789l1.668,1.426l4.287-5.715l1.188-4.288L544.896,113.042z"/>
    <path fill="red" stroke="white" d="M491.15,173.2l6.783-10.002l4.287-4.881l-0.595-4.763l-4.524-5.239l-0.594-4.286l-8.216-11.075l-0.358,1.074l-1.666,1.786l-3.453-4.05l-4.883-1.429l-0.236,1.429v2.264l-2.022,2.022l-4.047,4.05H467.1l-1.666,2.856h-1.789l-3.094,3.096h-1.787l-3.691,3.691l-2.262,0.596l-4.881,7.5l-3.096-4.644l-3.453-2.262l-1.666,1.667l1.903,10.002l-1.666,3.453l-1.668,5.12l4.763,3.215l2.621,0.238l3.45,4.881l2.5-1.429c0,0,2.857-2.881,4.05-4.882c1.192-2.002,4.049-6.788,4.049-6.788l6.787-1.429l4.287,4.286l-3.099,6.787l-4.049,6.311l3.688,2.62l-0.233,3.098l-2.857,2.855l0.597,1.19l4.881-2.619l7.143-9.407l10.836-6.072L491.15,173.2z"/>
</svg>
</body>
</html>

4.2.5 矢量圖常用的形狀

形狀元素 描述 示例
rect 矩形
circle 圓形
ellipse 橢圓
line 線條
polygon 多邊形
path 路徑

五、資料清單 (了解)

用來給文本框提供可用值搜尋和選擇,一定要和文本框配置使用

<p>
    <span>選擇省份：</span>
    <input type="text" list="identity"/>
</p>
<datalist id="identity">
    <option>北京市</option>
    <option>天津市</option>
    <option>上海市</option>
    <option>重慶市</option>
    <option>河北省</option>
    <option>山西省</option>
    <option>廣東省</option>
    <option>四川省</option>
    <option>台灣省</option>
</datalist>

6-6.072L491.15,173.2z"/>

```

4.2.5 矢量圖常用的形狀

形狀元素 描述 示例
rect 矩形
circle 圓形
ellipse 橢圓
line 線條
polygon 多邊形
path 路徑

五、資料清單 (了解)

用來給文本框提供可用值搜尋和選擇,一定要和文本框配置使用

<p>
    <span>選擇省份：</span>
    <input type="text" list="identity"/>
</p>
<datalist id="identity">
    <option>北京市</option>
    <option>天津市</option>
    <option>上海市</option>
    <option>重慶市</option>
    <option>河北省</option>
    <option>山西省</option>
    <option>廣東省</option>
    <option>四川省</option>
    <option>台灣省</option>
</datalist>
html标簽 html html5
上一篇: html5加載xml之1
下一篇: html5寫入xml,自定義html标簽(XML)Title

繼續閱讀