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 ...
随机推荐
- php取得当前访问url文件名的几种方法
php下获取当前访问的文件名的几种方法.推荐函数:一是PHP获取当前页面的网址: dedecms用的也是这个哦. <?php //获得当前的脚本网址 function GetCurUrl() { ...
- 用PHP判断客户端是否是手机
<?php function isMobile(){ $useragent = isset($_SERVER['HTTP_USER_AGENT'])? $_SERVER['HTTP_USER_A ...
- 用JavaScript刷新框架子页面的七种方法
下面以三个页面分别命名为framedemo.html,top.html,button.html为例来具体说明如何做. 其中framedemo.html由上下两个页面组成,代码如下: < !DOC ...
- openerp学习笔记 domain 增加扩展支持，例如支持 <field name="domain">[('type','=','get_user_ht_type()')]</field>
示例代码1,ir_action_window.read : # -*- coding: utf-8 -*-from openerp.osv import fields,osv class res_us ...
- hdu 5690 2016"百度之星" - 初赛（Astar Round2A） All X 快速二次幂 || 寻找周期
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5690 题意:m个数字全为x mod k ?= c;其中m <= 1010,0 < c,k ...
- cadence原理图绘制方法
仅记录了绘制好原理图后的一些处理: 1 重写编写元件编号 1)Tool -> Annotate 在Packing选项卡中 的Action 选中 Reset part references ...
- Array和ArrayList的异同点【转】
相信数组是大家在编程最常使用的,不论任何语言都存在数组这样的数据结构,由于C#语言是完全面向对象的,所以在C#中的数组也是对象,实际上就是Array类的实例,Array类的使用可以说是使用最频繁的,只 ...
- Sql Server 常用自定义函数
-- select * from [dbo].[SplitToTable]('ADSF','|') -- 分解字符串 ALTER FUNCTION [dbo].[SplitToTable] ( @Sp ...
- 从零开始学ios开发（十二）：Table Views（中）UITableViewCell定制
我们继续学习Table View的内容,这次主要是针对UITableViewCell,在前一篇的例子中我们已经使用过UITableViewCell,一个默认的UITableViewCell包含imag ...
- python 笔记总结
python 3.5 面向对象:类:具有同种属性的对象称为类,是个抽象的概念.比如说:汽车.人.狗.神:对象:日常生活中的所有东西都是对象,是类的实例化.比如说:推土车是汽车的实例化:姚明是人的实例 ...