HTML5+CSS3学习准备

一、

1.选择合适的浏览器

IE11或Google Chrome 30以上版本

2.选择合适的开发工具

对于简单的HTML网页，使用笔记本就可以完成页面布局和显示，对于稍复杂的一些，使用Notepad或EditPlus也可以满足需要，但是对于稍大的一些Web项目，需要专业的软件项目开发工具。例如Adobe Edge、JetBrains WebStorm4.0、Adobe Dreamweaver CC等。

二、新一代HTML标准--HTML5

  HTML称为“超文本标记语言”，是用于开发网站的工具，HTML5是HTML的最新版本。HTML5是能够真正实现跨平台的语言。HTML5从HTML发展而来，但新增和废除了许多元素和属性，语法上也有些差异，对浏览器提出更高要求。

 

1.HTML5语法

1.1 字符编码

  字符编码用于指定一个HTML文档使用的是哪种字符集，以便告诉浏览器该使用哪种编码对文本进行存储或通过通信网络进行传递。

在HTML文档中，使用元素指定字符编码。

1.2 DOCTYPE

  DOCTYPE文档类型是一种标准通用标记语言的文档声明类型，在HTML文档中，用于告诉浏览器应该使用什么样的文档类型来解析HTML文档。在HTML语法中，DOCTYPE文档类型的语法如下：

1.3 MathML与SVG

  MathML成为数学置标语言，是一种基于XML的标准，用于在互联网上书写数学符号和公式。SVG成为可缩放矢量图形，同样基于XML标准，是一种用于表示二维矢量图形的格式。在HTML4中，需要使用特定的标签来显示MathML和SVG，但在HTML5中，可以将MathML和SVG内嵌在HTML文档中，完成相同的功能。如下图：

 

代码如下：

注：cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)，

r属性定义圆的半径。

 

2.新增与废除的元素和属性

2.1 新增与结构相关的元素

在HTML4中，与结构相关的元素主要使用

，并配合CSS样式进行页面布局，在HTML5中，可以直接使用各种主体结构元素进行布局，这些元素包括：

元素：表示页面的一个内容区块。

元素：表示页面一块独立内容。

元素：表示页面上

元素之外的，但是与

相关的辅助信息。可以是侧边，也是网页两边会显示的一些内容。

元素：表示页面中导航链接的部分。

在HTML4中，这些内容都需要div+CSS来表示，在HTML5中，这些内容有了各自的元素，这样，搜索引擎就可以更准确地抓取到需要检索的内容。

 

2.2 在HTML5中，还新增了一些非主体结构的元素，这些元素包括：

元素：表示页面中的一个内容区块或者整个页面的标题。

元素：表示对整个页面或者页面中的一个内容区块

的

进行组合。

元素：表示整个页面或者页面中一个内容区块

的页脚。

元素：表示一段独立的文档流内容。

元素：表示

元素的标题。

使用这些元素可以使页面的布局更加清晰，有助于搜索引擎的检索。

 

2.3新增与结构无关的元素

这些元素主要用于定义音视频、进度条、时间、注释等，主要包括：