ホームページ > 記事 > ウェブフロントエンド > HTML5 セクション 2_html/css_WEB-ITnose
HTML5 セクション 2_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:21:331369ブラウズ
第 2 ラウンド: HTML5 の新機能
以前の HTML4.01 と比較して、HTML5 には多くの変更が追加されました:
① 新しいセマンティック要素: 23c3de37f2f9ebcb477c4a90aac6fffd、15221ee8cba27fc1d7a26c47a001eb9b ;figure>、614eb9dc63b3fb809437a716aa228d24、c37f8231a37e88427e62669260f0074d、1aa9e5d373740b65a0cc8f0a02150c53、d8eccd9ed644b68a6460a2bb84548c82、c787b9a589a3ece771e842a6176cf8e9、2f8332c8dcfd5c7dec030a070bf652c3 など
② 新しい要素のプロパティ : 新しい要素の属性を追加します。フォーム要素、検証関数など。
③ マルチメディア: b97864c2e0ef2353a16c4d64c7734e92 オーディオ、39000f942b2545a5315c57fa3276f220 ビデオ要素などを追加します。
④ 2D/3D 描画: 5ba626b379994d53f7acf72a64f9b697 描画要素を追加します。
⑤ ストレージ: オンラインおよびオフラインのストレージ機能を追加します。
⑥ 接続: クライアントとサーバーの対話のための 2 つの要素を追加します: Web ソケット (クライアントとサーバー間の永続的な接続) とサーバー送信イベント (サーバー プッシュ データ) など。
⑦ 統合: Web ワーカー、履歴 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" alt="" width="220" height="250"> </aside><!-- 定义侧边栏目 --> <footer> <h2>Footer</h2> </footer> </div></body></html><br /><br />css代码如下：<br />
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; } }/*定义动画*/<br />效果图如下图所示 これで、誰もが h5 に強い関心を持っていると思いますので、今すぐ自分でコーディングを開始して、h5 を使用したページを開発できます。あなたを助けるために、h5 のアプリケーションを説明します