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 ...
随机推荐
- vscode和gitee的使用
1.安装git 2.生成公钥 $ ssh-keygen -t rsa -C "youremail@youremail.com" # Generating public/privat ...
- Linode KVM安装Windows系统的设置方法
以前我们用老的Linode VPS主机的时候是采用的XEN架构的,如今我们新注册账户,以及新开的机器是KVM架构.根据后台的设置,我们看到好多网友有在LINODE中安装WINDOWS系统,理论上是可以 ...
- 20172306 2018-2019-2 《Java程序设计与数据结构》第九周学习总结
20172306 2018-2019-2 <Java程序设计与数据结构>第九周学习总结 教材学习内容总结 无向图 图是由结点和这些结点之间的连接构成 就图来说,结点叫做顶点,结点之间的连接 ...
- EasyPR源码剖析（6）：车牌判断之LBP特征
一.LBP特征 LBP指局部二值模式,英文全称:Local Binary Pattern,是一种用来描述图像局部特征的算子,LBP特征具有灰度不变性和旋转不变性等显著优点. 原始的LBP算子定义在像素 ...
- jira6.3.6创建问题不自动发邮件通知的问题
装完jira6.3.6后,设置好邮件服务器,测试没有问题.但是创建问题不自动发邮件提示用户.折腾了大半天,请教了一位大神,终于搞定.步骤是: agile->系统->用户界面->用户缺 ...
- [二分答案][NOIP2015]跳石头
跳石头 题目描述 一年一度的“跳石头”比赛又要开始了!这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有 N 块岩石(不含起 ...
- pypi batch download
https://wiki.archlinux.org/index.php/Python_package_guidelines_(%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87 ...
- 关于管理，你可能一直有 3 个误解zz
很多管理者认为,下属绩效低是由于其能力不行.其实,下属的绩效是由管理者决定的.一个好的管理者,必须对管理有正确的认知,才能形成有效的管理行为,让下属拥有绩效,并获得成长.来源丨春暖花开(ID:CCH_ ...
- REdis主挂掉后复制节点才起来会如何？
结论: 这种情况下复制节点(即从节点)无法提升为主节点,复制节点会一直尝试和主节点建立连接,直接成功.主节点恢复后,复制节点仍然保持为复制节点,并不会成为主节点. 复制节点无法提升为主节点的原因是复制 ...
- 如何在已安装Python解释器的Linux上更新Python
在Linux环境下升级Python (附:解决pip报错 subprocess.CalledProcessError: Command '('lsb_release', '-a')' returned ...