HTML5 结构元素

Html

  1. <!DOCTYPE?html>??
  2. <html>??
  3. ????<head>??
  4. ????????<meta?charset="utf-8"><!--?声明编码格式?-->??
  5. ????????<title>HTML5?结构元素</title><!--?标题?-->??
  6. ????????<link?rel="stylesheet"?href="html5.css"/><!--?link?引入样式表??rel?规定当前文档与被链接文档之间的关系。?href?规定被链接文档的位置。?-->??
  7. ????</head>??
  8. ????<body>??
  9. ????????<header><!--?标记头部区域的内容，用于整个界面或者界面中的某个区域?-->??
  10. ????????????<h1>网页标题</h1>??
  11. ????????????<h2>次级标题</h2>??
  12. ????????????<h4>提示信息</h4>??
  13. ????????</header>??
  14. ????????<div?id=‘container‘>??
  15. ????????????<nav><!--?导航类辅助内容?-->??
  16. ????????????????<h3>导航</h3>??
  17. ????????????????<a?href="#">链接1</a>??
  18. ????????????????<a?href="#">链接2</a>??
  19. ????????????????<a?href="#">链接3</a>??
  20. ????????????</nav>??
  21. ????????????<section><!--?标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。?-->??
  22. ????????????????<article><!--?标签定义外部的内容。?-->??
  23. ????????????????????<header>??
  24. ????????????????????????<h1>文章标题</h1>??
  25. ????????????????????</header>??
  26. ????????????????????<p>文章内容。。。。。</p>??
  27. ????????????????????<footer><!--?标签定义文档或节的页脚。?-->??
  28. ????????????????????????<h2>文章的注脚</h2>??
  29. ????????????????????</footer>??
  30. ????????????????</article>??
  31. ????????????</section>??
  32. ????????????<aside><!--?相关内容或者引文?-->??
  33. ????????????????<h3>相关内容</h3>??
  34. ????????????????<p>相关辅助信息或者服务。。。。</p>??
  35. ????????????</aside>??
  36. ????????????<footer><!--?标记脚部区域的内容?-->??
  37. ????????????????<h2>页脚</h2>??
  38. ????????????</footer>??
  39. ????????</div>??
  40. ????</body>??
  41. </html>??

Css

  1. body?{?background-color:#CCCCCC;?font-family:Geneva,?Arial,?Helvetica,?sans-serif;?margin:?0px?auto;?max-width:900px;?border:solid;?border-color:#FFFFFF;?}??
  2. header?{?background-color:?#F47D31;?display:block;?color:#FFFFFF;?text-align:center;?}??
  3. header?h2?{?margin:?0px;?}??
  4. h1?{?font-size:?72px;?margin:?0px;?}??
  5. h2?{?font-size:?24px;?margin:?0px;?text-align:center;?color:?#F47D31;?}??
  6. h3?{?font-size:?18px;?margin:?0px;?text-align:center;?color:?#F47D31;?}??
  7. h4?{?color:?#F47D31;?background-color:?#fff;?-webkit-box-shadow:?2px?2px?20px?#888;?-webkit-transform:?rotate(-45deg);?-moz-box-shadow:?2px?2px?20px?#888;?-moz-transform:?rotate(-45deg);?position:?absolute;?padding:?0px?150px;?top:?50px;?left:?-120px;?text-align:center;?}??
  8. nav?{?display:block;?width:25%;?float:left;?}??
  9. nav?a:link,?nav?a:visited?{?display:?block;?border-bottom:?3px?solid?#fff;?padding:?10px;?text-decoration:?none;?font-weight:?bold;?margin:?5px;?}??
  10. nav?a:hover?{?color:?white;?background-color:?#F47D31;?}??
  11. nav?h3?{?margin:?15px;?color:?white;?}??
  12. #container?{?background-color:?#888;?}??
  13. section?{?display:block;?width:50%;?float:left;?}??
  14. article?{?background-color:?#eee;?display:block;?margin:?10px;?padding:?10px;?-webkit-border-radius:?10px;?-moz-border-radius:?10px;?border-radius:?10px;?-webkit-box-shadow:?2px?2px?20px?#888;?-webkit-transform:?rotate(-10deg);?-moz-box-shadow:?2px?2px?20px?#888;?-moz-transform:?rotate(-10deg);?}??
  15. article?header?{?-webkit-border-radius:?10px;?-moz-border-radius:?10px;?border-radius:?10px;?padding:?5px;?}??
  16. article?footer?{?-webkit-border-radius:?10px;?-moz-border-radius:?10px;?border-radius:?10px;?padding:?5px;?}??
  17. article?h1?{?font-size:?18px;?}??
  18. aside?{?display:block;?width:25%;?float:left;?}??
  19. aside?h3?{?margin:?15px;?color:?white;?}??
  20. aside?p?{?margin:?15px;?color:?white;?font-weight:?bold;?font-style:?italic;?}??
  21. footer?{?clear:?both;?display:?block;?background-color:?#F47D31;?color:#FFFFFF;?text-align:center;?padding:?15px;?}??
  22. footer?h2?{?font-size:?14px;?color:?white;?}??
  23. /*?links?*/??
  24. a?{?color:?#F47D31;?}??
  25. a:hover?{?text-decoration:?underline;?}??

原文地址：https://www.cnblogs.com/songdongdong6/p/10074226.html

时间： 2024-10-12 19:54:50

HTML5 结构元素的相关文章

HTMl5结构元素:article

article: 表示文档.页面.应用程序或站点中的自包含成分所构成的一个页面的一部分,并且这部分专用于独立地分类或复用.(例如:一个博客的帖子,一篇文章,一个视频文件等.)和<nav>一样,标题位于这一元素内部,如:实例一:    <h1>My article</h1>    <article>      <p>Blah blah</p>    </article>这样的写法在规定上是不正确的,应该如下写法: <a

html5学习笔记(3)--主题结构元素-1

html5学习笔记(3)--主题结构元素-1 Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>极客学院</h

【HTML5 3】《html5 开发精要与实例讲解》 step2 -- 结构元素 (待续)

主要内容:通过 一个博客网站和一个企业网站的制作 展示如何运用HTML5中的各种 结构元素,构建出一个语义清晰,结构分明的Web3.0时代的网站. 案例1:用HTML5中的结构元素构建一个博客网站 疑问:结构元素的作用?使用场合?使用方法? 主要内容:1.HTML5的网页结构与HTML4的网页结构的区别. 2.HTML5中添加了哪些结构元素,这些结构元素的作用和使用场合是什么. 3.HTML5的网页大纲是什么,这些结构元素会在网页大纲生成的过程中起到什么作用,一份网页大纲是根据什么原则生成的.

HTML5新增的结构元素

HTML5的结构 一:新增的主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉,页脚内容区块等文档结构相关联的结构元素. 1.1article元素 article元素代表文档,页面或应用程序中独立的完整的,可以独自被外部引用的内容,<article> 标签定义外部的内容.article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联, 另外article元素也可以用来表示一个插件. <time> 标签定义日期或时间,或者两者.pubdate

HTML5学习笔记（三）：语义化和新增结构元素

在HTML5之前,使用机器来阅读一个网页是非常困难的,我们使用不同样式的div来标记不同的内容,所以实际上机器无法得知页面的哪个部分是正文,哪个部分是标题,那么在HTML5里,针对这个问题就引入了语义化的概念,同时提供了新的标签来指定对应的内容类型. 语义化的好处 语义化的html只用来搭建网页的结构,去掉css后,网页结构不会变: 屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页: 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重: 你的页面是否对爬虫容易理解非常重要,因

HTML5 语义元素(一)页面结构

本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.<footer>.<header>.<main>.<nav>.<section>等元素. 目录 1. 语义元素介绍 1.1 何为语义元素 1.2 特点 2. 原先界面布局 3. 页面结构语意元素 3.1 说明 3.2 详细介绍 3.3 示例图 1. 语义元

1.HTML5新增结构元素

HTML5新增结构元素: header元素表示页面中一个内容区块或整个页面的标题. section元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面中的其他部分.它可以与h1.h2.h3.h4.h5./6等元素结合使用,标示文档结构. article元素表示页面中的一块与上下文不相关的独立内容,譬如博客中的一篇文章或报纸中的一篇文章. aside元素表示article元素的内容之外的.与article元素的内容相关的辅助信息. nav元素表示页面中导航链接的部分. footer元素报时整个

HTML5 新增结构元素分为主体结构元素和非主体结构元素

做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.今天先介绍下 html5 新增的结构元素,有的经常使用到,有的用不上,虽然说它们的出现是更促进页面更有语义,更好的 seo,但其实当页面禁用样式后,它们的展现跟 div 是没撒差别,有同学可能会说,既然一样,又不影响页面的最终展现,不管是 article 还是 section 能用就好了.如果考虑实际项目的

HTML5 中的结构元素

HTML5 中的结构元素 https://www.cnblogs.com/xiaohuochai/p/5087815.html CSS 命名规范 1.http://mp.weixin.qq.com/s?__biz=MzI0NDAzOTYxMw==&mid=402255125&idx=3&sn=f13ca64eb1bcc4bf31aefdc189ccc26b#rd 2.http://www.imooc.com/article/5219 拥有html5大纲 原文地址:https://w