HTML5设计和修改的页面实例分析

发布时间：2022-03-08 10:19:37 作者：iii
来源：亿速云阅读：110

今天小编给大家分享一下HTML5设计和修改的页面实例分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

ApocalypsePage_Original.html，这是一个格式非常规范的页面，所有的样式均来自于外部样式表。

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

<！DOCTYPE html >

< html lang = “ zh-CN” >

<头>

< meta charset = “ utf-8” >

< title >立即启示</ title >

< link rel = “ stylesheet” href = “ ApocalypsePage_Original.css” >

</头>

<身体>

< div class = “标题” >

< h2 >世界如何终结</ h2 >

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

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

</ div > <！-结束标题->

< div class = “内容” >

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

< p >但是不要自鸣得意。仍然有很多可怕的方法可以使它崩溃。在本文中，您将了解一些我们的最爱。</ p >

< h3 >玛雅世界末日</ h3 >

< p >怀疑论者的看法是玛雅历法简单地卷到一个新的5126年时代的2012年之后，而实际上并没有预测结束生命的启示。但是考虑到已死的玛雅人实际上在其他所有方面都是错误的，为什么我们应该在此方面信任他们呢？</ p >

< h3 >机器人接管</ h3 >

< p >虽然没有像吸血鬼接管或活死人接管那样令人恐惧，但是机器人叛乱仍然是令人不安的想法。我们的科技产品已经不胜枚举了，甚至比尔·盖茨（Bill Gates）都担心他的日本机器人奴隶被脚踝翻过来的那一天，并问（以适当的机器人声音）“现在你是谁的爸爸？” </ p >

< h3 >无法解释的奇点</ h3 >

< p >我们不知道宇宙是如何开始的，所以我们不能确定宇宙不会只是结束，也许是今天，也许只有一点点反物质和轻微的嘶嘶声才令人兴奋。</ p >

< h3 >失控的气候变化</ h3 >

< p >有些不屑一顾，厄运戈尔的预言仍可能成真。如果确实如此，我们可能不得不应对恶性风暴，广泛的食物短缺以及空调维修人员的状况。</ p >

< h3 >全球流行</ h3 >

< p >在今后一段时间内，一种致命的病毒可能会罢工。对该疾病的来源有不同的预测，但候选对象包括非洲丛林中的猴子，生物恐怖分子，患有流感的鸟类和猪，未来的战士，外星人种族，使用过多抗生素的医院，吸血鬼，CIA和未洗净的球芽甘蓝。无论来源如何，这显然都是坏消息。</ p >

</ div > <！-最终内容->

< div class = “页脚” >

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

< p >

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

<一个HREF = “Disclaimer.html” >声明</一>

<一个HREF = “ContactUs.html” >联系我们</一>

</ p >

</ div > <！-结束页脚->

</ body >

</ html >

在不增加任何CSS样式表之前，效果如下：上面通过三个<div>将页面分成了三个部分，顶部的页眉，中部的内容和底部的页脚。

这个示例中的样式表很简单，整个页面最大宽度设置为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来构造页面

<div>目前仍旧是Web设计的必备元素，它是一个直观，多用途的容器，可以通过它为页面中的任何区块链应用样式。但<div>的问题在于，它本身不反映与页面相关的任何信息。

要通过HTML5改进这种情况，可以把<div>替换成更具有描述性语义的元素。

ApocalypsePage_Revised.html中已经将class属性设置为Header和Footer两个<div>替换为<header>和<footer>，部分代码如下：

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

<标题>

< h2 >世界如何终结</ h2 >

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

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

</标头>

...

<页脚>

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

< p >

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

...

</ p >

</ footer >

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

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

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

标头{

背景颜色：＃7695FE; / *接受任何颜色值* /

边框：薄＃336699固体；/ *多合一的border属性* /

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

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

文本对齐：居中；/ *头部文字居中* /

}

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

标头h2 {

边距：0px;

白颜色;

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

}

最后还有一个元素需要用在示例文件中，就是<article>元素，表示一个完整的，自成一体的内容。

<ariticle>元素应该包含新闻报道或文章的内容，包括标题，署名和正文。因此添加了<article>元素后的结构如下：

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

<文章>

<标题>

< h2 >世界如何终结</ h2 >

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

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

</标头>

< div class = “内容” >

...

</ div > <！-最终内容->

</ article >

重新设计后，页面结构如下：

用<figure>添加插图

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

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

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

...

< div class = “内容” >

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

< div class = “ FloatFigure” >

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

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

剧情发挥？</ p >

</ div >

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

...

相应的样式表规则如下：

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

.FloatFigure {

向左飘浮;

边距：0px 20px 0px 0px;

}

.floatFigure p {

最大宽度：300像素；

字体大小：小；

字体样式：斜体；

底边距：5px;

}

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

HTML5中提供了一个<figure>元素，图题可以放在<figure>中的<figcaption>元素里，经过改造，代码如下：

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

<图类= “ FloatFigure” >

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

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

剧情发挥？</ figcaption >

</图>

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

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

.FloatFigure {

向左飘浮;

边距：0px 20px 0px 0px;

}

.FloatFigure figcaption {

最大宽度：300像素；

字体大小：小；

字体样式：斜体；

底边距：5px;

}

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

用<aside>添加注释

新的<aside>元素表示与它周围的文本没有密切关系的内容。可以通过它介绍另一个相关的话题，或者对主文档中提出的某个观点进行解释。还可以放置广告，相关内容链接。

下面的示例中将将利用醒目引文（pull quote），使用<div>元素可以创造这种效果，但是用<aside>元素让标记更容易替换：部分代码如下：

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

< p > ...（在适当的机器人的声音）“谁是你爸爸吗？” </ p >

<除了类= “ PullQuote” >

< img src = “ quotes_start.png” alt = “报价” >

我们不知道宇宙是如何开始的，所以我们不能确定宇宙不会只是结束，也许是今天。

< img src = “ quotes_end.png” alt = “结束报价” >

</一旁>

< h3 >无法解释的奇点</ h3 >

对应的样式表内容如下：

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

.PullQuote {

浮动：正确；

最大宽度：300像素；

边框顶部：黑色细固体；

底边：黑色粗实物；

font-size：30px;

行高：130％；

字体样式：斜体；

padding-top：5像素；

padding-bottom：5px;

左边距：15px;

底边距：10px;

}

.PullQuote img {

垂直对齐：底部；

}

以上就是“HTML5设计和修改的页面实例分析”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。

HTML5设计和修改的页面实例分析

相关阅读