HTML5 新增的標(biāo)簽

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

section元素

表示頁面中的一個(gè)內(nèi)容區(qū)塊,比如章節(jié)、頁眉、頁腳或頁面的其他部分。可以和h1、 h2...等元素結(jié)合起來使用，表示文檔結(jié)構(gòu)。

例：HTML5中<section>...</section>;HTML4中<div>...</div>。

article元素

表示頁面中一塊與上下文不相關(guān)的獨(dú)立內(nèi)容。比如一篇文章。

aside元素

表示article元素內(nèi)容之外的、與article元素內(nèi)容相關(guān)的輔助信息。

header元素

表示頁面中一個(gè)內(nèi)容區(qū)塊或真?zhèn)€頁面的標(biāo)題。

hgroup元素

表示對真?zhèn)€頁面或頁面中的一個(gè)內(nèi)容區(qū)塊的標(biāo)題進(jìn)行組合。

footer元素

表示整個(gè)頁面或頁面中一個(gè)內(nèi)容區(qū)塊的腳注。一般來說，他會(huì)包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者的聯(lián)系信息。

nav元素

表示頁面中導(dǎo)航鏈接的部分。

figure元素

表示一段獨(dú)立的流內(nèi)容，一般表示文檔主體流內(nèi)容中的一個(gè)獨(dú)立單元。使用figcaption元素為figure元素組添加標(biāo)題。

figure 定義媒介內(nèi)容的分組, 以及它們的標(biāo)題。

figcaption 定義 figure 元素的標(biāo)題。

例如：

<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>

HTML4中常寫作

<dl>
<h1>prc</h1>
<p>The People's Republic of China was born in 1949</p>
</dl>

新增的其他元素

video元素

定義視頻。像電影片段或其他視頻流。例：

<video src="movie.ogg" controls="controls">video元素</video>

HTML4中寫法：

<object type="video/ogg" data="move.ogv">
<param name ="src" value="movie.ogv">
</object>

audio元素

定義音頻。如音樂或其他音頻流。例：

<audio src ="someaudio.wav">audio元素</audio>

html4中寫法：

<object tyle="application/ogg" data="someaudio.wav">
<param name ="src" value= "someaudio.wav">
</object>

embed元素

用來嵌入內(nèi)容(包括各種媒體)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例：<embed src="flash.swf" />

HTML4中代碼示例<object data="flash.swf" type="application/x-shockwave-flash"><object>

mark元素

主要用來在視覺上向用戶呈現(xiàn)哪些需要突出顯示或高亮顯示的文字。典型應(yīng)用搜索結(jié)果中高亮顯示搜素關(guān)鍵字。

HTML5<mark></mark>;HTML4 <span></span>。

progress元素

表示運(yùn)行中的進(jìn)程，可以使用progress元素顯示JavaScript中耗時(shí)時(shí)間函數(shù)的進(jìn)程。等待中……、請稍后等。<progress></progress>。

time元素

表示日期或時(shí)間，也可以兩者同時(shí)。

ruby元素

定義 ruby 注釋(中文注音或字符)。

與 <ruby> 以及 <rt> 標(biāo)簽一同使用。ruby 元素由一個(gè)或多個(gè)字符(需要一個(gè)解釋/發(fā)音)和一個(gè)提供該信息的 rt 元素組成，

還包括可選的 rp 元素，定義當(dāng)瀏覽器不支持 "ruby" 元素時(shí)顯示的內(nèi)容。

<ruby>

漢朝<rt><rp>(</rp>西漢和東漢<rp>)</rp></rt>

</ruby>

rt元素

定義字符(中文注音或字符)的解釋或發(fā)音。

rp元素

在 ruby 注釋中使用, 以定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。

wbr元素

表示軟換行。與br元素的區(qū)別：br元素表示此處必須換行；wbr表示瀏覽器窗口或父級元素足弓寬時(shí)(沒必要換行時(shí))，

不換行，而寬度不夠時(shí)主動(dòng)在此處換行。

canvas元素

定義圖形，比如圖表和其他圖像。<canvas> 元素只是圖形容器(畫布)，必須使用腳本來繪制圖形。

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

command元素各版本瀏覽器支持有問題

表示命令按鈕，比如單選按鈕、復(fù)選框或按鈕。

只有當(dāng) command 元素位于 menu 元素內(nèi)時(shí)，該元素才是可見的。否則不會(huì)顯示這個(gè)元素，但是可以用它規(guī)定鍵盤快捷鍵。。

<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>

details標(biāo)簽

用于描述文檔或文檔某個(gè)部分的細(xì)節(jié) 。

可與 summary 標(biāo)簽配合使用，summary可以為 details 定義標(biāo)題。

標(biāo)題是可見的，用戶點(diǎn)擊標(biāo)題時(shí)，會(huì)顯示出 details。summary應(yīng)該是details的第一個(gè)子元素。

<details>
<summary>迪麗熱巴</summary>
<p>迪麗熱巴（Dilraba），1992年6月3日出生于新疆烏魯木齊市，中國內(nèi)地影視女演員。</p>
</details>

fieldset標(biāo)簽

組合表單中的相關(guān)元素

fieldset 標(biāo)簽用于從邏輯上將表單中的元素組合起來。

legend 標(biāo)簽為 fieldset 元素定義標(biāo)題。

<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
體重：<input type="text" />
</fieldset>
</form>

datalist標(biāo)簽

定義選項(xiàng)列表。請與 input 元素配合使用該元素，來定義 input 可能的值。

datalist 及其選項(xiàng)不會(huì)被顯示出來，它僅僅是合法的輸入值列表。使用 input 元素的 list 屬性來綁定 datalist。

<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>

datagrid標(biāo)簽如何用？

定義可選數(shù)據(jù)的列表。datagrid 作為樹列表來顯示。

如果把 multiple 屬性設(shè)置為 true，則可以在列表中選取一個(gè)以上的項(xiàng)目。

keygen標(biāo)簽如何用?

標(biāo)簽規(guī)定用于表單的密鑰對生成器字段。

當(dāng)提交表單時(shí)，私鑰存儲(chǔ)在本地，公鑰發(fā)送到服務(wù)器。

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

output標(biāo)簽

定義不同類型的輸出，比如腳本的輸出。

<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>

source標(biāo)簽

標(biāo)簽為媒介元素(比如 <video> 和 <audio>)定義媒介資源。

menu標(biāo)簽

定義菜單列表。當(dāng)希望列出表單控件時(shí)使用該標(biāo)簽。注意與nav的區(qū)別，menu專門用于表單控件。

<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>

abbr: 標(biāo)記一個(gè)縮寫

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

顯示結(jié)果

The PRC was founded in 1949.

mark標(biāo)簽

定義有記號(hào)的文本。

progress 定義任何類型的任務(wù)的進(jìn)度。

中國，北京，2016年5月13日]由華為和云適配聯(lián)合主辦，主題為"HTML5的未來，就是你！"的HTML5移動(dòng)應(yīng)用開發(fā)大賽頒獎(jiǎng)典禮今日在北京圓滿落幕。本次大賽設(shè)計(jì)的初衷即希望為廣大HTML5開發(fā)企業(yè)和個(gè)人提供一個(gè)交流和展示的平臺(tái)，讓開發(fā)者們在HTML5移動(dòng)應(yīng)用上盡情"燒腦"。對于優(yōu)秀的作品和個(gè)人，華為和云適配將給予大賽獎(jiǎng)金之外更為廣闊的展示空間和發(fā)展機(jī)會(huì)，與開發(fā)者共享移動(dòng)辦公的藍(lán)海。

本次大賽自2015年11月啟動(dòng)，歷時(shí)5個(gè)多月的時(shí)間。期間華為組織專業(yè)講師在線與開發(fā)者共同探討HTML5技術(shù)原理；通過線下沙龍的方式邀請行業(yè)領(lǐng)袖與開發(fā)者、創(chuàng)客面對面分享前沿技術(shù)理念，深入剖析市場機(jī)遇，現(xiàn)場參與人數(shù)達(dá)到150多位。到2016年4月作品提交截止日，大賽共吸引400多個(gè)開發(fā)團(tuán)體及個(gè)人參加。收到的參賽作品涵蓋了備忘錄、計(jì)算器等基礎(chǔ)辦公工具，企業(yè)IM、電子簽章等通用行業(yè)應(yīng)用，面向快消、職信監(jiān)督等垂直行業(yè)應(yīng)用。大賽評委會(huì)經(jīng)過多輪深入討論和細(xì)致評審，評選出20個(gè)優(yōu)秀作品入圍，并在今天現(xiàn)場頒獎(jiǎng)。20位優(yōu)秀作品的作者受邀齊聚一堂，共同見證、分享收獲的時(shí)刻。

個(gè)人開發(fā)者鄭張寬所設(shè)計(jì)的企業(yè)IM應(yīng)用"PenPen"榮獲此次大賽一等獎(jiǎng)，斬獲50000元現(xiàn)金大獎(jiǎng)。山西百城科技的"BB商務(wù)會(huì)簽"和永中軟件的"永中DCS"應(yīng)用則拿下獎(jiǎng)金為20000元的二等獎(jiǎng)。深圳前海圓舟科技的"柚客"、長春我們倆文化傳播公司的"職業(yè)信用監(jiān)督體系"和個(gè)人開發(fā)者李文祥的"i記事"榮獲獎(jiǎng)金為8000元的三等獎(jiǎng)。其他入圍作品的作者也在現(xiàn)場通過抽獎(jiǎng)的方式獲得Mate8、華為Watch、手環(huán)等豪華禮品。為了給開發(fā)者充分展現(xiàn)自我的機(jī)會(huì)，現(xiàn)場還安排了開發(fā)者故事分享和優(yōu)秀作品路演環(huán)節(jié)，充分展現(xiàn)參賽開發(fā)者強(qiáng)大的創(chuàng)新能力，并通過作品展示了HTML5技術(shù)在移動(dòng)化開發(fā)中的獨(dú)特優(yōu)勢。

典禮現(xiàn)場，華為邀請到了云適配CEO陳本峰、白鷺時(shí)代聯(lián)合創(chuàng)始人張翔、LAYABOX創(chuàng)始人謝成鴻、火速移動(dòng)CEO趙九州、致遠(yuǎn)軟件副總裁李平等HTML5移動(dòng)應(yīng)用開發(fā)領(lǐng)域領(lǐng)軍人物，就HTML5技術(shù)的應(yīng)用之道進(jìn)行了深入討論。相對于傳統(tǒng)的基于原生API的開發(fā)方式，HTML5在跨平臺(tái)方面具有天然的優(yōu)勢，能夠更好地解決企業(yè)移動(dòng)化過程中開發(fā)和升級維護(hù)成本高、信息割裂等問題。在未來，HTML5必將滿足從普通用戶的生活?yuàn)蕵罚狡髽I(yè)的專業(yè)移動(dòng)化辦公等全方位多領(lǐng)域的需求。

"今天的頒獎(jiǎng)典禮只是本次大賽的一個(gè)階段性成果，但它并不是休止符。我們還會(huì)繼續(xù)通過各種賽事活動(dòng)來發(fā)現(xiàn)和挖掘優(yōu)秀的開發(fā)者，并與其建立合作關(guān)系。"華為AnyOffice產(chǎn)品總監(jiān)陳愛平說。根據(jù)計(jì)劃，AnyOfficeEMM（EnterpriseMobileManagement，企業(yè)移動(dòng)管理）平臺(tái)報(bào)表插件大賽即將啟動(dòng)，而決賽則被安排在2016年8月31日-9月2日華為旗艦大會(huì)上進(jìn)行。這將是一次在更大舞臺(tái)上展示的機(jī)會(huì)，相信將會(huì)有更多的開發(fā)者在這個(gè)舞臺(tái)上一展才華。

華為的BYOD戰(zhàn)略與企業(yè)移動(dòng)化發(fā)展密切相關(guān)。華為BYOD移動(dòng)應(yīng)用聯(lián)盟經(jīng)過3年多的持續(xù)發(fā)展，目前聯(lián)盟平臺(tái)已有超過200家合作伙伴，集成各種應(yīng)用500多個(gè)，覆蓋全球超過450萬移動(dòng)終端。HTML5是未來企業(yè)移動(dòng)應(yīng)用發(fā)展的重要方向，華為已與微軟、英特爾、云適配等公司共同籌建并啟動(dòng)"中國企業(yè)級HTML5聯(lián)盟"，AnyOffice安全平臺(tái)也已全面兼容HTML5應(yīng)用。在未來，華為一方面將堅(jiān)持聚焦構(gòu)建移動(dòng)應(yīng)用基礎(chǔ)安全能力，如安全沙箱、應(yīng)用層VPN、MDM、MAM等，并以SDK的形式助力伙伴快速實(shí)現(xiàn)對安全能力的整合；另一方面，將始終堅(jiān)持移動(dòng)辦公商業(yè)生態(tài)的構(gòu)建，與開發(fā)者和合作伙伴一起推動(dòng)HTML5的市場化進(jìn)程，為企業(yè)提供更為安全、快速、高效的移動(dòng)化解決方案。

么是 HTML5？

HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)。HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。那什么又是HTML呢？HTML 是用來描述網(wǎng)頁的一種語言。HTML的上一個(gè)版本誕生于1999年。自從那以后，Web 世界已經(jīng)經(jīng)歷了巨變。HTML 指的是超文本標(biāo)記語言： Hyper Text Markup Language。HTML 不是一種編程語言，而是一種標(biāo)記語言。而標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)。HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁，HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容，因此HTML文檔也叫做 web 頁面。

HTML5 是如何創(chuàng)建的？

HTML5 是 W3C 與 WHATWG 合作的結(jié)果。W3C 致的是World Wide Web Consortium，也就是萬維網(wǎng)聯(lián)盟。而WHATWG 致 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表單和應(yīng)用程序，而 W3C 專注于 XHTML 2.0。在 2006 年的時(shí)候，雙方?jīng)Q定進(jìn)行合作，來創(chuàng)建一個(gè)新版本的 HTML。

為 HTML5 建立的一些新規(guī)則

新特性基于 HTML、CSS、DOM 以及 JavaScript；減少對外部插件的需求（比如 Flash）；更優(yōu)秀的錯(cuò)誤處理；更多取代腳本的標(biāo)記；HTML5 應(yīng)該獨(dú)立于設(shè)備；開發(fā)進(jìn)程應(yīng)對公眾透明。

為 HTML5 建立的一些新特性

用于繪畫的 canvas 元素；用于媒介回放的 video 和 audio 元素；對本地離線存儲(chǔ)得更好地支持；新的特殊內(nèi)容元素，比如 article、footer、header、nav、section新的表單控件，比如 calendar、date、time、email、url、search。

HTML 編輯器

專業(yè)的 HTML 編輯器來編輯 HTML：Adobe Dreamweaver、Microsoft Expression Web、CoffeeCup HTML Editor、Sublime Text 。不過，我們同時(shí)推薦使用文本編輯器來學(xué)習(xí) HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我們相信，使用一款簡單的文本編輯器是學(xué)習(xí) HTML 的好方法，高手們都是用記事本寫的~~~~

而本人使用的是Adobe Dreamweaver（下文中提到簡稱DW），大家可以自己嘗試各種編輯器，再選擇自己喜歡的。本教程是實(shí)用性類，不會(huì)長篇大論闡述理論，會(huì)留一些問題供大家去理解，不了解的話百度谷歌。

還需要的軟件就是瀏覽器的準(zhǔn)備，大家肯定知道什么是瀏覽器啦，現(xiàn)在谷歌，微軟新版瀏覽器以及360等眾多瀏覽器都是支持查看網(wǎng)頁源代碼的。鼠標(biāo)右鍵選擇查看源代碼即可。

學(xué)習(xí)資料推薦：

在本文中，需要理解的點(diǎn)，在下面講解中可能會(huì)混著講，所以大家要看完教程之后自己去總結(jié)。

HTML文檔是什么樣
如何新建一個(gè)HTML文檔
怎么打開HTML文檔

首先打開DW，新建一個(gè)HTML文件，就是后綴是html結(jié)尾的文件。

用DW這樣的HTML專業(yè)軟件有個(gè)好處就是新建的文件已經(jīng)自動(dòng)寫好的一個(gè)HTML文件的基本結(jié)構(gòu)。文檔標(biāo)題在頁面中間上部的標(biāo)題處可以修改，也可以保存后自己再修改。

保存名字為教程1，可以看到文件是這樣的。

之后，我們嘗試用記事本打開這個(gè)文件。

用記事本打開的樣子。跟DW打開是一樣。

在body部分輸入文字，內(nèi)容隨意，然后保存。

再用瀏覽器打開，我這邊用的谷歌瀏覽器。打開之后可以看到如下圖所示。相信大家對HTML文件已經(jīng)有了一點(diǎn)點(diǎn)概念了。

再回到DW打開，可以看到，文件下邊是代碼，上邊是結(jié)果。如果只看到代碼，這是因?yàn)樵陧撁孀笊辖莻饕晥D的方式選擇。選擇拆分即可。

在DW中新建一個(gè)文件之后，你其實(shí)就已經(jīng)看到一個(gè)HTML的基本結(jié)構(gòu)了，這是我們剛才新建的教程1

紅色的矩形框內(nèi)部的內(nèi)容，我們稱為<!DOCTYPE> 聲明

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁。網(wǎng)絡(luò)上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網(wǎng)頁內(nèi)容。

doctype 聲明是不區(qū)分大小寫的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用聲明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

查看完整網(wǎng)頁聲明類型 DOCTYPE 參考手冊。

<!DOCTYPE> 聲明之后就是 <html> .....</html> 中間的那些我們暫時(shí)忽略。這兩個(gè)尖括號(hào)之間的內(nèi)容就告訴了瀏覽器，這段內(nèi)容是html頁面的內(nèi)容。

在html頁面中，哪些是被顯示的，哪些是代碼？相信通過第一節(jié)大家已經(jīng)有所認(rèn)識(shí)了，在HTML中，標(biāo)簽是通過"< >"表現(xiàn)的。而每一個(gè)標(biāo)簽都以對應(yīng)的“</ >”來結(jié)束，如<html></html>,<head></head>,<title></title>.....。(當(dāng)然也有例外，之后再說)

接下來就是在 <html> ，</html>之間編輯整個(gè)頁面的頭部和身體了.

頭部用<head></head>來表示，之間的內(nèi)容一般包含meta 和title，meta大家可以自己去了解，如果沒有這一塊，顯示可能會(huì)出現(xiàn)亂碼。一些預(yù)先的設(shè)置都會(huì)放在頭部里，樣式表等，就像是C語言程序中的頭文件。title標(biāo)簽就是整個(gè)網(wǎng)頁的標(biāo)題。

編輯好了頭部，就進(jìn)入頁面的身體啦。用body標(biāo)簽來表示很直觀，也不需要刻意去記了。在實(shí)例1中body的內(nèi)容很簡單，只有一行文字，之后的內(nèi)容也就是教大家如何將body豐富起來~~

掌握三個(gè)標(biāo)簽

1.HTML 標(biāo)題<h1>-<h6>

2.HTML 段落<p>

3.HTML <br/>

HTML 標(biāo)題

在 HTML 文檔中，標(biāo)題很重要。

標(biāo)題是通過 <h1> - <h6> 標(biāo)簽進(jìn)行定義的.

<h1> 定義最大的標(biāo)題。 <h6> 定義最小的標(biāo)題。

看看實(shí)例效果

關(guān)于查看文件的效果，大家可以保持瀏覽器打開，當(dāng)DW中保存過文件以后，在瀏覽器中刷新一下，就可以看到效果。

HTML 段落

HTML 可以將文檔分割為若干段落。段落是通過 <p> 標(biāo)簽定義的。在<p> </p>中輸入如下內(nèi)容，并在瀏覽器打開看一下效果。

如果我縮小瀏覽器的寬度，效果如下。

現(xiàn)在大家可以發(fā)現(xiàn)，html語言是一種排版語言，他會(huì)保證你可以看到內(nèi)容的全部，隨著瀏覽器的變化，文字排版也會(huì)跟著變化。你自己敲的空行，是不會(huì)顯示出來。那么如何自己定義斷行呢？介紹一個(gè)新的標(biāo)簽<br/>

<br/>標(biāo)簽

英文brake的縮寫，很顯然，就是打斷的意思。因?yàn)檫@個(gè)標(biāo)簽是放在內(nèi)容的結(jié)尾的，所以它的開始就是結(jié)束，因此他沒有結(jié)束標(biāo)簽，所以沒有</br>,只有<br/>,大家要記清楚~

這時(shí)就能看到斷行啦。

HTML 水平線

<hr> 標(biāo)簽在 HTML 頁面中創(chuàng)建水平線。<hr>標(biāo)簽與<br>標(biāo)簽一樣，沒有結(jié)束標(biāo)簽。所以也可以寫成<hr/>.

屬性

在設(shè)置完水平線之后，我們還可以及設(shè)置水平線的寬度。

代碼<hr width=50%> 這里的50%是指頁面的50%，也可以設(shè)置一個(gè)具體的數(shù)值,比如50，是指50個(gè)像素，大家可自行嘗試。

這里的width就是這個(gè)標(biāo)簽的屬性。像這樣的屬性值，還有，align，size。但不同的效果，大家可以試試。這些效果學(xué)了CSS之后，都建議通過CSS樣式表來實(shí)現(xiàn)。

<hr width=50>設(shè)定絕對長度；

<hr align=left>設(shè)置左對齊，當(dāng)然也可以設(shè)置右對齊。

<hr size=1>這表示線寬；

曾有有一段時(shí)間屬性值“=”后面是需要加引號(hào)的，<hr width=“50”>，但現(xiàn)在所有瀏覽器都支持不加引號(hào)，大家看到有引號(hào)不要覺得是錯(cuò)誤的。

<標(biāo)簽名屬性名=color> - 指定顏色

比如我可以給水平線設(shè)置顏色

在DW中輸入color=“之后會(huì)彈出顏色選擇，可以只選擇顏色，DW會(huì)自動(dòng)生成顏色代碼。

代碼為：

<h3>第四節(jié) 水平線</h3>
<hr width=90% color=”#FF0000“>
插入一條水平線

效果如下：

字體樣式

我們會(huì)舉例說一些，但是在學(xué)習(xí)CSS之后，字體樣式等于格式有關(guān)的功能，都會(huì)通過CSS樣式表來實(shí)現(xiàn)。所以，這里大家只要稍微了解下就好。

舉幾個(gè)例子

加粗<b></b>；斜體<i></i>；下劃線<ins></ins>；變小<small></small>；在html中，標(biāo)簽是可以嵌套的。大家可以仔細(xì)對比，以下代碼，和效果。

短語格式

以下標(biāo)簽的顯示結(jié)果是由瀏覽器和樣式表決定的，這些標(biāo)簽標(biāo)識(shí)的意思而不是效果。這句話可能有一些難以理解，大家學(xué)習(xí)久了就會(huì)有所體會(huì)。

<em>強(qiáng)調(diào)</em>；<strong>著重</strong>；<dfn>definition</dfn>；<code>表示這一行是源代碼，僅用于小部分代碼。</code>；<samp>例子代碼</samp>；<kbd>用戶輸入</kbd>；<bar>變量</bar>；<site>引用</site>

我們試著輸入這些代碼。

列表

掌握幾個(gè)標(biāo)簽<ul><li><ol><dl><dt><dd>，標(biāo)簽是可以嵌套的，大家自己可以試一試。

無序列表 <ul>和<li>標(biāo)簽

<ul>un-odered list <li>list item,一項(xiàng)

將 <ul> 標(biāo)簽與 <li> 標(biāo)簽一起使用，創(chuàng)建無序列表。將<ol>標(biāo)簽與<li>標(biāo)簽一起使用，創(chuàng)建有序列表。

代碼：

ol和ul可以嵌套自動(dòng)縮進(jìn)ul縮進(jìn)每層標(biāo)記不一樣會(huì)有實(shí)心和空心等不同的標(biāo)記。

<dl>、<dd>和<dt>標(biāo)簽

定義：<dl> 標(biāo)簽定義了定義列表（definition list）。<dd> 在定義列表中定義條目的定義部分。<dt> 標(biāo)簽定義了定義列表中的項(xiàng)目（即術(shù)語部分）。

用法：<dl> 標(biāo)簽用于結(jié)合 <dt> （定義列表中的項(xiàng)目）和 <dd> （描述列表中的項(xiàng)目）。

舉例代碼：

<dl>

<dd>以視覺方式顯示信息的裝置 ... ...</dd>

</dl>

瀏覽器中的效果如下：

table 標(biāo)簽 -- 代表HTML表格

table標(biāo)簽是成對出現(xiàn)的,以<table>開始,以</table>結(jié)束
引用網(wǎng)址:http://www.dreamdu.com/xhtml/tag_table/
屬性

Common -- 一般屬性

summary -- 代表表格的摘要說明

width-- 代表表格的寬度

border -- 代表表格邊框(此屬性應(yīng)該使用CSS實(shí)現(xiàn))

cellspacing -- 代表表格邊框與表格內(nèi)容填充的距離,也是內(nèi)容填充之間的距離(此屬性應(yīng)該使用CSS實(shí)現(xiàn))

cellpadding -- 代表內(nèi)容填充的寬度(此屬性應(yīng)該使用CSS實(shí)現(xiàn))

table，中文"表格"的意思

示例

<table width="80%" border="1"> <tr> <th>www.dreamdu.com</th> <th>.com域名的數(shù)量</th> <th>.cn域名的數(shù)量</th> <th>.net域名的數(shù)量</th> </tr> <tr> <td>2003年</td> <td>1000</td> <td>2000</td> <td>3000</td> </tr> <tr> <td>2004年</td> <td>4000</td> <td>5000</td> <td>6000</td> </tr> <tr> <td>2005年</td> <td>7000</td> <td>8000</td> <td>9000</td> </tr> </table>

HTML表格示例 -- 可以嘗試編輯

HTML table 標(biāo)簽示例
HTML th 標(biāo)簽示例
HTML cellpadding cellspacing 屬性示例
HTML rowspan 屬性示例
HTML colspan 屬性示例
HTML colgroup col示例

說明

width-- 是表格的寬度,可以使用象素px或者百分比
border-- 是表格的邊框的寬度,使用px表示,此屬性應(yīng)該使用CSS實(shí)現(xiàn)
tr -- 代表一行
th -- 代表表格頭
td -- 代表一個(gè)單元格

由于篇幅有限，今天的內(nèi)容就介紹這么多。如果你有什么想法或者建議，歡迎評論交流！

在線咨詢

上一篇：<AppML> 案例研究-HTML 模板
下一篇：前端開發(fā)，原生 JS 實(shí)現(xiàn)最簡單的圖片懶加載

您的項(xiàng)目需求

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

整合營銷服務(wù)商