HTML5入门4---HTML5 与 HTML4 同一网页的不同写法
HTML4写法
css:
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;
max-width: 800px;
}
.Header {
background-color: #7695FE;
border: thin #336699 solid;
padding: 10px;
margin: 10px;
text-align: center;
}
.Header h1 {
margin: 0px;
color: white;
font-size: xx-large;
}
.Header .Teaser {
margin: 0px;
font-weight: bold;
}
.Header .Byline {
font-style: italic;
font-size: small;
margin: 0px;
}
.Content {
font-size: medium;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
padding-top: 20px;
padding-bottom: 5px;
padding-left: 50px;
padding-right: 50px;
line-height: 120%;
}
.Content .LeadIn {
font-weight: bold;
font-size: large;
font-variant: small-caps;
}
.Content h2 {
color: #24486C;
margin-bottom: 2px;
font-size: medium;
}
.Content p {
margin-top: 0px;
}
.Footer {
text-align: center;
font-size: x-small;
}
.Footer .Disclaimer {
font-style: italic;
}
.Footer p {
margin: 3px;
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Apocalypse Now</title>
<link rel="stylesheet" href="ApocalypsePage_Original.css">
</head> <body>
<div class="Header">
<h1>How the World Could End</h1>
<p class="Teaser">Scenarios that spell the end of life as we know</p>
<p class="Byline">by Ray N. Carnation</p>
</div> <div class="Content">
<p><span class="LeadIn">Right now</span>, you're probably feeling pretty good. After all, life in
the developed world is comfortable<span class="style1">—</span>probably more comfortable than it's
been for the average human being throughout all of recorded history.</p> <p>But don't get too smug. There's still plenty of horrific ways it
could all fall apart. In this article, you'll learn about a few of our
favorites.</p> <h2>Mayan Doomsday</h2>
<p>Skeptics suggest that the Mayan calendar simply rolls to a new
5,126-year era after 2012, and doesn't actually predict a life-ending
apocalypse. But given that the long-dead Mayans were wrong about
virtually everything else, why should we trust them on this?
</p> <h2>Robot Takeover</h2>
<p>Not quite as frightening as a Vampire Takeover or Living-Dead
Takeover, a robot rebellion is still a disquieting thought. We are
already outnumbered by our technological gadgets, and even Bill Gates
fears the day his Japanese robot slave turns him over by the ankles
and asks (in a suitably robotic voice) "Who's your daddy now?"
</p> <h2>Unexplained Singularity</h2>
<p>We don't know how the universe started, so we can't be sure it won't
just end, maybe today, and maybe with nothing more exciting than a
puff of anti-matter and a slight fizzing noise.</p> <h2>Runaway Climate Change</h2>
<p>Dismissed by some, Al Gore's prophecy of doom may still come true. If
it does, we may have to contend with vicious storms, widespread food
shortages, and surly air conditioning repairmen.</p> <h2>Global Epidemic</h2>
<p>Some time in the future, a lethal virus could strike. Predictions
differ about the source of the disease, but candidates include
monkeys in the African jungle, bioterrorists, birds and pigs with the
flu, warriors from the future, an alien race, hospitals that use too
many antibiotics, vampires, the CIA, and unwashed brussel sprouts.
Whatever the source, it's clearly bad news.
</p>
</div> <div class="Footer">
<p class="Disclaimer">These apocalyptic predictions do not reflect the views of the
author.</p>
<p>
<a href="AboutUs.html">About Us</a>
<a href="Disclaimer.html">Disclaimer</a>
<a href="ContactUs.html">Contact Us</a>
</p>
<p>Copyright © 2015</p>
</div>
</body>
</html>
HTML5写法
css:
body{
font-family: "微软雅黑";
max-width: 800px;
}
header{
background-color:#7695FE;
border:thin #336699 solid;
padding:10px;
margin: 10px;
text-align: center;
}
header h1{
margin: 0px;
color: white;
font-size: xx-large;
}
header h2{
font-size:large;
font-weight: bold;
}
header .Teaser{
font-size: large;
font-weight: :bold;
}
header .Byline{
font-style: initial;
font-size: small;
margin: 0px;
}
.Content{
font-family:"微软雅黑";
font-size: medium;
padding-top: 20px;
padding-bottom: 5px;
padding-left: 50px;
padding-right: 50px;
line-height: 120%;
}
.Content.LeadIn{
font-weight: bold;
font-size: large;
font-variant: small-caps;
}
.Content h2{
color:#336699;
margin-bottom: 2px;
font-size: medium;
}
.Content p{
margin-top: 0px;
}
footer{
text-align: center;
font-size: x-small;
}
footer .Disclaimer{
font-style: italic;
}
footer p{
margin: 3px;
}
.FloatFigure{
float: left;
margin-left: 0px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
}
.FloatFigure figcaption{
max-width: 300px;
font-size: :small;
font-style: italic;
margin-bottom: 5px;
text-align: center;
}
.PullQuote{
float: right;
max-width: 300px;
border-top:thin black solid;
border-bottom: thin black solid;
font-size:30px;
line-height: 130%;
font-style: italic;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 15px;
margin-bottom: 10px;
}
.PullQuote img{
vertical-align: bottom;
}
html:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<title>第二个页面</title>
<link rel="stylesheet" href="css/my.css">
</head> <body>
<article>
<header>
<h1>How the World Could End</h1>
<p class="Teaser">Scenarios that spell the end of life as we know</p>
<p class="Byline">by Ray N. Carnation</p>
</header>
<div class="Content">
<p><span class="LeadIn">Right now</span>, you're probably feeling pretty good. After all, life in the developed world is comfortable<span class="style1">—</span>probably more comfortable than it's been for the average human being throughout all of recorded
history.
</p>
<figure class="FloatFigure">
<img src="resource/human_skull.jpg" alt="Human Skull" />
<figcaption>Bill Gates fears the day his Japanese robot</figcaption>
</figure>
<p>But don't get too smug. There's still plenty of horrific ways it could all fall apart. In this article, you'll learn about a few of our favorites.
</p> <h2>Mayan Doomsday</h2>
<p>Skeptics suggest that the Mayan calendar simply rolls to a new 5,126-year era after 2012, and doesn't actually predict a life-ending apocalypse. But given that the long-dead Mayans were wrong about virtually everything else, why should we trust them
on this?
</p> <h2>Robot Takeover</h2>
<p>Not quite as frightening as a Vampire Takeover or Living-Dead Takeover, a robot rebellion is still a disquieting thought. We are already outnumbered by our technological gadgets, and even Bill Gates fears the day his Japanese robot slave turns him
over by the ankles and asks (in a suitably robotic voice) "Who's your daddy now?"
</p>
<aside class="PullQuote">
<img src="resource/quotes_start.png" /> we may have to contend with vicious storms, widespread food shortages
<img src="resource/quotes_end.png" />
</aside>
<!--侧边栏 -->
<h2>Unexplained Singularity</h2>
<p>We don't know how the universe started, so we can't be sure it won't just end, maybe today, and maybe with nothing more exciting than a puff of anti-matter and a slight fizzing noise.</p> <h2>Runaway Climate Change</h2>
<p>Dismissed by some, Al Gore's prophecy of doom may still come true. If it does, we may have to contend with vicious storms, widespread food shortages, and surly air conditioning repairmen.</p> <h2>Global Epidemic</h2>
<p>Some time in the future, a lethal virus could strike. Predictions differ about the source of the disease, but candidates include monkeys in the African jungle, bioterrorists, birds and pigs with the flu, warriors from the future, an alien race, hospitals
that use too many antibiotics, vampires, the CIA, and unwashed brussel sprouts. Whatever the source, it's clearly bad news.
</p>
</div>
</article>
<footer>
<p class="Disclaimer">These apocalyptic predictions do not reflect the views of the author.
</p>
<p>
<a href="AboutUs.html">About Us</a>
<a href="Disclaimer.html">Disclaimer</a>
<a href="ContactUs.html">Contact Us</a>
</p>
<p>Copyright © 2015</p>
</footer>
</body> </html>
素材
HTML5入门4---HTML5 与 HTML4 同一网页的不同写法的更多相关文章
- HTML5入门：HTML5的文档声明和基本代码
HTML5的文档声明: HTML5的文档声明,不同于HTML4.0和XHTML,它精简了许多代码,只保留<!DOCTYPE html>开头,必须位于HTML5文档的第一行,它可以用来告诉浏 ...
- HTML5入门以及新标签
HTML5 学习总结(一)--HTML5入门与新增标签 目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 ...
- 推荐10个适合初学者的 HTML5 入门教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
- html5入门
1.canvas标签 <canvas id="myCanvas"></canvas><!--canvas标签定义图形,比如图标和其他图像--> ...
- HTML5学习总结——HTML5入门与新增标签
一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...
- 2018年html5入门到精通教程电子书百度云盘下载共22本
名称 查看 <HTML5启动和运行>(HTML5.Up.and.Running)扫描版[PDF] 下载 <Pro HTML5 Performance>(Pro HTML5 Pe ...
- HTML5 入门基础
HTML5概述HTML5於2004年被WHATWG(网页超文本技术工作小组)提出,於2007年被W3C接纳.在2008年1月22日,第一份正式草案已公布.WHATWG表示该规范是目前正在进行的工作,仍 ...
- 给萌新HTML5 入门指南
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. HTML5的发展改变了互联网技术趋势,前端热度依旧不减,所以对于应用开发人员 ...
- HTML5入门篇
---- HTML5简介 HTML5 是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本,现在仍处于发展阶段,但大部分浏览器已经支持某些 HTML5 ...
随机推荐
- AngularJS(14)-动画
AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!DOCTYPE html> &l ...
- 删除所有表数据的sql语句
EXEC sp_MSForEachTable 'ALTER TABLE ? NOCHECK CONSTRAINT ALL' EXEC sp_MSForEachTable 'ALTER TABLE ? ...
- smarty安装及例子
环境: smarty3.1.16 1.在http://www.smarty.net/download下载最新smarty包,window选择zips,linux下选择tar.gz.以windows为例 ...
- mysql删除、修改字段默认值
alter table表名alter column字段名drop default; (若本身存在默认值,则先删除) alter table 表名 alter column 字段名 set defaul ...
- java 语法糖
package syntax.autoCase; import java.util.Arrays; import java.util.List; public class autoCase { pub ...
- 左右滑动删除ListView条目Item--第三方开源--SwipeToDismiss
Android的SwipeToDismiss是github上一个第三方开源框架(github上的项目链接地址:https://github.com/romannurik/Android-SwipeTo ...
- How to generate number Sequence[AX 2012]
Suppose we want create number sequence for Test field on form in General ledger module Consideratio ...
- .NET特性-Attribute
两篇文章有助于学习Attribute特性的概念. http://blog.csdn.net/byondocean/article/details/6802111 http://www.cnblogs. ...
- Linux磁盘空间爆满，MySQL无法启动
OS: Cent OS 6.3 DB: 5.5.14 看到一个帖子,在服务器上安装了oracle和mysql数据库,mysql数据库忘记开启innodb_file_per_table,导致插入测试数据 ...
- JAVA中toString方法
因为它是Object里面已经有了的方法,而所有类都是继承Object,所以"所有对象都有这个方法". 它通常只是为了方便输出,比如System.out.println(xx),括号 ...