HTML5与CSS3权威指南笔记案例1
程序员文章站
2022-06-20 23:46:32
第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后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客:
结语
- 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
- 小礼物走一走 or 点赞
上一篇: AngularJs表单验证实例代码解析
下一篇: C# 填充Excel