HTML5与CSS3 Web前端开发技术第2章 HTML 5的文档结构元素.pptVIP

HTML5+CSS3 Web 前端开发技术 LOGO HTML5+CSS3 Web 前端开发技术 LOGO * * 第2章 HTML 5的文档结构元素 HTML的元素和属性 1 HTML文档的基本结构元素 2 HTML5新增的结构元素 3 2.1 HTML的元素和属性 HTML元素 HTML文档中的元素指的是从开始标记（start tag）到结束标记（end tag）的所有代码。元素的内容是开始标记与结束标记之间的内容。 HTML元素的属性 属性用来说明元素的特征，每个属性总是对应一个属性值，称为“属性/值”对，语法格式如下。 tag properity1 =value1 properity2 = value2……/tag 开始标记 元素内容 结束标记 p 这是一个段落 /p a href= 这是一个超级链接 /a 2.1 HTML的元素和属性 HTML的字符实体 字符实体有三部分：一个符号 ()，一个实体名称，以及一个分号 (;)。例如，要在 HTML 文档中显示小于号，可以输入“lt;” 显示结果 描述 实体名称 空格 nbsp; ? 小于号 lt; ? 大于号 gt; 和号 amp; 引号 quot; 撇号? apos; (IE不支持) § 节 sect; ? 版权 copy; ? 注册商标 reg; × 乘号 times; ÷ 除号 divide; 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和/html标记表示该文档是HTML文档。 html标记可省略标 head 和/head标记表示的是文档头部信息。 一般包括标题和主题信息，该部分信息不会显示在页面正文中。 body和/body标记是网页的主体信息 是显示在页面上的内容，各种网页元素。 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元素是HTML5的一个语义化元素，主要目的是页面语义描述更清晰，让网络搜索引擎理解（百度、谷歌）能很好理解网页页面。使用time元素，可以插入计算机能够识别的日期和时间，同时又能以一种可读的方式显示给用户。 hgroup元素 hgroup 元素从语义化上看为标题组，一般作为header 标签的子元素，一个内容区域中包括了主标题和至少一个子标题才使用 hgroup。 2.3 HTML5新增的结构元素 address元素 address 元素从语义化上看为地址，其用法主要再于在文档中呈现的联系信息，通常内容为