標籤：移動 play 標籤 等等 表單元素 ott wan hover ring
第二回合：HTML5的新特性
與之前的HTML4.01相比，HTML5增加了非常多的改變：
① 新的語義元素：<article>、<aside>、<figure>、<figcaption>、<footer>、<header>、<hgroup>、<nav>和<section>等等
② 新的元素特性：增加新的元素屬性、表單元素、驗證功能等內容。
③ 多媒體：增加<audio>音頻、<video>視頻元素等內容。
④ 2D/3D 繪圖：增加<canvas>繪圖元素。
⑤ 儲存：增加線上、離線儲存功能。
⑥ 連通性：增加用戶端與伺服器互動的兩個內容：Web Sockets(用戶端與伺服器持久串連)和Server-sent events(伺服器推送資料)等。
⑦ 整合：提供Web Workers、History API、requestAnimationFrame、地理位置等強大的功能。
⑧ 裝置訪問：提供對網路攝影機、行動裝置的支援。
⑨ CSS3樣式：提供了新的背景樣式特性、動畫、邊框等樣式。
下面我們用執行個體來說明下各個標籤的使用以及h5與c3的配合。
html代碼如下：
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>HTML5</title> <link rel="stylesheet" href="html5.css"></head><body> <header class="show"> <h1>Header</h1> <h2>Subtitle</h2> </header><!-- 頭部結束 --> <div id="container"> <nav> <h3>Nav</h3> <a href="">HTML5</a> <a href="">CSS3</a> <a href="">Javascript</a> </nav><!-- 導航連結部分 --> <section> <article> <header> <h1>Article Header</h1> </header><!-- 定義頭部 --> <p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.</p> <p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.</p> <footer> <h2>Article Footer</h2> </footer><!-- 定義尾部 --> </article><!-- 定義文章 --> <article> <header> <h1>Article Header</h1> </header> <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio</p> <footer> <h2>Article Footer</h2> </footer> </article> </section><!-- 定義文檔中的節 --> <aside> <h3>Aside</h3> <p>do you love this case? if you want make friends with me ,you can add my qq: 1125911451,thank you for your join.</p> <img src="lian.jpg" width="220" height="250"> </aside><!-- 定義側邊欄目 --> <footer> <h2>Footer</h2> </footer> </div></body></html>
css代碼如下：
body { background-color:#CCCCCC; font-family:Geneva,Arial,Helvetica,sans-serif; margin: 0px auto; max-width:900px; border:solid; border-color:#FFFFFF;}header { background-color: #F47D31; display:block; color:#FFFFFF; text-align:center;}header h2 { margin: 0px;}h1 { font-size: 72px; margin: 0px;}h2 { font-size: 24px; margin: 0px; text-align:center; color: #F47D31;}h3 { font-size: 18px; margin: 0px; text-align:center; color: #F47D31;}h4 { color: #F47D31; background-color: #fff; -webkit-box-shadow: 2px 2px 20px #888; -webkit-transform: rotate(-45deg); -moz-box-shadow: 2px 2px 20px #888; -moz-transform: rotate(-45deg); position: absolute; padding: 0px 150px; top: 50px; left: -120px; text-align:center; }nav { display:block; width:25%; float:left;}nav a:link, nav a:visited { display: block; border-bottom: 3px solid #fff; padding: 10px; text-decoration: none; font-weight: bold; margin: 5px;}nav a:hover { color: white; background-color: #F47D31;}nav h3 { margin: 15px; color: white;}#container { background-color: #888;}section { display:block; width:50%; float:left;}article { background-color: #eee; display:block; margin: 10px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}article header { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 5px;}article footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 5px;}article h1 { font-size: 18px;} aside { display:block; width:25%; float:left;}aside h3 { margin: 15px; color: white;}aside p { margin: 15px; color: white; font-weight: bold; font-style: italic;} footer { clear: both; display: block; background-color: #F47D31; color:#FFFFFF; text-align:center; padding: 15px;}footer h2 { font-size: 14px; color: white;}/* links */a { color: #F47D31;}a:hover { text-decoration: underline;}.show { -webkit-animation: show 25s ease-out infinite; -moz-animation: show 25s ease-out infinite; -o-animation: show 25s ease-out infinite; animation: show 25s ease-out infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }/*調用動畫*/ @-webkit-keyframes show { 0% { background: #f47d31; color: white; } 50% { background: #e0a014; color: #a3d9ff; } 100% { background: purple; color: pink; } }/*定義動畫*/
如所示
我相信 現在大家對h5已經產生了濃厚的興趣，那麼現在可以自己動手去擼代碼，用h5開發頁面，在下一節裡我將繼續為大家講解h5的應用
HTML5第二節
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
