第1章 第2章 與`time`結合使用 多個 元素 元素 元素 添加 元素 元素 網頁 屬性 往後餘生,唯獨有你 簡書作者:達叔小生 90後帥氣小伙,良好的開發習慣;獨立思考的能力;主動並且善於溝通 簡書博客: "https://www.jianshu.com/u/c785ece603d1" 結語 ...
第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 點贊