《HTML5经典实例》读书笔记一

前言

什么是HTML5:HTML5是由W3C开发的一个规范——–http://dev.w3.org/html5/spec/

第一章:基本语法和语义

问题:想要创建一个HTML5页面

在页面的最开始处指定HTML5 DOCTYPE:

                 //DOCTYPE不区分大小写
<html>
...
html>

DOCTYPE文档类型声明,告诉浏览器和验证器,该页面是使用哪个HTML的版本编写的。从HTML5开始,DOCTYPE中删除了版本号。这允许HTML5在语法方面可以向后兼容,从而有望使得向HTML5转换更容易。

问题:需要确定Web页面的字符编码。

在文档头部,为字符集添加meta声明:

<meta charset="UTF-8">          //HTML5将浏览器所需的信息最小
化,以前版本需要写成<meta http-equiv="Content-Type" content="text/html";charset=UTF-8"/>

如果没有在HTML中声明字符集,浏览器首先尝试从服务器的HTTP响应头部(特别是”Content-Type”)来确认字符集。在响应头部中声明的字符集,通常要优先于在文档中指定的字符集,并且因此而成为优先使用的方法。如果不能控制服务器所发送的头部,则在HTML文档中声明字符集是次优的选择。(由浏览器为你选择的字符集,可能会带来安全性风险)
关于字符实体的资源:http://www.digitalmediaminute.com/reference/entity/。

问题:想要指定web页面的主要语言

在开始的html元素中,添加lang属性和相应的值:

<html lang="en">       //不是必须的,但是从可用性和易访问性的角度来看,这是一个好做法。

问题:想要在引用外部CSS文件和javascript文件。

对于用户代理所需要的信息,HTML5要求其尽量最小化。因此在HTML5中type正式成为可选的:

<link rel="stylesheet" href=" styles.css"/><script src="script.js">script>

结构性元素

使用这些结构性元素,可以帮助你使得标记更加富有语义,也助于在文档中定义主要位置。

  • 使用HTML5来添加文档结构
    • header
    • footer
    • nav(通常header会包含它)
    • aside(包含了与其周围的内容相关、但又独立存在的信息,诸如一个边栏或醒目应用)
    • section(包含了可以通过主题组织的内容或相关的内容)
    • article。

article和section之间的选择
section是新的结构性元素中最为通用的,用来直接组织相关的内容。一条通用的规则是,section元素只适合于这样的情况:元素的内容在文档的纲要中明确地列出。
section和article之间的区别可能容易令人混淆:

  • 不要简单地将section用作样式化钩子。将div和span用作该目的。
  • 如果header、footer、aside或article更加适合你的内容,则不要使用section
  • 不要使用section,除非它自身有个标题。

nav只适用于主要的站点导航,而不适合搜索结果链接或友情链接。

何时使用
元素

不想要使用某个新的结构性元素,而只是让它充当CSS的钩子。
关注内容并且避免不必要地使用

当另一个元素更有语义时,就不要使用div

样式化结构性元素

有一些浏览器会将它们当作内联元素,所以:

header,footer,nav,article,aside,section{
        display:block;

在IE9之前的版本中,必须在文档中添加一些Javascript,以使得IE识别这些元素并允许它们进行样式化:


                    
                    

你可能感兴趣的:(读书笔记)