Html基本结构重点.ppt

HTML5 for Web前端;第三章 第1课-基本HTML 结构;课程概要;1-开始编写网页;!DOCTYPE html html lang=“zh head meta charset=utf-8 / title/title /head body /body /html;HTML5的DOCTYPE不区分大小写。 有的人可能输入!doctype html，不过，使用!DOCTYPE html 是更常规的做法。;HTML 4 和XHTML 1.0 时代，有好几种可供选择的DOCTYPE，每一种都会指明 HTML 的版本，以及使用的是过渡型还是严格型模式。 由于它们太难记，开发人员不得不每次都从某个地方把这些代码复制进来。 例如，下面是XHTML 严格型文档的DOCTYPE。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN / TR/xhtml1/DTD/xhtml1-strict.dtd 看起来令人费解。 幸好，所有的浏览器，无论新旧，都理解HTML5 的DOCTYPE，因此你可以坚持在所 有页面中使用它，忘掉过去的那些DOCTYPE。（唯一可能用到过去那些DOCTYPE 的情况是继承一个旧站，而网站的拥有者不允许将DOCTYPE 修改为HTML5 的版本。）;网页的两个部分：head 和body;2-创建页面标题; 每个HTML 页面都必须有一个title 元素。每个页面的标题都应该是简短的、描述性的，而且是唯一的。在大多数浏览器中，页面标题出现在窗口的标题栏（Chrome 是个例外）和浏览器的标签页中。页面标题还会出现在访问者浏览历史列表和书签里。;3-创建分级标题; HTML 提供了六级标题用于创建页面信息的层级关系。使用h1、h2、h3、h4、h5 或h6 元素对各级标题进行标记，其中h1 是最高级别的标题，h2 是h1 的子标题，h3 是h2 的子标题，以此类推。; HTML5 对如何处理位于article、aside、nav 和section 元素中的h1 ～ h6 有一套算法。该算法通常称为HTML5 文档大纲（HTML5 document outline）。不 过，目前还没有浏览器实现这套算法，而且也看不到支持的迹象。而且，屏幕阅读器中只有JAWS（一款运行于Windows 下的屏幕阅读器）支持，而它的实现还存在问题。;4-普通页面构成;页面有四个主要组件： 带导航的页头 显示在主体内容区域的文章 显示次要信息的附注栏 页脚;5-创建页眉-header;如果页面中有一块包含一组介??性或导航性内容的区域，应该用header 元素对其进行标记。 一个页面可以有任意数量的header 元素，它们的含义可以根据其上下文而有所不同。例如，处于页面顶端或接近这个位置的header 可能代表整个页面的页眉（有时称为页头）。 通常，页眉包括网站标志、主导航和其他全站链接，甚至搜索框。这无疑是header 元素最常见的使用形式，不过不要误认为是唯一的形式。;6-标记导航-nav;HTML 的早期版本没有元素明确表示主导航链接的区域，而HTML5 则有这样一个元素，即nav。 应该仅对文档中重要的链接群使用nav。 那么，如何判断是否对一组链接使用nav 呢？归根结底，这取决于内容的组织情况。至少，应该将网站全局导航（让用户可以跳至网站各个主要部分的导航）标记为nav。这种nav 通常（但并不总是）出现在页面级的header 元素里面;7-标记页面的主要区域-main;一个页面只有一个部分代表其主要内容。可以将这样的内容包在main 元素中，该元素在一个页面仅使用一次。 不能将main 放置在article、aside、footer、header 或nav 元素中。;8-创建文章-article;根据其称，你大概会猜想article 用于包含像报纸文章一样的内容。不过，article 并不局限于此。在HTML5 中，“文章”（article）并非这个词本来的意思。 article 元素表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，就像聚合内容中的各部分。它可以是一篇论坛帖子、一篇杂志或报纸文章、一篇博客条目、一则用户提交的评论、一个交互式的小部件或小工具，或者任何其他独立的内容项。 可以将article 嵌套在另一个article中，只要里面的article 与外面的article 是部分与整体的关系。 一个article 可以包含一个或多个section 元素。在article 里包含独立的h1 ～ h6 也是很好的做法。;9-定义区块-section;HTML5 对该元素的部分定义如下：