HTML5和CSS.pdf

HTML5 和 CSS3 1. 每个网页都以 DOCTYPE 声明开头 ，该声明用以告诉浏览器这个页面的HTML 版本。应当始终使用 html5 的 DOCTYPE ，即!DOCTYPE html 2. 从!DOCTYPE到/head之间的部分对用户来说是不可见的 ，除了一处例外 ，即title/title之间的文字。 这部分文字是标题，也是存储书签时默认的书签名。 3. 建议加上 lang ，即html lang=”en”或是其他语言。还有meta charset=”UTF-8” 4. Title 对搜索引擎的网络爬虫有重要作用，因此，title 的内容应该是能简单概括文档内容的文字，建议 60 字以内。 5. Html 元素分为块级元素和行内元素，块级元素如 div、ul、li、p 等会自带换行符，每个元素是独立占一 行的，而行内元素如 span、img 等都是不会分行的。 6. Html5 提供了四个分块内容元素 ：article ，aside ，nav 和 section。  article 元素表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，即 聚合。  aside 一般用作侧栏，但是它其实可以用在页面的很多地方，在哪里使用依上下文而定，没有使用样 式时 ，它会排在页面主要内容下面。  nav  section 元素代表文档或应用的一个一般的区块。在这里 section 是具有相似主题的一组内容 ，通常 包含一个标题。 7. 使用 header 标签创建页眉，使用 footer 创建页脚（其实它们都可以放在任何地方）。不能在 header 里 嵌套 footer 元素或者另一个 header 元素，footer 同。 8. Div 是通用容器。在使用容器时 ，当article、section、aside、nav 等元素在语义上讲都不合适的时候，就 需要通用容器 div。html5 将容器的分类细化，产生了上面四种容器，在使用时，应优先考虑着四种容器， 当遇到语义上不合适时，可以考虑使用 div。div 能实现上面四个元素的所有功能。 9. 使用 ARIA 提升可访问性 ：ARIA 的地标角色可以帮助用户识别页面区域，包括 application、banner、 complementary、contentinfo、form、main、navigation 和 search。  role=“banner”(横幅) ，包含面向全站内容而非页面特有内容的区域。面向全站内容通常包括网站标 志，网站赞助者标志，全站搜索工具等。横幅通常显示在页面的顶端。用法：将其添加到页面级的 版头 （通常为 header 元素），每个页面只用一次。  role=“navigation” (导航) ，指向文档不同部分或者相关文档的导航属性（通常为链接 ）的集合。用法 ： 与 html5 的 nav 元素相似，应将其添加到每个 nav 元素中，或者添加到其他包含导航性链接的容器。 这个 role 可以在每个页面上使用多次。  role=“main” (主体) ，页面的主体。用法 ：将其添加到内容主体部分的容器。这个容器通常是一个 div 元素 ，也可能是一个article 或 section。除在极少数情况下，一个页面应该只有一个标记为 main 的 区域。  role=“complementary” (补充性内容) ，文档中作为主体内容补充的支撑部分。它对区分主题内容有重 要意义。Complementary 角色表明其包含的内容与主体内容是相关的。用法：与 html5 的 aside 元 素相似，应将其添加到每个 aside 或包含补充性内容的 div ，这个role 可以使用多次。  role=“contentinfo” (内容信息) ，包含关于文档的信息的大块可感知区域，这类信息包括版权声明和 指向隐私权声明的链接等。用法 ：将其添加至整个页面的页脚（通常为 footer 元素）。 10. 元素可以有 title 属性，和 title 元素不同，title 属性是给网站上任何部分加上提示的属性。和图片的 alt 属性类似。只是 title 的适用范围更广。 11. HTML5 文本操作： 序号 操作