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 点赞
HTML5与CSS3权威指南笔记案例1的更多相关文章
- Html5与CSS3权威指南 百度云下载
Html5与CSS3权威指南 百度云下载 链接:http://pan.baidu.com/s/1hq6Dlvm 密码:php3
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- 【HTML5 4】《HTML5与CSS3权威指南》 step1 导读
一.教程重点:以 HTML5和CSS3的新功能和新特性 为导向,辅之以 实战型实例页面 二.内容概况: 第1部分:详细讲解HTML5相关知识,包括 各主流浏览器对HTML5的支持情况. HTML5与H ...
- 《HTML5与CSS3权威指南》读书笔记（下册）—CSS3篇
大而全的CSS3 API类型书,并带有一些实用案例讲解,层次分明分类明确,新增技术都做了详情介绍.个人觉得如果在细节和文字表达上再下些功夫会更出色,其中部分内容如:rem.Media Queries网 ...
- 读《HTML5与CSS3权威指南（上册）》笔记
第二章 1.内容类型:“text/html”.DOCTYPE声明:<!DOCTYPE html>.指定字符编码:<meta charset="utf-8"> ...
- 《HTML5与CSS3权威指南》读书笔记（上册）—HTML5篇
豆瓣上的评分少且评价不太好,阅读当中发现几处刊物上的小问题,不过线下口碑貌似不错,基本上人手一本 上册五百多页,主讲H5,分为标签,本地存储,离线应用程序,新的API,获取地理位置信息标签包含表单,C ...
- HTML5与CSS3权威指南.pdf6
第11章 获取地理位置信息 HTML5为window.navigator对象新增了一个geolocation属性 取得当前地理位置 void getCurrentPosition(onSuccess, ...
- HTML5与CSS3权威指南
第一章:Web时代的变迁 HTML5放心使用的理由: 兼容性:HTML5在老板本的浏览器上也可以正常运行: 实用性:HTML5内部并没有封装什么很复杂的,不切实际的功能,而只是封装了简单实用的功能: ...
- HTML5与CSS3权威指南.pdf9
第21章 Media Queries相关样式 该模块中允许添加媒体查询(media query)表达式,用以指定媒体类型,根据媒体类型来选择使用的样式(显示器.便携设备.电视机) 使用方法@media ...
随机推荐
- redis get乱码
- VBA解析Json(转)
Sub bluejson() 'ok Dim aa Set x = CreateObject("ScriptControl"): x.Language = "JScrip ...
- 爬取qq号
import reimport urllib.requestimport osimport jsonimport sslfrom collections import deque #把爬去的数据保存到 ...
- Json列表数据查找更新
/* 从Json数组按某个字段中查找记录 IN array 数据列表 fieldName 字段名称 fieldValue 字段值 OUT 查找到的数据列表 */ var SearchRecordsFr ...
- 20170506计划-----(基于python查询oracle语句)
在日常的工作中,经常接到开发同事查询生产SQL的请求,公司又不允许对开发开放查询SQL的权限,并且查询的堡垒机又很慢,计划做一个可以自动查询SQL的小工具,一周内完成吧. 大概功能实现了,一些涉及敏感 ...
- brace源码改造实现跨服务器监控-zjs
1.从GitHub上下载源码,本地编译,有部分代码编译报错,如下图: 百度搜索import sun.jvmstat.monitor.需要导入什么jar包:导入jdk/lib/tools.jar.
- Java学习笔记：多线程（二）
与线程生命周期相关的方法: sleep 调用sleep方法会进入计时等待状态,等待时间到了,进入就绪状态. yield 调用yield方法会让别的线程执行,但是不确保真正让出.较少使用,官方注释都说 ...
- 老赵点滴地址：http://blog.zhaojie.me/2009/05/a-simple-actor-model-implementation.html
老赵点滴地址:http://blog.zhaojie.me/2009/05/a-simple-actor-model-implementation.html
- 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式
最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...
- robotframework+selenium搭配chrome浏览器，web测试案例（搭建篇）
这两天发布版本 做的事情有点多,都没有时间努力学习了,先给自己个差评,今天折腾了一天, 把robotframework 和 selenium 还有appnium 都研究了一下 ,大概有个谱,先说说we ...