189 8069 5689

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两个

替换为
,部分代码如下:

XML / HTML代码将内容复制到文本

<标题>  

  < h2 >世界如何终结  

  < p class = “ Teaser” >我们所知道的会终结生命的场景   

  < p class = “ Byline” > Ray N.康乃馨   

  

...   

<页脚>  

  < p class = “ Disclaimer” >这些世界末日的预测并不反映作者的观点。   

  < p >  

    <一个HREF = “AboutUs.html” >关于我们   

...   

    

  < p >版权所有©2014   

  

当然,对应的ApocalypsePage_Revised.css文件也需要进行修改,将其中的.Header和.Footer替换为header和footer。部分代码如下:

XML / HTML代码将内容复制到文本

/ *页面顶部的标题区样式* /   

标头{   

  背景颜色:#7695FE; / *接受任何颜色值* /   

  边框:薄#336699固体;/ *多合一的border属性* /   

  填充:10px; / * 10的内边距,包围与内容之间的距离* /   

  边距:10px; / * 10的外边距,包围与周围元素之间的距离* /   

  文本对齐:居中;/ *头部文字居中* /   

}   

/ *页眉中标题< h2 >样式* /   

标头h2 {   

  边距:0px;   

  白颜色;   

  字体大小:xx-大;/ *精确控制可以用预期或者em单位* /   

}  

最后还有一个元素需要用在示例文件中,就是

元素,表示一个完整的,自成一体的内容。

元素应该包含新闻报道或文章的内容,包括标题,署名和正文。因此添加了

元素后的结构如下:

XML / HTML代码将内容复制到文本

<文章>  

  <标题>  

  < h2 >世界如何终结  

  < p class = “ Teaser” >我们所知道的会终结生命的场景   

  < p class = “ Byline” > Ray N.康乃馨   

    

  < div class = “内容” >   

  < p > < span class = “ LeadIn” >现在 ,您可能感觉不错。毕竟,发达国家的生活很舒适< span class = “ style1” > — 可能比整个记录的历史上的普通人类要舒适得多。    

...   

  <!-最终内容->  

  

重新设计后,页面结构如下:

添加插图

很多页面都是包含图片的。但是,插图(图)与图片的概念还不完全一样。插图虽然独立于文本,但是文本中会提到它。

下面是在文章中添加插图的HTML标记,在正文的第一段和第二段之间的位置,部分代码如下:

XML / HTML代码将内容复制到文本

...   

< div class = “内容” >   

< p > < span class = “ LeadIn” >现在 ,您正在...    

< div class = “ FloatFigure” >   

< img src = “ human_skull.jpg” alt = “人类头骨” >    

< p >请问你是站着,如果这些启示之一的最后一个人   

剧情发挥?  

  

< p >但是不要自鸣得意。有...   

...  

相应的样式表规则如下:

XML / HTML代码将内容复制到文本

.FloatFigure {   

  向左飘浮;   

  边距:0px 20px 0px 0px;   

}   

.floatFigure p {   

  最大宽度:300像素;   

  字体大小:小;   

  字体样式:斜体;   

  底边距:5px;   

}  

下图展示了这个示例的外观,插图恰好在第一段文本之后,浮动在后面的文本的位置,图题的文本的宽度我们限制住了,让图题显示很充实,很优雅。

HTML5中提供了一个

元素,图题可以放在
中的
元素里,经过改造,代码如下:

XML / HTML代码将内容复制到文本

<图类= “ FloatFigure” >   

  < img src = “ human_skull.jpg” alt = “人类头骨” >    

  < figcaption >如果这些启示之一,您将是最后一个站着的人吗?   

   剧情发挥?  

  

当然样式表中的选择符,相应修改一下即可。

XML / HTML代码将内容复制到文本

.FloatFigure {   

  向左飘浮;   

  边距:0px 20px 0px 0px;   

}   

.FloatFigure figcaption {   

  最大宽度:300像素;   

  字体大小:小;   

  字体样式:斜体;   

  底边距:5px;   

}  

最后还有就是元素中的alt属性可以删除掉,因为图题中包含了图片的完整说明。