HTML5的文檔結構和新增標籤

時間 2019-11-09

標籤 html5 html 文檔結構新增標籤欄目 HTML5 简体版

原文原文鏈接

一．HTML5 文檔結構
1.第一步：打開開發工具，打開指定文件夾；
2.第二步：保存 index.html 文件到磁盤中，.html 是網頁後綴；
3.第三步：開始編寫 HTML5 的基本格式。
<!DOCTYPE html> //文檔類型聲明
<html lang="zh-cn"> //表示 HTML 文檔開始。1. css

<head> //包含文檔元數據開始
<meta charset="utf-8"> //聲明字符編碼
<title>基本結構</title> //設置文檔標題
</head> //包含文檔元數據結束
<body> //表示 HTML 文檔內容
<a href="http://www.baidu.com">百度</a> //一個超連接元素（標籤）
</body> //表示 HTML
</html> //表示 HTML 文檔結束html

二．文檔結構解析html5

1.Doctype
文檔類型聲明（Document Type Declaration，也稱 Doctype）。它主要告訴瀏覽器
所查看的文件類型。在以往的 HTML4.01 和 XHTML1.0 中，它表示具體的 HTML 版本和風格。
而現在 HTML5 不須要表示版本和風格了。
<!DOCTYPE html> //不分區大小寫css3

2.html 元素
首先，元素就是標籤的意思，html 元素即 html 標籤。html 元素是文檔開始和結尾的元素。它是一個雙標籤，頭尾呼應，包含內容。windows

這個元素有一個屬性和值：lang="zh-cn"，
表示文檔採用語言爲：簡體中文。
<html lang="zh-cn"> //若是是英文則爲 en’瀏覽器

簡體中文頁面：html lang=zh-cmn-Hans
繁體中文頁面：html lang=zh-cmn-Hant
英語頁面：html lang=enapp

3.head 元素
用來包含元數據內容，元數據包括：<link>、<meta>、<noscript>、<script>、
<style>、<title>。這些內容用來瀏覽器提供信息，好比 link 提供 CSS 信息，script
提供 JavaScript 信息，title 提供頁面標題等。
<head>...</head> //這些信息在頁面不可見框架

此標籤可被用於可識別 <script> 標籤但沒法支持其中的腳本的瀏覽器。工具

4.meta 元素
這個元素用來提供關於文檔的信息，起始結構有一個屬性爲：charset="utf8"。表示
告訴瀏覽器頁面採用的什麼編碼，通常來講咱們就用 utf8。固然，文件保存的時候也是
utf8，而瀏覽器也設置 utf8 便可正確顯示中文。
<meta charset="utf-8"> //除了設置編碼，還有別的

5.title 元素
這個元素很簡單，顧名思義：設置瀏覽器左上角的標題。
<title>基本結構</title>

6.body 元素
用來包含文檔內容的元素，也就是瀏覽器可見區域部分。全部的可見內容，都應該在這
個元素內部進行添加。
<body>...</body>

7.a 元素
一個超連接，後面會詳細探討。
<a href="http://www.baidu.com">百度</a>

三．元素標籤探討

HTML 是一種標記語言，剛纔的結構咱們已經詳細探討過。這裏，咱們再剖析一下這些
「標記」或者叫「標籤」，書面上常常稱做爲「元素」的東西是怎麼構成的。

1.元素
元素就是一組告訴瀏覽器如何處理一些內容的標籤。每一個元素都有一個關鍵字，好比
<body>、<title>、<meta>都是元素。不一樣的標籤名稱表明不一樣的意義，後面將會涉及到段落標籤、文本標籤、連接標籤、圖片標籤等。

元素通常分爲兩種：單標籤（空元素）和雙標籤。單標籤通常用於聲明或者插入某個元
素，好比聲明字符編碼就用<meta>，插入圖片就用<img>；雙標籤通常用於設置一段區域的內容，將其包含起來，好比段落<p>...</p>。

2.屬性和值
元素除了有單雙之分，元素的內部還能夠設置屬性和值。這些屬性值用來改變元素某些
方面的行爲。好比超連接：<a>中的 href 屬性，裏面替換網址便可連接到不一樣的網站。

四．實體
HTML 實體就是將有特殊意義的字符經過實體代碼顯示出來。
顯示結果實體名稱實體編號描述
空格
< < < 小於號
> > > 大於號
& & & 和號
" " " 引號
' ' ' 撇號
￠ ¢ ¢ 分
£ £ £ 鎊
¥ ¥ ¥ 日圓
€ € € 歐元
§ § § 小節
© © © 版權
® ® ® 註冊商標
™ ™ ™ 商標
× × × 乘號
÷ ÷ ÷ 除號

五. 新增結構標籤

article元素
表示頁面中一塊與上下文不相關的獨立內容。好比一篇文章,一篇博文,一篇論壇帖子,能夠嵌套使用的

section元素
表示頁面中的一個內容區塊,好比章節、頁眉、頁腳或頁面的其餘部分。能夠和h一、 h2……等元素結合起來使用，表示文檔結構。例：HTML5中<section>……</section>;HTML4 中<div> ……</div>。

aside元素
表示article元素內容以外的、與article元素內容相關的輔助信息。

header元素
表示頁面中一個內容區塊或真個頁面的標題。

hgroup元素
表示對真個頁面或頁面中的一個內容區塊的標題進行組合。

footer元素
表示整個頁面或頁面中一個內容區塊的腳註。通常來講，他會包含創做者的姓名、創做日期以及創做者的聯繫信息。

nav元素
表示頁面中導航連接的部分。

figure元素
表示一段獨立的流內容，通常表示文檔主體流內容中的一個獨立單元。使用figcaption元素爲figure元素組添加標題。例如：
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>

五．元數據
<meta>元素能夠定義文檔中的各類元數據，並且一個 HTML 頁面能夠包含多個<meta>
元素。
1.指定名/值元數據對
<meta name="author" content="bnbbs">
<meta name="description" content="這是一個 HTML5 頁面">
<meta name="keywords" content="html5,css3,響應式">
<meta name="generator" content="sublime text 3">
元數據名稱說明
author 當前頁面的做者
description 當前頁面的描述
keywords 當前頁面的關鍵字
generator 當前頁面的編碼工具
2.聲明字符編碼
<meta charset="utf-8">
3.模擬 HTTP 標頭字段
//5 秒跳轉到指定 URL
<meta http-equiv="refresh" content="5;http://li.cc">
//另外一種聲明字符編碼
<meta http-equiv="content-type" content="text/html charset=utf-8">
屬性值說明
refresh 從新載入當前頁面，或指定一個 URL。單位秒。
content-type 另外一種聲明字符編碼的方式

六．全局屬性
在此以前，咱們涉及到的元素都講解了它的局部數據，固然也知道一些全局屬性，好比
id。全局屬性是全部元素共有的行爲，HTML5 還提供了一些其餘的全局屬性。
1.id 屬性
<p id="abc">段落</p>
解釋： id 屬性給元素分配一個惟一標識符。這種標識符一般用來給 CSS 和 JavaScript
調用選擇元素。一個頁面只能出現一次同一個 id 名稱。
2.class 屬性
<p class="abc">段落</p>
<p class="abc">段落</p>
<p class="abc">段落</p>
解釋：class 屬性用來給元素歸類。經過是文檔中某一個或多個元素同時設置 CSS 樣
式。
3.accesskey 屬性
<input type="text" name="user" accesskey="n">
解釋：快捷鍵操做，windows 下 alt+指定鍵，前提是瀏覽器 alt 並不衝突。
4.contenteditable 屬性
<p contenteditable="true">我能夠修改嗎</p>
解釋：讓文本處於可編輯狀態，設置 true 則能夠編輯，false 則不可編輯。或者直接
設置屬性。
5.dir 屬性
<p dir="rtl">文字到右邊了</p>
解釋：讓文本從左到右（ltr），仍是從右到左（rtl）。
6.hidden 屬性
<p hidden>文字到右邊了</p>
解釋：隱藏元素。
7.lang 屬性
<p lang="en">HTML5</p>
解釋：能夠局部設置語言。
8.title 屬性
<p title="HTML5 教程">HTML5</p>
解釋：對元素的內容進行額外的提示。
9.tabindex 屬性
<input type="text" name="user" tabindex="2">
<input type="text" name="user" tabindex="1">
解釋：表單中按下 tab 鍵，實現獲取焦點的順序。若是是-1，則不會被選中。
10.style 屬性
<p style="color:red;">CSS 樣式</p>
解釋：設置元素行內 CSS 樣式。

七．其它新增標籤

1.details

定義和用法

<details> 標籤用於描述文檔或文檔某個部分的細節。

目前只有 Chrome 支持 <details> 標籤。

2.embed

<embed> 標籤訂義嵌入的內容，定義外部交互內容或插件。
HTML5: <embed src="horse.wav" />
HTML4:

3.range

4.autofocus

5. mark

<mark>主要用來在視覺上向用戶呈現那些須要突出的文字。<mark>標籤的一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。
HTML5: <mark></mark>
HTML4: <span></span>

6. summary

<summary> 標籤包含 details 元素的標題，」details」元素用於描述有關文檔或文檔片斷的詳細信息。」summary」元素應該是「details」元素的第一個子元素。
HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4: none