簡單的HTML5初步入門教程

TML5 代表未來;W3C ( World Wide Web Consortium, 萬維網聯盟) 已經放棄 XHTML，從而使 HTML5 成為正式標準并得到認可。

HTML5 是下一代的 HTML。

HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準，目標是取代現有的HTML4.01和XHTML1.0標準。它希望能夠減少互聯網富應用(RIA)對Flash、Silverlight、JavaFX等的依賴，并且提供更多能有效增強網絡應用的API。

HTML 的上一個版本誕生于 1999 年。自從那以后，Web 世界已經經歷了巨變。

HTML5 仍處于完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。

HTML5 是 W3C 與 WHATWG 合作的結果。

WHATWG 致力于 web 表單和應用程序，而 W3C 專注于 XHTML 2.0。在 2006 年，雙方決定進行合作，來創建一個新版本的 HTML。

為 HTML5 建立的一些規則：

新特性應該基于 HTML、CSS、DOM 以及 JavaScript。

減少對外部插件的需求(比如 Flash)

更優秀的錯誤處理

更多取代腳本的標記

HTML5 應該獨立于設備

開發進程應對公眾透明

最簡單的 HTML5 文檔

<!doctype html>

<title>A Tiny HTML Document</title>

<p>Let's rock the browser, HTML5 style.</p>

只包含一行文本的超簡單的 HTML5 文檔，它在瀏覽器中效果如下：

更常見的結構用<head>和<body>來分塊，把頁面的信息和頁面的實際內容分開，并用<html>來封裝整個文檔，現在的文檔樣子如下：

<!doctype html>

<html>

<head>

<title>A Tiny HTML Document</title>

</head>

<body>

<p>Let's rock the browser, HTML5 style.</p>

</body>

</html>

<html>、<head>和<body><HTML5 >不要求這些元素，但是這種書寫風格比較好。

<!doctype html>

第一行都必須是一個特定的文檔類型聲明，用于告訴后面的文檔標記遵循哪個標準。HTML5 的文檔類型聲明極其簡單。

字符編碼

現在大部分網站都使用 UTF-8 的編碼，這種編碼簡潔、轉換速度快，而且支持任何你想要的非英文字符。

在 HTML5 中增加字符編碼信息很簡單，在 <head>中增加 <meta>元素，如下：

<head>

<title>A Tiny HTML Document</title>

</head>

Dreamweaver 設計工具在創建新的網頁時會自動添加這個元信息，并且也會將文件保存為 UTF 編碼格式。如果你使用的是最簡單的文本編輯器，在保存的時候記得選擇正確的編碼(UTF-8)。

頁面語言

指明網頁中使用的自然語言是一種好的習慣。為給內容指定語言，可在任何元素上使用 lang 屬性。

為整個頁面添加語言說明，就是為元素指定 lang 屬性，如下代碼：

<html>

如果頁面包含多種語言的文本，那么這個信息細節對于屏幕閱讀器也是很有用的。

添加樣式表

只要是經過特意設計的專業網站，就一定會使用樣式表。指定要使用的 CSS 樣式表時，需要在 <head>中增加 <link>元素，如下：

<head>

<title>A Tiny HTML Document</title>

</head>

添加 JavaScript

在 HTML5 中添加 JavaScript 與在傳統頁面上添加差不多，例如：

<head>

<title>A Tiny HTML Document</title>

</head>

沒有必要添加 language=”JavaScript”屬性。瀏覽器假定你要使用的 JavaScript。

特別注意：

如果你要在 IE 中花大量時間測試包含 JavaScript 的頁面，還應該增加一個特殊的注釋，叫Web標志(saved from url=)，這行注釋要放在指定字符編碼元素的后面，如下：

<head>

<title>A Tiny HTML Document</title>

這條注釋告訴 IE 將頁面視為從遠程網站上下載下來的，否則，IE 會切換到一種特殊鎖定模式，彈出一條安全警告，在你點了“允許阻止的內容”按鈕之后才會執行 JavaScript 代碼。

(0014) 指的是 about:internet 字符串的長度。

最終結果

一個完整美觀的 HTML5 代碼最終如下：

<!doctype html>

<head>

<title>A Tiny HTML Document</title>

</head>

<body>

<p>Let's rock the browser, HTML5 style.</p>

</body>

</html>

微信搜索公眾號華清遠見成都中心（cdfarsight），回復免費資料，免費領取嵌入式、Java、HTML5/WEB前端開發書籍！

.標簽

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>

網頁中編寫JavaScript代碼時，需要先引入JavaScript代碼。JavaScript代碼有3種引入方式，分別是行內式、嵌入式和外鏈式，下面分別進行講解。

1.行內式

行內式是將JavaScript代碼作為HTML標簽的屬性值使用。例如，在單擊超鏈接“test”時，彈出一個警告框提示“Hello”，示例代碼如下：

<a href="javascript：alert('Hello');">test</a>

需要說明的是，行內式只有在臨時測試或者特殊情況下使用，一般情況下不推薦使用行內式，因為行內式有如下缺點。

(1)行內式可讀性較差，尤其是在HTML文件中編寫大量JavaScript代碼時，不方便閱讀。

(2)行內式在遇到多層引號嵌套的情況時，引號非常容易混淆，導致代碼出錯。

2.嵌入式

嵌入式(或稱內嵌式)使用<scrip>標簽包裹JavaScript代碼，直接編寫到HTML文件中，通常將其放到<head>標簽<body>或標簽中。<scrip>標簽的type屬性用于告知瀏覽器腳本類型，HTML.5中該屬性的默認值為“text/javascript”，因此在使用HTML5時可以省略ype屬性。嵌入式的示例代碼如下：

<script>
    JavaScript代碼
</script>

3.外鏈式

外鏈式(或稱外部式)是將JavaScript 代碼寫在一個單獨的文件中，一般使用“js”作為文件的擴展名，在HTML頁面中使用<script>標簽的src屬性引人“js”文件。外鏈式適合javascript代碼量較多的情況。在html頁面中引入“js”文件，示例代碼如下：

<script src="test.js"></script>

上述代碼表示引入當前目錄下的tesL.js文件。需要注意的是，外鏈式的標簽內不可以編寫JavaScript 代碼。

為了幫助初學者更好地理解外鏈式，下面利用外鏈式實現瀏覽網頁時在頁面中自動彈出警告框。創建Example02.html文件，引入Example02.js文件，具體代碼如例1-2所示。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="Example02.js"></script>
</body>
</html>

標簽的src屬性設置了要引入的文件為Example02.js。

創建Example02.js文件，在該文件中編寫如下代碼：

alert ('Hello JavaScript');

保存代碼，在瀏覽器中訪問Example02.html文件，頁面效果與例1-1相同。

以上講解了JavaScript的3種引入方式。現代網頁開發中提倡結構、樣式、行為的分離，即分離HTML、CSS、JavaScrixt這3部分代碼，這樣更有利于文件的維護。當需要編寫大量的、邏輯復雜的、具有特定功能的JavaScrigt代碼時，推薦使用外鏈式。外鏈式相比嵌入式，具有以下3點優勢：

(1)外鏈式存在于獨立文件中，有利于修改和維護，而嵌人式會導致HTML代碼與JavaScript代碼混合在一起。

(2)外鏈式可以利用瀏覽器緩存提高速度。例如，在多個頁面中引入相同的JavaScript文件時，打開第1個頁面后，瀏覽器將JavaScript文件緩存下來，下次打開其他頁面時就不用重新下載該文件了。

(3)外鏈式有利于HTML頁h代碼結構化，把大段的JavaScript代碼分離到HTML頁面之外，既美觀，也方便文件級別的代碼復用。

在線咨詢

上一篇：建議收藏！這4款視頻壓縮工具超贊
下一篇：加載機制：App和Web分別的加載原理&加載方案設計

您的項目需求

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

整合營銷服務商

簡單的HTML5初步入門教程

.標簽

1.1meta標簽

1.2title標簽

1.3標題

1.4布局標簽

1.5列表

1.1.1分類

1.1.1.1有序列表

1.1.1.2 無序列表

1.1.1.3定義列表

1.1.1.4列表之間可以互相嵌套

1.6超鏈接

1.6.1 作用

1.6.2 定義

1.6.3 屬性

1.6.3.1屬性1：href

1.6.3.2 屬性2：target

1.6.4其他

1.7圖片標簽

1.8內聯框架

1.8 音視頻標簽

1.8.1音頻

1.8.1.1 屬性

1.8.2視頻

2.表格table

長表格

表格樣式

3.表單（form）

屬性

4.注釋

5.屬性

6.文檔聲明

1.行內式

2.嵌入式

3.外鏈式

您的項目需求