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 点赞

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=ijihbb&title=HTML5与CSS3权威指南笔记案例1

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/371126.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java循环的概念_Java数据结构之循环队列简单定义与用法示例

本文实例讲述了Java数据结构之循环队列简单定义与用法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;一、概述&#xff1a;1、原理&#xff1a;与普通队列的区别在于循环队列添加数据时&#xff0c;如果其有效数据end maxSize - 1(最大空间)的话&#xff0c;end指针…

sass变量

sass变量用法 1、sass变量必须以$符开头&#xff0c;后面紧跟着变量名 2、变量值和变量名之间就需要使用冒号(:)分隔开&#xff08;就像CSS属性设置一样&#xff09; 3、如果值后面加上!default则表示默认值 默认变量 sass的默认变量&#xff1a;仅需要在值后面加上!defaul…

根据您的命令-命令设计模式

命令设计模式是一种广为人知的设计模式&#xff0c;它属于行为设计模式&#xff08;“四人帮”的一部分&#xff09;。 顾名思义&#xff0c;它与应用程序中的动作和事件有关。 问题陈述&#xff1a; 假设有一个网页将在其中包含多个菜单的情况。 编写此代码的一种方法是使条件…

用js和jQuery做轮播图

Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:relative; }.images{position:relative;width: 100%;height: 400px; } .images img{position:absolute;left: 0;top: 0;width: 100%;height: 400px;opacity: 0;fi…

【开发调试】谷歌浏览器中调试移动网页和测试网速下页面效果

、 今天有幸给大家分享一下谷歌浏览器针对移动网页测试的技巧&#xff0c;主要是最近做个微信公共号网站。所以就要对页面测试拉。移动网页我们最长测得就是各种手机大小的页面效果和出现网络问题的效果展示。 今天就简单分享下在谷歌浏览器测试页面的适配和网速限制展示。…

拼多多分享好友砍价Java实现_拼多多砍价怎么分享到朋友圈 砍价发到微信朋友圈方法...

拼多多是一款电商社交的共享式购物平台&#xff0c;现在还推出了砍价的活动&#xff0c;只要邀请好友砍价&#xff0c;你就以最低的价格购买商品&#xff0c;还可以可能是免费拿到&#xff0c;那么今天小编就给大家讲讲如何将自己的砍价信息分享到微信朋友圈。首先下载手机拼多…

通过6个简单的步骤在Windows上运行Apache Hive

注意 &#xff1a;您需要安装cygwin才能运行本教程&#xff0c;因为Hadoop&#xff08;Hive需要&#xff09;需要cygwin才能在Windows上运行。 至少&#xff0c;系统中必须存在Basic&#xff0c;Net&#xff08;OpenSSH&#xff0c;tcp_wrapper软件包&#xff09;和与安全相关的…

vue 环境的搭建及初始化项目

其实超级简单&#xff0c;虽然网上很多&#xff0c;但是我顺便记录下相当于做笔记吧 1nodejs 的安装&#xff0c; 在node官网下载&#xff0c;点击安装&#xff0c;安装的时候最好选择路径在d盘 2设置环境变量 我的电脑-->属性-->系统环境变量- 系统变量新增一个NODE…

Java堆转储:您可以完成任务吗?

如果您像我一样对Java性能充满热情&#xff0c;那么堆转储分析对您来说应该不是一个谜。 如果是这样&#xff0c;那么好消息是您将有机会提高您的Java故障诊断技能和JVM知识。 JVM现已发展到今天&#xff0c;与旧的JDK 1.0 – JDK 1.4天相比&#xff0c;今天生成和分析JVM堆转…

java 调用 ictclas50_1-Ictclas50分词系统ForJava

Ictclas50是一个分词库&#xff0c;我嘛主要用来做中文分词&#xff0c;其也能分出词性等东西。1.环境搭建进入到下载页面进行下载&#xff1a;如下图&#xff1a; 因为我的系统是64位的windows&#xff0c;所以选择了到数第三行进行下载。其JAVA版本是通过JNI去调用dll库&…

Beam概念学习系列之Pipeline Runners

不多说&#xff0c;直接上干货&#xff01; https://beam.apache.org/get-started/beam-overview/ 在 Beam 管道上运行引擎会根据你选择的分布式处理引擎&#xff0c;其中兼容的 API 转换你的 Beam 程序应用&#xff0c;让你的 Beam 应用程序可以有效的运行在指定的分布式处理引…

运行 java classnotfound_JAR运行出现ClassNotFoundException异常的解决办法

2009年10月30日最近在弄个聊天室,由于要跟数据库通信,用到了JDBC的3个jar,在eclipse里OK的,但布置到服务器坏事了,不知道怎么弄JDBC的3个jar了写个autoStart.batjava -jar chatServer.jarpause运行报错:F:\mydocuments\java project\socketTest\release>java -jar chatServe…

idea 创建多模块依赖Maven项目

转载地址&#xff1a; http://www.cnblogs.com/tibit/p/6185704.html idea 创建多模块依赖Maven项目 本来网上的教程还算多&#xff0c;但是本着自己有的才是自己的原则&#xff0c;还是自己写一份的好&#xff0c;虽然可能自己也不会真的用得着。 1. 创建一个新maven项目 2.…

用Java弹出创建新的消息通知

首先创建JFrame作为弹出窗口。 在其中添加一些JLabel以包含信息&#xff0c;并在适当的位置分配它们&#xff0c;使其看起来像一条通知消息。 下面给出了示例代码&#xff1a; String message You got a new notification message. Isnt it awesome to have such a notificat…

定位-固定定位

把box2设为固定定位&#xff1a; <!DOCTYPE html> <html lang"en" dir"ltr"><head><meta charset"utf-8"><title>定位</title><style media"screen">.box1{width:100px; height: 100px;ba…

Java并发执行器的懒惰开发人员简介

如果我告诉您util.concurrent API自2004年起提供此类服务&#xff0c;我就会自欺欺人。但是&#xff0c;我想回顾一下一些很酷的功能。 并发专家&#xff0c;现在是时候关闭该窗口了。 所有其他人&#xff0c;请紧紧抓住乐趣。 你不会忘记你的根源 执行程序是具有单个执行方法…

《我们应该怎样做需求分析》阅读笔记

认识&#xff1a;软件需求分析是贯穿软件项目从出生到成长或者死亡的&#xff0c;我们必须搞清楚到手的软件是为了什么要做什么做成什么样&#xff0c;通过顾客的描述彼此的合作分析需求与业务逻辑&#xff0c;不断改进从而实现软件在合理范围内符合顾客要求。 怎么做&#xff…

(转)VS2010/MFC编程入门之前言

鸡啄米的C编程入门系列给大家讲了C的编程入门知识&#xff0c;大家对C语言在语法和设计思想上应该有了一定的了解了。但是教程中讲的例子只是一个个简单的例程&#xff0c;并没有可视化窗口。鸡啄米在这套VS2010/MFC编程入门教程中将会给大家讲解怎样使用VS2010进行可视化编程&…

JavaOne 2012:JavaFX图形技巧和窍门

我回到希尔顿&#xff08;皇家宴会厅B&#xff09;看了Richard Bair的&#xff08;Oracle Java客户架构师&#xff09;的“ JavaFX图形技巧和窍门”。 Bair与FX Experience相关联&#xff0c;并且显然了解JavaFX。 拜尔说&#xff0c;他演讲的主题是表演。 他告诫说&#xff0c…

web前端知识点1

1. input属于窗体元素,层级显示比flash、其它元素都高。请判断这句话的正确与否。 错误 层级显示优先级&#xff1a; frameset > 表单元素 > 非表单元素 在html中&#xff0c;帧元素&#xff08;frameset&#xff09;的优先级最高&#xff0c;表单元素比非表单元素的优…