目錄

Day01

一、計算機基礎

1.1  計算機

1.2  軟件和硬件

1.3  軟件

1.4  應用軟件

1.5 服務端和客户端

1.6  C/S 結構和 B/S 結構

二、 代碼編輯器和瀏覽器介紹

2.1 代碼編輯器

2.2 瀏覽器

三、HTML概述

3.1 什麼是HTML？

3.2  HTML 發展歷史

3.3  相關國際組織

四、 Markdown 的用法

4.1 Markdown介紹

4.2 markdown 格式

4.3 typora - markdown 編輯工具

五、 HTML 基本語法

5.1  HTML 文件

5.2  HTML 標籤

5.3  HTML 標籤屬性

5.4  如何掌握一個 HTML 標籤

5.5  HTML代碼格式

5.6  HTML 註釋

5.7 文檔聲明

5.8 基本頁面模板

六、 HTML 常用標籤

6.1 主體結構標籤

6.2 HEAD 中的標籤

6.3 格式排版標籤

Day1練習：寫一個自我介紹的網頁

Day2

一、 文本標籤

二、 圖片

2.1  img 標籤

2.2 常見的圖片格式

三、 相對路徑和絕對路徑

3.1 絕對路徑

3.2 相對路徑

3.3 HTML 中使用路徑的場景

四、 超鏈接和錨點

4.1 a 標籤

4.2 超鏈接

4.3 錨點

Day2練習： 寫一個使用多個相對路徑的網頁

Day3

一、 列表

1.1 無序列表

2.2 有序列表

2.3 定義列表（瞭解）

2.4 列表標籤總結

二、 表格標籤

2.1 表格的結構

2.2 表格整體樣式設置

2.3 單元格樣式設置

2.4 單元格跨行和跨列（重要）

2.5 表格標籤總結

三、 表單

3.1 表單總體設置

3.2 表單控件

3.3 表單控件的屬性

3.4 label 標籤的使用

3.5 表單標籤總結

Day3練習：完成以下表單的網頁製作

Day4

一、 框架標籤

二、 HTML 字符實體

三、 HTML 全局屬性

四、 meta 元信息

五、附錄 vscode 使用技巧

Day5

一、HTML5 概述

1.1 HTML5 的由來

1.2 HTML5 優勢

1.3 兩套標準

1.4 兼容性

二、 HTML5 新增標籤

2.1 新增頁面結構標籤（最重要）

2.2 新增狀態標籤（瞭解）

2.3 新增注音標籤

2.4 新增文本標籤

三、 HTML5 表單新增功能

3.1 表單控件新增屬性

3.2 input 標籤的 type 屬性新增的值(新增的表單控件類型)

3.3 form 標籤新增屬性

四、 HTML5 音視頻

4.1 音視頻標籤

4.2 瀏覽器支持的音視頻格式

五、 HTML5 新增全局屬性

六、 HTML5 兼容性方案

6.1 設置元信息

6.2 html5shiv.js 讓IE8以及以下的瀏覽器支持H5新標籤

Day01

一、計算機基礎

1.1  計算機

計算機（computer）俗稱電腦，是現代一種用於高速計算的電子計算機器，可以進行數值計算，又可以進行邏輯計算，還具有存儲記憶功能。是能夠按照程序運行，自動、高速處理海量數據的現代化智能電子設備。

現在的計算機被稱之馮·諾依曼式計算機，由運算器、控制器、存儲器、輸入設備、輸出設備五大部分組成。

馮·諾依曼（John von Neumann，1903年12月28日-1957年2月8日），美籍匈牙利數學家、計算機科學家、物理學家，被後人稱為“現代計算機之父”、“博弈論之父”。

艾倫·圖靈（Alan Mathison Turing，1912年6月23日—1954年6月7日），英國數學家、邏輯學家，被後人稱為“計算機科學之父”，“人工智能之父”。

1.2  軟件和硬件

計算機系統由軟件和硬件組成。

硬件： 硬件是看得見、摸得着的物理部件或設備。

軟件：軟件是以程序和文檔的形式存在，通過在計算機上運行來體現他的作用。

1.3  軟件

計算機軟件總體分為系統軟件和應用軟件兩大類。

系統軟件：包括各類操作系統，如windows、Linux、UNIX等，還包括操作系統的補丁程序及硬件驅動程序。

應用軟件：為了某種特定的用途而被開發的軟件。

1.4  應用軟件

應用軟件也可以稱為應用程序，有很多種分類方式。

根據所實現的功能，可以分為文字處理軟件、數據管理軟件、圖像處理軟件等。

根據應用程序所運行的載體不同，可以分為服務端程序和客户端程序。

根據設計結構不同，可以分為 C/S結構程序和 B/S結構程序 。

1.5 服務端和客户端

服務端程序： 也可以稱之為後端程序，指的是運行在服務器上的程序。

客户端程序： 指的是運行在客户端計算機上的程序，可以分為 WEB應用、PC桌面應用、Mac桌面應用、Linux桌面應用、IOS應用、安卓應用、小程序等。

1.6  C/S 結構和 B/S 結構

C/S結構： Client/Server（客户機/服務器）結構，客户端程序直接運行在操作系統上，需要安裝。

B/S結構： Browser/Server（瀏覽器/服務器）結構，客户端程序運行在瀏覽器上，無需安裝。

二、 代碼編輯器和瀏覽器介紹

2.1 代碼編輯器

代碼編輯器是程序員用於編寫計算機程序的文本編輯器。它通常是一個獨立的應用程序，或是作為集成開發環境的一部分存在，或者是一個運行於瀏覽器中的網頁編輯器。由於程序員的主要任務就是編寫代碼，因此代碼編輯器也就成為了最為重要的開發工具。

VSCode （推薦） WebStorm HbuilderX Sublime Text Atom Brackets NodePad++ EditPlus Vim Dreamweaver

2.2 瀏覽器

主流瀏覽器：Chrome、FireFox、Safari、IE、Opera

其他瀏覽器： 360安全瀏覽器、360極速瀏覽器、搜狗瀏覽器、UC瀏覽器、獵豹瀏覽器、夸克瀏覽器、海豚瀏覽器、傲遊瀏覽器、QQ瀏覽器、2345瀏覽器 等

三、HTML概述

3.1 什麼是HTML？

• HTML是用來製作網頁的標記語言
• HTML是Hypertext Markup Language的英文縮寫,即超文本標記語言
• HTML語言是一種標記語言,不需要編譯,直接由瀏覽器執行
• HTML文件是一個文本文件,包含了一些HTML元素,標籤等
• HTML文件必須使用.html或.htm為文件名後綴
• HTML是大小寫不敏感的,HTML與html是一樣的
• HTML是由W3C的維護的
• HTML 是通向 WEB 技術世界的鑰匙。
• TML負責 WEB 頁面的結構

“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。

3.2  HTML 發展歷史

• HTML是從2.0版本開始的，實際上沒有1.0的官方規範,在1993年6月作為互聯網工程工作小組（IETF）工作草案發布（並非標準） HTML 2.0——1995年11月作為RFC 1866發佈，在RFC 2854於2000年6月發佈之後被宣佈已經過時
• HTML 3.2——1997年1月14日，W3C推薦標準
• HTML 4.0——1997年12月18日，W3C推薦標準
• HTML 4.01（微小改進）——1999年12月24日，W3C推薦標準
• HTML 5——2014年10月28日，W3C推薦標準

3.3  相關國際組織

IETF(The Internet Engineering Task Force)

國際互聯網工程任務組（The Internet Engineering Task Force，簡稱 IETF）
互聯網工程任務組，成立於1985年底，是全球互聯網最具權威的技術標準化組織，主要任務是負責互聯網相關技術規範的研發和制定，當前絕大多數國際互聯網技術標準出自IETF。

W3C(World Wide Web Consortium)

萬維網聯盟(World Wide Web Consortium)
萬維網聯盟創建於1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。到目前為止，W3C已發佈了200多項影響深遠的Web技術標準及實施指南，如廣為業界採用的超文本標記語言（標準通用標記語言下的一個應用）、可擴展標記語言（標準通用標記語言下的一個子集）以及幫助殘障人士有效獲得Web內容的信息無障礙指南（WCAG）等，有效促進了Web技術的互相兼容，對互聯網技術的發展和應用起到了基礎性和根本性的支撐作用。

WHATWG(Web Hypertext Application Technology Working Group)

網頁超文本應用技術工作小組是一個以推動網絡HTML 5 標準為目的而成立的組織。
在2004年，由Opera、Mozilla基金會和蘋果這些瀏覽器廠商組成。

四、 Markdown 的用法

4.1 Markdown介紹

Markdown 是一種可以使用普通文本編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文本內容具有一定的格式。

Markdown是程序員寫作必備神器。

為什麼推崇 Markdown 寫作? 而非 Word 類文檔呢？

• Markdown 是一段純文本，使用任何文本編輯器都可以打開，而要打開 Word 文檔，必須要先安裝 Office 軟件。
• Markdown 可以很輕鬆的對文檔進行排版，而使用 Word，排版要花費大量的精力。
• Markdown 可以很輕鬆的轉為 Html、Word、PDF 文件以及電子書。
• 現有的大多數媒體平台都已支持 Markdown。

4.2 markdown 格式

# 一級標題   標題 ### 二級標題 ### 三級標題 #### 四級標題 ##### 五級標題 ###### 六級標題 前端要學什麼？ 列表 * HTML 超文本標記語言 * CSS 級聯樣式表 * JavaScript 瀏覽器腳本語言 今天我們學習了**前端開發**我很開心 強調 *** 分隔線 ``` 這是代碼塊 代碼塊 ```

4.3 typora - markdown 編輯工具

可去下載typora安裝至本地即可使用markdown編輯工具

五、 HTML 基本語法

5.1  HTML 文件

• 將擴展名為 .html 的文件稱為 html 文件或者網頁文件
• 網頁文件使用代碼編輯工具進行編輯，使用瀏覽器進行查看效果

5.2  HTML 標籤

1. 網頁就是由 HTML 標籤組成，HTML 標籤可以嵌套，形成了結構
2.  HTML 標籤具有語義，語義決定什麼地方使用什麼標籤
3. HTML 標籤分為雙標籤和單標籤   雙標籤由起始標籤和結束標籤組成 <title></title>   單標籤也稱為自閉和標籤 <hr /> 可以省略 / 寫為 <hr>
4.  HTML 標籤不區分大小寫，推薦使用小寫

5.3  HTML 標籤屬性

• 屬性是屬於標籤的，不同的標籤具有不同的屬性
• 屬性由屬性名和屬性值組成，屬性值使用單引號或雙引號包裹，或者不包裹
•  一個標籤可以設置多個不同的屬性，多個屬性直接使用空格分隔   一個標籤如果設置多個相同的屬性，後面的不生效
• 屬性不區分大小寫
• 語法格式如下：

<標籤名 屬性名1="屬性值" 屬性名2="屬性值" ... 屬性名N="屬性值">
  <!– 輸出內容…  -->
</標籤名>

5.4  如何掌握一個 HTML 標籤

要掌握一個 HTML 標籤，我們需要記住以下幾點：

• 標籤的語義、功能。
• 該標籤有哪些屬性，屬性的值是怎樣的。
• 該標籤是單標籤還是雙標籤。

5.5  HTML代碼格式

任何回車或空格在源代碼中都是起作用的， 所以在編寫HTML代碼時，都可以使用回車或者空格進行代碼排版， 這樣可以使代碼清晰，也便於團隊合作。

必須保持嚴格的縮進規則，以Tab鍵為準。

5.6  HTML 註釋

<!-- 註釋內容 -->
<!--
    這裏全是註釋
    都是註釋
-->

註釋的作用：

1. 對代碼進行解釋説明
2. 調試過程中，可以將不需要執行的代碼暫時註釋

5.7 文檔聲明

你可使用此聲明在 Internet Explorer 6 及以後版本中切換為嚴格的標準兼容模式。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>

作用：告訴瀏覽器使用標準模式渲染解析頁面！

5.8 基本頁面模板

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>老年人的第一個網頁</title>
    </head>
    <body>
      
    </body>
</html>

六、 HTML 常用標籤

6.1 主體結構標籤

6.2 HEAD 中的標籤

6.3 格式排版標籤

代碼練習：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>格式排版標籤</title>
    </head>
    <body>
        <!-- 標題標籤 -->
        <h1>一級標題</h1>
        <h2>二級標題</h2>
        <h3>三級標題</h3>
        <h4>四級標題</h4>
        <h5>五級標題</h5>
        <h6>六級標題</h6>
        <!-- <h7>七級標題</h7> 不存在的標籤-->
        對比文字


        <!-- 分隔線 -->
        <hr>

        <!-- 段落標籤 -->
        <p>新華社北京9月8日電 </p>
        <p>新華社北京9月8日電，並在北師大建校120週年和第三十八個教師節來臨之際，向該校師生員工、廣大校友表示祝賀和問候，向全國廣大教師致以節日的祝福。</p>
        <hr>

        <!-- 換行標籤  br   -->
        靜夜思                                        李白 <br>
        牀前明月光 <br>
        疑是地上霜 <br>
        舉頭望明月 <br>
        低頭思故鄉 
        <hr>

        <!-- 原格式顯示標籤 pre -->
        <pre>
            靜夜思                                        李白 
牀前明月光 
            疑是地上霜 
            舉頭望明月 
            低頭思故鄉 
        </pre>
        <hr>

        <!-- HTML中最常用的標籤  div 無語義-->
        <div>時代路科技來看</div>
        <div>
            <div></div>
            <div>
                <div></div>
                <div></div>
            </div>
            <div></div>
        </div>
        
    </body>
</html>

Day1練習：寫一個自我介紹的網頁

Day2

一、 文本標籤

以上為常用標籤，以下文本標籤僅作為了解 <cite>   用於引證、舉例、(標籤定義作品（比如書籍、歌曲、電影、電視節目、繪畫、雕塑等等）的標題)通常 為斜體字 <dfn> 定義一個定義項目 <code> 定義計算機代碼文本 <samp>   定義樣式文本 標籤並不經常使用。只有在要從正常的上下文中將某些短字符序列提取出來，對它們加以 強調的極少情況下，才使用這個標籤。 <kbd>     定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它經常用在與計算機相關的文檔或手冊中。 <abbr>   定義縮寫 配合title屬性 (IE6以上) <bdo>     來覆蓋默認的文本方向 dir屬性 值: lrt rtl <var>     定義變量。您可以將此標籤與 <pre> 及 <code> 標籤配合使用。 <small>   標籤定義小型文本（和旁註） <b>       粗體字標籤 根據 HTML 5 的規範，<b> 標籤應該做為最後的選擇，只有在沒有其他標記比較合適時 才使用它。 <i>       斜體字標籤 標籤被用來表示科技術語、其他語種的成語俗語、想法、宇宙飛船的名字等等。 <u>       下劃線字體標籤 標籤定義與常規文本風格不同的文本，像拼寫錯誤的單詞或者漢語中的專有名詞。 請 儘量避免使用該標籤為文本加下劃線，用户會把它混淆為一個超鏈接。 <q>       簽定義一個短的引用。瀏覽器經常會在這種引用的周圍插入引號。(小段文字) <blockquote> 標籤定義摘自另一個源的塊引用。瀏覽器通常會對 <blockquote> 元素進行縮進。(大段文字) (塊 狀元素) <address>   定義地址 通常為斜體 (注意非通訊地址) 塊狀元素 <font>     H5已刪除 字體標籤，可以通過標籤的屬性指定文字的大小、顏色及字體等信息 <tt>       H5已刪除 打字機文字 <big>     H5已刪除 大型字體標籤 <strike>   H5已刪除 添加刪除線 <acronym> H5已刪除 首字母縮寫 請使用<abbr>代替

HTML 參考手冊_w3cschool

二、 圖片

2.1  img 標籤

總結：

1. 在圖片無法正常顯示的會顯示 alt 標籤所設置的代替文字
2. 單獨設置圖片的寬高，另一個會根據比例自動計算； 同時設置寬和高需要計算好比例，否則圖片會拉伸

2.2 常見的圖片格式

jpg / jpeg png gif bmp ....

三、 相對路徑和絕對路徑

當前文件： 當前所書寫代碼的文件。

目標文件： 當前文件中要引用的文件。

3.1 絕對路徑

網絡絕對路徑： 在互聯網上的絕對地址，也稱為 URL （統一資源定位符），前端開發中的絕對徑路主要指網絡絕對路徑。如 https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png

本地絕對路徑： 在某台電腦上的絕對地址，如 D:\Library\SH220907\Day02_HTML\課堂案例\02-圖片標籤\安妮私房照.jpg，前端開發中並不建議使用。

3.2 相對路徑

./ 開頭的路徑： 目標文件在當前文件的同級或者下級以及更下級； ./的意思是當前文件所在的目錄，可以省略。 ../ 開頭的路徑： 目標文件在當前文件的上級或者必須通過上級才能找到； ../的意思是當前文件的上一級目錄。

3.3 HTML 中使用路徑的場景

1. img 標籤引入圖片 2. video 標籤引入視頻 3. audio 標籤引入音頻 4. iframe 標籤引入多種資料 5. script 標籤引入 js 文件 6. a 標籤設置超鏈接 7. link 標籤關聯 css 文件 ...

四、 超鏈接和錨點

4.1 a 標籤

總結：

1. 如果 a 標籤沒有 href 屬性，不能被稱為超鏈接 2. target 屬性的默認值是 _self，表示目標文件在本窗口打開，如果值設置為 _blank，表示目標文件在新窗口打開

4.2 超鏈接

① 目標文件是網頁

<a href="http://www.baidu.com/index.html">百度</a><br> <a href="../02-圖片標籤/01-圖片標籤.html" target="_blank">圖片標籤實例頁面</a>

點擊超鏈接直接打開目標文件

② 目標文件是網頁以外的其他類型文件

<a href="resouces/小樂老師的業餘生活.jpg" target="_blank">[圖片]小樂老師的業餘生活</a><br> <a href="resouces/小樂老師的性福生活.mp4" target="_blank">[視頻]小樂老師的性福生活</a><br> <a href="resouces/小樂老師的私房照片.7z" target="_blank">[壓縮文件]小樂老師的私房照片</a><br> <a href="resouces/如何擁有百億資產.docx">[word文檔]如何擁有百億資產</a><br> <a href="resouces/如何30歲之前走上人生巔峯.pdf" target="_blank">[pdf文檔]如何30歲之前走上人生巔峯</a>

1. 如果目標文件是瀏覽器可以打開的文件類型，點擊超鏈接直接打開 2. 如果目標文件是瀏覽器無法打開的文件類型，點擊超鏈接直接下載

③ 超鏈接的其他特殊功能（打開應用）

<a href="mailto:fuming@atguigu.com">發郵件</a> <br> <a href="tel:18618176338">打電話</a> <br> <a href="sms:18618176338">發短信</a> <br> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=840937370&amp;site=qq&amp;menu=yes">打開QQ</a>

④ href 的值是空的 點擊刷新

<a href="">刷新</a>

4.3 錨點

① 如何設置錨點

給標籤設置 id 屬性，該標籤就可以作為錨點，id 屬性的值就是錨點名

② 如何跳轉到錨點（通過超鏈接跳轉到錨點）

<!-- 跳轉到本頁面的錨點 --> <a href="#錨點名"> </a> <!-- 跳轉到指定頁面的錨點 --> <a href="頁面的地址#錨點名"> </a> <!-- 返回頁面頂部 --> <a href="#"> </a>

Day2練習： 寫一個使用多個相對路徑的網頁

Day3

一、 列表

1.1 無序列表

<ul>
    <li>超文本標記語言</li>
    <li>層疊樣式表</li>
    <li>JavaScript</li>
    <li>Vue</li>
    <li>React</li>
    <li>小程序</li>
</ul>

<ul>
    <li>
        <a href="#">實施創新驅動發展戰略</a>
    </li>
    <li>
        <a href="#">中國跨度！“我們這十年”主題宣傳片發佈</a>
    </li>
</ul>

無序列表可以用網頁中的文章列表、新聞列表、導航條等等...

2.2 有序列表

<ol>
     <li>小樂</li>
     <li>馬雲</li>
     <li>馬斯克</li>
     <li>馬化騰</li>
</ol>

有序列表適合表示一組有順序的列表，如各類排行榜等...

2.3 定義列表（瞭解）

<!-- 一個 dt 對應一個 dd -->
<dl>
    <dt>HTML</dt>
    <dd>超文本標記語言</dd>
    <dt>CSS</dt>
    <dd>層疊樣式表</dd>
    <dt>JavaScript</dt>
    <dd>一種瀏覽器腳本語言</dd>
</dl>

<!-- 一個 dt 對應多個 dd -->
<dl>
    <dt>如何掌握一個 HTML 標籤？</dt>
    <dd>該標籤的語義和功能</dd>
    <dd>該標籤的屬性以及屬性值如何設置</dd>
    <dd>該標籤是雙標籤還是單標籤</dd>
</dl>

2.4 列表標籤總結

建議：

1. ul、ol 中只直接包裹 li 標籤； li 標籤也只被 ul 標籤或 ol 標籤包裹。 2. li 標籤就可以包裹任何標籤（li 不要直接再包裹 li）

二、 表格標籤

2.1 表格的結構

<table border="1">
    <!-- 表格的標題 -->
    <caption>用户信息表</caption>

    <!-- 表格頭 -->
    <thead>
        <!-- 行 -->
        <tr>
            <!-- 表頭單元格 -->
            <th>序號</th>
            <th>姓名</th>
            <th>性別</th>
            <th>電話</th>
            <th>地址</th>
        </tr>
    </thead>

    <!-- 表格體 -->
    <tbody>
        <!-- 行 -->
        <tr>
            <!-- 單元格 -->
            <td>1</td>
            <td>曹操</td>
            <td>男</td>
            <td>18754321349</td>
            <td>紐約</td>
        </tr>
        <tr>
            <td>2</td>
            <td>劉備</td>
            <td>男</td>
            <td>18754321348</td>
            <td>倫敦</td>
        </tr>
        <tr>
            <td>3</td>
            <td>孫權</td>
            <td>男</td>
            <td>18754321347</td>
            <td>莫斯科</td>
        </tr>
        <tr>
            <td>4</td>
            <td>高小樂</td>
            <td>男</td>
            <td>18754321346</td>
            <td>新德里</td>
        </tr>

    </tbody>

    <!-- 表格腳 -->
    <tfoot></tfoot>
</table>

table cpation thead tr th/td tbody tr td/th tfoot tr td/th

如果省略 thead、tbody、tfoot，table 直接包裹 tr，瀏覽器會自動添加一個 tbody 包裹所有的 tr

2.2 表格整體樣式設置

給 table 標籤設置如下屬性：

width: 設置表格總寬度 height： 設置表格總高度 border: 設置邊框的寬度 cellspacing： 設置單元格之間的距離 cellpadding: 設置單元格邊框與裏面的文本內容的距離

2.3 單元格樣式設置

① 設置單元格中內容對齊方式

1. thead、tbody、tfoot、tr、th、td 這些標籤可以設置 align 屬性，屬性的值： left、right、center，該屬性可以設置單元格中內容的水平對齊方式 2. thead、tbody、tfoot、tr、th、td 這些標籤可以設置 valign 屬性，屬性的值： top、bottom、middle，該屬性可以設置單元格中內容的垂直對齊方式

② 設置單元格寬高

1. 給 td/th 設置 width 屬性，可以設置所在列的列寬 2. 給 td/th 設置 height 屬性， 可以設置所在行的行高； tr 也具有 height 屬性可以設置行高。

2.4 單元格跨行和跨列（重要）

1. 給 td/th 設置 rowspan 屬性，可以設置跨越的行數，默認值是 1，可以設置為其他數字。 2. 給 td/th 設置 colspan 屬性，可以設置跨越的列數，默認值是 1，可以設置為其他數字。

2.5 表格標籤總結

三、 表單

3.1 表單總體設置

<form action="https://www.baidu.com/s" target="_blank">
    <input type="text" name="wd">
    <button>提交</button>
</form>

3.2 表單控件

① 文本輸入框

<input type="text"> <br>
<input type="text" maxlength="6"> <!-- maxlenth 可以設置最大可輸入長度 -->
<input type="text" value="高小樂..."> 
<input> <!-- type 的默認值是 text -->
<input type="sb"> <!-- 給 type 設置了不存在的值，相當於 text -->

② 密碼輸入框

<input type="password"> 
<input type="password" maxlength="10" value="hello"> <!-- maxlenth 可以設置最大可輸入長度 -->

③ 單選框

<input type="radio" name="gender" value="male">男 
<input type="radio" name="gender" value="female">女  
<input type="radio" name="gender" value="else" checked>其他

1. value 的值才是真正提交到後端的數據 2. 如果想實現單選效果，必須給多個單選框 input 設置相同的 name 屬性值 3. 設置 checked 屬性可以默認選中，該屬性不需要值

④ 複選框

<input type="checkbox" name="hobby" value="1" checked> 吃飯 
<input type="checkbox" name="hobby" value="2"> 睡覺 
<input type="checkbox" name="hobby" value="3"> 發呆 
<input type="checkbox" name="hobby" value="4" checked> 敲代碼

1. value 的值才是真正提交到後端的數據 2. 設置 checked 屬性可以默認選中，該屬性不需要值

⑤ 提交按鈕

<!-- input 標籤實現 value 屬性可以設置按鈕上的文字-->
<input type="submit">
<input type="submit" value="登錄">

<!-- button 標籤實現 , button 標籤 type 屬性的默認值是 submit -->
<button type="submit">免費註冊</button>
<button>搜索</button>

⑥ 重置按鈕

<!-- input 標籤實現 -->
<input type="reset" value="重置">

<!-- button 標籤實現 -->
<button type="reset">重置</button>

⑦ 普通按鈕

<!-- input 標籤實現 -->
<input type="button" value="按鈕">
            
<!-- button 標籤實現 -->
<button type="button">按鈕</button>

⑧ 文本域

<textarea rows="10" cols="60">我是文本域...</textarea>

屬性 rows 可以設置默認顯示的行數，實際影響高度 屬性 cols 可以設置默認顯示的列數（每行的字數），實際影響寬度

⑨ 下拉選項

<select>
    <option value="1">新疆維吾爾自治區</option>
    <option value="2">廣西壯族自治區</option>
    <option value="3" selected>內蒙古自治區</option>
    <option value="4">香港特別行政區</option>
</select>

1. option 的 value 屬性設置的是真正提交的數據；如果沒有設置 value，會將雙標籤所包裹的內容提交 2. option 設置 selected 屬性可以默認選中，該屬性不需要設置值

3.3 表單控件的屬性

① name 屬性

1. 為該表單控件設置一個標識，提交到後端之後使用 2. 多個單選框如果要實現單選功能，需要設置相同的 name 值 3. 下拉選項需要將 name 設置到 select 標籤

② value 屬性

1. 文本輸入框、密碼輸入框可以設置默認輸入的內容 2. 單選框、複選框設置真正提交的數據 3. input 標籤實現的按鈕，可以設置按鈕上的文字 4. option 可以設置真正提交的數據 5. select、textarea 沒有 value 屬性

③ disabled 屬性

1. 表單控件設置該屬性之後，變為不可用狀態 2. 該屬性不需要設置值 3. 下拉選項，select 設置 disabled 屬性，整個下拉選項不可用； option 設置 disabled 屬性，只有該選項不可選

3.4 label 標籤的使用

<!-- label 標籤的 for 屬性值與表單控件的 id 屬性值一致 -->
<!-- 適合於文本輸入框、密碼輸入框、文本域、下拉選項-->
<label for="usernameInp">用户名：</label> 
<input type="text" id="usernameInp"> <br>

<!-- label 標籤將表單控件與文字一起包裹起來 -->
<!-- 適合於單選框和複選框 -->
性別：
<label>
    <input type="radio" name="gender">男
</label>
<label>
    <input type="radio" name="gender">女
</label>
<label>
    <input type="radio" name="gender">其他
</label>

3.5 表單標籤總結

1. input 標籤的 type 屬性的值有 text、password、radio、checkbox、submit、reset、button，默認值是 text 2. button 標籤的 type 屬性的值有 submit、reset、button，默認值是 submit

Day3練習：完成以下表單的網頁製作

Day4

一、 框架標籤

1. 使用 iframe 可以在當前頁面中嵌入其他類型的文件，包括網頁、圖片、視頻等 2. 使用 iframe 加廣告 3. iframe 可以作為超鏈接和form的target值

二、 HTML 字符實體

空格   &nbsp; < &lt; >       &gt; & &amp; ¥ &yen; © &copy; x &times; ÷ &divide;

三、 HTML 全局屬性

title 設置提示文字 name 設置名字 id 設置唯一標識，標籤的id屬性值必須是唯一的 class 設置類名 style 設置樣式 lang 設置語言

四、 meta 元信息

<!-- 網頁字符集編碼 --> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!-- 網頁關鍵字 --> <meta name="keywords" content="8-12個以英文逗號隔開的單詞/詞語"> <!-- 網頁描述信息 --> <meta name="description" content="80字以內的一段話，與網站內容相關"> <!-- 頁面刷新 --> <!-- <meta http-equiv="refresh" content="3">     --> <meta http-equiv="refresh" content="3;url=http://www.atguigu.com"> <!-- 告訴IE使用最新的引擎渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 設置完美視口，給移動端的瀏覽器設置的 --> <meta name="viewport" content="width=device-width, initial-scale=1.0">

五、附錄 vscode 使用技巧

1. 相關設置   ① 目錄結構的縮進距離： Tree:Indent   ② 空目錄收縮顯示： Compact Folders   ③ 文件圖標主題   2. 相關擴展推薦   Live Server web服務器方式打開網頁   Open in Browser 本地方式打開網頁（與雙擊打開是一致的）   chinese lorem   中文亂數假文擴展 3. 英文假文：lorem； lorem300（300個單詞）   中文假文：jw; jw800(800個字)   4. vscode 內置 emmet 插件

Day5

一、HTML5 概述

HTML5 是下一代 HTML 標準，2014年10月由萬維網聯盟（W3C）完成標準制定。

1.1 HTML5 的由來

• HTML5草案的前身名為 Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接納，併成立了新的 HTML 工作團隊。
• HTML 5 的第一份正式草案已於2008年1月22日公佈。HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。
• 2012年12月17日，萬維網聯盟（W3C）正式宣佈凝結了大量網絡工作者心血的HTML5規範已經正式定稿。根據W3C的發言稿稱：“HTML5是開放的Web網絡平台的奠基石。”
• 2013年5月6日， HTML 5.1正式草案公佈。該規範定義了第五次重大版本，第一次要修訂萬維網的核心語言：超文本標記語言（HTML）。在這個版本中，新功能不斷推出，以幫助Web應用程序的作者，努力提高新元素互操作性。
• 2014年10月29日，萬維網聯盟宣佈，經過接近8年的艱苦努力，該標準規範終於制定完成。

1.2 HTML5 優勢

1. 提高可用性和改進用户的友好體驗；
2. 有幾個新的標籤，這將有助於開發人員定義重要的內容；
3. 可以給站點帶來更多的多媒體元素(視頻和音頻)；
4. 可以很好的替代FLASH和Silverlight；
5. 當涉及到網站的抓取和索引的時候，對於SEO很友好；
6. 將被大量應用於移動應用程序和遊戲；
7. 可移植性好。

1.3 兩套標準

W3C 更新到了 HTML5.2 ： HTML Standard

WHATWG 稱之為 HTML 現行標準 （HTML Standard） HTML Standard

2019年5月28日，W3C 與 WHATWG 就共同開發 HTML 與 DOM 規範達成協議

1.4 兼容性

• chrome、Safari、opera、Firefox以及各種以wekkit（chromium）為內核的國產瀏覽器。
• Internet Explorer 9 以及 以上版本

二、 HTML5 新增標籤

2.1 新增頁面結構標籤（最重要）

1. aside 和 article 相當於特殊的 section 2. main 標籤 whatwg 標準不支持，IE不支持，其他瀏覽器都可以使用 3. hgroup 表示標題（h1~h6）的包裹標籤, w3c 不支持，瞭解，不常用

2.2 新增狀態標籤（瞭解）

meter 和 progress 什麼區別：

1. meter 表示靜態的度量，如温度、濕度、磁盤容量、電池電量等 2. progress 表示動態的進度

2.3 新增注音標籤

<ruby>
     饕餮
     <rt>taotie</rt>
</ruby>

2.4 新增文本標籤

可用於搜索結果中關鍵字的標記！

三、 HTML5 表單新增功能

3.1 表單控件新增屬性

舊標準存在的表單控件屬性：

name value disabled

新標準增加的表單控件屬性：

placeholder 設置文字提示（用於文本輸入類） required 表示必填或必選（不需要設置值） autofocus 自動獲取焦點（不需要設置值） autocomplete 設置瀏覽器是否記錄輸入歷史 on：記錄； off 表示不記錄， 默認值是 on pattern 設置正則驗證表單

3.2 input 標籤的 type 屬性新增的值(新增的表單控件類型)

舊標準 input 標籤 type 屬性的值：

text、password、radio、checkbox、submit、reset、button

① 輸入框類（5個）

<!-- 郵箱 -->
<input type="email" placeholder="請輸入郵箱">


<!-- 數字 -->
<input type="number" placeholder="請輸入數字"> <br>
<input type="number" max="10000" min="-200" placeholder="請輸入數字"> <br>
<input type="number" max="1" min="0" step="0.1" placeholder="請輸入小數"> <br>


<!-- 網址 url -->
<input type="url" placeholder="請輸入網址">


<!-- 電話 不會驗證，移動端瀏覽器打開，點擊會彈出數字按鍵-->
<input type="tel" placeholder="請輸入電話號碼">


<!-- 搜索框 -->
<input type="search" placeholder="搜索...">
② 範圍選擇框（1個）

<input type="range" class="range-input" min="0" max="10" step="0.01">

③ 顏色選擇框（1個）

<input type="color">

④ 日期時間選擇框類（5個）

<!-- 選擇年月日 -->
<input type="date"> <br>

<!-- 選擇年月 -->
<input type="month"> <br>

<!-- 選擇哪一年的第幾周 -->
<input type="week"> <br>

<!-- 選擇時間 -->
<input type="time"><br>

<!-- 選擇日期+時間 -->
<input type="datetime-local">

3.3 form 標籤新增屬性

novalidate 設置該屬性可以阻止表單驗證（不需要設置值）

四、 HTML5 音視頻

4.1 音視頻標籤

4.2 瀏覽器支持的音視頻格式

① 視頻格式

mp4（推薦） webm ogg

② 音頻格式

mp3（推薦） wav ogg

五、 HTML5 新增全局屬性

舊標準中的全局屬性：

name id class style title lang

HTML5 標準新增的全局屬性

hidden 隱藏元素，不需要設置值

a 標籤新增的屬性：

download 點擊下載，不需要設置值； 1. 不論文件瀏覽器是否能打開，點擊都會下載 2. 只有與網頁文件同服務器的目標文件，才能實現此功能

六、 HTML5 兼容性方案

6.1 設置元信息

<!--設置IE總是使用最新的文檔模式進行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<!--優先使用 webkit ( Chromium ) 內核進行渲染, 針對360等殼瀏覽器-->
<meta name="renderer" content="webkit">

6.2 html5shiv.js 讓IE8以及以下的瀏覽器支持H5新標籤

<!--[if lt ie 9]>
    <script src="../js/html5shiv.js"></script>
<![endif]-->