了解HTML5

? ?HTML5是HTML的最新版本,HTML又稱為超文本語言瘟栖。如今幾乎所有的智能手機(jī)和平板電腦都能支持HTML5横蜒。HTML5的主要目的是用來開發(fā)更優(yōu)秀、更高效的Web應(yīng)用右核,它是在開放Web標(biāo)準(zhǔn)下開發(fā)的API和規(guī)范的慧脱。對于iOS和Android設(shè)備,都能很好的支持HTML5贺喝,因?yàn)樗鼈冞\(yùn)行的瀏覽器Safari菱鸥、Chrome都基于WebKit,WebKit對HTML5有相當(dāng)出色的支持躏鱼。

Web應(yīng)用

? ?Web應(yīng)用是指與桌面應(yīng)用相似的web應(yīng)用(Word氮采、IE、Web瀏覽器)染苛,簡而言之鹊漠,Web應(yīng)用就是不直接在計(jì)算機(jī)上打開,而是通過Web瀏覽器來運(yùn)行。使用HTML5為iOS和Android設(shè)計(jì)Web頁面的好處是在未來的設(shè)備上可以繼續(xù)使用躯概。

HTML5中的新標(biāo)簽

<article>-文檔或站點(diǎn)的一個獨(dú)立部分

<aside>-頁面或站點(diǎn)主題之外的內(nèi)容

<figcaption>-figure元素的標(biāo)題

<figure>-獨(dú)立于文本流之外的一段流內(nèi)容(圖形登钥、圖表)

<footer>-文檔或章節(jié)的頁腳

<header>-文檔或標(biāo)題的頁眉

<hgroup>-標(biāo)題組

<nav>-導(dǎo)航

<section>-章節(jié)部分

以下是一小段代碼:

在許多Web設(shè)計(jì)中,<div id ?= "header">楞陷,在HTML5中將寫成<header>怔鳖,還有一些其他不同變化。

HTML5新的多媒體標(biāo)簽

<audio>-內(nèi)嵌音頻文件

<canvas>-內(nèi)嵌動態(tài)圖形

<embed>-增添其他不包含特定H5元素的技術(shù)

<source>-內(nèi)嵌音頻及視頻的源文件

<track>-內(nèi)嵌音頻及視頻的輔助多媒體軌道

<video>-內(nèi)嵌視頻文件

HTML5 的新屬性

onabort-操作終止時觸發(fā)

onbeforeonload固蛾、onbeforeonunload结执、onunload-在某一元素記載或卸載之前或同時觸發(fā)

oncontextmenu-打開菜單時觸發(fā)

ondrag、ondragend艾凯、ondragenter献幔、ongragleave、ongragstart趾诗、ongrop-發(fā)生拖拽時觸發(fā)

onerror及onmessage-錯誤或彈出信息時觸發(fā)

onscroll-用戶滾動瀏覽器滾動條時觸發(fā)

onresize-調(diào)整元素大小時觸發(fā)

HTML5擁有與視頻蜡感、音頻、Web應(yīng)用程序恃泪、編輯頁面內(nèi)容郑兴、拖拽以及展示瀏覽器歷史等功能相關(guān)的API,另外H5開放Web還提供于地理定位贝乎、Web存儲及離線Web應(yīng)用程序的API情连,這些都非常適合在移動設(shè)備上使用。

用CSS3設(shè)計(jì)移動頁面樣式

? CSS(層疊樣式表)览效,是移動Web開發(fā)中的一個重要組成部分却舀,CSS用于定義HTML文檔的外觀,Web頁面顯示或特定移動設(shè)備來定制HTML樣式锤灿。創(chuàng)建CSS樣式表挽拔,CSS由附加了樣式屬性的一個或者多個選擇器組成。例如在更改段落的文本顏色時但校,可以寫為:

p {

color:red螃诅;

}

p為選擇器,樣式屬性為color:red状囱。如果要加入第二個選擇器州刽,需要逗號隔開

p, .redText }

? ? ? ?color: red

}

樣式表附加到Web頁面的方法:

1浪箭、內(nèi)聯(lián)在標(biāo)簽中

2穗椅、內(nèi)嵌于HTML開頭

3、放在一個獨(dú)立文檔作為樣式表

內(nèi)聯(lián):

將單一段落的文本顏色定位為紅色

<p style = "color : red;">

內(nèi)聯(lián)的缺點(diǎn)是只能定義所在標(biāo)簽的樣式奶栖,如果要講所有段落都定義為紅色時匹表,需要就愛那個樣式屬性添加在每個段落门坷。

內(nèi)嵌:

內(nèi)嵌樣式表位于文檔的<head>標(biāo)簽中,使用<style>標(biāo)簽袍镀,下面是講所有段落文本設(shè)置為紅色

? 效果如下:

內(nèi)嵌樣式與內(nèi)聯(lián)樣式一樣默蚌,只能影響所處頁面的樣式。如果我們需要將同一樣式作用于其他Web頁面苇羡,需要將它們分別粘貼到每個頁面绸吸,這個時候獨(dú)立的樣式表的好處就體現(xiàn)出來了。

外聯(lián)樣式表

創(chuàng)建外聯(lián)樣式表的步驟:

1.打開一個新文檔

2.編寫樣式表设江,但是要去掉<style>標(biāo)簽

3. ?講該文件保存為擴(kuò)展名為.css的樣式表文件,例如 :style.css?

? 下面的代碼是將段落定義為紅色并包含其他樣式的樣式表

ps:完成樣式表锦茁,要記得講它附加到Web頁面中,在文檔開頭加一個指向樣式表的<link>標(biāo)簽叉存。代碼如下:

<link href = "styles.css" rel="stylesheet">

ps:外聯(lián)樣式表可以提高網(wǎng)站加載速度码俩,如果將所有樣式放在同一個文檔中的外聯(lián)樣式表

學(xué)習(xí)無止境,督促自己不斷前進(jìn)吧歼捏!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末稿存,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子瞳秽,更是在濱河造成了極大的恐慌瓣履,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,919評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件练俐,死亡現(xiàn)場離奇詭異袖迎,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)痰洒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來浴韭,“玉大人丘喻,你說我怎么就攤上這事∧罹保” “怎么了泉粉?”我有些...
    開封第一講書人閱讀 163,316評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長榴芳。 經(jīng)常有香客問我嗡靡,道長,這世上最難降的妖魔是什么窟感? 我笑而不...
    開封第一講書人閱讀 58,294評論 1 292
  • 正文 為了忘掉前任讨彼,我火速辦了婚禮,結(jié)果婚禮上柿祈,老公的妹妹穿的比我還像新娘哈误。我一直安慰自己哩至,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,318評論 6 390
  • 文/花漫 我一把揭開白布蜜自。 她就那樣靜靜地躺著菩貌,像睡著了一般。 火紅的嫁衣襯著肌膚如雪重荠。 梳的紋絲不亂的頭發(fā)上箭阶,一...
    開封第一講書人閱讀 51,245評論 1 299
  • 那天,我揣著相機(jī)與錄音戈鲁,去河邊找鬼仇参。 笑死,一個胖子當(dāng)著我的面吹牛荞彼,可吹牛的內(nèi)容都是我干的冈敛。 我是一名探鬼主播,決...
    沈念sama閱讀 40,120評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼鸣皂,長吁一口氣:“原來是場噩夢啊……” “哼抓谴!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起寞缝,我...
    開封第一講書人閱讀 38,964評論 0 275
  • 序言:老撾萬榮一對情侶失蹤癌压,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后荆陆,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體滩届,經(jīng)...
    沈念sama閱讀 45,376評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,592評論 2 333
  • 正文 我和宋清朗相戀三年被啼,在試婚紗的時候發(fā)現(xiàn)自己被綠了帜消。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,764評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡浓体,死狀恐怖泡挺,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情命浴,我是刑警寧澤娄猫,帶...
    沈念sama閱讀 35,460評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站生闲,受9級特大地震影響媳溺,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜碍讯,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,070評論 3 327
  • 文/蒙蒙 一悬蔽、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧捉兴,春花似錦屯阀、人聲如沸缅帘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽钦无。三九已至,卻和暖如春盖袭,著一層夾襖步出監(jiān)牢的瞬間失暂,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評論 1 269
  • 我被黑心中介騙來泰國打工鳄虱, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留弟塞,地道東北人。 一個月前我還...
    沈念sama閱讀 47,819評論 2 370
  • 正文 我出身青樓拙已,卻偏偏與公主長得像决记,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子倍踪,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,665評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案系宫? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,751評論 1 92
  • 1. 瀏覽器頁面有哪三層構(gòu)成,分別是什么建车,作用是什么? 構(gòu)成:結(jié)構(gòu)層扩借、表示層、行為層分別是:HTML缤至、CSS潮罪、Ja...
    程序猿人王小賤閱讀 1,872評論 1 11
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,552評論 32 459
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,240評論 1 41
  • 參與眾籌項(xiàng)目的人通常有較強(qiáng)的風(fēng)險識別能力,對他們來說月洛,項(xiàng)目的核心要點(diǎn)幾句話就聽明白了何恶,他自然也知道自己能得到什么;...
    龔佩禎閱讀 167評論 0 0