.標簽

1.1meta標簽

meta主要用于設置網頁中的一些元數據，元數據不是給用戶看 charset 指定網頁的字符集 name 指定的數據的名稱 content 指定的數據的內容

keywords 表示網站的關鍵字，可以同時指定多個關鍵字，關鍵字間使用,隔開

<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東"/>

description 用于指定網站的描述

<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!"/>

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

將頁面重定向到另一個網站

1.2title標簽

title標簽的內容會作為搜索結果的超鏈接上的文字顯示

<title>Document</title>

1.3標題

• h1 ~ h6 一共有六級標題
• 從h1~h6重要性遞減，h1最重要，h6最不重要
• h1在網頁中的重要性僅次于title標簽，一般情況下一個頁面中只會有一個h1
• 標題元素是塊元素
• <h1>一級標題</h1>
  <h2>二級標題</h2>
  <h3>三級標題</h3>
  <h4>四級標題</h4>
  <h5>五級標題</h5>
  <h6>六級標題</h6>
• 
  
• hgroup標簽用來為標題分組，可以將一組相關的標題同時放入到hgroup
• <hgroup>
  <h1>回鄉偶書二首</h1>
  <h2>其一</h2>
  </hgroup>
• 其他標簽
• p標簽表示頁面中的一個段落
• <p>在p標簽中的內容就表示一個段落</p>
• em標簽用于表示語音語調的一個加重
• <p>今天天氣<em>真</em>不錯！</p>
• strong表示強調，重要內容！
• <p>你今天必須要<strong>完成作業</strong>！</p>
• blockquote 表示一個長引用
• <blockquote>
  這句話我是從來沒有說過的！
  </blockquote>
• q表示一個短引用
• 子曰<q>學而時習之，樂呵樂呵！</q>
• br標簽表示頁面中的換行
• <br>

1.4布局標簽

header 表示網頁的頭部 main 表示網頁的主體部分(一個頁面中只會有一個main) footer 表示網頁的底部 nav 表示網頁中的導航 aside 和主體相關的其他內容（側邊欄） article 表示一個獨立的文章 section 表示一個獨立的區塊，上邊的標簽都不能表示時使用section

div 沒有語義，就用來表示一個區塊，目前來講div還是我們主要的布局元素

span 行內元素，沒有任何的語義，一般用于在網頁中選中文字

<header></header>
    <main></main>
    <footer></footer>

    <nav></nav>
    <aside></aside>
    <article></article>

    <section></section>

    <div></div>

    <span></span>

1.5列表

1.1.1分類

1.1.1.1有序列表

使用ol標簽來創建無序列表，使用li表示列表項

<ul>
       <li>結構</li>
       <li>表現</li>
       <li>行為</li>
   </ul>

1.1.1.2 無序列表

使用ul標簽來創建無序列表，使用li表示列表項

<ol>
       <li>結構</li>
       <li>表現</li>
       <li>行為</li>
   </ol>

1.1.1.3定義列表

使用dl標簽來創建一個定義列表， 使用dt來表示定義的內容，使用dd來對內容進行解釋說明

<dl>
       <dt>結構</dt>
       <dd>結構表示網頁的結構，結構用來規定網頁中哪里是標題，哪里是段落</dd>
       <dd>結構表示網頁的結構，結構用來規定網頁中哪里是標題，哪里是段落</dd>
       <dd>結構表示網頁的結構，結構用來規定網頁中哪里是標題，哪里是段落</dd>
   </dl>

1.1.1.4列表之間可以互相嵌套

<ul>
       <li>
          aa
           <ul>
               <li>aa-1</li>
               <li>aa-2
                   <ul>
                       <li>aa-1</li>
                       <li>aa-2</li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>

1.6超鏈接

1.6.1 作用

超鏈接可以讓我們從一個頁面跳轉到其他頁面， 或者是當前頁面的其他的位置

1.6.2 定義

使用 a 標簽來定義超鏈接

<a href="https://www.baidu.com">超鏈接</a>

1.6.3 屬性

1.6.3.1屬性1：href

指定跳轉的目標路徑

值可以是一個外部網站的地址

也可以寫一個內部頁面的地址

超鏈接是也是一個行內元素，在a標簽中可以嵌套除它自身外的任何元素

1.6.3.2 屬性2：target

用來指定超鏈接打開的位置

_self 默認值 在當前頁面中打開超鏈接

_blank 在一個新的要么中打開超鏈接

<a href="07.列表.html" target="_blank">超鏈接</a>

1.6.4其他

將#作為超鏈接的路徑的展位符使用

javascript：; 來作為href的屬性，此時點擊這個超鏈接什么也不會發生

將超鏈接的href屬性設置為#，這樣點擊超鏈接以后 頁面不會發生跳轉，而是轉到當前頁面的頂部的位置

跳轉到頁面的指定位置，只需將href屬性設置 #目標元素的id屬性值

<a href="#bottom">去底部</a>
   <br><br>
<a href="#p3">去第三個自然段</a>
   <br><br>
<p>
  內容多一點
</p>
<a href="#">這是一個新的超鏈接</a>
   <br><br>
<a href="javascript：;">這是一個新的超鏈接</a>
   <br><br>
<a id="bottom" href="#">回到頂部</a>

1.7圖片標簽

img標簽來引入外部圖片，img標簽是一個自結束標簽

屬性：src 屬性指定的是外部圖片的路徑（路徑規則和超鏈接是一樣的）

alt 圖片的描述，這個描述默認情況下不會顯示，有些瀏覽器會圖片無法加載時顯示

<img src="./img/1.gif" alt="松鼠">

1.8內聯框架

用于向當前頁面中引入一個其他頁面

• src 指定要引入的網頁的路徑
• frameborder 指定內聯框架的邊框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

1.8 音視頻標簽

1.8.1音頻

audio 標簽用來向頁面中引入一個外部的音頻文件的

1.8.1.1 屬性

• controls 是否允許用戶控制播放
• autoplay 音頻文件是否自動播放
• 如果設置了autoplay 則音樂在打開頁面時會自動播放
• loop 音樂是否循環播放

<audio src="./source/audio.mp3" controls autoplay loop></audio>

除了通過src來指定外部文件的路徑以外，還可以通過source來指定文件的路徑

<audio controls>
       <!-- 對不起，您的瀏覽器不支持播放音頻！請升級瀏覽器！-->
       <source src="./source/audio.mp3">
       <source src="./source/audio.ogg">
       <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
   </audio>

1.8.2視頻

與 audio 相似

<video controls>
       <source src="./source/flower.webm">
       <source src="./source/flower.mp4">
       <embed src="./source/flower.mp4" type="video/mp4">
   </video>

2.表格table

• 在table中使用tr表示表格中的一行，有幾個tr就有幾行
• 在tr中使用td表示一個單元格，有幾個td就有幾個單元格
• rowspan 縱向的合并單元格
• colspan 橫向的合并單元格

<table border="1" width='50%' align="center">
      <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td>D1</td>
      </tr>
      <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
          <td rowspan="2">D2</td>
      </tr>
      <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
      </tr>
      <tr>
          <td>A4</td>
          <td>B4</td>
          <td colspan="2">C4</td>
      </tr>
  </table>

長表格

• 可以將一個表格分成三個部分：
• 頭部 thead
• 主體 tbody
• 底部 tfoot
• th 表示頭部的單元格

<table border="1" width='50%' align="center">  
      <thead>
          <tr>
              <th>日期</th>
              <th>收入</th>
              <th>支出</th>
              <th>合計</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td></td>
              <td></td>
              <td>合計</td>
              <td>300</td>
          </tr>
      </tfoot>

  </table>

表格樣式

• border-spacing: 指定邊框之間的距離

border-spacing: 0px;

• border-collapse: collapse; 設置邊框的合并

border-collapse: collapse;

• 如果表格中沒有使用tbody而是直接使用tr，那么瀏覽器會自動創建一個tbody，并且將tr全都放到tbody中tr不是table的子元素

3.表單（form）

• 使用form標簽來創建一個表單
• action 表單要提交的服務器的地址
• 數據要提交到服務器中，必須要為元素指定一個name屬性值

<input type="text" name="username">

• 單選按鈕
• 像這種選擇框，必須要指定一個value屬性，value屬性最終會作為用戶的填寫的值傳遞給服務器
• checked 可以將單選按鈕設置為默認選中

<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

• 多選框

<input type="checkbox" name="test" value="1">
      <input type="checkbox" name="test" value="2">
      <input type="checkbox" name="test" value="3" checked>

• 下拉列表

<select name="haha">
          <option value="i">選項一</option>
          <option selected value="ii">選項二</option>
          <option value="iii">選項三</option>
      </select>

• 提交按鈕

<input type="submit" value="注冊">

屬性

• autocomplete="off" 關閉自動補全
• readonly 將表單項設置為只讀，數據會提交
• disabled 將表單項設置為禁用，數據不會提交
• autofocus 設置表單項自動獲取焦點

<form action="target.html">
      <input type="text" name="username" value="hello" readonly>
      <br><br>
      <input type="text" name="username" autofocus>
      <br><br>
      <input type="text" name="b">

      <br><br>

      <!-- <input type="color"> -->
      <br><br>
      <!-- <input type="email"> -->
      <br><br>

      <input type="submit">
      <!-- 重置按鈕 -->
      <input type="reset">
      <!-- 普通的按鈕 -->
      <input type="button" value="按鈕">

      <br><br>
       

      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按鈕</button>
  </form>

4.注釋

<!--
我是注釋中的注釋 注釋不能嵌套
-->

5.屬性

• 屬性，在標簽中（開始標簽或自結束標簽）還可以設置屬性
• 屬性是一個名值對（x=y）
• 屬性用來設置標簽中的內容如何顯示
• 屬性和標簽名或其他屬性應該使用空格隔開
• 屬性不能瞎寫，應該根據文檔中的規定來編寫，有些屬性有屬性值，有些沒有。如果有屬性值，屬性值應該使用引號引起來

6.文檔聲明

<!doctype html>

隨著5G網絡逐漸普及，手機已經成為了我們的一部分，從前出門要還要想著帶個什么樣子的包，現在的出門只要記得帶好手機就足矣！以前手機要實現一個功能就需要安裝相應的APP，而現在微信小程序等帶給我們不一樣的體驗，我們不再需要安裝各種各樣的APP，很多都可以在微信小程序上完成。微信小程序的開發門檻雖然低了很多，但我們還是需要掌握一定的基礎知識，而作為基礎中的基礎，HTML5是我們必須學習的。

一、HTML代碼基礎

1、HTML5的語法要求非常寬松，屬性值可以用單引號、雙引號包含起來，甚至可以不加引號。如：

id="wl" id='wl' id=wl 這三個是一樣的效果。

但需要注意的是如果屬性值中含有空格、單引號、大于小于號、反引號等字符時，則必須加引號，而當屬性值中含有單引號時，可以加雙引號，而值中有雙引號時就可以 加單引號。為了養成一個好的習慣，建議好始終給屬性值加雙引號。

2、內容標簽是標簽中包含一段內容，如p和strong這樣的元素；非內容標簽（空元素）是指標簽不包含內容，比如換行等，它只有起始標簽，不需要結束標簽，以HTML5以前為了強調結束，經常把非內容標簽寫成<br />樣子，而在HTML5中規定，非內容標簽不需要關閉。常見的非內容標簽有：<meta>、<img>、<br>、<input>、<link>、<hr>、<embed>等。

3、注釋：不論單選還是多行，只需要把注釋放在<!-- 注釋內容 -->。

4、HTML頁面根元素，在整個頁面中html是根元素，在這個元素中一般有兩個屬性，一個是lang，另一個是manifest。

<html lang="zh-cmn-Hans">：聲明頁面的語言為簡體中文。（非標準寫法為lang="zh-CN"）；manifest屬性用于設定頁面緩存，它一旦設置后，瀏覽器便會將需要緩存的文件保存在本地，主要適用于不依賴網絡，且下載后不需要再次更新的HTML5游戲、應用等，如果頁面內容需要頻繁更新的應該少用該屬性，具體用法可以查詢HTML5手冊，這里不詳細說明。

5、Head元素包含五個主要部分，分別是title、link、style、base和meta元素。title元素即網頁的標題；link元素定義了文檔與外部資源的關系，除了CSS外，還有許多的外部資源也通過這一元素引入頁面；style元素用于在頁面中定義樣式；base元素用于標記文檔的基礎URL地址，還可被用于設置全局的瀏覽器打開方式，如：<base target="_blank">設置頁面中所有的鏈接均在新窗口中打開

;meta元素是head中各類最豐富的一個元素，雖然它包含了多種多樣的元數據，但它被規定了必須包含name（元數據名稱），http-equiv（編譯指令）和charset（字符編碼）三種屬性的其中一種。如不希望頁面被抓取并公開時，我們可以在頁面中添加名為robots的meta標記，如：<meta name="robots" content="none">，反之則所有都被檢索到<meta name="robots" content="all">

。meta元素還能完成諸如刷新、重定向、緩存時間等功能。

6、HTML5新增了header元素，專門用來表述這樣的頭部區域，section元素對應不用的內容版塊，文章可以用article元素來表示，頁面的側邊欄可以用aside元素來表示 ，而且不僅可以放在整個頁面的代表側邊欄區域，還能放入section或article中，來容納一些與版塊和文章相關的內容。

7、footer元素和header元素并非區塊內容，在這兩種元素之內不能再嵌套放入類似section之類的元素。

8、不是所有的文字段落都適用p元素，如一段文字為聯系信息時，則應使用address元素。

9、定義列表的除了有ul和ol外，還有一種更加自定義的形式，它由三種元素的組合而成，分別是dl、dt和dd。

10、內容分組元素figure元素，它主要用于展示插圖、圖表、照片、代碼列表等。

11、HTML5加入了一種新的內容分組元素，用來指定頁面的主要內容，main元素，每一個頁面中最多只能有一個main元素，另外還有像水平分隔線的hr,表示源代碼的pre，代表引用的blockquote等都同樣屬于內容分組元素。

12、在過去HTML版本中，a還可以當成錨點，如<a name="a1"></a>，但在HTML5中把這一特性去掉了，當href屬性缺失時，它被視作一個占位符，而不會顯示為一個超鏈接。

13、span元素是一種常見的文本元素，但如果不對span設置樣式，則spqn中的文本和其他的文本看上去不會有任何差異。

14、在HTML5中有兩種表示強調的文本元素，分別為em和strong，em元素更多代表語義、語氣的加強，而strong則更加強調頁面文本的重要性、緊急程度等，瀏覽器中em默認的顯示為斜體，而strong則顯示為粗體。

15、big標記的文本顯示大于普通的段落文本，而small標記的文本則小于普通 的段落文本；當需要插入某句被引用的話，或者某段文字摘錄時，可以使用q元素，而當需要插入文獻的標題、作者、鏈接時使用cite元素，q元素默認在頭和尾加上雙引號，而cite元素默認顯示為斜體。

16、表單在制作時需要設置method和action屬性，分別用來指定表單提交數據的方式和目的頁面；數據提交的方式有兩種，get和post，get是把數據放在URL中，以明文的方式發送給后臺，它不能傳輸過大的數據，也不能傳輸文件類數據，而post是把數據放在數據體內再發給后臺，數據不能直接被看到，可傳輸的數據量較大，所以一般都選擇使用post方式。

17、在文本輸入框可以加入placeholder（占位符）屬性，值為框內顯示的文本，也可以為input元素添加required屬性使該表單項必填，也可以添加autofocus屬性使其自動獲得焦點，一般設置第一個字段。

18、HTML5為input元素增加了很多新的類型，如電話的tel，電子郵件的email，日期的date等。

19、radio表示單選按鈕，同一組的單選按鈕具有相同的name屬性，它的值由value屬性決定，checked屬性表示該按鈕默認選中。如：

<p>
<label for="sex">性別：</label>
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
</p>

還可以使用分區度更高的fieldset元素，它可以對表單內容的一部分進行打包，生成一組相關的表單字段，它使用legend元素指定標題。

checkbox的input元素為復選框，checked屬性為選中狀態；select元素生成下拉菜單，元素使用option元素標記。

TML4.01 --> HTML5
HTML4.01 --> XHTML1.0 (Xml + html4.01) 語法更加嚴格。

1)語法的區別：XHTML和HTML5

1、內容類型（ContentType）

HTML5的文件擴展符與內容類型保持不變，仍然為".html"或".htm"

2、DOCTYPE聲明

不區分大小寫XHTML -- > <!DOCTYPE html>HTML5 -- > <!DOCTYPE html> 不區分大小寫

3、指定字符集編碼

<meta charset="UTF-8">

4、可省略標記的元素

不允許寫結束標記的元素：br、col、embed、hr、img、input、、link、meta

XHTML -- > <br />

HTML5 -- > <br>

5、可以省略結束標記的元素：

XHTML -- > <div></div>

HTML5 -- > <div> <option>

li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th

6、可以省略全部標記的元素：

html、head、body、colgroup、tbody

7、屬性值可以使用雙引號，也可以使用單引號。

XHTML -- > <input type="text" />

<input type="checkbox" checked="checked"/>

HTML5 -- > <input type='text'>

<input type="checkbox" checked />

注：不建議省略標簽和省略號。

2) 語義化標簽

<div class="header"></div>

<ul class="nav"></ul>

<div class="main"></div>

<div class="footer"></div>

<header></header> 頁眉

<main></main>主體

<nav></nav>

<footer></footer>頁腳

1、section元素 表示頁面中的一個區塊或者區域 （同div效果） 2、article元素 表示一塊與上下文無關的獨立的內容 3、aside元素 在article之外的，與article內容相關的輔助信息 4、header元素 表示頁面中一個內容區塊或整個頁面的標題（頁眉）； 5、footer元素 表示頁面中一個內容區塊或整個頁面的腳注 6、nav元素 表示頁面中導航鏈接部分7、figure元素 表示一段獨立的內容，使用figcaption元素為其添加標題(第一個或最后一個子元素的位置)

8、main元素 表示頁面中的主要的內容(ie不兼容)

注：一個頁面內 ，只能出現一個main標簽；(ie不兼容)

9、hgroup標題的一個分組

10、mark定義高亮顯示的文本(span) 內聯

11、time時間 （目前所有主流瀏覽器都不支持 標簽。）內聯

12、dialog標記定義一個對話框(會話框)類似微信（ 目前只有 Chrome 和 Safari 6 支持 標簽。）

13、embed 標記定義外部的可交互的內容或插件 比如flash ；

3）多媒體標簽

<video src=' '></video>視頻

<audio src=' '></audio>音頻

Type屬性值：

用于視頻：video/ogg video/mp4 video/webm

用于音頻：audio/ogg audio/mpeg(mp3) audio/mav

ie : 支持：map4 不支持：ogg

谷歌: 不支持 ：map4 支持 ：ogg

屬性:

controls屬性：如果出現該屬性，則向用戶顯示控件，比如播放按鈕。autoplay屬性：如果出現該屬性，則視頻在就緒后馬上播放。

注：有的瀏覽器為了用戶體驗 不支持自動播放了；

loop屬性：重復播放屬性。muted屬性：靜音屬性。

注：autoplay + muted 可以實現自動播放

poster屬性：規定視頻正在下載時顯示的圖像，直到用戶點擊播放按鈕。 注：音頻標簽不支持此屬性

source:

標簽為媒介元素（比如 和 ）定義媒介資源。 標簽允許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持;

video補充：object-fit: cover; 可以讓圖片、視頻覆蓋整個父容器。