1、HTML5+CSS3网页设计基础第1章 网页设计基础第1页第第1章章 网页设计基础网页设计基础本章概述 本章的学习目标主要内容HTML5+CSS3网页设计基础第1章 网页设计基础第2页本章概述本章概述l网页设计工作主要包括网页内容显示、总体颜色网页设计工作主要包括网页内容显示、总体颜色选择、页面的排版布局和用户群的体验度等。网选择、页面的排版布局和用户群的体验度等。网页设计作为一门综合性较高的课程，涉及商业策页设计作为一门综合性较高的课程，涉及商业策划、平面设计、程序语言和数据库等。本章将介划、平面设计、程序语言和数据库等。本章将介绍网页的基本组成元素、页面结构和创建网页的绍网页的基本组成元素
2、、页面结构和创建网页的方法。方法。HTML5+CSS3网页设计基础第1章 网页设计基础第3页本章的学习目标本章的学习目标l了解网页上常见的基本元素及其特点了解网页上常见的基本元素及其特点l了解网页的布局结构即网页内容的排版知识了解网页的布局结构即网页内容的排版知识l掌握编辑掌握编辑HTML5网页常用的编辑软件网页常用的编辑软件l了解了解HTML5发展、优势、浏览器支持情况发展、优势、浏览器支持情况l掌握掌握HTML5文档的基本格式和语法规范文档的基本格式和语法规范l掌握创建和浏览网页的方法掌握创建和浏览网页的方法HTML5+CSS3网页设计基础第1章 网页设计基础第4页主要内容主要内容1.1
3、网页网页的基本元素的基本元素1.2 网页网页的布局结构的布局结构1.3 创建创建HTML5页面页面1.4 HTML5基础基础1.5 实训实训1.6 本章小结本章小结 HTML5+CSS3网页设计基础第1章 网页设计基础第5页1.1 网页网页的基本的基本元素元素介绍介绍构成网页的基本元素及其构成网页的基本元素及其特点特点。l1.文本文本l2.图片图片和动画和动画l3.声音和声音和视频视频l4.超链接超链接l5.导航栏导航栏l6.表单表单l7.其他常见其他常见元素元素HTML5+CSS3网页设计基础第1章 网页设计基础第6页1.2 网页网页的布局结构的布局结构l从页面布局的角度看，一个页面的布局就
4、类似一篇文章的从页面布局的角度看，一个页面的布局就类似一篇文章的排版，需要分为多个区块，较大的区块又可再细分为小区排版，需要分为多个区块，较大的区块又可再细分为小区块。块块。块内内有有文字文字、图片、超链接等内容，这些区块一般称、图片、超链接等内容，这些区块一般称为块级元素，而区块内的文字、图片或超链接等一般称为为块级元素，而区块内的文字、图片或超链接等一般称为行级元素，如图行级元素，如图1-2所示。所示。HTML5+CSS3网页设计基础第1章 网页设计基础1.3 创建创建HTML5页面页面第7页本节主要内容：本节主要内容：l案例分析案例分析l 用记事本编辑用记事本编辑网页网页l用用HBuil
5、der编辑编辑网页网页HTML5+CSS3网页设计基础第1章 网页设计基础1.3.1 案例分析案例分析l【案例展示】【案例展示】设计设计一个简单的页面，包含了网页标题文字一个简单的页面，包含了网页标题文字和和一行文本信息一行文本信息，本例文件本例文件1-1.html在在IE浏览器中的浏览浏览器中的浏览效果如图效果如图1-3所示。所示。l【知识要点】【知识要点】HTML文档的结构、创建网页、保存网页与文档的结构、创建网页、保存网页与浏览网页。浏览网页。l【学习目标】掌握使用记事本和【学习目标】掌握使用记事本和HBuilder创建、保存和浏创建、保存和浏览网页的方法。览网页的方法。第8页HTML5
6、+CSS3网页设计基础第1章 网页设计基础1.3.2 用用记事本编辑网页记事本编辑网页l用记事本创建网页过程如下。用记事本创建网页过程如下。l(1)打开记事本打开记事本。l(2)创建新文件创建新文件。l(3)保存网页保存网页。l(4)浏览浏览网页网页。l(5)查看网页源代码。查看网页源代码。第9页HTML5+CSS3网页设计基础第1章 网页设计基础1.3.3 用用HBuilder编辑编辑网页网页l用用HBuilder创建网页过程如下创建网页过程如下。l(1)启动启动HBuilder，创建，创建Web项目项目。l(2)创建创建HTML文件文件。l(3)编辑文件编辑文件。l(4)浏览网页。浏览网页
7、。第10页HTML5+CSS3网页设计基础第1章 网页设计基础1.4 HTML5基础基础第11页本节主要内容：本节主要内容：l HTML5概述概述l HTML5文档文档结构结构l HTML5语句语句结构结构l HTML5语法语法规范规范HTML5+CSS3网页设计基础第1章 网页设计基础1.4.1 HTML5概述概述l1.HTML5发展发展 2014年年10发布发布。HTML5将会逐渐取代将会逐渐取代HTML4.01、XHTML1.0标准标准。l2.HTML5优势优势 新新的简化的字符集声明。的简化的字符集声明。新新的简化的的简化的DOCTYPE。简简答而强大的答而强大的HTML5API。以以
8、浏览器原生能力替代复杂的浏览器原生能力替代复杂的JavaScript代码代码。l3.浏览器浏览器支持支持 目前目前常用的浏览器有常用的浏览器有IE、火孤、火孤(Firefox)、谷歌、谷歌(Chrome)、Safari和和 Opera等等。第12页HTML5+CSS3网页设计基础第1章 网页设计基础1.4.2 HTML5文档结构文档结构HTML文档是一种纯文本格式的文件，文档的基本结构为文档是一种纯文本格式的文件，文档的基本结构为:网页标题网页标题 网页内容网页内容第13页HTML5+CSS3网页设计基础第1章 网页设计基础1.4.2 CSS的层叠和继承性的层叠和继承性l1.声明声明：声明必须
9、是声明必须是 HTML 文档的第一文档的第一行，位于行，位于 标签标签之前之前。l2.文档文档标签标签：标记位于标记位于标记之后，也称为标记之后，也称为根标记，表示根标记，表示HTML文档的文档的开始开始。l3.头头标签标签：标签用于定义标签用于定义HTML文档的头部信息，紧文档的头部信息，紧跟在跟在标签标签之后之后。l4.文档文档编码编码：HTML5文档使用文档使用meta元素的元素的 charset属性指定文档编属性指定文档编码，码，格式格式为为：l5.标题标题标签标签：标签用来定义文档的标题。标签用来定义文档的标题。l6.主体主体标签标签：标记用于定义标记用于定义HTML文档所要显示的内
10、文档所要显示的内容。容。第14页HTML5+CSS3网页设计基础第1章 网页设计基础1.4.3 HTML5语句结构语句结构lHTML5语句主要有标签、属性和元素构成，其语法结构语句主要有标签、属性和元素构成，其语法结构如下：如下：元素的内元素的内容容l1.标签标签 标签标签分单标签和双标签，单标签如分单标签和双标签，单标签如、等。双标等。双标签由开始和结束两个标签符组必须成对出现，签由开始和结束两个标签符组必须成对出现，等等。第15页HTML5+CSS3网页设计基础第1章 网页设计基础1.4.3 HTML5语句结构语句结构l2.属性属性 属性属性在开始标签中指定，用来表示该标签的性质和特性。通
11、常都是以在开始标签中指定，用来表示该标签的性质和特性。通常都是以“属性名属性名=”值值”形式来表示，有多个属性时用空格隔开，并且在指定形式来表示，有多个属性时用空格隔开，并且在指定多个属性时不用区分顺序。多个属性时不用区分顺序。例如例如，段落标签段落标签有属性有属性 align，align表示文字的对齐方式，表示为表示文字的对齐方式，表示为：欢迎访问本网站欢迎访问本网站l3.元素元素 元素元素指的是包含标签在内的整体，元素的内容是开始标签与结束标签指的是包含标签在内的整体，元素的内容是开始标签与结束标签之间的之间的内容内容。第16页HTML5+CSS3网页设计基础第1章 网页设计基础1.4.4
12、 HTML5语法规范语法规范l1.标签标签和属性的规范和属性的规范 标签标签名和属性建议都用小写字母。名和属性建议都用小写字母。HTML标签可以嵌套，但不允许交叉。标签可以嵌套，但不允许交叉。HTML标签中的一个单词不能分两行写。标签中的一个单词不能分两行写。属性属性值都要用双引号括起来。值都要用双引号括起来。HTML源文件中的换行、回车符和空格在显示效果中是无效的。源文件中的换行、回车符和空格在显示效果中是无效的。l2.代码的缩进代码的缩进 HTML代码并不要求在书写时缩进，但为了文档的结构性和层次性，代码并不要求在书写时缩进，但为了文档的结构性和层次性，建议使用标签时首尾对齐，内部的内容向
13、右缩进几格。建议使用标签时首尾对齐，内部的内容向右缩进几格。第17页HTML5+CSS3网页设计基础第1章 网页设计基础1.5 实训实训l【实训任务】练习创建网页文档，展示企业简介信息，本【实训任务】练习创建网页文档，展示企业简介信息，本例文件例文件1-2.html在浏览器中的显示效果如图在浏览器中的显示效果如图1-11所示。所示。第18页HTML5+CSS3网页设计基础第1章 网页设计基础第19页1.6 本章小结本章小结 l本章讲述了网页的基本元素、布局结构和网页编辑技术。本章讲述了网页的基本元素、布局结构和网页编辑技术。首先，介绍了网页上常见基本元素和网页的布局结构知识首先，介绍了网页上常见基本元素和网页的布局结构知识。然后，结合案例介绍了常用的网页编辑工具记事本和。然后，结合案例介绍了常用的网页编辑工具记事本和Hbuilder。最后，介绍了。最后，介绍了HTML5文档的结构和语法规范文档的结构和语法规范等内容。等内容。
