重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
HTML5设计和修改的页面实例分析
今天小编给大家分享一下HTML5设计和修改的页面实例分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
创新互联公司主要从事网站制作、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务莲池,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
ApocalypsePage_Original.html，这是一个格式非常规范的页面，所有的样式均来自于外部样式表。
XML / HTML代码将内容复制到文本
<！DOCTYPE html >
< html lang = “ zh-CN” >
<头>
< meta charset = “ utf-8” >
< title >立即启示
< link rel = “ stylesheet” href = “ ApocalypsePage_Original.css” >
<身体>
< div class = “标题” >
< h2 >世界如何终结
< p class = “ Teaser” >我们所知道的会终结生命的场景
< p class = “ Byline” > Ray N.康乃馨
<！-结束标题->
< div class = “内容” >
< p > < span class = “ LeadIn” >现在 ，您可能感觉不错。毕竟，发达国家的生活很舒适< span class = “ style1” > — 可能比整个记录的历史上的普通人类要舒适得多。
< p >但是不要自鸣得意。仍然有很多可怕的方法可以使它崩溃。在本文中，您将了解一些我们的最爱。
< h3 >玛雅世界末日
< p >怀疑论者的看法是玛雅历法简单地卷到一个新的5126年时代的2012年之后，而实际上并没有预测结束生命的启示。但是考虑到已死的玛雅人实际上在其他所有方面都是错误的，为什么我们应该在此方面信任他们呢？
< h3 >机器人接管
< p >虽然没有像吸血鬼接管或活死人接管那样令人恐惧，但是机器人叛乱仍然是令人不安的想法。我们的科技产品已经不胜枚举了，甚至比尔·盖茨（Bill Gates）都担心他的日本机器人奴隶被脚踝翻过来的那一天，并问（以适当的机器人声音）“现在你是谁的爸爸？”
< h3 >无法解释的奇点
< p >我们不知道宇宙是如何开始的，所以我们不能确定宇宙不会只是结束，也许是今天，也许只有一点点反物质和轻微的嘶嘶声才令人兴奋。
< h3 >失控的气候变化
< p >有些不屑一顾，厄运戈尔的预言仍可能成真。如果确实如此，我们可能不得不应对恶性风暴，广泛的食物短缺以及空调维修人员的状况。
< h3 >全球流行
< p >在今后一段时间内，一种致命的病毒可能会罢工。对该疾病的来源有不同的预测，但候选对象包括非洲丛林中的猴子，生物恐怖分子，患有流感的鸟类和猪，未来的战士，外星人种族，使用过多抗生素的医院，吸血鬼，CIA和未洗净的球芽甘蓝。无论来源如何，这显然都是坏消息。
<！-最终内容->
< div class = “页脚” >
< p class = “ Disclaimer” >这些世界末日的预测并不反映作者的观点。
< p >
<一个HREF = “AboutUs.html” >关于我们
<一个HREF = “Disclaimer.html” >声明
<一个HREF = “ContactUs.html” >联系我们
< p >版权所有©2014
<！-结束页脚->
在不增加任何CSS样式表之前，效果如下：上面通过三个
将页面分成了三个部分，顶部的页眉，中部的内容和底部的页脚。
这个示例中的样式表很简单，整个页面最大宽度设置为800 ，，避免文本在宽屏显示器上显示过长。页眉放在一个带有蓝色边框的盒子中，内容区的多个都增加了内边距，而页脚在整个页面的底部居中。
ApocalypsePage_Original.css样式文件内容如下：
XML / HTML代码将内容复制到文本
@charset“ utf-8”;
/ * CSS文档* /
身体{
/ * font-family要使用安全字体，按照先特殊后一般的原则，
先指定您想要的字体，然后是保险一些的字体，
最后以sans-serif字体结尾* /
字体系列：“ Lucida sans Unicode”，“ Lucida Grande”，日内瓦，sans-serif；
最大宽度：800px；/ *最大宽度不超过800预期* /
}
/ *页面顶部的标题区样式* /
。标题{
背景颜色：＃7695FE; / *接受任何颜色值* /
边框：薄＃336699固体；/ *多合一的border属性* /
填充：10px; / * 10的内边距，包围与内容之间的距离* /
边距：10px; / * 10的外边距，包围与周围元素之间的距离* /
文本对齐：居中；/ *头部文字居中* /
}
/ *页眉中标题< h2 >样式* /
。标题h2 {
边距：0px;
白颜色;
字体大小：xx-大；/ *精确控制可以用预期或者em单位* /
}
/ *页眉中子标题样式* /
.Header .Teaser {
边距：0px;
font-weight：粗体;
}
/ *页眉中署名行样式* /
。标题.Byline {
字体样式：斜体；
字体大小：小；
边距：0px;
}
。内容{
字号：中等；
字体家族：Cambria，Cochin，乔治亚州，“ Times New Roman”，Times，衬线；
/ *左右内边距最大* /
padding-top：20像素；
padding-right：50px；
padding-bottom：5px;
padding-left：50px;
行高：120％；/ *相邻两个文本行之间的距离* /
}
.Content .LeadIn {
font-weight：粗体;
字体大小：大；
font-variant：小写；
}
.Content .h3 {
颜色：＃24486C;
底边距：2px;
字号：中等；
}
内容p {
margin-top：0px;
}
。页脚{
文本对齐：居中；
字号：x-small；
}
。页脚。免责声明{
字体样式：斜体；
}
。页脚{
边距：3px；
}
这样我们的样式表就弯沉过了，现在去看看结果会怎样呢？如下图：使用HTML5来构造页面
目前仍旧是Web设计的必备元素，它是一个直观，多用途的容器，可以通过它为页面中的任何区块链应用样式。但
的问题在于，它本身不反映与页面相关的任何信息。
要通过HTML5改进这种情况，可以把
替换成更具有描述性语义的元素。
ApocalypsePage_Revised.html中已经将class属性设置为Header和Footer两个
替换为和