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 ...
随机推荐
- IOS_修改项目模板
1. /Applications/Xcode.app/Contents/Developer/Library/Xcode/Templates/File\ Templates/Source/Cocoa\ ...
- ASP专栏——ASP生成静态文件（用于大量文章）
对于Web开发人员来说,生成静态文件这个概念并不陌生. 对于Web开发来说,如何能避免客户端访问时不停的查询数据库?现在比较常用的有两种方法,一种是使用缓存技术,将查询出来的结果缓存至缓存框架中,以后 ...
- MySQL主从修复
MySQL主从故障修复 测试库:192.168.1.2 主192.168.1.3 从 192.168.1.4 主 4又是2的从库192.168.1.5 从 有人修改了192.168.1.2和192.1 ...
- python之域与属性
python, javascript中域与属性是二个不同的概念, 域就是变量, 而属性则是符合某些约束, 例如getter, setter...等的特殊"变量". python中使 ...
- POJ 1195 2维线段树(树套树实现) 树状数组
1: #include <stdio.h> 2: #include <string.h> 3: #include <stdlib.h> 4: #include &l ...
- Cookie 获取
二级域名可以获取一级域名的Cookie值 二级域名下删除顶级域名下的Cookie,需要添加顶级域名的Cookie作用域 /// <summary> /// 根据cookie名称删除 /// ...
- <a href='?out=login'>是什么意思
<a href='?out=login'>退出</a>前面加上问号?就是GET方式传递out=login是要传递的数据点这个链接就可以执行 接下来通过$_GET["o ...
- html5游戏引擎-Pharse.js学习笔记（一）
1.前言 前几天随着flappy bird这样的小游戏的火爆,使我这种也曾了解过html5技术的js业余爱好者也开始关注游戏开发.研究过两个个比较成熟的html5游戏引擎,感觉用引擎还是要方便一些.所 ...
- mysql注入绕过的一些技巧
虽然mysql + php的开发中可以使用pdo中,但是有些老久的程序没有使用,或其他原因 1.注释绕过 select/*comment*/user/*zzsdsdsf*/from mysql.use ...
- 一个有趣的 SQL 查询(查询7天连续登陆)
一个有趣的 SQL 查询 一个朋友有这样一个SQL查询需求: 有一个登录表(tmp_test),包含用户ID(uid)和登录时间(login_time).表结构如下: . row ********** ...