html5文档结构元素,HTML第2章 HTML 5的文档结构元素.ppt

HTML5+CSS3 Web 前端开发技术 HTML5+CSS3 Web 前端开发技术(2版) LOGO HTML5+CSS3 Web 前端开发技术(2版) LOGO * * 第2章 HTML 5的文档结构元素 HTML的元素和属性 1 HTML文档的基本结构元素 2 HTML5新增的结构元素 3 2.1 HTML的元素和属性 HTML元素 HTML元素指的是从开始标记(start tag)到结束标记(end tag)的所有代码。其内容是开始标记与结束标记之间的内容。 HTML元素的属性 属性用来说明元素的特征，属性的格式通常为“属性/值”对。 … 开始标记 元素内容 结束标记

这是一个段落

这是一个超级链接 2.1 HTML的元素和属性 HTML的字符实体 字符实体有三部分：一个符号 (&)，一个实体名称，以及一个分号 (;)。例如，要在 HTML 文档中显示小于号，可以输入“? 大于号 > & 和号 & " 引号 " ' 撇号? ' (IE不支持) § 节 § ? 版权 © ? 注册商标 ® × 乘号 × ÷ 除号 ÷ 2.1 HTML的元素和属性 HTML的颜色表示 HTML的颜色有两种表示方式。 用颜色的英文名称表示，比如blue表示蓝色，red表示红色； 用16进制的数值表示RGB的颜色值。 RGB的颜色的表示方式为#rrggbb。其中，rr、gg、bb三色对应的取值范围都是00到FF，如白色的RGB值(255,255,255)，就用#ffffff表示；黑色的RGB值(0,0,0)，就用#000000表示。 HTML标记的书写规范 2.2 HTML文档的基本结构元素 和标记表示该文档是HTML文档。 标记可省略 和标记表示文档头部信息。 一般包括标题和主题信息，该信息不会显示在页面正文中。 和标记是网页的主体信息 是显示在页面上的内容，各种网页元素。 2.3 HTML5新增的结构元素 １用DIV描述的网页布局 2.3 HTML5新增的结构元素 2 HTML5增加的结构元素 HTML 5增加了article、section、nav、aside、header、footer等布局元素，以实现更好的语义解释。 结构元素定义的是增强了语义的div块，是HTML页面按逻辑进行分割后的单位，并没有显示效果。 2.3 HTML5新增的结构元素 article元素 article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。 一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，页面中主体部分或其他任何独立的内容都可以用article来描述。 2.3 HTML5新增的结构元素 section元素 section元素用于定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容，会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。 示例2-2 2.3 HTML5新增的结构元素 aside元素 aside标签用来承载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。 header元素 header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区域的标题，也可以包括表格、logo图片等内容。 footer元素 footer元素一般作为其上层容器元素的脚注。 2.3 HTML5新增的结构元素 nav元素 nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。 示例2-3 2.3 HTML5新增的结构元素 time元素 time元素是语义化元素，使页面语义描述更清晰，让网络搜索引擎理解(百度、谷歌)能很好理解页面。 使用time元素，可以插入计算机能够识别的日期和时间，同时又能以一种可读的方式显示给用户。 hgroup元素 hgroup 元素从语义化上看为标题组，一般作为header 标签的子元素，一个内容区域中包括了主标题和至少一个子标题才使用 hgroup。 2.3 HTML5新增的结构元素 address元素 address 元素从语义化上看