1_HTML5设计素材.ppt

HTML5程序设计 语义化html 便于维护和修改,对搜索引擎更友好,预留扩展,无障碍浏览功能 分区级语义元素 Article Aside figure figcaption footer header hgroup nav section HTML 5的革新之一：更简洁的结构 !DOCTYPE html html lang=en 简化的根元素 XHTML html xmlns=/1999/xhtml HTML5 html 简化的字符集声明 简化的JavaScript 嵌入 HTML4 script type=text/javascript ... /script HTML5 script ... /script 简化的样式嵌入 HTML4 style type=text/css ... /style HTML5 style ... /style 简化的样式表链接 新增加的元素 article aside bdi command details summary figure figcaption footer header hgroup mark 被去除的的元素 acronym applet basefont big center dir font frame frameset noframes strike tt head元素 meta charset=utf-8 / link rel=stylesheet href=style.css / script src=path/script.js/script header元素 header 元素代表“网页”或“section”的页眉。 通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。 整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素 header使用注意： 可以是“网页”或任意“section”的头部部分； 没有个数限制。 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。 footer元素 footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。 footer COPYRIGHT@小北 /footer footer使用注意： 可以是“网页”或任意“section”的底部部分； 没有个数限制，除了包裹的内容不一样，其他跟header类似 hgroup元素 hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合 hgroup使用注意： 如果只需要一个h1-h6标签就不用hgroup 如果有连续多个h1-h6标签就用hgroup 如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签 nav元素 nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。 但是我在有些时候却情不自禁的想用它，譬如：侧边栏上目录，面包屑导航，搜索样式，或者下一篇上一篇文章，但是事实上规范上说nav只能用在页面主要导航部分上。页脚区域中的链接列表，虽然指向不同网站的不同区域，譬如服务条款，版权页等，这些footer元素就能够用了。 nav使用注意： 用在整个页面主要导航部分上，不合适就不要用nav元素； aside元素 aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。 在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。 aside使用总结： aside在article内表示主要内容的附属信息， 在article之外则可做侧边栏，没有article与之对应，最好不用。 如果是广告，其他日志链接或者其他分类导航也可以用 section元素 section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。 section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。如下： 示例代码section使用注意： 一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页，最好用article