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 ...
随机推荐
- Python学习第五天
复习内容: · 迭代器&生成器 · 装饰器 · Json & pickle 数据序列化 · 软件目录结构规范yi 一.生成器 1. 列表生成式: 2. 生成器的定义:在Pyth ...
- 7、XAML的编译过程
对于动态皮肤场景来说,在运行时加载和解析XAML是有意义的,对于那些没有支持XAML编译的.NET语言也是有意义的.但大多数WPF项目会通过MSBuild和Visual Studio完成XAML编译. ...
- 类的const成员
类的const成员包括const数据成员和const成员函数: 1.const数据成员: 和普通的const变量一样,定义时初始化,且不能修改 2.const成员函数: const成员函数只能访问其他 ...
- UML 小结（2）- 理论理解
什么是UML: UML是统一建模语言(UML是 Unified Modeling Language的缩写)是用来对软件密集系统进行可视化建模的一种语言. UML为面向对象开发系统的产品进行说明.可视化 ...
- 两行代码搞定UITableView无数据无网络显示-b
不知是否有像我一样的,每次写TableView在监听网络和无数据源时逻辑处理提示视图都是一堆代码,很繁琐也很重复的垃圾代码(可能就只有我这样
- try-catch-finally中return的执行情况分析
try-catch-finally中return的执行情况分析: 1.在try中没有异常的情况下try.catch.finally的执行顺序 try --- finally 2.如果try中有异常,执 ...
- php多条件查询
$sql)"; if(!empty($uid)) { $sql .=" and uid= ".$uid; } if(!empty($time1) && e ...
- linux_fedora nexus_auto_start
fedora20发布,不对rc.local支持,其实只是删除了rc.local文件,如果想在开机时能够运行自己写的脚本,只要新建rc.local文件就可以了,下面让我们来测试下吧: 环境:fedo ...
- hadoop 蓄水池抽样 分布式抽样
#!/usr/bin/env python # -*- coding=utf8 -*- import sys import os import random #input split 1565 #&g ...
- pos机套现是怎么回事
POS机是商家为了促进消费,向银行申请的刷卡机它的主要功能是转账就是通过客户的刷卡,把相对的金额转入商户的帐户银行会根据笔数或金额向商户收取手续费非法套现就是客户并未和商户产生贸易往来,单纯通过pos ...