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 ...
随机推荐
- python基础之Day20part1
一.hash算法 什么是hash? 类似工厂加工的过程,传bytes串,经过运算返回字符 hash相当于工厂,传给hash算法的内容是原材料,hash值为产品 为何用hash? hash三大特性: 1 ...
- hbase_基本命令
hbase 区分大小写. 1) create '表名','列族名' --多个列族名用逗号分隔 2) list desc(查询表名详细信息) 3) put '表名','行健','列族:列名',' ...
- 第二阶段第五次spring会议
昨天我对软件加上了写便签时自动加上时间的功能. 今天我将对初始页面进行加工和修改. 我用两个小动物作为按钮分别进入动物便签界面和植物便签界面,可以让用户自由选择. 明天我将尝试对软件进行添加搜索引擎的 ...
- AX_DataSource
for (custInvoiceJourLocal = custInvoiceJour_ds.getFirst(true) ? custInvoiceJour_ds.getFirst(true) : ...
- Winform .NET 利用NPOI导出大数据量的Excel
前言:公司让做一个导出数据到Excel的小工具,要求是用户前端输入sql语句,点击导出按钮之后,将数据导出到Excel,界面如图所示:文件下端显示导出的进度 遇到的问题: 1.使用NPOI进行Exce ...
- 关于webpack使用的一些问题
1.镜像安装 npm安装webpack慢的爆炸,如果不能FQ,试下下面的国内良心镜像,浑身都舒爽了. npm config set registry https://registry.npm.taob ...
- ASCII, Unicode, UTF-8, 8进制, 16进制等各种编码学习理解笔记
字符编码的发展历史 Unicode和UTF-8有何区别? 在这个问题下的于洋的最高票回答中,比较完整地介绍了字符编码的发展历史,为了便于记忆,再次简要概括一番. 一个字节:最初一个字节的标准是混乱的, ...
- 模板引擎，中间件，spring AOP原理
1. 主流模板引擎有哪些 https://blog.csdn.net/wangmx1993328/article/details/81054474 2. 解释模板引擎是个什么东西 https://ww ...
- java根据图片创建日期,或最后修改日期重命名
import java.io.BufferedReader; import java.io.File; import java.io.FileNotFoundException; import jav ...
- Qt打包发布exe
1.首先以 release 方式编译源代码,然后将生成的a. exe 程序放到一个单独的文件夹中. 2.再从开始菜单打开 Qt 命令行工具. 3.在命令行中,进入到第一步中a. exe 程序所在的文件 ...