2015年网页美化与布局电子教案01单元1 网页美化与布局的基本属性设置体验与分析.docVIP

HTML5+CSS3网页美化与布局 单元1　网页美化与布局的基本属性设置体验与分析 PAGE 12 PAGE 11 单元1　网页美化与布局的基本属性设置体验与分析 目前，HTML5和CSS3已成为Web应用开发中的热门技术。HTML5与CSS3的结合可以方便、快捷地对网页元素与网页整体进行美化与布局。 【知识预览】 1．HTML5印象 HTML5是万维网的核心语言，是标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。 2013年5月6日，HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的开发者努力提高新元素互操作性。 支持Html5的浏览器包括Chrome（谷歌浏览器）、Firefox（火狐浏览器）、IE9及其更高版本、Safari、Opera等。 2．CSS3印象 CSS即层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。 CSS3将完全向后兼容，网络浏览器也还将继续支持CSS2。 3． HTML5中典型的标记方法 （1）内容类型（ContentType） HTML5扩展仍然为“.html”或者“.htm”，内容类型（ContentType）仍然为“text/html”。 （2）DOCTYPE声明 HTML5中使用!DOCTYPE html声明，该声明方式适用所有版本的HTML，HTML5中不可以使用版本声明。 （3）指定字符编码 HTML5中的字符编码推荐使用UTF-8，HTML5中可以使用meta元素直接追加charset属性的方式来指定字符编码：meta chaarset=UTF-8; （4）具有boolean值的属性 当只写属性而不指定属性值时表示属性为true，也可以将属性名设定为属性值或将空字符串设定为属性值；如果想要将属性值设置为false，可以不使用该属性。 （5）引号 指定属性时属性值两边既可以用双引号也可以用单引号。当属性值不包括空字符串、“”、“”、=、单引号、双引号等字符时，属性两边的引号可以省略。 4．HTML5主要的语义和结构标签说明 HTML5提供了新的元素来创建更好的页面结构。 （1）header标签 用于定义了文档的头部区域，表示页面中一个内容区块或整个页面的标题。 （2）section标签 用于定义文档中的节（section、区段），表示页面中的一个内容区块，例如章节、页眉、页脚或页面的其他部分。 （3）footer标签 用于定义文档或节的页脚部分，表示整个页面或页面中一个内容区块的脚注，通常包含文档的作者、版权信息、使用条款链接、联系信息等。 （4）article标签 用于定义页面中一块与上下文不相关的独立内容。例如一篇文章。 （5）aside标签 用于定义页面内容之外的内容，表示article元素内容之外的与article元素内容相关的辅助信息。 （6）hgroup标签 用于对整个页面或页面中的一个内容区块的标题进行组合。 5．!DOCTYPE声明的用法 （1）!DOCTYPE声明必须是HTML文档的第一行，位于html标签之前。 （2）!DOCTYPE声明不是HTML标签，它是指示Web浏览器关于页面应使用哪个HTML版本进行编写的指令。 （3）!DOCTYPE声明没有结束标记，并且对大小写不敏感。应始终向HTML文档添加!DOCTYPE声明，这样浏览器才能获知文档类型。 6．网页中应用CSS样式的方法 插入样式表的方法有以下三种。 （1）外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。 （2）内部样式表 当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用style标签在文档头部定义内部样式表。 （3）内联样式 使用内联样式，需要在相关的标签内使用样式（style）属性，style属性可以包含任何CSS属性。 7．根据CSS显示分类划分的HTML元素类型 根据CSS显示分类，HTML元素被分成三种类型。 （1）块状元素 块状元素一般是其他元素的容器元素，块状元素可以容纳内联元素和其他块状元素，例如div、p、table、ul、ol、dl、li、h1、h2、h3、h4、h5、h6、form等元素都属于块状元素。 （2）内联元素 内联元素也称为行内元素，其表现形式是以行内逐个进行显示，可以作为其他任何元素的子元素，例如span、a、img、strong等元素都属于内联元素。