h5

1. ?Hybrid App(混合模式移動(dòng)應(yīng)用)是指介于web-app、native-app這兩者之間的app,兼具"Native App良好用戶交互體驗(yàn)的優(yōu)勢(shì)"和"Web App跨平臺(tái)開(kāi)發(fā)的優(yōu)勢(shì)"。

2. ?W3C最重要的工作是發(fā)展 Web 規(guī)范(稱為推薦,HTML5官方logoRecommendations),這些規(guī)范描述了 Web 的通信協(xié)議(比如 HTML 和 XHTML)和其他的構(gòu)建模塊。減少瀏覽器碎片、實(shí)現(xiàn)在所有HTML工具的應(yīng)用,W3C開(kāi)始著手W3C標(biāo)準(zhǔn)化的互操作性和測(cè)試。

3. ?Frameset


4. ??DTD ?文檔類型定義(Document Type Definition)???文檔類型定義可定義合法的XML文檔構(gòu)建模塊。它使用一系列合法的元素來(lái)定義文檔的結(jié)構(gòu)。

H5 ? ?SGML,所以不需要引用DTD

5. ?

6. ?

H5新增的東西:

標(biāo)簽變化DTD新增標(biāo)簽 ?刪除的標(biāo)簽 ?重定義的標(biāo)簽 ?

新的頁(yè)面布局

屬性的變化input表單 ?鏈接 ?其他 ?這些變化

7. ? ?基本標(biāo)簽

<vedio ?src=""></vedio> ? ?autoplay 屬性 controls屬性

不同格式的 ? type是播放解碼的格式

想要靈活控制視頻的大小 ?用 width ? height ?屬性

<canvas> ? ?標(biāo)記定義圖片 畫(huà)布 API 特效效果動(dòng)畫(huà)

<embed> ? ?標(biāo)記定義外部的可交互的內(nèi)容或插件,比如flash ? ?src里面一般引入flash鏈接

(所以是要用到flash插件?)

應(yīng)用場(chǎng)景:SVG(可縮放矢量圖形) ? ? 引入可以用embed

3.web應(yīng)用標(biāo)簽 ? ? ?

<meter> ??實(shí)時(shí)狀態(tài)顯示:?當(dāng)前 ? ?氣壓,氣溫這些值

??實(shí)時(shí)狀態(tài)顯示:?當(dāng)前 ? ?氣壓,氣溫這些值

舉例:電壓值 ? 含安全用電 ?最低值low ? 最高值 ? ?標(biāo)準(zhǔn)值optimum

小于安全電壓的最小值200時(shí) 會(huì)出現(xiàn)警告顏色? ??
用js取value值? 值為380 ?
用js取value值? 值為20 ?
自動(dòng)定位到四分之三 以百分比形式展現(xiàn)

<progress> ?任務(wù)過(guò)程:安裝,加載?

默認(rèn)展現(xiàn)一個(gè)正在加載的動(dòng)畫(huà) ?任務(wù)過(guò)程:安裝,加載?

瀏覽器兼容性

4. ?列表標(biāo)簽

<datalist> ?? 為iuput標(biāo)記定義一個(gè)下拉列表,配合option ? ( ?以前 用select 標(biāo)簽)

id跟list值要一模一樣

不想從下拉列表選 ?自己輸入 會(huì)自動(dòng)匹配 ? 下拉框沒(méi)有的也可以手動(dòng)輸入在文本框

<detials> ? ? 標(biāo)記定義一個(gè)元素的詳細(xì)內(nèi)容,配合summary ? ?基本展示效果如下:

<details><summary>樹(shù)下的貓</summary><p>內(nèi)容</p></details>

樹(shù)下的

內(nèi)容

現(xiàn)有一個(gè)問(wèn)題,原本我是開(kāi)著的,如果我刷新之后,它就是關(guān)上的,但是我希望他刷新之后也是開(kāi)著的 ? ?利用open屬性:details有個(gè)屬性? open="open" 不寫(xiě)默認(rèn)關(guān)著 ?效果如下:

樹(shù)下的貓

內(nèi)容

menu標(biāo)簽

<menu> ?命令列表(目前所有主流瀏覽器都不支持)

<menuitem> ??menu命令列表標(biāo)簽

<command> ?menu標(biāo)記定義一個(gè)命令按鈕

5. ?其他標(biāo)簽

注釋標(biāo)簽

<ruby> ?標(biāo)記定義注釋或音標(biāo)

<rt> ??標(biāo)記定義對(duì)ruby的注釋內(nèi)容文本

<p>我們來(lái)<ruby>夼<rt>kuang</rt></ruby>一個(gè)話題</p>

不兼容這個(gè)標(biāo)簽的話,拼音會(huì)直接跟在字的后面

假如加括號(hào),不兼容的看上去還行,兼容的就多了個(gè)括號(hào),也不好

<rp> ?告訴那些不支持ruby元素的瀏覽器如何顯示

正確操作: ? ? <p>我們來(lái)<ruby>夼 <rp> ( </rp> <rt> kuang </rt> <rp> ) </rp>?一個(gè)話題</p>

注!<rp>不要放在<rt>標(biāo)簽內(nèi)


<mark> ? ?標(biāo)記定義有標(biāo)記的文本(黃色選中狀態(tài))高亮?

<p>媽媽叫我回家的時(shí)候順路買(mǎi)一盒<mark>牛奶</mark>,需要很新鮮的那種</p>

這里代碼效果顯示就是加粗

媽媽叫我回家的時(shí)候順路買(mǎi)一盒牛奶,需要很新鮮的那種 ? (代碼顯示效果為該行)

<output> ? ?標(biāo)記定義一些輸出類型,計(jì)算表單結(jié)果配合oninput事件

( ? oninput事件可以實(shí)時(shí)監(jiān)聽(tīng)文本框的輸入變化 ?)

<form ?oninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)">

? ? <input ?type="text" ?id="price" ?value="5000">

? ? * <input ?type="number" ?id="number" ?value="1">

? ? = ? <output name="totalPrice" ?for=" price ?number">總數(shù)為</output>

</form>

// price.value 單價(jià)指5000 ?parseInt將字符串轉(zhuǎn)為數(shù)值型 ? ? 數(shù)量number.value為1

type屬性為 number 表示數(shù)值型 ? ?為range 表示范圍

<keygen> ?標(biāo)記定義表單里一個(gè)生成的鍵值(加密信息傳送)

表單提交到后臺(tái)的數(shù)據(jù)都會(huì)生成鍵值 加密傳送

<time> ? 標(biāo)記定義一個(gè)日期時(shí)間,目前所有主流瀏覽器都不支持

應(yīng)用場(chǎng)景: 日歷的方式表示出時(shí)間

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,826評(píng)論 1 45
  • 一、HTML5 1.1 認(rèn)識(shí)HTML5 HTML5并不僅僅只是作為HTML標(biāo)記語(yǔ)言的一個(gè)最新版本,更重要的是它制定...
    福爾摩雞閱讀 16,556評(píng)論 14 51
  • 轉(zhuǎn)載:H5緩存機(jī)制淺析-移動(dòng)端Web加載性能優(yōu)化【干貨】 作者:賀輝超,騰訊游戲平臺(tái)與社區(qū)產(chǎn)品部 高級(jí)工程師 目錄...
    meng_philip123閱讀 11,688評(píng)論 6 48
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,167評(píng)論 1 92
  • 理論知識(shí) web標(biāo)準(zhǔn) 結(jié)構(gòu)HTML(XHTML)HTML發(fā)展史Hyper Text Markup Language...
    Nico醬閱讀 278評(píng)論 0 0

友情鏈接更多精彩內(nèi)容