标题图
第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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="#" 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>
作者：达叔小生
链接：https://www.jianshu.com/p/6a50bd0facc5
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦