第1章

  1. <!DOCTYPE html>
  2. <meta charset = "UTF-8">
  3. <title> Search </title>
  4. <form>
  5. <p>
  6.  <label>Search：<input name="search" autofocus></label>
  7. </p>
  8. </form>

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title> Username </title>
  6. </head>
  7. <body>
  8. <form>
  9. <p>
  10.  <label>Username：<input name="search" type="text" id="search"></label>
  11. </p>
  12. <script type="text/javascript">
  13.  document.getElementById(‘search’).focus()
  14. </script>
  15. </form>
  16. </body>
  17. </html>

第2章

  1. <!DOCTYPE html>
  2. <meta charset="UTF-8">
  3. <title>HTML5</title>
  4. <p>我是达叔
  5. <br/>你好呀

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>contentEditable列表</title>
  5. </head>
  6. <h2>可编辑的列表项</h2>
  7. <ul contentEditable="true">
  8.  <li>列表项1</li>
  9.  <li>列表项2</li>
  10.  <li>列表项3</li>
  11. </ul>

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>article元素</title>
  5. </head>
  6. <article>
  7.  <h1>Spinner</h1>
  8.  <object>
  9.  <param name="allowFullScreen" value="true">
  10. <embed src="#" width="600" height="395"</embed>
  11. </object>
  12. </article>

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>section元素</title>
  5. </head>
  6. <section>
  7.  <h1>达叔</h1>
  8.  <p><b>dashucoding</b>，你好啊</p>
  9. </section>

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>section下article元素</title>
  5. </head>
  6. <article>
  7.  <h1>达叔</h1>
  8. <p><b>dashucoding</b>，你好啊</p>
  9. <section>
  10.  <h2>达叔</h2>
  11.  <p>达叔好啊</p>
  12. </section>
  13. </article>

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>包含article元素的section元素</title>
  5. </head>
  6. <section>
  7.  <h1>达叔</h1>
  8.  <article>
  9.   <h2>dashucoding</h2>
  10.   <p>哈哈哈哈哈哈哈</p>
  11.  </article>
  12. <section>

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>nav元素</title>
  5. </head>
  6. <body>
  7. <h1>达叔小生</h1>
  8. <nav>
  9.  <ul>
  10.   <li><a href="#">我的主页</a></li>
  11.   <li><a href="#">我的技术博客</a></li>
  12.  </ul>
  13. </nav>
  14. <article>
  15.  <header>
  16.   <h1>元素</h1>
  17.   <nav>
  18.    <ul>
  19.     <li><a href="#HTML5">历史</a></li>
  20.     <li><a href="#CSS3">我的设置</a></li>
  21.    </ul>
  22.   </nav>
  23.  </header>
  24.     <section id="HTML5">
  25.         <h1>HTML5</h1>
  26.         <p>HTML5的历史</p>
  27.     </section>
  28.     <section id="CSS3">
  29.         <h1>CSS3</h1>
  30.         <p>CSS3的历史</p>
  31.     </section>
  32.    <footer>
  33.     <p><small>版权所有</small></p>
  34.    </footer>
  35. </article>

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>文章内的aside元素</title>
  5. </head>
  6. <body>
  7. <header>
  8.  <h1>H1</h1>
  9. </header>
  10. <article>
  11.  <h1>达叔h1</h1>
  12.  <p>哈哈哈哈</p>
  13.  <aside>
  14.   <h1>名词</h1>
  15.   <dl>
  16.    <dt>dashucoing的dt<dt>
  17.    <dd>dd的表达</dd>
  18.   </dl>
  19.  </aside>
  20. </article>
  21. </body>

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>aside元素</title>
  5. </head>
  6. <aside>
  7.  <nav>
  8.   <h2>达叔</h2>
  9.   <ul>
  10.    <li><a href="#">dashucoding</a> a标签外</li>
  11.    <li><a href="#">达叔小生</a> a标签外</li><br/>
  12.        <a href="#">恭喜! 您成功开通了博客</a>
  13.   </ul>
  14.  </nav>
  15. </aside>

putdate与time结合使用

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>putdate与time</title>
  5. </head>
  6. <article>
  7.  <header>
  8.   <h1>h1的苹果</h1>
  9.   <p>dashu<time datetime="2010-2-22" putdate>2010-2-22</time></p>
  10.  </header>
  11.  <p>正文</p>
  12. </article>

多个header元素

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>多个header元素</title>
  5. </head>
  6. <header>
  7.  <h1>h1网页标题</h1>
  8. </header>
  9. <article>
  10.  <header>
  11.   <h1>header的h1文章中article的标题</h1>
  12.  </header>
  13.  <p>p标签正文</p>
  14. </article>

header元素

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>header元素</title>
  5. </head>
  6. <article>
  7.     <header>
  8.         <h1>文章标题h1</h1>
  9.         <p><time datetime="2018-03-20">2018年10月25日</time></p>
  10.     </header>
  11.     <p>文章正文</p>
  12. </article>

hgroup元素

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>hgroup元素</title>
  5. </head>
  6. <article>
  7.     <header>
  8.         <hgroup>
  9.             <h1>文章主标题h1</h1>
  10.             <h2>文章子标题h2</h2>
  11.         </hgroup>
  12.         <p><time datetime="2017-05-20">2017-05-20</time></p>
  13.     </header>
  14.     <p>文章正文</p>
  15. </article>

添加footer元素

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>添加footer元素</title>
  5. </head>
  6. <article>
  7.     文章内容article
  8.     <footer>
  9.         文章的脚注footer
  10.     </footer>
  11. </article>

address元素

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>address元素</title>
  5. </head>
  6. <address>
  7.     <a href=https://huangguangda.github.io/>个人博客</a>
  8.     <a href=http://www.cnblogs.com/dashucoding/>博客园</a>
  9.     <a href=https://juejin.im/user/5a16e1f3f265da43128096cb>掘金：</a>
  10. </address>

网页

  1. <!DOCTYPE html>
  2. <head>
  3.   <title>网页</title>
  4.   <meta charset="UTF-8">
  5. </head>
  6. <body>
  7. <!-- 网页标题 -->
  8. <header>
  9.     <h1>网页标题</h1>
  10.     <!-- 网站导航链接 -->
  11.     <nav>
  12.         <ul>
  13.             <li><a href="https://huangguangda.github.io/">首页</a></li>
  14.             <li><a href="http://www.cnblogs.com/dashucoding/">博客</a></li>
  15.         </ul>
  16.     </nav>
  17. </header>
  18. <!-- 文章正文 -->
  19. <article>
  20.     <hgroup>
  21.         <h1>文章主标题</h1>
  22.         <h2>文章子标题</h2>
  23.     </hgroup>
  24.     <p>文章正文</p>
  25.     <!--文章评论 -->
  26.     <section class="comments">
  27.         <article>
  28.             <h1>评论标题</h1>
  29.             <p>评论正文</p>
  30.         </article>
  31.     </section>
  32. </article>
  33. <!-- 版权信息 -->
  34. <footer>
  35.     <small>版权所有</small>
  36. </footer>
  37. </body>

form属性

  1. <!DOCTYPE html>
  2. <head>
  3.   <title>form属性示例</title>
  4.   <meta charset="UTF-8">
  5. </head>
  6. <!-- form -->
  7. <form id="testform">
  8. <input type="text">
  9. </form>
  10. <!-- textarea可以 -->
  11. <textarea form="testform"></textarea>

往后余生，唯独有你

简书作者：达叔小生

90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通

简书博客： https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
  • 小礼物走一走 or 点赞

HTML5与CSS3权威指南笔记案例1的更多相关文章

  1. Html5与CSS3权威指南 百度云下载

    Html5与CSS3权威指南 百度云下载 链接:http://pan.baidu.com/s/1hq6Dlvm 密码:php3

  2. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

  3. 【HTML5 4】《HTML5与CSS3权威指南》 step1 导读

    一.教程重点:以 HTML5和CSS3的新功能和新特性 为导向,辅之以 实战型实例页面 二.内容概况: 第1部分:详细讲解HTML5相关知识,包括 各主流浏览器对HTML5的支持情况. HTML5与H ...

  4. 《HTML5与CSS3权威指南》读书笔记（下册）—CSS3篇

    大而全的CSS3 API类型书,并带有一些实用案例讲解,层次分明分类明确,新增技术都做了详情介绍.个人觉得如果在细节和文字表达上再下些功夫会更出色,其中部分内容如:rem.Media Queries网 ...

  5. 读《HTML5与CSS3权威指南（上册）》笔记

    第二章 1.内容类型:“text/html”.DOCTYPE声明:<!DOCTYPE html>.指定字符编码:<meta charset="utf-8"> ...

  6. 《HTML5与CSS3权威指南》读书笔记（上册）—HTML5篇

    豆瓣上的评分少且评价不太好,阅读当中发现几处刊物上的小问题,不过线下口碑貌似不错,基本上人手一本 上册五百多页,主讲H5,分为标签,本地存储,离线应用程序,新的API,获取地理位置信息标签包含表单,C ...

  7. HTML5与CSS3权威指南.pdf6

    第11章 获取地理位置信息 HTML5为window.navigator对象新增了一个geolocation属性 取得当前地理位置 void getCurrentPosition(onSuccess, ...

  8. HTML5与CSS3权威指南

    第一章:Web时代的变迁 HTML5放心使用的理由: 兼容性:HTML5在老板本的浏览器上也可以正常运行: 实用性:HTML5内部并没有封装什么很复杂的,不切实际的功能,而只是封装了简单实用的功能: ...

  9. HTML5与CSS3权威指南.pdf9

    第21章 Media Queries相关样式 该模块中允许添加媒体查询(media query)表达式,用以指定媒体类型,根据媒体类型来选择使用的样式(显示器.便携设备.电视机) 使用方法@media ...

随机推荐

  1. vba多条件查询更新EXCEL数据导access数据库

    功能:根据项目号和步骤ID,更新指定步骤完成时间.这里里边要匹配两个条件一个是项目ID “”projectID“” 另一个是 “”StepID“” 步骤ID. Sub SaveFini() Dim r ...

  2. Oracle 有排序的分页SQL写法

    第一种: SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM TABLE_NAME) A ) 第二种: SELECT * FROM ( ...

  3. RNAseq测序reads定位

    RNAseq测序reads定位 发表评论 3,210 A+ 所属分类:Transcriptomics   收  藏 获得RNA-seq的原始数据后,首先需要将所有测序读段通过序列映射(mapping) ...

  4. python实现bt种子 torrent转magnet

    Python实现bt转磁链  参考前人资料主要两种方式 1,利用python的bencode模块 2,安装libtorrent模块 尝试过两种方法特记录 环境:Windows系统  python 3 ...

  5. Linux 远程工具Screen 的应用

    挂断原理参考:https://www.ibm.com/developerworks/cn/linux/l-cn-screen/ 要求,python2 常用操作: 创建screen screen -L ...

  6. opencv的安装

    网上搜了好多文章安装opencv3.2.0都未能成功,写的也个不相同,后来找到了opencv官网的教程,看了后才发现,这上面才是最详细的. 于是按照opencv官网教程安装,安装的一半就中断了.经过苦 ...

  7. C/C++中volatile关键字详解

    1. 为什么用volatile? C/C++ 中的 volatile 关键字和 const 对应,用来修饰变量,通常用于建立语言级别的 memory barrier.这是 BS 在 "The ...

  8. 走进JDK(十二)------TreeMap

    一.类定义 TreeMap的类结构: public class TreeMap<K,V> extends AbstractMap<K,V> implements Navigab ...

  9. Effective Java -- 使可变性最小化

    为了使类成为不可变的,应该遵循以下五条原则: 1. 不要提供任何会下盖对象状态的方法 2. 保证类不会被扩展 3. 使所有的域都是final的 4. 使所有的域都成为私有的 5. 确保对于任何可变组件 ...

  10. xml文档格式学习笔记

    xml入门经典 (pdf书籍) https://www.cnblogs.com/zhaopengcheng/p/6848802.html