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 ...
随机推荐
- stm32定时器时钟以及中间对齐模式
在永磁同步电机的控制中,需要对电机的三相定子施加一定的电压,才能控制电机转动.现在用的较多的是SVPWM(SVPWM的具体原理会在后面另写一篇博客说明),要想产生SVPWM波形,需要控制的三相电压呈如 ...
- Redis：MySQL算老几？
原创: 码农翻身刘欣 前言:上一篇<MySQL:缓存算什么东西?>里挖了一个坑,也有很多人说没看过瘾,今天接着写,把坑填上,不过得把视角换一下,让Redis上台发言. 我知道MySQL看我 ...
- Spring in Action 第一章 Spring之旅
1.1 简化Java开发 1.1.2 依赖注入(DI) 松耦合:如果一个对象只通过接口(而不是具体实现或初始化过程)来表明依赖关系,那么这种依赖就能在对象本身毫不知情的情况下,用不同的具体实现进行替代 ...
- 一个不错的多叉树, stl风格
tree<std::string> tr9; tree<std::string>::pre_order_iterator iter1; tr9.set_head("h ...
- VMware NAT做端口映射
转自百度 原文地址: https://jingyan.baidu.com/article/c35dbcb0d1ff248916fcbc0d.html 注意事项:Window宿主电脑要调整防火墙.
- g++编译X265
自己参考用: msys2 编译X265的命令 编译用工具安装 pacman -S git make tar automake autoconf libtool pkg-config mingw-w64 ...
- this()基础用法
this()表示调用构造方法,此种调用只能用在构造方法中,即构造方法中调用构造方法this(实参). 1.this().this(实参)必须方法构造方法的第一行 2.在有参数构造方法中调用无参数构造方 ...
- BUAA_OO第一单元总结
OO第一单元总结 目录 作业总体分析 代码结构分析 遇到的bug问题 找到bug的方法 结语 一.作业总体分析 尽管这个单元三次作业都是表达式求导,但我认为每次作业的侧重点是不同的. 对于第一次 ...
- Python建立时间事件引擎原理剖析
作为python小白,学习量化交易的曲线是非常陡峭的,唯一好的办法就是一点点啃代码.以下代码案例来自vnpy的引擎代码. # encoding: UTF-8 #定义时间事件 EVENT_TIMER = ...
- AspNetCore中的IdentityServer4客户端认证模式实现
1 AuthorizationServer using IdentityServer4; using IdentityServer4.Models; public class Startup { pu ...