html5组织文档结构

1 / 10

html5 组织文档结构

文档部分，即 body 部分，包含了访问者可以看到的内容。传统的 HTML 文档通常通过 div 元素来组织文档结构，再配

上适当的样式表。但 div 元素的问题是缺少语义信息，在查看别人的源代码时，必须费点劲才能理解哪个 div 表示什么，整

个页面时怎么搭建起来的，通常需要在 HTML 页面、样式表和浏览器之间跳来跳去。特别是如果 HTML 页面的组织结构不

好，很容易就会导致困惑。对此，HTML5 中新增了许多语义元素，用来替换 div 元素，并且将语义和呈现分离。

所有的语义元素都有一个显著的特点：不真正做任何事，它们在外观上对内容的影响微乎其微，甚至根本没有影响。语义元

素的存在主要有以下几条理由：

1)容易修改和维护。通过 HTML5 的语义元素，可以传达出额外的结构化信息，让人很容易理解文档的整体布局和不

同区块的作用。

2)无障碍性。现代 web 设计的一个重要主题，就是让任何人都能无障碍地访问网页，就是让使用屏幕阅读器和其他辅

助工具的人都能在页面中自由导航。

3)搜索引擎优化。使用 HTML5 能够让搜索引擎能够更好的理解你的网站，可以让它们收集到它们索引的页面的更多

信息。

4)未来的功能。新浏览器和 Web 编辑工具未来一定会利用语义元素。比如：将文档的主要部分重点呈现。

最关键的是，如果你正确地使用了语义元素，就能够创建更加清晰的页面结构，就能够适应未来的浏览器和 Web 设计工具

的发展趋势。下面将介绍用于组织文档结构的语义元素，首先以一个例子来了解 HTML5 通常的文档结构。

HTML5 文档结构

老的 HTML 页面都是用 div 元素，再配上适当的样式表，但 div 元素的问题在于，它本身不反映与页面相关的任何信息。

而 HTML5 的页面就是将这些 div 元素替换为具有描述性的语义元素。下面的例子包含了 HTML5 中用于描述文档结构的主

要的语义元素，语义元素的使用和它们标注的内容的含义密切相关，理解了它们的含义，你就能灵活的使用它们。

1.

2.

3.

4.

Things I like

5.

by Adam Freeman

6.

7.

8. Questions and comments?Email me

9.

10.

11.

Contents

12.

13.

Fruits I Like

14.

15.

Additional Fruits

2 / 10

16.

17.

Activities I Like

18.

19.

Kinds of Triathlon

20.

The kind of triathlon I am aiming for

21.

22.

23.

24.

25.

26.

27.

28. ......

29.

HTML5文档结构主体结构 语义结构,html5组织文档结构.pdf相关推荐

  1. html5语义元素表,HTML5的结构和语义(3):语义性的块级元素

    HTML5的结构和语义(3):语义性的块级元素 互联网   发布时间:2008-10-17 18:55:35   作者:佚名   我要评论 HTML5还增加了一些纯语义性的块级元素: aside fi ...

  2. HTML5交互性是什么意思,HTML5的结构和语义(5):交互

    HTML5的结构和语义(5):交互 互联网   发布时间:2008-10-17 18:55:30   作者:佚名   我要评论 http://www.webjx.com/html_xhtml/2008 ...

  3. 下面是html5中新增的结构元素的是,HTML5的新的结构元素介绍

    HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如和 ,它们已经被 CSS完全取代. 其他取消的属性:acronym ...

  4. 通过css类/选择器选取元素 文档结构和遍历 元素树的文档

    通过css类选取元素 html所有的元素拥有class属性,该属性会对元素进行分组,标识为某一组. js中使用className属性来保存HTML的class的属性值 var NodeList = d ...

  5. NoSQL生态系统——类似Bigtable列存储，或者Dynamo的key存储（kv存储如BDB，结构化存储如redis，文档存储如mongoDB）...

    摘自:http://www.ituring.com.cn/article/4002# NoSQL系统的数据操作接口应该是非SQL类型的.但在NoSQL社区,NoSQL被赋予了更具有包容性的含义,其意为 ...

  6. 使用Confluence如何输出一份结构清晰 可读性高的测试文档？

    一.前言 很多小伙伴们 , 会有输出文档的好习惯 :但 如何 输出一份 结构清晰&可读性高 的测试文档 / 帮助文档呢 ? 你写的流程文档 / 帮助文档 / 使用教程 ,别人看完了之后能上手操 ...

  7. java计算机毕业设计HTML5游戏网站设计与实现MyBatis+系统+LW文档+源码+调试部署

    java计算机毕业设计HTML5游戏网站设计与实现MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计HTML5游戏网站设计与实现MyBatis+系统+LW文档+源码+调试部署 本源 ...

  8. 如何设计出精美的html5文档,如何制作实用美观的设计文档

    Here we go. 作为一个交互设计师,我们要全局掌握产品的背景,逻辑,用户体验.但是,我们不能忽略设计过程中一个很关键的步骤,设计输出. 如果我们用email或者其他大海报的方式来输出设计文档, ...

  9. （九）HTML5+CSS3新特性：语义标签、多媒体标签、表单、新增选择器、盒子模型、模糊、calc函数、过渡

    本文仅用作学习记录,学习视频为B站的pink老师 文章目录 HTML5的新特性 HTML5新增的语义化标签 HTML5新增的多媒体标签 HTML5新增的input表单 HTML5新增的表单属性 CSS ...

最新文章

  1. 九、distinct
  2. Paper：《Adam: A Method for Stochastic Optimization》的翻译与解读
  3. J - Max Sum
  4. juniper防火墙（SSG and SRX）排障抓包命令
  5. mysql执行计划字段解析_MySQL执行计划解析
  6. java在什么环境变量_Java-环境变量
  7. mybatis框架执行原理简单实现
  8. 6002.mavlink通过xml生成自定义消息
  9. python3pygame 游戏程序_python3 pygame实现接小球游戏
  10. 奥创手机群控安装到魅蓝3的流程
  11. GPS定位原理、系统组成及工作频段
  12. 【概率论与数理统计(研究生课程)】知识点总结6(抽样分布)
  13. 【DirectX学习笔记】02_D3D初始化
  14. 可以边下边看的BT资源搜索下载工具：Tribler免费版
  15. 菜鸟云打印接入Demo
  16. 两部手机怎样才能把数据都传过来_新旧手机怎样互传数据？
  17. Word从任意页开始从1,2,3...编辑页码
  18. Slumdog Millionaire--《贫民窟的百万富翁》
  19. RGB和Bitmap互相转换
  20. 【测试沉思录】14. 性能测试中的系统资源分析之一：CPU

热门文章

  1. PCL点云特征描述与提取（1）
  2. Python中的urllib.quote和Go中的url.QueryEscape关系探讨
  3. 【Unity教程】创建一个完整的驾驶游戏
  4. Zbrush制作手榴弹案例讲解学习教程
  5. debug：g2o cmake时报错“Qt5 not found. Install it and set Qt5_DIR accordingly
  6. 一道面试题：js返回函数， 函数名后带多个括号的用法及join（）的注意事项
  7. 【Pyhon 3】： 170104：优品课堂： GUI -tkinter
  8. IOS笔记 #pragma mark的用法
  9. 【Ghost Blog】如何给Ghost Blog添加背景音乐
  10. IOS的钥匙串，确保本地隐私数据的安全