HTML5開發(fā)文檔—3、新增的HTML5結(jié)構(gòu)標(biāo)簽

增的HTML5結(jié)構(gòu)標(biāo)簽

結(jié)構(gòu)標(biāo)簽：(塊級(jí)元素) 有意義的div

標(biāo)簽	含義
`<article>`	定義獨(dú)立的、完整的相關(guān)內(nèi)容塊
`<header>`	定義一個(gè)頁面或一個(gè)區(qū)域的頭部內(nèi)容
`<nav>`	定義導(dǎo)航類輔助內(nèi)容
`<section>`	定義一塊區(qū)域
`<aside>`	定義頁面非正式內(nèi)容部分的側(cè)邊欄
`<hgroup>`	定義h1~h6標(biāo)題組合
`<figure>`	定義元素的組合，多用于圖片與圖片描述組合
`<figcaption>`	定義 figure元素的描述
`<footer>`	定義一個(gè)頁面或一個(gè)區(qū)域的底部內(nèi)容

傳統(tǒng)div+css布局方式

HTML5布局方式

div+css布局方式和HTML5布局方式的區(qū)別、意義

小結(jié)

HTML標(biāo)簽包含結(jié)構(gòu)標(biāo)簽和基礎(chǔ)標(biāo)簽，基礎(chǔ)標(biāo)簽是在頁面制作最常使用的一些標(biāo)簽。基礎(chǔ)標(biāo)簽包含標(biāo)題標(biāo)簽（<h1>~<h6>）、換行標(biāo)簽（<br>）、段落標(biāo)簽（<p>）、水平線標(biāo)簽（<hr>）、格式標(biāo)簽及文本標(biāo)簽。表格可以把相互關(guān)聯(lián)的信息元素集中定位，使瀏覽頁面的人一目了然。表格需要通過表格標(biāo)記<table>、行標(biāo)記<tr>、單元格標(biāo)記<th>或<td>等標(biāo)記按一定的關(guān)系嵌套共同完成。通過使用框架，你可以在同一個(gè)瀏覽器窗口中顯示不止一個(gè)頁面。每份HTML文檔稱為一個(gè)框架，并且每個(gè)框架都獨(dú)立于其他的框架。

習(xí)題

1．哪一個(gè)不是HTML5新增的語義化標(biāo)記元素（B）

A．section B．head

C．a(chǎn)rticle D．a(chǎn)side

天是2022年第一天，站在2022年的開始回首整個(gè)2021年并沒有發(fā)現(xiàn)自己有很大的進(jìn)步。2022年一定要行動(dòng)起來，豐富自己。

2022年給自己定幾個(gè)目標(biāo)：

重新學(xué)習(xí)前端之路
搭建一個(gè)自己的博客網(wǎng)站 ---每周發(fā)送一至兩篇文章記錄自己重新學(xué)習(xí)前端之路
培養(yǎng)自己一個(gè)愛好
減肥
帶老婆出去旅游一趟
每月讀一本書

重學(xué)之路從HTML開始

HTML簡介

HTML的全稱為超文本標(biāo)記語言，是一種標(biāo)記語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等 HTML歷史上有如下版本： ①HTML 1.0：在1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布。 ②HTML 2.0：1995年1 1月作為RFC 1866發(fā)布，于2000年6月發(fā)布之后被宣布已經(jīng)過時(shí)。 ③HTML 3.2：1997年1月14日，W3C推薦標(biāo)準(zhǔn)。 ④HTML 4.0：1997年12月18日，W3C推薦標(biāo)準(zhǔn)。 ⑤HTML 4.01（微小改進(jìn)）：1999年12月24日，W3C推薦標(biāo)準(zhǔn)。 ⑥HTML 5：HTML5是公認(rèn)的下一代Web語言，極大地提升了Web在富媒體、富內(nèi)容和富應(yīng)用等方面的能力，被喻為終將改變移動(dòng)互聯(lián)網(wǎng)的重要推手。Internet Explorer 8及以前的版本不支持 `

HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag) <標(biāo)簽>內(nèi)容</標(biāo)簽>

HTML 元素包含了開始標(biāo)簽與結(jié)束標(biāo)簽，元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容，元素屬性是 HTML 元素提供的附加信息。

HTML基礎(chǔ)結(jié)構(gòu)

文檔聲明頭

<!DOCTYPE html> 聲明為 HTML5 文檔

頁面的根元素

<html> 元素是 HTML 頁面的根元素

頭部標(biāo)記

<head> 元素包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset="utf-8"> 定義網(wǎng)頁編碼格式為 utf-8。

瀏覽器標(biāo)簽名

<title> 元素描述了文檔的標(biāo)題，瀏覽器標(biāo)簽名，通常放到head里面

頁面主體

<body> 元素包含了可見的頁面內(nèi)容

常見的標(biāo)簽

塊級(jí)元素

塊級(jí)元素只能出現(xiàn)在 <body> 元素內(nèi)。

格式

默認(rèn)情況下，塊級(jí)元素會(huì)新起一行。

內(nèi)容模型

一般塊級(jí)元素可以包含行內(nèi)元素和其他塊級(jí)元素。這種結(jié)構(gòu)上的包含繼承區(qū)別可以使塊級(jí)元素創(chuàng)建比行內(nèi)元素更”大型“的結(jié)構(gòu)。 HTML 標(biāo)準(zhǔn)中塊級(jí)元素和行內(nèi)元素的區(qū)別至高出現(xiàn)在 4.01 標(biāo)準(zhǔn)中。在 HTML5，這種區(qū)別被一個(gè)更復(fù)雜的內(nèi)容類別 (en-US)代替。”塊級(jí)“類別大致相當(dāng)于 HTML5 中的流內(nèi)容 (en-US)類別，而”行內(nèi)“類別相當(dāng)于 HTML5 中的措辭內(nèi)容 (en-US)類別，不過除了這兩個(gè)還有其他類別。

標(biāo)簽與描述

標(biāo)簽名	描述
address	聯(lián)系方式信息
article (HTML5)	文章內(nèi)容
aside (HTML5)	伴隨內(nèi)容
blockquote	塊引用
dd	定義列表中定義條目描述
div	定義列表中定義條目描述
dl	文章內(nèi)容
fieldset	表單元素分組
figcaption (HTML5)	圖文信息組標(biāo)題
figure (HTML5)	可附標(biāo)題內(nèi)容元素
footer (HTML5)	區(qū)段尾或頁尾
form	表單
h1~h6	標(biāo)題
header (HTML5)	頁頭
hgroup (HTML5)	標(biāo)題組
hr	分割線
nav (HTML5)	導(dǎo)航
noframes	針對不支持框架的用戶的替代內(nèi)容
noscript	針對不支持客戶端腳本的用戶的替代內(nèi)容
ol	有序列表
p	段落
section (HTML5)	一個(gè)頁面區(qū)段
table	表格
tbody	表格中的主體內(nèi)容
td	表格中的單元
tfoot	表格中的表注內(nèi)容（腳注）
th	表格中的表頭單元格
thead	表格中的表頭內(nèi)容
time	日期/時(shí)間
tr	表格中的行
ul	無序列表

行內(nèi)元素

一般情況下，行內(nèi)元素只能包含數(shù)據(jù)和其他行內(nèi)元素。

格式

默認(rèn)情況下，行內(nèi)元素不會(huì)以新行開始，而塊級(jí)元素會(huì)新起一行。

標(biāo)簽與描述

標(biāo)簽名	描述
a	錨
abbr	縮寫
acronym	只取首字母的縮寫
b	粗體
bdo	文字方向
big	大號(hào)文本
br	簡單的折行
button	按鈕 (push button)
cite	引用(citation)
code	計(jì)算機(jī)代碼文本
command	命令按鈕
dfn	項(xiàng)目
del	被刪除文本
em	強(qiáng)調(diào)文本
embed	外部交互內(nèi)容或插件
i	斜體字
img	圖像
input	輸入控件
kbd	鍵盤文本
label	input 元素的標(biāo)注
map	圖像映射
mark	有記號(hào)的文本
objec	內(nèi)嵌對象
progress	任何類型的任務(wù)的進(jìn)度
q	短的引用
samp	計(jì)算機(jī)代碼樣本
select	選擇列表（下拉列表）
small	小號(hào)文本
span	文檔中的節(jié)
strong	強(qiáng)調(diào)文本
sub	下標(biāo)文本
sup	上標(biāo)文本
textarea	多行的文本輸入控件
time	日期/時(shí)間
tt	打字機(jī)文本
var	文本的變量部分
video	視頻
wbr	可能的換行符

行內(nèi)塊元素

行內(nèi)塊狀元素綜合了行內(nèi)元素和塊狀元素的特性，但是各有取舍。因此行內(nèi)塊狀元素在日常的使用中，由于其特性，使用的次數(shù)也比較多。

格式默認(rèn)情況下，行內(nèi)元素不會(huì)以新行開始，能夠識(shí)別寬高

標(biāo)簽與描述

標(biāo)簽名	描述
img	圖片
input	輸入框
textarea	多行文本

相互之間的轉(zhuǎn)換

塊級(jí)標(biāo)簽轉(zhuǎn)換為行內(nèi)標(biāo)簽：display:inline;
行內(nèi)標(biāo)簽轉(zhuǎn)換為塊級(jí)標(biāo)簽：display:block;
轉(zhuǎn)換為行內(nèi)塊標(biāo)簽：display：inline-block;

常?的meta標(biāo)簽

meta 標(biāo)簽由 name 和 content 屬性定義，用來描述網(wǎng)頁文檔的屬性，比如網(wǎng)頁的作者，網(wǎng)頁描述，關(guān)鍵詞等，除了HTTP標(biāo)準(zhǔn)固定了一些name作為大家使用的共識(shí)，開發(fā)者還可以自定義name。

常用的meta標(biāo)簽：

charset，用來描述HTML文檔的編碼類型：

<meta charset="UTF-8" >

keywords，頁面關(guān)鍵詞：

<meta name="keywords" content="關(guān)鍵詞" />

description，頁面描述：

<meta name="description" content="頁面描述內(nèi)容" />

refresh，頁面重定向和刷新：

<meta http-equiv="refresh" content="0;url=" />

viewport，適配移動(dòng)端，可以控制視口的大小和比例：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

搜索引擎索引方式：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

HTML5有哪些更新

新增語義化標(biāo)簽：nav、header、footer、aside、section、article
音頻、視頻標(biāo)簽：audio、video
數(shù)據(jù)存儲(chǔ)：localStorage、sessionStorage
canvas（畫布）、Geolocation（地理定位）、websocket（通信協(xié)議）
input標(biāo)簽新增屬性：placeholder、autocomplete、autofocus、required
history API：go、forward、back、pushstate

移除的元素有

純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;

對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；

對HTML語義化的理解

語義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化）。通俗來講就是用正確的標(biāo)簽做正確的事情。語義化的優(yōu)點(diǎn)如下：

有利于SEO，有利于搜索引擎爬蟲；
增強(qiáng)了可讀性，結(jié)構(gòu)更加清晰，便于團(tuán)隊(duì)的開發(fā)與維護(hù)。

常?的meta標(biāo)簽有哪些

參考上文

行內(nèi)元素有哪些？塊級(jí)元素有哪些？

參考上文

head 標(biāo)簽有什么作用，其中什么標(biāo)簽必不可少？

head 標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。 head 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在 Web 中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者。下面這些標(biāo)簽可用在 head 部分：base, link, meta, script, style, title 其中 title 定義文檔的標(biāo)題，它是 head 部分中唯一必需的元素。

DOCTYPE(?檔類型) 的作?

DOCTYPE是HTML5中一種標(biāo)準(zhǔn)通用標(biāo)記語言的文檔類型聲明，它的目的是告訴瀏覽器（解析器）應(yīng)該以什么樣（html或xhtml）的文檔類型定義來解析文檔，不同的渲染模式會(huì)影響瀏覽器對 CSS 代碼甚? JavaScript 腳本的解析。它必須聲明在HTML?檔的第??。瀏覽器渲染頁面的兩種模式（可通過document.compatMode獲取，比如，語雀官網(wǎng)的文檔類型是CSS1Compat）：

CSS1Compat：標(biāo)準(zhǔn)模式（Strick mode），默認(rèn)模式，瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁面。在標(biāo)準(zhǔn)模式中，瀏覽器以其支持的最高標(biāo)準(zhǔn)呈現(xiàn)頁面。
BackCompat：怪異模式(混雜模式)(Quick mode)，瀏覽器使用自己的怪異模式解析渲染頁面。在怪異模式中，頁面以一種比較寬松的向后兼容的方式顯示。

src和href的區(qū)別

src 用于替換當(dāng)前元素，href 用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。

src 是 source 的縮寫，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請求 src 資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如 js 腳本，img 圖片和 frame 等元素。 href 是 Hypertext Reference 的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接，如果在文檔中添加

Canvas和SVG的區(qū)別

SVG： SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴(kuò)展標(biāo)記語言XML描述的2D圖形的語言，SVG基于XML就意味著SVG DOM中的每個(gè)元素都是可用的，可以為某個(gè)元素附加Javascript事件處理器。在 SVG 中，每個(gè)被繪制的圖形均被視為對象。如果 SVG 對象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。其特點(diǎn)如下：

不依賴分辨率
支持事件處理器
最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）
復(fù)雜度高會(huì)減慢渲染速度（任何過度使用 DOM 的應(yīng)用都不快）
不適合游戲應(yīng)用

Canvas： Canvas是畫布，通過Javascript來繪制2D圖形，是逐像素進(jìn)行渲染的。其位置發(fā)生改變，就會(huì)重新進(jìn)行繪制。其特點(diǎn)如下：

依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結(jié)果圖像
最適合圖像密集型的游戲，其中的許多對象會(huì)被頻繁重繪注：矢量圖，也稱為面向?qū)ο蟮膱D像或繪圖圖像，在數(shù)學(xué)上定義為一系列由線連接的點(diǎn)。矢量文件中的圖形元素稱為對象。每個(gè)對象都是一個(gè)自成一體的實(shí)體，它具有顏色、形狀、輪廓、大小和屏幕位置等屬性。

漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的區(qū)別

漸進(jìn)增強(qiáng)（progressive enhancement): 主要是針對低版本的瀏覽器進(jìn)行頁面重構(gòu)，保證基本的功能情況下，再針對高級(jí)瀏覽器進(jìn)行效果、交互等方面的改進(jìn)和追加功能，以達(dá)到更好的用戶體驗(yàn)。
優(yōu)雅降級(jí) (graceful degradation)：一開始就構(gòu)建完整的功能，然后再針對低版本的瀏覽器進(jìn)行兼容。

兩者區(qū)別：

優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始的，并試圖減少用戶體驗(yàn)的供給；而漸進(jìn)增強(qiáng)是從一個(gè)非常基礎(chǔ)的，能夠起作用的版本開始的，并在此基礎(chǔ)上不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要；
降級(jí)（功能衰竭）意味著往回看，而漸進(jìn)增強(qiáng)則意味著往前看，同時(shí)保證其根基處于安全地帶。

“優(yōu)雅降級(jí)”觀點(diǎn)認(rèn)為應(yīng)該針對那些最高級(jí)、最完善的瀏覽器來設(shè)計(jì)網(wǎng)站。而將那些被認(rèn)為“過時(shí)”或有功能缺失的瀏覽器下的測試工作安排在開發(fā)周期的最后階段，并把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個(gè)版本。在這種設(shè)計(jì)范例下，舊版的瀏覽器被認(rèn)為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗(yàn)。可以做一些小的調(diào)整來適應(yīng)某個(gè)特定的瀏覽器。但由于它們并非我們所關(guān)注的焦點(diǎn)，因此除了修復(fù)較大的錯(cuò)誤之外，其它的差異將被直接忽略。

“漸進(jìn)增強(qiáng)”觀點(diǎn)則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身。內(nèi)容是建立網(wǎng)站的誘因，有的網(wǎng)站展示它，有的則收集它，有的尋求，有的操作，還有的網(wǎng)站甚至?xí)陨系姆N種，但相同點(diǎn)是它們?nèi)忌婕暗絻?nèi)容。這使得“漸進(jìn)增強(qiáng)”成為一種更為合理的設(shè)計(jì)范例。這也是它立即被 Yahoo 所采納并用以構(gòu)建其“分級(jí)式瀏覽器支持 (Graded Browser Support)”策略的原因所在。

在線咨詢

上一篇：JavaScript中必須了解的3種創(chuàng)建數(shù)組的方式
下一篇：Web前端開發(fā)基礎(chǔ)知識(shí)，設(shè)置網(wǎng)頁背景圖，如何在網(wǎng)頁中插入圖片

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5開發(fā)文檔—3、新增的HTML5結(jié)構(gòu)標(biāo)簽

重學(xué)之路從HTML開始

HTML簡介

HTML基礎(chǔ)結(jié)構(gòu)

文檔聲明頭

頁面的根元素

頭部標(biāo)記

瀏覽器標(biāo)簽名

頁面主體

常見的標(biāo)簽

塊級(jí)元素

行內(nèi)塊元素

相互之間的轉(zhuǎn)換

常?的meta標(biāo)簽

相關(guān)面試題

HTML5有哪些更新

對HTML語義化的理解

常?的meta標(biāo)簽有哪些

行內(nèi)元素有哪些？塊級(jí)元素有哪些？

head 標(biāo)簽有什么作用，其中什么標(biāo)簽必不可少？

DOCTYPE(?檔類型) 的作?

src和href的區(qū)別

Canvas和SVG的區(qū)別

漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的區(qū)別

您的項(xiàng)目需求