整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          關于 HTML5 你需要了解的基礎知識

          TML5 是第五個且是當前的 HTML 版本,它是用于在萬維網上構建和呈現內容的標記語言。本文將幫助讀者了解它。 -- Palak Shah

          本文導航
          • -新標簽和元素 …… 08%

          • -HTML5 的高級功能 …… 16%

          • -地理位置 …… 16%

          • -網絡存儲 …… 33%

          • -應用緩存(AppCache) …… 44%

          • -視頻 …… 50%

          • -音頻 …… 61%

          • -畫布(Canvas) …… 71%

          • -HTML5 工具 …… 78%

          編譯自: http://opensourceforu.com/2017/06/introduction-to-html5/

          作者: Palak Shah

          譯者: geekpi

          HTML5 是第五個且是當前的 HTML 版本,它是用于在萬維網上構建和呈現內容的標記語言。本文將幫助讀者了解它。

          HTML5 通過 W3C 和Web 超文本應用技術工作組Web Hypertext Application Technology Working Group之間的合作發展起來。它是一個更高版本的 HTML,它的許多新元素可以使你的頁面更加語義化和動態。它是為所有人提供更好的 Web 體驗而開發的。HTML5 提供了很多的功能,使 Web 更加動態和交互。

          HTML5 的新功能是:

          • 新標簽,如 <header> 和 <section>

          • 用于 2D 繪圖的 <canvas> 元素

          • 本地存儲

          • 新的表單控件,如日歷、日期和時間

          • 新媒體功能

          • 地理位置

          HTML5 還不是正式標準(LCTT 譯注:HTML5 已于 2014 年成為“推薦標準”),因此,并不是所有的瀏覽器都支持它或其中一些功能。開發 HTML5 背后最重要的原因之一是防止用戶下載并安裝像 Silverlight 和 Flash 這樣的多個插件。

          新標簽和元素

          • 語義化元素: 圖 1 展示了一些有用的語義化元素。

          • 表單元素: HTML5 中的表單元素如圖 2 所示。

          • 圖形元素: HTML5 中的圖形元素如圖 3 所示。

          • 媒體元素: HTML5 中的新媒體元素如圖 4 所示。

          圖 1:語義化元素

          圖 2:表單元素

          圖 3:圖形元素

          圖 4:媒體元素

          HTML5 的高級功能

          地理位置

          這是一個 HTML5 API,用于獲取網站用戶的地理位置,用戶必須首先允許網站獲取他或她的位置。這通常通過按鈕和/或瀏覽器彈出窗口來實現。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。

          地理位置的一些用途是:

          • 公共交通網站

          • 出租車及其他運輸網站

          • 電子商務網站計算運費

          • 旅行社網站

          • 房地產網站

          • 在附近播放的電影的電影院網站

          • 在線游戲

          • 網站首頁提供本地標題和天氣

          • 工作職位可以自動計算通勤時間

          工作原理: 地理位置通過掃描位置信息的常見源進行工作,其中包括以下:

          • 全球定位系統(GPS)是最準確的

          • 網絡信號 - IP地址、RFID、Wi-Fi 和藍牙 MAC地址

          • GSM/CDMA 蜂窩 ID

          • 用戶輸入

          該 API 提供了非常方便的函數來檢測瀏覽器中的地理位置支持:

          if (navigator.geolocation) {

          // do stuff

          }

          getCurrentPosition API 是使用地理位置的主要方法。它檢索用戶設備的當前地理位置。該位置被描述為一組地理坐標以及航向和速度。位置信息作為位置對象返回。

          語法是:

          getCurrentPosition(showLocation, ErrorHandler, options);
          • showLocation:定義了檢索位置信息的回調方法。

          • ErrorHandler(可選):定義了在處理異步調用時發生錯誤時調用的回調方法。

          • options (可選): 定義了一組用于檢索位置信息的選項。

          我們可以通過兩種方式向用戶提供位置信息:測地和民用。

          1. 描述位置的測地方式直接指向緯度和經度。

          2. 位置信息的民用表示法是人類可讀的且容易理解。

          如下表 1 所示,每個屬性/參數都具有測地和民用表示。

          圖 5 包含了一個位置對象返回的屬性集。

          圖5:位置對象屬性

          網絡存儲

          在 HTML 中,為了在本機存儲用戶數據,我們需要使用 JavaScript cookie。為了避免這種情況,HTML5 已經引入了 Web 存儲,網站利用它在本機上存儲用戶數據。

          與 Cookie 相比,Web 存儲的優點是:

          • 更安全

          • 更快

          • 存儲更多的數據

          • 存儲的數據不會隨每個服務器請求一起發送。只有在被要求時才包括在內。這是 HTML5 Web 存儲超過 Cookie 的一大優勢。

          有兩種類型的 Web 存儲對象:

          1. 本地 - 存儲沒有到期日期的數據。

          2. 會話 - 僅存儲一個會話的數據。

          如何工作: localStorage 和 sessionStorage 對象創建一個 key=value 對。比如: key="Name", value="Palak"。

          這些存儲為字符串,但如果需要,可以使用 JavaScript 函數(如 parseInt() 和 parseFloat())進行轉換。

          下面給出了使用 Web 存儲對象的語法:

          • 存儲一個值:

          • localStorage.setItem("key1", "value1");

          • localStorage["key1"] = "value1";

          • 得到一個值:

          • alert(localStorage.getItem("key1"));

          • alert(localStorage["key1"]);

          • 刪除一個值: -removeItem("key1");

          • 刪除所有值:

          • localStorage.clear();

          應用緩存(AppCache)

          使用 HTML5 AppCache,我們可以使 Web 應用程序在沒有 Internet 連接的情況下脫機工作。除 IE 之外,所有瀏覽器都可以使用 AppCache(截止至此時)。

          應用緩存的優點是:

          • 網頁瀏覽可以脫機

          • 頁面加載速度更快

          • 服務器負載更小

          cache manifest 是一個簡單的文本文件,其中列出了瀏覽器應緩存的資源以進行脫機訪問。 manifest 屬性可以包含在文檔的 HTML 標簽中,如下所示:

          <html manifest="test.appcache">

          ...

          </html>

          它應該在你要緩存的所有頁面上。

          緩存的應用程序頁面將一直保留,除非:

          1. 用戶清除它們

          2. manifest 被修改

          3. 緩存更新

          視頻

          在 HTML5 發布之前,沒有統一的標準來顯示網頁上的視頻。大多數視頻都是通過 Flash 等不同的插件顯示的。但 HTML5 規定了使用 video 元素在網頁上顯示視頻的標準方式。

          目前,video 元素支持三種視頻格式,如表 2 所示。

          下面的例子展示了 video 元素的使用:

          <! DOCTYPE HTML>

          <html>

          <body>

          <video src=" vdeo.ogg" width="320" height="240" controls="controls">

          This browser does not support the video element.

          </video>

          </body>

          </html>

          例子使用了 Ogg 文件,并且可以在 Firefox、Opera 和 Chrome 中使用。要使視頻在 Safari 和未來版本的 Chrome 中工作,我們必須添加一個 MPEG4 和 WebM 文件。

          video 元素允許多個 source 元素。source 元素可以鏈接到不同的視頻文件。瀏覽器將使用第一個識別的格式,如下所示:

          <video width="320" height="240" controls="controls">

          <source src="vdeo.ogg" type="video/ogg" />

          <source src=" vdeo.mp4" type="video/mp4" />

          <source src=" vdeo.webm" type="video/webm" />

          This browser does not support the video element.

          </video>

          圖6:Canvas 的輸出

          音頻

          對于音頻,情況類似于視頻。在 HTML5 發布之前,在網頁上播放音頻沒有統一的標準。大多數音頻也通過 Flash 等不同的插件播放。但 HTML5 規定了通過使用音頻元素在網頁上播放音頻的標準方式。音頻元素用于播放聲音文件和音頻流。

          目前,HTML5 audio 元素支持三種音頻格式,如表 3 所示。

          audio 元素的使用如下所示:

          <! DOCTYPE HTML>

          <html>

          <body>

          <audio src=" song.ogg" controls="controls">

          This browser does not support the audio element.

          </video>

          </body>

          </html>

          此例使用 Ogg 文件,并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未來版本中使 audio 工作,我們必須添加一個 MP3 和 Wav 文件。

          audio 元素允許多個 source 元素,它可以鏈接到不同的音頻文件。瀏覽器將使用第一個識別的格式,如下所示:

          <audio controls="controls">

          <source src="song.ogg" type="audio/ogg" />

          <source src="song.mp3" type="audio/mpeg" />

          This browser does not support the audio element.

          </audio>

          畫布(Canvas)

          要在網頁上創建圖形,HTML5 使用 畫布 API。我們可以用它繪制任何東西,并且它使用 JavaScript。它通過避免從網絡下載圖像而提高網站性能。使用畫布,我們可以繪制形狀和線條、弧線和文本、漸變和圖案。此外,畫布可以讓我們操作圖像中甚至視頻中的像素。你可以將 canvas 元素添加到 HTML 頁面,如下所示:

          <canvas id="myCanvas" width="200" height="100"></canvas>

          畫布元素不具有繪制元素的功能。我們可以通過使用 JavaScript 來實現繪制。所有繪畫應在 JavaScript 中。

          <script type="text/javascript">

          var c=document.getElementById("myCanvas");

          var cxt=c.getContext("2d");

          cxt.fillStyle="blue";

          cxt.storkeStyle = "red";

          cxt.fillRect(10,10,100,100);

          cxt.storkeRect(10,10,100,100);

          </script>

          以上腳本的輸出如圖 6 所示。

          你可以繪制許多對象,如弧、圓、線/垂直梯度等。

          HTML5 工具

          為了有效操作,所有熟練的或業余的 Web 開發人員/設計人員都應該使用 HTML5 工具,當需要設置工作流/網站或執行重復任務時,這些工具非常有幫助。它們提高了網頁設計的可用性。

          以下是一些幫助創建很棒的網站的必要工具。

          • HTML5 Maker: 用來在 HTML、JavaScript 和 CSS 的幫助下與網站內容交互。非常容易使用。它還允許我們開發幻燈片、滑塊、HTML5 動畫等。

          • Liveweave: 用來測試代碼。它減少了保存代碼并將其加載到屏幕上所花費的時間。在編輯器中粘貼代碼即可得到結果。它非常易于使用,并為一些代碼提供自動完成功能,這使得開發和測試更快更容易。

          • Font dragr: 在瀏覽器中預覽定制的 Web 字體。它會直接載入該字體,以便你可以知道看起來是否正確。也提供了拖放界面,允許你拖動字形、Web 開放字體和矢量圖形來馬上測試。

          • HTML5 Please: 可以讓我們找到與 HTML5 相關的任何內容。如果你想知道如何使用任何一個功能,你可以在 HTML Please 中搜索。它提供了支持的瀏覽器和設備的有用資源的列表,語法,以及如何使用元素的一般建議等。

          • Modernizr: 這是一個開源工具,用于給訪問者瀏覽器提供最佳體驗。使用此工具,你可以檢測訪問者的瀏覽器是否支持 HTML5 功能,并加載相應的腳本。

          • Adobe Edge Animate: 這是必須處理交互式 HTML 動畫的 HTML5 開發人員的有用工具。它用于數字出版、網絡和廣告領域。此工具允許用戶創建無瑕疵的動畫,可以跨多個設備運行。

          • Video.js: 這是一款基于 JavaScript 的 HTML5 視頻播放器。如果要將視頻添加到你的網站,你應該使用此工具。它使視頻看起來不錯,并且是網站的一部分。

          • The W3 Validator: W3 驗證工具測試 HTML、XHTML、SMIL、MathML 等中的網站標記的有效性。要測試任何網站的標記有效性,你必須選擇文檔類型為 HTML5 并輸入你網頁的 URL。這樣做之后,你的代碼將被檢查,并將提供所有錯誤和警告。

          • HTML5 Reset: 此工具允許開發人員在 HTML5 中重寫舊網站的代碼。你可以使用這些工具為你網站的訪問者提供一個良好的網絡體驗。


          Palak Shah

          作者是高級軟件工程師。她喜歡探索新技術,學習創新概念。她也喜歡哲學。你可以通過 palak311@gmail.com[1] 聯系她。


          via: http://opensourceforu.com/2017/06/introduction-to-html5/

          作者:Palak Shah[2] 譯者:geekpi 校對:wxy

          本文由 LCTT 原創編譯,Linux中國 榮譽推出

          點擊“了解更多”可訪問文內鏈接

          tml5文件分割上傳解決方案

          html5提供的文件API中可以輕松的對文件進行分割切片, 然后通過javascript異步處理向服務器傳輸數據, 突破對大文件上傳的限制, 同時異步處理在一定程度上也提高了文件上傳的效率。用戶體驗上也優于前述方案。

          index.html

          <!DOCTYPE html>
          <html>
          <head lang="en">
          <meta charset="UTF-8">
          <title>大文件上傳實例</title>
          <script type="text/javascript">
              const BYTES_PER_CHUNK = 1024 * 1024; // 每個文件切片大小定為1MB .
              var slices;
              var totalSlices;
              //發送請求
              function sendRequest() {
                  var blob = document.getElementById('file').files[0];
                  var start = 0;
                  var end;
                  var index = 0;
                  // 計算文件切片總數
                  slices = Math.ceil(blob.size / BYTES_PER_CHUNK);
                  totalSlices= slices;
                  while(start < blob.size) {
                  end = start + BYTES_PER_CHUNK;
                  if(end > blob.size) {
                      end = blob.size;
                  }
                  uploadFile(blob, index, start, end);
                  start = end;
                  index++;
                  }
              }
              //上傳文件
              function uploadFile(blob, index, start, end) {
                  var xhr;
                  var fd;
                  var chunk;
                  xhr = new XMLHttpRequest();
                  xhr.onreadystatechange = function() {
                  if(xhr.readyState == 4) {
                  if(xhr.responseText) {
                      alert(xhr.responseText);
                  }
                  slices--;
                  // 如果所有文件切片都成功發送,發送文件合并請求。
                  if(slices == 0) {
                      mergeFile(blob);
                      alert('文件上傳完畢');
                  }
                  }
                  };
                  chunk =blob.slice(start,end);//切割文件
                  //構造form數據
                  fd = new FormData();
                  fd.append("file", chunk);
                  fd.append("name", blob.name);
                  fd.append("index", index);
                  xhr.open("POST", "upload.php", true);
                  //設置二進制文邊界件頭
                  xhr.setRequestHeader("X_Requested_With", location.href.split("/")[3].replace(/[^a-z]+/g, '$'));
                  xhr.send(fd);
              }
              function mergeFile(blob) {
                  var xhr;
                  var fd;
                  xhr = new XMLHttpRequest();
                  fd = new FormData();
                  fd.append("name", blob.name);
                  fd.append("index", totalSlices);
                  xhr.open("POST", "merge.php", true);
                  xhr.setRequestHeader("X_Requested_With", location.href.split("/")[3].replace(/[^a-z]+/g, '$'));
                  xhr.send(fd);
              }
          </script>
          </head>
          <body>
          <input type="file" id="file"/>
          <button onclick="sendRequest()">上傳</button>
          </body>
          </html>

          upload.php

          <?php
          //省略了文件接收判斷isset部分
          //當前目錄下建立一個uploads文件夾
          //接收文件名時進行轉碼,防止中文亂碼。
          $target = "uploads/" .iconv("utf-8","gbk",$_POST["name"]) . '-' . $_POST['index'];
          move_uploaded_file($_FILES['file']['tmp_name'], $target);
          // Might execute too quickly.
          sleep(1);
          ?>

          merge.php

          <?php
          //文件合并
          $target = "uploads/" .iconv("utf-8","gbk",$_POST["name"]);
          $dst = fopen($target, 'wb');
          for($i = 0; $i < $_POST['index']; $i++) {
          $slice = $target . '-' . $i;
          $src = fopen($slice, 'rb');
          stream_copy_to_stream($src, $dst);
          fclose($src);
          unlink($slice);
          }
          fclose($dst);

          關鍵函數stream_copy_to_stream()

          int stream_copy_to_stream ( resource $source , resource $dest [, int $maxlength = -1 [, int $offset = 0 ]] )

          <?php
          $src = fopen('http://www.example.com', 'r');
          $dest1 = fopen('first1k.txt', 'w');
          $dest2 = fopen('remainder.txt', 'w');
          echo stream_copy_to_stream($src, $dest1, 1024) . " bytes copied to first1k.txt\n";
          echo stream_copy_to_stream($src, $dest2) . " bytes copied to remainder.txt\n";
          ?>
          var blob = document.getElementById('file').files[0];
          console.dir(blob);

          相關的屬性如下:

          lastModified: 1511081596000

          lastModifiedDate: Sun Nov 19 2017 16:53:16 GMT+0800 (中國標準時間) {}

          name: "IMG_20171119_165316.jpg"

          size: 4383101

          type: "image/jpeg"

          slice: ? slice() 用于切割文件

          • 文本標記語言(英文HyperText Markup Language,簡稱:HTML)是一種用于創建網頁的標準標記語言!
          • 對于中文網頁需要使用<meta charset='utf-8'>聲明編碼,否則會出現亂碼。有些瀏覽器(如360瀏覽器)會設置GBK為默認編碼,則你需要設置為<meta charset='gbk'>
            例子模板
          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>HTML中文網(html.cn)</title>
          </head>
          <body>
              <h1>我的第一個標題</h1>
              <p>我的第一個段落。</p>
          </body>
          </html>

          解析

          <!DOCTYPE html> 聲明為 HTML5 文檔
          <html> 元素是 HTML 頁面的根元素
          <head> 元素包含了文檔的元(meta)數據,如 <meta charset="utf-8"> 定義網頁編碼格式為 utf-8。
          <title> 元素描述了文檔的標題
          <body> 元素包含了可見的頁面內容
          <h1> 元素定義一個大標題
          <p> 元素定義一個段落

          什么是HTML?

          • HTML 是用來描述網頁的一種語言。
          • HTML 指的是超文本標記語言:HyperText Markup Language
          • HTML 不是一種編程語言,而是一種標記語言
          • 標記語言是一套標記標簽 (markup tag)
          • HTML 使用標記標簽來描述網頁
          • HTML 文檔包含了HTML 標簽及文本內容
          • HTML文檔也叫做 web 頁面

          HTML 標簽

          HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
          HTML 標簽是由尖括號包圍的關鍵詞,比如
          <html>
          HTML 標簽通常是成對出現的,比如
          <b></b>
          標簽對中的第一個標簽是開始標簽,第二個標簽是結束標簽
          開始和結束標簽也被稱為開放標簽和閉合標簽
          <標簽>內容</標簽>

          HTML 元素

          “HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.
          但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽,如下實例:
          HTML 元素:
          <p>這是一個段落。</p>

          HTML 頭部元素

          頭部元素包含關于文檔的概要信息,也稱為元信息(meta-information)。Meta 意為“關于某方面的信息”。
          可以這么說,元數據(meta-data)是關于數據的信息,而元信息是關于信息的信息。

          HTML <HEAD> 元素

          <head> 元素包含了所有的頭部標簽元素。在 元素中你可以插入腳本(scripts), 樣式文件(CSS),及各種meta信息。
          可以添加在頭部區域的元素標簽為:
          <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

          HTML <TITLE> 元素

          <title> 標簽定義了不同文檔的標題。
          <title> 在 HTML/XHTML 文檔中是必須的。
          <title> 元素:
          1.定義了瀏覽器工具欄的標題
          2.當網頁添加到收藏夾時,顯示在收藏夾中的標題
          3.顯示在搜索引擎結果頁面的標題

          HTML <BASE> 元素

          <base> 標簽描述了基本的鏈接地址/鏈接目標,該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:

          <head>
          <base href="http://www.html.cn/images/" target="_blank">
          </head>

          HTML <LINK> 元素

          <link> 標簽定義了文檔與外部資源之間的關系。
          <link> 標簽通常用于鏈接到樣式表:

          <head>
          <link rel="stylesheet" type="text/css" href="mystyle.css">
          </head>
          

          HTML <STYLE> 元素

          <style> 標簽定義了HTML文檔的樣式文件引用地址.
          <style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:

          <head>
          <style type="text/css">
          body {background-color:yellow}
          p {color:blue}
          </style>
          </head>

          HTML <META> 元素

          meta標簽描述了一些基本的元數據。
          <meta> 標簽提供了元數據.元數據也不顯示在頁面上,但會被瀏覽器解析。
          META 元素通常用于指定網頁的描述,關鍵詞,文件的最后修改時間,作者,和其他元數據。
          元數據可以使用于瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他Web服務。
          <meta> 一般放置于 <head> 區域

          <META> 標簽- 使用實例

          • 為搜索引擎定義關鍵詞:
            <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
          • 為網頁定義描述內容:
            <meta name="description" content="免費 Web & 編程 教程">
          • 定義網頁作者:
            <meta name="author" content="HTML">
          • 每30秒鐘刷新當前頁面:
            <meta http-equiv="refresh" content="30">

          HTML <SCRIPT> 元素

          <script>標簽用于加載腳本文件,如: JavaScript。
          <script> 元素在以后的章節中會詳細描述。

          HTML head 元素

          標簽

          描述

          <head>

          定義了文檔的信息

          <title>

          定義了文檔的標題

          <base>

          定義了頁面鏈接標簽的默認鏈接地址

          <link>

          定義了一個文檔和外部資源之間的關系

          <meta>

          定義了HTML文檔中的元數據

          <script>

          定義了客戶端的腳本文件

          <style>

          定義了HTML文檔的樣式文件

          HTML 元素

          • HTML元素指的是從開始標簽(start tag)到結束標簽(end tag)的所有代碼。例:

          開始標簽

          元素內容

          結束標簽

          <p>

          這是一個段落

          </p>

          <a href="default.html">

          這是一個鏈接

          </a>

          <br>

          換行


          • 說明:HTML 文檔是由 HTML 元素定義的
          • 注:開始標簽常被稱為起始標簽(opening tag),結束標簽常稱為閉合標簽(closing tag)。

          元素語法

          • HTML 元素以開始標簽起始
          • HTML 元素以結束標簽終止
          • 元素的內容是開始標簽與結束標簽之間的內容
          • 某些 HTML 元素具有空內容(empty content)
          • 空元素在開始標簽中進行關閉(以開始標簽的結束而結束)
          • 大多數 HTML 元素可擁有屬性
          • 注釋: 您將在本教程的下一章中學習更多有關屬性的內容。
          • 嵌套的 HTML 元素
          • HTML 文檔由嵌套的 HTML 元素構成。大多數 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
          • 空元素
          • 沒有內容的 HTML 元素被稱為空元素??赵厥窃陂_始標簽中關閉的。
          • <br> 就是沒有關閉標簽的空元素(<br> 標簽定義換行)。
          • 在 XHTML、XML 以及未來版本的 HTML 中,所有元素都必須被關閉。
          • 在開始標簽中添加斜杠,比如 <br />,是關閉空元素的正確方法,HTML、XHTML 和 XML 都接受這種方式。
          • 即使 <br> 在所有瀏覽器中都是有效的,但使用 <br /> 其實是更長遠的保障。

          注釋標簽<!--...-->

          HTML注釋標簽<!--...-->用來在源文檔中插入注釋。注釋不會在瀏覽器中顯示??墒褂米⑨寣δ拇a進行解釋,這樣做有助于您在以后的時間對代碼的編輯。特別是代碼量很大的情況下很有用

          標簽定義及使用說明

          • <!--...--> 注釋標簽用來在源文檔中插入注釋。注釋不會在瀏覽器中顯示。
          • 您可使用注釋對您的代碼進行解釋,這樣做有助于您在以后的時間對代碼的編輯。特別是代碼量很大的情況下很有用。
          • 您也可以在注釋內容存儲針對程序所定制的信息。在這種情況下,這些信息對用戶是不可見的,但是對程序來說是可用的。一個好的習慣是把注釋或樣式元素放入注釋文本中,這樣就可避免不支持腳本或樣式的老瀏覽器把它們顯示為純文本。
          <script type="text/javascript">
          <!--
          function displayMsg()
          {
            alert("Hello World!")
          }
          //-->
          </script>
          • 注釋:命令行最后的兩個正斜杠(//)是 JavaScript 注釋符號。這確保了 JavaScript 不會執行 –> 標簽。
          • 除了在源文檔中有非常明顯的作用外,許多 Web 服務器也利用注釋來實現文檔服務端軟件特有的特性。這些服務器可以掃描文檔,從傳統的 HTML/XHTML 注釋中找到特定的字符序列,然后再根據嵌在注釋中的命令采取相應的動作。這些動作可能是簡單地包括其他文件中的文本(即所謂的服務器端包含,server-inside include),也可能是復雜地執行其他命令去動態生成文檔的內容。

          HTML 段落與文字

          標題

          • 在 HTML 文檔中,標題很重要。標題(Heading)是通過 <h1> - <h6> 等標簽進行定義的。其中<h1> 定義最大的標題,<h6> 定義最小的標題
          • HTML中的標題標簽通過<h1>-<h6>來設置,越往下標題越小

          段落

          • 在HTML中段落是通過p標簽來定義的,它可以將HTML文檔分割為若干段落部分。因為p標簽是塊級元素,所以瀏覽器會自動地在段落的前后添加空行。
          • 注意: 因為p標簽是塊級元素,所以瀏覽器會自動地在段落的前后添加空行
          • 我們可以通過<br/>標簽來對段落進行換行
          • 如果希望在不產生一個新段落的情況下進行換行,就可以使用<br /> 標簽,注意它是一個單標簽。

          文本格式化

          • HTML可定義很多供格式化輸出的元素,例:使用標簽 <b>(“bold”) 與 <i>(“italic”) 對輸出的文本進行格式,從而顯示粗體 或者 斜體
            示例:
          <!DOCTYPE html>
          <html>
          <head> 
          <meta charset="utf-8"> 
          <title>HTML教程(html.cn)</title> 
          </head> 
          <body>
          <b>加粗文本</b><br><br>
          <i>斜體文本</i><br><br>
          <code>電腦自動輸出</code><br><br>
          這是 <sub> 下標</sub> 和 <sup> 上標</sup>
          </body>
          </html>

          HTML 文本格式化標簽

          標簽

          描述

          <b>

          定義粗體文本

          <em>

          定義著重文字

          <i>

          定義斜體字

          <small>

          定義小號字

          <strong>

          定義加重語氣

          <sub>

          定義下標字

          <sup>

          定義上標字

          <ins>

          定義插入字

          <del>

          定義刪除字

          HTML”計算機輸出”標簽

          標簽

          描述

          <kbd>

          定義鍵盤碼

          <samp>

          定義計算機代碼樣本

          <var>

          定義變量

          <pre>

          定義預格式文本

          <code>

          定義計算機代碼

          HTML 引文,引用,及標簽定義

          標簽

          描述

          <abbr>

          定義縮寫

          <address>

          定義地址

          <bdo>

          定義文字方向

          <blockquote>

          定義長的引用

          <q>

          定義短的引用語

          <cite>

          定義引用、引證

          <dfn>

          定義一個定義項目

          區塊

          • 大多數 HTML 元素被定義為塊級元素或內聯元素。塊級元素在瀏覽器顯示時,通常會以新行來開始(和結束);而內聯元素則不會。

          HTML 區塊元素

          可以通過 <div> 和 <span> 將 HTML 元素組合起來

          HTML塊級元素

          塊級元素在瀏覽器顯示時,通常會以新行來開始和結束 - 例:<h1>, <p>, <ul>, <table>

          HTML內聯元素

          內聯元素在顯示時通常不會以新行開始 - 例:<b>, <td>, <a>, <img>

          HTML <div> 元素

          HTML <div> 元素是塊級元素,瀏覽器會在其前后顯示折行 - 如果與 CSS 一同使用,<div> 元素可用于對大的內容塊設置樣式屬性。 - <div> 元素的另一個常見的用途是文檔布局

          HTML <span> 元素

          HTML <span> 元素是內聯元素,可用作文本的容器 - 與 CSS 一同使用時,<span> 元素可用于為部分文本設置樣式屬性

          HTML字符實體

          • 在 HTML 中,某些字符是預留的,這些預留字符必須被替換為字符實體;而,一些在鍵盤上找不到的字符也可以使用字符實體來替換。

          HTML 實體
          在 HTML 中,某些字符是預留的。
          比如在 HTML 中不能使用小于號(<)和大于號(>)因為瀏覽器會誤認為它們是標簽,所以希望能正確地顯示預留字符,我們必須在 HTML 源代碼中使用字符實體(character entities)。
          字符實體類似這樣

          &entity_name;

          &#entity_number;

          HTML 字符實體
          不間斷空格
          HTML 中的常用字符實體是不間斷空格( )
          瀏覽器總是會截短 HTML 頁面中的空格,如果需要在頁面中增加空格的數量,需要使用 字符實體

          有用的字符實體

          顯示結果

          描述

          實體名稱

          實體編碼


          空格



          <

          小于號

          <

          <

          >

          大于號

          >

          >

          &

          和號

          &

          &

          引號

          "

          "

          撇號

          ' (IE不支持)

          '

          歐元

          §

          小節

          §

          §

          ?

          版權

          ?

          ?

          ?

          注冊商標

          ?

          ?

          ?

          商標

          ?

          ?

          ×

          乘號

          ×

          ×

          ÷

          除號

          ÷

          ÷

          • 注意:實體名稱對大小寫敏感

          歡迎大家提議、分享、交流、共同學習進步


          主站蜘蛛池模板: 亚洲综合一区二区精品久久| 亚洲一区二区中文| 伊人色综合一区二区三区| 国产美女一区二区三区| 久久99久久无码毛片一区二区 | 中文字幕在线观看一区二区| 亚洲国产欧美一区二区三区| 久久青草国产精品一区| 插我一区二区在线观看| 国产无吗一区二区三区在线欢 | 日韩精品一区二区三区中文3d| 人妻体内射精一区二区三区| 国产丝袜无码一区二区三区视频 | 精品人妻一区二区三区浪潮在线| 东京热无码一区二区三区av| 乱人伦一区二区三区| 色精品一区二区三区| 国产一区二区三区在线观看免费 | 变态调教一区二区三区| 国产在线观看精品一区二区三区91| 无码少妇丰满熟妇一区二区| 国产成人亚洲综合一区| 亚洲日韩一区精品射精| 国产精品无码亚洲一区二区三区 | 久久综合精品国产一区二区三区| 国产精品va一区二区三区| 国产一区二区三区日韩精品| 波多野结衣在线观看一区| 国产一区二区福利久久| 亚洲人成网站18禁止一区| 中文字幕日本一区| 无码免费一区二区三区免费播放 | 无码一区二区波多野结衣播放搜索| 中文字幕av日韩精品一区二区 | 人妻免费一区二区三区最新| 精品少妇一区二区三区视频 | 日韩少妇无码一区二区三区| 亚洲欧洲一区二区三区| 亚洲国产老鸭窝一区二区三区| 国产美女在线一区二区三区| 韩国精品一区视频在线播放|