Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
HTML5草案的前身名為 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接納,并成立了新的 HTML 工作團(tuán)隊(duì)。
HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍處于完善之中。然而,大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。
2012年12月17日,萬維網(wǎng)聯(lián)盟(W3C)正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范已經(jīng)正式定稿。根據(jù)W3C的發(fā)言稿稱:“HTML5是開放的Web網(wǎng)絡(luò)平臺的奠基石?!?/p>
2013年5月6日, HTML 5.1正式草案公布。該規(guī)范定義了第五次重大版本,第一次要修訂萬維網(wǎng)的核心語言:超文本標(biāo)記語言(HTML)。在這個版本中,新功能不斷推出,以幫助Web應(yīng)用程序的作者,努力提高新元素互操作性。
本次草案的發(fā)布,從2012年12月27日至今,進(jìn)行了多達(dá)近百項(xiàng)的修改,包括HTML和XHTML的標(biāo)簽,相關(guān)的API、Canvas等,同時HTML5的圖像img標(biāo)簽及svg也進(jìn)行了改進(jìn),性能得到進(jìn)一步提升。
HTML5 的瀏覽器兼容
支持Html5的瀏覽器包括Firefox(火狐瀏覽器),IE9及其更高版本,Chrome(谷歌瀏覽器),Safari,Opera等;國內(nèi)的 遨游瀏覽器(Maxthon),以及基于IE或Chromium(Chrome的工程版或稱實(shí)驗(yàn)版)所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹 瀏覽器等國產(chǎn)瀏覽器同樣具備支持HTML5的能力。
HTML5 語法
內(nèi)容類型(ContentType)HTML5的文件擴(kuò)展符與內(nèi)容類型保持不變,仍然為".html"或".htm"。DOCTYPE聲明不區(qū)分大小寫指定字符集編碼meta charset="UTF-8"可省略標(biāo)記的元素不允許寫結(jié)束標(biāo)記的元素:br、col、embed、hr、img、input、、link、meta
可以省略結(jié)束標(biāo)記的元素:li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
可以省略全部標(biāo)記的元素:html、head、body、colgroup、tbody省略引號屬性值可以使用雙引號,也可以使用單引號。
HTML5 新增語義化標(biāo)簽
section元素 表示頁面中的一個內(nèi)容區(qū)塊
article元素 表示一塊與上下文無關(guān)的獨(dú)立的內(nèi)容
aside元素 在article之外的,與article內(nèi)容相關(guān)的輔助信息
header元素 表示頁面中一個內(nèi)容區(qū)塊或整個頁面的標(biāo)題
footer元素 表示頁面中一個內(nèi)容區(qū)塊或整個頁面的腳注
nav元素 表示頁面中導(dǎo)航鏈接部分
figure元素 表示一段獨(dú)立的流內(nèi)容,使用figcaption元素為其添加標(biāo)題(第一個或最后一個子元素的位置)
main元素 表示頁面中的主要的內(nèi)容 (ie不兼容)
兼容低版本瀏覽器:
Video和audio的應(yīng)用
video元素 定義視頻Video元素audio元素 定義音頻Audio元素
controls屬性:如果出現(xiàn)該屬性,則向用戶顯示控件,比如播放按鈕。
autoplay屬性:如果出現(xiàn)該屬性,則視頻在就緒后馬上播放。
loop屬性:重復(fù)播放屬性。
muted屬性:靜音屬性。
poster屬性:規(guī)定視頻正在下載時顯示的圖像,直到用戶點(diǎn)擊播放按鈕。
接上文]
// 多數(shù)情況下,可通過KeyChain.choosePrivateKeyAlias啟動一個Activity供用戶選擇合適的私鑰
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void onReceivedClientCertRequest(WebView view, ClientCertRequest request) {
request.cancel();
}
我們以往看到的頁面效果中,很多效果是需要JS搭配使用的,而今天在本文中,我將介紹如何使用純HTML打造屬于自己的實(shí)用效果。
使用Details和Summary標(biāo)簽可以創(chuàng)建沒有JavaScript代碼的可折疊手風(fēng)琴。
效果:
HTML
<details> <summary>Languages Used</summary> <p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS</p> </details> <details> <summary>How it Works</summary> <p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p> </details>
CSS
* { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } details { border: 1px solid #aaa; border-radius: 4px; padding: .5em .5em 0; } summary { font-weight: bold; margin: -.5em -.5em 0; padding: .5em; } details[open] { padding: .5em; } details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: .5em; }
瀏覽器支持:
該Meter和Progress 的元素標(biāo)簽的基礎(chǔ)上,你可以調(diào)整屬性呈現(xiàn)在屏幕上的進(jìn)度條。進(jìn)步有兩個屬性:max和value校準(zhǔn)進(jìn)度條,而Meter標(biāo)簽提供了更多的定制屬性。
效果:
HTML:
<label for="upload">Upload progress:</label> <meter id="upload" name="upload" min="0" max="100" low="33" high="66" optimum="80" value="50"> at 50/100 </meter> <hr/> <label for="file">File progress:</label> <progress id="file" max="100" value="70"> 70% </progress>
CSS:
body { margin: 50px; } label { padding-right: 10px; font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
瀏覽器支持:
在定義輸入元素時,您要知道現(xiàn)代瀏覽器已經(jīng)允許您指定足夠多的輸入類型了。除了你應(yīng)該已經(jīng)知道text,email,password,number這些類型外,還有下面的這些。
效果:
HTML:
<label for="date">Enter date:</label> <input type="date" id="date"/> <label for="datetime">Enter date & time:</label> <input type="datetime-local" id="datetime"/> <label for="month">Enter month:</label> <input type="month" id="month"/> <label for="search">Search for:</label> <input type="search" id="search"/> <label for="tel">Enter Phone:</label> <input type="tel" id="tel">
CSS:
input, label {display:block; margin: 5px;} input {margin-bottom:18px;}
各種新輸入類型的MDN文檔非常廣泛且信息量很大。此外,檢查移動輸入類型以了解用戶在移動瀏覽器上時這些輸入元素的鍵盤行為。
video和audio元素雖然現(xiàn)在已經(jīng)成為HTML規(guī)范的一部分,但是你一樣會驚訝于你可以使用video標(biāo)簽在屏幕上渲染出一個體面的視頻播放器。
<video controls> <source src="https://addpipe.com/sample_vid/short.mp4" poster="https://addpipe.com/sample_vid/poster.png"> Sorry, your browser doesn't support embedded videos. </video
視頻標(biāo)記中值得注意的一些屬性包括:
瀏覽器支持:
當(dāng)你想顯示歷史編輯及校對的情況時,blockquote,del和ins元素標(biāo)簽可以派上用場了。
示例:
HTML:
<blockquote> There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so. </blockquote>
CSS:
del { text-decoration: line-through; background-color: #fbb; color: #555; } ins { text-decoration: none; background-color: #d4fcbc; } blockquote { padding-left: 15px; line-height: 30px; border-left: 3px solid #d7d7db; font-size: 1rem; background: #eee; width: 200px; }
由于中英文引號的不同,使用<q>標(biāo)記可以讓您很好的解決這個問題,它可使你的內(nèi)容在大多數(shù)瀏覽器上更一致地呈現(xiàn)引號。
HTML:
Don Corleone said <q cite="https://www.imdb.com/title/tt0068646/quotes/qt0361877">I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party.</q></p> <hr/> Don Corleone said <i>"I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party."</i>
CSS:
body { margin: 50px; } q { font-style: italic; color: #000000bf; }
<kbd>標(biāo)簽應(yīng)該是一個少為人知的冷門標(biāo)簽,但這個能使用更好的方式來說明組合鍵的樣式。
HTML:
<p>I know that <kbd>CTRL</kbd>+<kbd>C</kbd> and <kbd>CTRL</kbd>+<kbd>V</kbd> a are like the most used key combinations</p>
CSS:
body { margin: 50px; } kbd { display: inline-block; margin: 0 .1em; padding: .1em .6em; font-size: 11px; line-height: 1.4; color: #242729; text-shadow: 0 1px 0 #FFF; background-color: #e1e3e5; border: 1px solid #adb3b9; border-radius: 3px; box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset; white-space: nowrap; }
使用figcaption pre code標(biāo)簽,您可以使用純HTML和CSS呈現(xiàn)出不錯的代碼片段。
HTML:
<figure> <figcaption> Defining a css <code>color</code> property for a class called 'golden' </figcaption> <pre> <code> .golden { color: golden; } </code> </pre> </figure>
CSS:
pre { background-color: #ffbdbd; }
這篇文章也只是拋磚引玉,也許您也有更多私藏的使用技巧,不妨也貼出來分享給大家。
另外,如果您不僅僅限于以上的效率,希望有更完整的動態(tài)功能。
例如:您希望在您的頁面中加入Excel功能,可以嘗試葡萄城的 純前端表格控件SpreadJS,再或者您希望為用戶提供更完備、更高效的前端UI控件,您也不妨可以試試 WijmoJS,相信它們都能為您的應(yīng)用增色不少。
關(guān)于葡萄城
賦能開發(fā)者!葡萄城公司成立于 1980 年,是全球領(lǐng)先的集開發(fā)工具、商業(yè)智能解決方案、管理系統(tǒng)設(shè)計(jì)工具于一身的軟件和服務(wù)提供商。西安葡萄城是其在中國的分支機(jī)構(gòu),面向全球市場提供軟件研發(fā)服務(wù),并為中國企業(yè)的信息化提供國際先進(jìn)的開發(fā)工具、軟件和研發(fā)咨詢服務(wù)。葡萄城的控件和軟件產(chǎn)品在國內(nèi)外屢獲殊榮,在全球被數(shù)十萬家企業(yè)、學(xué)校和政府機(jī)構(gòu)廣泛應(yīng)用。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。