HTML5與CSS3權威指南筆記案例1

標題圖

第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 點贊

本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=ijihbb&title=HTML5與CSS3權威指南筆記案例1

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/371126.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/371126.shtml
英文地址，請注明出處：http://en.pswp.cn/news/371126.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！