HTML5与CSS3权威指南笔记案例1
生活随笔
收集整理的這篇文章主要介紹了
HTML5与CSS3权威指南笔记案例1
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
第1章
<!DOCTYPE html> <meta charset = "UTF-8"> <title> Search </title> <form> <p><label>Search：<input name="search" autofocus></label> </p> </form> <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <title> Username </title> </head> <body> <form> <p><label>Username：<input name="search" type="text" id="search"></label> </p> <script type="text/javascript">document.getElementById(‘search’).focus() </script> </form> </body> </html>第2章
<!DOCTYPE html> <meta charset="UTF-8"> <title>HTML5</title> <p>我是達(dá)叔 <br/>你好呀 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>contentEditable列表</title> </head> <h2>可編輯的列表項(xiàng)</h2> <ul contentEditable="true"><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li> </ul> <!DOCTYPE html> <head> <meta charset="utf-8"> <title>article元素</title> </head> <article><h1>Spinner</h1><object><param name="allowFullScreen" value="true"> <embed src="#" width="600" height="395"</embed> </object> </article> <!DOCTYPE html> <head> <meta charset="utf-8"> <title>section元素</title> </head> <section><h1>達(dá)叔</h1><p><b>dashucoding</b>，你好啊</p> </section> <!DOCTYPE html> <head> <meta charset="utf-8"> <title>section下article元素</title> </head> <article><h1>達(dá)叔</h1> <p><b>dashucoding</b>，你好啊</p> <section><h2>達(dá)叔</h2><p>達(dá)叔好啊</p> </section> </article> <!DOCTYPE html> <head> <meta charset="utf-8"> <title>包含article元素的section元素</title> </head> <section><h1>達(dá)叔</h1><article><h2>dashucoding</h2><p>哈哈哈哈哈哈哈</p></article> <section> <!DOCTYPE html> <head> <meta charset="utf-8"> <title>nav元素</title> </head> <body> <h1>達(dá)叔小生</h1> <nav><ul><li><a href="#">我的主頁</a></li><li><a href="#">我的技術(shù)博客</a></li></ul> </nav> <article><header><h1>元素</h1><nav><ul><li><a href="#HTML5">歷史</a></li><li><a href="#CSS3">我的設(shè)置</a></li></ul></nav></header><section id="HTML5"><h1>HTML5</h1><p>HTML5的歷史</p></section><section id="CSS3"><h1>CSS3</h1><p>CSS3的歷史</p></section><footer><p><small>版權(quán)所有</small></p></footer> </article> <!DOCTYPE html> <head> <meta charset="utf-8"> <title>文章內(nèi)的aside元素</title> </head> <body> <header><h1>H1</h1> </header> <article><h1>達(dá)叔h1</h1><p>哈哈哈哈</p><aside><h1>名詞</h1><dl><dt>dashucoing的dt<dt><dd>dd的表達(dá)</dd></dl></aside> </article> </body> <!DOCTYPE html> <head> <meta charset="utf-8"> <title>aside元素</title> </head> <aside><nav><h2>達(dá)叔</h2><ul><li><a href="#">dashucoding</a> a標(biāo)簽外</li><li><a href="#">達(dá)叔小生</a> a標(biāo)簽外</li><br/><a href="#">恭喜! 您成功開通了博客</a></ul></nav> </aside> putdate與 time結(jié)合使用 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>putdate與time</title> </head> <article><header><h1>h1的蘋果</h1><p>dashu<time datetime="2010-2-22" putdate>2010-2-22</time></p></header><p>正文</p> </article>多個(gè)
header元素 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>多個(gè)header元素</title> </head> <header><h1>h1網(wǎng)頁標(biāo)題</h1> </header> <article><header><h1>header的h1文章中article的標(biāo)題</h1></header><p>p標(biāo)簽正文</p> </article> header元素 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>header元素</title> </head> <article><header><h1>文章標(biāo)題h1</h1><p><time datetime="2018-03-20">2018年10月25日</time></p></header><p>文章正文</p> </article> hgroup元素 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>hgroup元素</title> </head> <article><header><hgroup><h1>文章主標(biāo)題h1</h1><h2>文章子標(biāo)題h2</h2></hgroup><p><time datetime="2017-05-20">2017-05-20</time></p></header><p>文章正文</p> </article>添加
footer元素 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>添加footer元素</title> </head> <article>文章內(nèi)容article<footer>文章的腳注footer</footer> </article> address元素 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>address元素</title> </head> <address> <a href=https://huangguangda.github.io/>個(gè)人博客</a> <a href=http://www.cnblogs.com/dashucoding/>博客園</a> <a href=https://juejin.im/user/5a16e1f3f265da43128096cb>掘金：</a> </address>網(wǎng)頁
<!DOCTYPE html> <head><title>網(wǎng)頁</title><meta charset="UTF-8"> </head> <body> <!-- 網(wǎng)頁標(biāo)題 --> <header><h1>網(wǎng)頁標(biāo)題</h1><!-- 網(wǎng)站導(dǎo)航鏈接 --><nav><ul><li><a href="https://huangguangda.github.io/">首頁</a></li><li><a href="http://www.cnblogs.com/dashucoding/">博客</a></li></ul></nav> </header> <!-- 文章正文 --> <article><hgroup><h1>文章主標(biāo)題</h1><h2>文章子標(biāo)題</h2></hgroup><p>文章正文</p><!--文章評(píng)論 --><section class="comments"><article><h1>評(píng)論標(biāo)題</h1><p>評(píng)論正文</p></article></section> </article> <!-- 版權(quán)信息 --> <footer><small>版權(quán)所有</small> </footer> </body> form屬性 <!DOCTYPE html> <head><title>form屬性示例</title><meta charset="UTF-8"> </head> <!-- form --> <form id="testform"> <input type="text"> </form> <!-- textarea可以 --> <textarea form="testform"></textarea>往后余生，唯獨(dú)有你
簡(jiǎn)書作者：達(dá)叔小生
90后帥氣小伙，良好的開發(fā)習(xí)慣；獨(dú)立思考的能力；主動(dòng)并且善于溝通
簡(jiǎn)書博客： https://www.jianshu.com/u/c785ece603d1
結(jié)語
- 下面我將繼續(xù)對(duì) 其他知識(shí) 深入講解 ，有興趣可以繼續(xù)關(guān)注
- 小禮物走一走 or 點(diǎn)贊
本文轉(zhuǎn)載于:猿2048https://www.mk2048.com/blog/blog.php?id=ijihbb&title=HTML5與CSS3權(quán)威指南筆記案例1
總結(jié)
以上是生活随笔為你收集整理的HTML5与CSS3权威指南笔记案例1的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在vue中安装使用vux
- 下一篇： 【开发调试】谷歌浏览器中调试移动网页和测