网页设计基础 知识引入 案例1：简单的网页知识引入.pptxVIP

第二章 从零开始构建HTML页面 · 标题、段落及文字标记· HTML文档基本格式· HTML图像标记 HTML?目录【案例1】：简单的网页【案例3】：图文混排【案例2】：新闻页面2.1 【案例1】简单的网页在这个信息爆炸的时代，我们经常需要浏览网页来获取信息。网页是构成网站的基础，它主要由图像和文字等元素组成。本节将通过“HTML文档基本格式”以及“标题和段落标记”来制作一个简单的网页，如下图所示。案例引入2.1 【案例1】知识引入HTML文档基本格式标题与段落标记双标记与单标记321知识引入2.1 【案例1】知识点讲解1、HTML文档基本格式学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求一样。HTML标记语言也不例外，同样需要遵从一定的规范。接下来将具体讲解HTML文档的基本格式。HTML文档的基本格式主要包括!DOCTYPE文档类型声明、html根标记、head头部标记、body主体标记，具体介绍如下：2.1 【案例1】知识点讲解1、HTML文档基本格式（1） !DOCTYPE标记!DOCTYPE 标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用!DOCTYPE标记为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。2.1 【案例1】知识点讲解1、HTML文档基本格式（2） html/html标记 html标记位于!DOCTYPE 标记之后，也称为根标记，用于告知浏览器其自身是一个 HTML 文档， html标记标志着HTML文档的开始，/html标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。在html之后有一串代码“xmlns=/1999/xhtml”用于声明XHTML统一的默认命名空间。2.1 【案例1】知识点讲解1、HTML文档基本格式（3）head/head标记head标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在html标记之后，主要用来封装其他位于文档头部的标记，例如title、meta、link及style等，用来描述文档的标题、作者以及和其他文档的关系等。一个HTML文档只能含有一对head标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。2.1 【案例1】知识点讲解1、HTML文档基本格式（4）body/body标记body标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于body标记内，body标记中的信息才是最终展示给用户看的。一个HTML文档只能含有一对body标记，且body标记必须在html标记内，位于head头部标记之后，与head标记是并列关系。2.1 【案例1】知识点讲解2、双标记与单标记在HTML页面中，带有“ ”符号的元素被称为HTML标记，如上面提到的html、head、body都是HTML标记。所谓标记就是放在“ ”标记符中表示某个功能的编码命令，也称为HTML标签或HTML元素，本书统一称作HTML标记。为了方便学习和理解，通常将HTML标记分为两大类，分别是“双标记”与“单标记”。2.1 【案例1】知识点讲解2、双标记与单标记（1）双标记双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：该语法中“标记名”表示该标记的作用开始，一般称为“开始标记（start tag）”，“/标记名” 表示该标记的作用结束，一般称为“结束标记（end tag）”。和开始标记相比，结束标记只是在前面加了一个关闭符“/”。标记名/内容/标记名2.1 【案例1】知识点讲解2、双标记与单标记（2）单标记单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：标记名/2.1 【案例1】知识点讲解3、标题和段落标记一篇结构清晰的文章通常都有标题和段落，HTML网页也不例外，为了使网页中的文字有条理地显示出来，HTML提供了相应的标记。2.1 【案例1】知识点讲解3、标题和段落标记（1）标题标记为了使网页更具有语义化，经常会在页面中用到标题标记，HTML提供了6个等级的标题，即h1、h2、h3、h4、h5和h6，从h1到h6重要性递减。其基本语法格式如下：该语法中n的取值为1到6，align属性为可选属性，用于指定标题的对齐方式，下面来演示标题标记的使用。hn align=对齐方式标题文本/hn2.1 【案例1】知识点讲解3、标题和段落标记（2）段落标记在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是p。其基本