初識HTML5（三）HTML5基本標記的理解和使用

TML針對不同的內容有不同類型的標記，這些標記是HTML5文檔的基礎，你知道有哪些嗎？

1.單標記和雙標記

為了方便學習和理解，通常將HTML5標記分為兩大類，即雙標記和單標記。

a.雙標記：

雙標記雙標記也稱為體標記，分為開始標記和結束標記，其基本語法為：

<標記名>內容</標記名>

如：

<p>我是一個雙標記</p>

b.單標記：

單標記也稱空標記，是指用一個標記就可以完整的描述某個功能，其基本語法為：

<標記名/>

如：

<hr/>

上面hr標記表示一條水平線，后面會提到

2.注釋標記

注釋標記是HTML的一種特殊標記，它是一段便于閱讀理解的不需要在頁面中顯示的注釋文字。其基本語法格式為：

<!-- 注釋語句 -->

如：

<p>這是一段文本</p>   <!-- 這是注釋文本，不會在頁面中顯示 -->

上圖即為瀏覽器中的結果。

3.標記的屬性

HTML標記的默認樣式是無法滿足頁面開發的需求的，如果想要為某段文本設置特定的樣式，就需要用到HTML標記的屬性了，其基本語法格式為：

<標記名屬性1="屬性值1" 屬性2="屬性值2" 屬性3="屬性值3"...>內容</標記名>

下面以一個例子來展示：

網頁第一行是一個二級居中的標題，第二行是一個局中的段落，第三行是一個大小為2px，顏色為灰色的水平線，第四行是一段正常的段落，部分詞語被加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 align="center">我是居中的二級標題</h2> 
    <p align="center">我是居中的段落</p> 
    <hr size="2" color="#ccc"/>
    <p>我是一個正常的段落，這是<strong>關鍵字</strong>，其他的都是正常內容。<p/>
</body>
</html>

效果如圖所示：

多學一招（鍵值對）：

“鍵值對”簡單地說即為對“屬性”設置“值”

例如：

color = "red";width:"200px";

上面的color和width就相當于屬性1和屬性2，red和200px就是對應的屬性值1和屬性值2，如果順序出錯，是沒有效果的

總結：

在HTML開始標記中，可以通過屬性=“屬性值”的方式為標記添加屬性，其中“屬性”和“屬性值”是以“鍵值對”的形式出現的

4.HTML5文檔頭部相關標記（拓展）

1.title

一個HTML文檔只能含有一對<title></title>標記，<title></title>之間的內容將顯示在瀏覽器窗口的標題欄中。

基本語法格式：

<title>網頁標題名稱</title>

2.meta

meta定義頁面元信息：

設置網頁關鍵字》》》<meta name=”keywords” content=”JAVA、php”/>

設置網頁描述》》》<meta name=”description” content=”IT培訓教育”/>

設置網頁作者》》》<meta name=”author” content=”傳智播客”/>

設置字符集》》》<meta http-equiv=”Content-Type” content=”text/htm; charset=utf-8l”/>

設置頁面自動刷新與跳轉》》》<meta http-equiv=”refresh” content=”10;url=http://www.itcast.cn”/>

3.link

基本語法格式：

屬性名	常用屬性值	描述
href	URL	指定引用外部文檔
rel	stylesheet	指定當前文檔與引用外部文檔的關系，該屬性值通常為stylesheet，表示定義一個外部樣式表
type	text/css	引用外部文檔的類型為CSS
type	text/javascript	引用外部文檔的類型為JavaScript腳本

4.style

基本語法格式：

在HTML中使用style標記時，常常定義其屬性為type，相應的屬性值為text/css，表示使用內嵌式的CSS樣式

lt;header> 顯示網站名稱、主題或者主要信息

<nav> 網站的連接菜單

<aside> 用于側邊欄

<main> 表示頁面的主要顯示內容, 頁面有且只有一個,

不應該被任何其他結構標簽包含, 不能是以下元素的后代: section/nav/footer/header/aside/article等。

<article> 用于定義主內容區

<section> 用于章節或段落

結構化標志也可以可以自由配置，并沒有規定<aside>標記一定得寫在<article>標記下方。

article和section可以相互嵌套

<!DOCTYPE HTML>
<html>
<head>
<meta charset="GB2312"/>
<title>背包客旅行札記</title>
</head>
<body>
<header id="header">
<hgroup>
<h1>背包客旅行札記</h1>
<h4>旅行是一種休息，而休息是為了走更長遠的路</h4>
</hgroup>
<nav>
<ul>
<li><a href="#">關于背包客</a></li>
<li class="current-item"><a href="#">國內旅游</a></li>
<li><a href="#">國外旅游</a></li>
<li><a href="#">與我聯絡</a></li>
</ul>
</nav>
</header>
<article id="travel">
<section>
<h2>Hello World!</h2>
<p>四季都是結合旅行的季節。</p>
<p>不一定要花大錢，做點功課和多點自信，就能享受旅游的美好</p>
</section>
<aside>
<figure>
<img src="photo.png" alt="悠閑"/>
</figure>
</aside>
</article>
<footer>
HTML網頁練習
</footer>
</body>
</html>

注意：

<hgroup> 標簽用于對網頁或區段(section)的標題進行組合。

<figure> 標簽規定獨立的流內容(圖像、圖表、照片、代碼等等)。

HTML4.0、XHTML到HTML5，從某種意義上講，這是HTML描述性標記語言的一種更加規范的過程。因此，HTML5并沒有給開發者帶來多大的沖擊。但HTML5增加了很多非常實用的新功能和新特性，下面具體介紹HTML5的一些優勢。

1、解決了跨瀏覽器問題

在HTML5之前，各大瀏覽器廠商為了爭奪市場占有率，會在各自的瀏覽器中增加各種各樣的功能，并且不具有統一的標準。使用不同的瀏覽器，常常看到不同的頁面效果。在HTML5中，納入了所有合理的擴展功能，具備良好的跨平臺性能。針對不支持新標簽的老式IE瀏覽器，只需簡單地添加JavaScript代碼就可以使用新的元素。推薦了解黑馬程序員web前端課程。

2、新增了多個新特性

HTML語言從1.0到5.0經歷了巨大的變化，從單一的文本顯示功能到圖文并茂的多媒體顯示功能，許多特性經過多年的完善，已經發展成為一種非常重要的標記語言。HTML5新增的特性如下。

● 新的特殊內容元素，比如header、nav、section、article、footer。

● 新的表單控件，比如calendar、date、time、email、url、search。

● 用于繪畫的canvas元素。

● 用于媒介回放的video和audio元素。

● 對本地離線存儲的更好支持。

● 地理位置、拖曳、攝像頭等API。

HTML5標準的制定是以用戶優先為原則的，一旦遇到無法解決的沖突時，規范會把用戶放在第一位。另外，為了增強HTML5的使用體驗，還加強了以下兩方面的設計。

● 安全機制的設計

為確保HTML5的安全，在設計HTML5時做了很多針對安全的設計。HTML5引入了一種新的基于開源的安全模型，該模型不僅易用，而且對不同的API(Application Programming Interface，應用程序編程接口)都通用。使用這個安全模型，不需要借助于任何不安全的hack就能跨域進行安全對話。

● 表現和內容分離

表現和內容分離是HTML5設計中的另一個重要內容。實際上，表現和內容的分離早在HTML4.0中就有設計，但是分離的并不徹底。為了避免可訪問性差、代碼高復雜度、文件過大等問題，HTML5規范中更細致、清晰地分離了表現和內容。但是考慮到HTML5的兼容性問題，一些陳舊的表現和內容的代碼還是可以兼容使用的。

4. 化繁為簡的優勢

作為當下流行的通用標記語言，HTML5盡可能地簡化，嚴格遵循了“簡單至上”的原則，主要體現在這幾個方面：

● 新的簡化的字符集聲明;

● 新的簡化的DOCTYPE;

● 簡單而強大的HTML5 API;

● 以瀏覽器原生能力替代復雜的JavaScript代碼。為了實現這些簡化操作，HTML5規范需要比以前更加細致、精確。為了避免造成誤解，HTML5對每一個細節都有著非常明確的規范說明，不允許有任何的歧義和模糊出現。

喜歡記得關注一下哦。

在線咨詢

上一篇：前端性能優化(二)-瀏覽器緩存機制
下一篇：HTML表格標簽的使用方法與示例