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 ...
随机推荐
- Mad Libs游戏，华氏与摄氏转换
华氏温度 与 摄氏温度的相互转换 公式:摄氏 ℃＝5/9(°F-32) 华氏°F＝ ℃×9/5+32 # -*- coding: UTF-8 -*- num=input('输入摄氏温度:') num ...
- LCA的两种写法
第一种是离线的Tarjan算法 #include<cstdio> using namespace std; int rd(){ ,fl=;char ch=getchar(); ;}ch=g ...
- mysql备份最近8天的数据库，老的自动删除方案
服务器上的处理脚本记录: [root@mysql01 test]# crontab -l0 2 * * * /bin/sh /script/sqlbackup.sh >/dev/null 2&g ...
- rpm --rebuilddb
rpm -ivh .....rpm 报Bus Error rpm --rebuilddb
- idea debug快捷键 快速查找类
快速查找类或者文件比如xml .txt Ctrl + Shift + N 快速查找类 双击Shift 选中代码右移 Tab 选中代码左移 Shift + Tab 选中代码上下移 Shift + Alt ...
- 第二阶段第六次spring会议
昨天我将对初始页面进行加工和修改. 我用两个小动物作为按钮分别进入动物便签界面和植物便签界面,可以让用户自由选择. 今天我将尝试对软件进行添加搜索引擎的界面. private void linkLab ...
- linux '--stdin'错误 -批量修改密码
虚拟机:VMware虚拟机 系统:Linux ubuntu 4.4.0-31-generic #50~14.04.1-Ubuntu SMP Wed Jul 13 01:07:32 UTC 2016 ...
- Eclipse neon 4.6 安装tomcat
问题: Eclipse neon 4.6并没有内置Tomcat,所以当我产生想要导入.war,并部署到服务器时,会看到创建服务处是下面的情况: 也就是说,没有tomcat服务可以选择:为此我需配置To ...
- MUI中超链接失效解决办法
重新绑定a标签点击事件,用 plus.runtime.openURL(this.href) 打开新页面
- git操作之git clean删除一些没有git add的文件
删除 一些 没有 git add 的 文件: git clean 参数 -n 显示 将要 删除的 文件 和 目录 -f 删除 文件,-df 删除 文件 和 目录