HTML5+CSS3网页设计基础 第一章 网页设计基础

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