HTML5與CSS3權威指南筆記案例1
阿新 • • 發佈：2018-09-14
sea 技術分享 結合 () 習慣 tps code har ade
第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>我是達叔
<br/>你好呀
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>contentEditable列表</title> </head> <h2>可編輯的列表項</h2> <ul contentEditable="true"> <li>列表項1</li> <li>列表項2</li> <li>列表項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>達叔</h1>
<p><b>dashucoding</b>，你好啊</p>
</section>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>section下article元素</title>
</head>
<article>
<h1>達叔</h1>
<p><b>dashucoding</b>，你好啊</p>
<section>
<h2>達叔</h2>
<p>達叔好啊</p>
</section>
</article>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>包含article元素的section元素</title>
</head>
<section>
<h1>達叔</h1>
<article>
<h2>dashucoding</h2>
<p>哈哈哈哈哈哈哈</p>
</article>
<section>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>nav元素</title>
</head>
<body>
<h1>達叔小生</h1>
<nav>
<ul>
<li><a href="#">我的主頁</a></li>
<li><a href="#">我的技術博客</a></li>
</ul>
</nav>
<article>
<header>
<h1>元素</h1>
<nav>
<ul>
<li><a href="#HTML5">歷史</a></li>
<li><a href="#CSS3">我的設置</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>版權所有</small></p>
</footer>
</article>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>文章內的aside元素</title>
</head>
<body>
<header>
<h1>H1</h1>
</header>
<article>
<h1>達叔h1</h1>
<p>哈哈哈哈</p>
<aside>
<h1>名詞</h1>
<dl>
<dt>dashucoing的dt<dt>
<dd>dd的表達</dd>
</dl>
</aside>
</article>
</body>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>aside元素</title>
</head>
<aside>
<nav>
<h2>達叔</h2>
<ul>
<li><a href="#">dashucoding</a> a標簽外</li>
<li><a href="#">達叔小生</a> a標簽外</li><br/>
<a href="#">恭喜! 您成功開通了博客</a>
</ul>
</nav>
</aside>putdate與time結合使用
<!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>多個header元素
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>多個header元素</title>
</head>
<header>
<h1>h1網頁標題</h1>
</header>
<article>
<header>
<h1>header的h1文章中article的標題</h1>
</header>
<p>p標簽正文</p>
</article>header元素
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>header元素</title>
</head>
<article>
<header>
<h1>文章標題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>文章主標題h1</h1>
<h2>文章子標題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>
文章內容article
<footer>
文章的腳註footer
</footer>
</article>address元素
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>address元素</title>
</head>
<address>
<a href=https://huangguangda.github.io/>個人博客</a>
<a href=http://www.cnblogs.com/dashucoding/>博客園</a>
<a href=https://juejin.im/user/5a16e1f3f265da43128096cb>掘金：</a>
</address>網頁
<!DOCTYPE html>
<head>
<title>網頁</title>
<meta charset="UTF-8">
</head>
<body>
<!-- 網頁標題 -->
<header>
<h1>網頁標題</h1>
<!-- 網站導航鏈接 -->
<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>文章主標題</h1>
<h2>文章子標題</h2>
</hgroup>
<p>文章正文</p>
<!--文章評論 -->
<section class="comments">
<article>
<h1>評論標題</h1>
<p>評論正文</p>
</article>
</section>
</article>
<!-- 版權信息 -->
<footer>
<small>版權所有</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>往後余生，唯獨有你
簡書作者：達叔小生
90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通
簡書博客： https://www.jianshu.com/u/c785ece603d1
結語
- 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關註
- 小禮物走一走 or 點贊
HTML5與CSS3權威指南筆記案例1