首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML5几个设计和修改的页面范例分享_html5教程技巧

作者：zjy135781012 | 来源：互联网 | 2017-05-11 14:13
这篇文章主要介绍了HTML5几个设计和修改的页面范例分享,主要针对普通页面使用HTML5进行润色的工作,需要的朋友可以参考下
要了解和熟悉 HTML5 中的新的语义元素，最好的方式就是拿一经典的 HTML 文档作例子，然后把 HTML5 的一些新鲜营养充实进入。如下就是我们要改造的页面，该页面很简单，只包含一篇文章。

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

XML/HTML Code复制内容到剪贴板

  1. >
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Apocalypse Nowtitle>
  6. <link rel="stylesheet" href="ApocalypsePage_Original.css">
  7. head>
  9. <body>
  10. <p class="Header">
  11. <h1>How the World Could Endh1>
  12. <p class="Teaser">Scenarios that spell the end of life as we knowp>
  13. <p class="Byline">by Ray N. Carnationp>
  14. p>
  16. <p class="Content">
  17. <p><span class="LeadIn">Right nowspan>, 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>
  18. <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>
  20. <h2>Mayan Doomsdayh2>
  21. <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>
  23. <h2>Robot Takeoverh2>
  24. <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>
  26. <h2>Unexplained Singularityh2>
  27. <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>
  29. <h2>Runaway Climate Changeh2>
  30. <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>
  32. <h2>Global Epidemich2>
  33. <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>
  35. p>
  37. <p class="Footer">
  38. <p class="Disclaimer">These apocalyptic predictions do not reflect the views of the author.p>
  39. <p>
  40. <a href="AboutUs.html">About Usa>
  41. <a href="Disclaimer.html">Disclaimera>
  42. <a href="ContactUs.html">Contact Usa>
  43. p>
  44. <p>Copyright © 2014p>
  45. p>
  46. body>
  47. html>

在不增加任何 CSS 样式表之前，效果如下：

上面通过三个

将页面分成了三个部分，顶部的页眉，中部的内容和底部的页脚。

这个例子中的样式表很简单，整个页面最大宽度设置为 800 像素，避免文本在宽屏显示器上显示过长。页眉位于一个带有蓝色边框的盒子中，内容区的两侧都增加了内边距，而页脚在整个页面的底部居中。

ApocalypsePage_Original.css样式文件内容如下：

XML/HTML Code复制内容到剪贴板

  1. @charset "utf-8";
  2. /* CSS Document */
  3. body{
  4. /*font-family 要使用安全字体，按照先特殊后一般的原则，
  5. 先给出你想要的字体，然后是保险一些的字体，
  6. 最后以 sans-serif 字体结尾*/
  7. font-family: "Lucida sans Unicode", "Lucida Grande", Geneva, sans-serif;
  8. max-width: 800px; /*最大宽度不超过 800 像素*/
  9. }
  10. /*页面顶部的标题区样式*/
  11. .Header {
  12. background-color: #7695FE; /*可接受任何颜色值*/
  13. border: thin #336699 solid; /*多合一的 border 属性*/
  14. padding: 10px; /* 10像素的内边距，边框与内容之间的距离*/
  15. margin: 10px; /* 10像素的外边距，边框与周围元素之间的距离*/
  16. text-align: center; /*头部文本居中*/
  17. }
  18. /*页眉中标题<h1>样式*/
  19. .Header h1{
  20. margin: 0px;
  21. color: white;
  22. font-size: xx-large; /*精确控制可以用像素或者em单位*/
  23. }
  24. /*页眉中子标题样式*/
  25. .Header .Teaser{
  26. margin: 0px;
  27. font-weight: bold;
  28. }
  29. /*页眉中署名行样式*/
  30. .Header .Byline{
  31. font-style: italic;
  32. font-size: small;
  33. margin: 0px;
  34. }
  35. .Content{
  36. font-size: medium;
  37. font-family: Cambria, Cochin, Georgia, "Times New Roman", Times, serif;
  38. /*左右内边距最大*/
  39. padding-top: 20px;
  40. padding-right: 50px;
  41. padding-bottom: 5px;
  42. padding-left: 50px;
  43. line-height: 120%; /*相邻两个文本行之间的距离*/
  44. }
  45. .Content .LeadIn{
  46. font-weight: bold;
  47. font-size: large;
  48. font-variant: small-caps;
  49. }
  50. .Content .h2{
  51. color: #24486C;
  52. margin-bottom: 2px;
  53. font-size: medium;
  54. }
  55. .Content p{
  56. margin-top: 0px;
  57. }
  58. .Footer{
  59. text-align: center;
  60. font-size: x-small;
  61. }
  62. .Footer .Disclaimer{
  63. font-style: italic;
  64. }
  65. .Footer p{
  66. margin: 3px;
  67. }

这样我们的样式表就弯沉过了，现在去看看结果会怎样呢？如下图：

使用 HTML5 来构造页面

目前仍旧是 Web 设计的必备元素，它是一个直观、多用途的容器，可以通过它为页面中的任何区块应用样式。但

的问题在于，它本身不反映与页面相关的任何信息。

要通过 HTML5 改进这种情况，可以把

替换成更具有描述性语义的元素。

ApocalypsePage_Revised.html中已经将 class 属性为 Header 和 Footer 两个

替换为 和

， 部分代码如下：

XML/HTML Code复制内容到剪贴板

  1. <header>
  2. <h1>How the World Could Endh1>
  3. <p class="Teaser">Scenarios that spell the end of life as we knowp>
  4. <p class="Byline">by Ray N. Carnationp>
  5. header>
  6. ...
  7. <footer>
  8. <p class="Disclaimer">These apocalyptic predictions do not reflect the views of the author.p>
  9. <p>
  10. <a href="AboutUs.html">About Usa>
  11. ...
  12. p>
  13. <p>Copyright © 2014p>
  14. footer>

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

XML/HTML Code复制内容到剪贴板

  1. /*页面顶部的标题区样式*/
  2. header {
  3. background-color: #7695FE; /*可接受任何颜色值*/
  4. border: thin #336699 solid; /*多合一的 border 属性*/
  5. padding: 10px; /* 10像素的内边距，边框与内容之间的距离*/
  6. margin: 10px; /* 10像素的外边距，边框与周围元素之间的距离*/
  7. text-align: center; /*头部文本居中*/
  8. }
  9. /*页眉中标题<h1>样式*/
  10. header h1{
  11. margin: 0px;
  12. color: white;
  13. font-size: xx-large; /*精确控制可以用像素或者em单位*/
  14. }

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

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

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

元素后的结构如下：

XML/HTML Code复制内容到剪贴板

  1. <article>
  2. <header>
  3. <h1>How the World Could Endh1>
  4. <p class="Teaser">Scenarios that spell the end of life as we knowp>
  5. <p class="Byline">by Ray N. Carnationp>
  6. header>
  7. <p class="Content">
  8. <p><span class="LeadIn">Right nowspan>, 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>
  9. ...
  10. p>
  11. article>


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

用

添加插图

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

一般来说插图应该是浮动的，还会有浮动图题。下面是在文章中添加插图的 HTML 标记，在正文的第一段和第二段之间的位置，部分代码如下：

XML/HTML Code复制内容到剪贴板

  1. ...
  2. <p class="Content">
  3. <p><span class="LeadIn">Right nowspan>, you're ...p>
  4. <p class="FloatFigure">
  5. <img src="human_skull.jpg" alt="Human skull">
  6. <p>Will you be the last person standing if one of these apocalyptic
  7. scenarios plays out?p>
  8. p>
  9. <p>But don't get too smug. There's...p>
  10. ...


相应的 样式表规则如下：

XML/HTML Code复制内容到剪贴板

  1. .FloatFigure{
  2. float: left;
  3. margin: 0px 20px 0px 0px;
  4. }
  5. .FloatFigure p{
  6. max-width: 300px;
  7. font-size: small;
  8. font-style: italic;
  9. margin-bottom: 5px;
  10. }


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

HTML5 中提供了一个

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

XML/HTML Code复制内容到剪贴板

  1. <figure class="FloatFigure">
  2. <img src="human_skull.jpg" alt="Human skull">
  3. <figcaption>Will you be the last person standing if one of these apocalyptic
  4. scenarios plays out?figcaption>
  5. figure>


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

XML/HTML Code复制内容到剪贴板

  1. .FloatFigure{
  2. float: left;
  3. margin: 0px 20px 0px 0px;
  4. }
  5. .FloatFigure figcaption{
  6. max-width: 300px;
  7. font-size: small;
  8. font-style: italic;
  9. margin-bottom: 5px;
  10. }


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

用

推荐阅读
  • jar

    Java验证码——kaptcha的使用配置及样式

    Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • version

    Alink回归预测的不完善问题及期待

    本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]
  • format

    VScode格式化文档换行或不换行的设置方法

    VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]
  • select

    CSS3选择器的使用方法详解，提高Web开发效率和精准度

    CSS3选择器的使用方法详解，提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
  • string

    求解hdu 1003 java题目的动态规划优化方法

    本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]
  • main

    OC学习笔记之@property和@synthesize

    本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • string

    Open judge C16H: Magical Balls 快速幂+逆元问题解析

    本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法，并给出了问题的解析和解决方法。详细介绍了问题的背景和规则，并给出了相应的算法解析和实现步骤。通过本文的解析，读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]
  • string

    Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine

    Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细]
  • string

    Hibernate基础映射

    在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • jar

    SpringBoot集成前端模版（thymeleaf）的配置步骤

    本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]
  • string

    知识图谱——机器大脑中的知识库

    知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • string

    测试人的性格，点火让他着急，考验婚姻问题的善意玩人

    本文讲述了作者通过点火测试男友的性格和承受能力，以考验婚姻问题。作者故意不安慰男友并再次点火，观察他的反应。这个行为是善意的玩人，旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • string

    java 线程死锁模拟

    1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]
  • string

    《数据结构》学习笔记3——串匹配算法性能评估

    《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • string

    动态规划算法的基本步骤及最长递增子序列问题详解

    动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤，包括划分阶段、选择状态、决策和状态转移方程，并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中，在以后尽可能多地利用这些子问题的解，从而提高算法的效率。 ... [详细]
author-avatar
zjy135781012
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有