第章HTML基础(共58张)课件

1、第1章 HTML基础 第一页，共58页。第1章 HTML基础 第一页，共58页。第1章 HTML基础1 HTML文档结构2 HTML基本标记的使用3 超链接标记4 HTML表格5 HTML表单第二页，共58页。第1章 HTML基础1 HTML文档结构第二页，共58页。1 HTML文档结构 在互联网中传送的文档，绝大部分使用超文本标记语言编写，这些文档称为HTML文档。 在基本HTML文档中，只允许两种元素存在：一种是HTML标记，另一种则是普通文本。 第三页，共58页。1 HTML文档结构 在互联网中传送的文档1 HTML文档结构HTML文档的组成结构如下：第四页，共58页。1 HTML文档结

2、构HTML文档的组成结构如下：第四页，共1 HTML文档结构一个完整的HTML文档通常由以下三部分组成：1HTML标记 格式： 2头部信息 格式： 3文本主体 格式： 第五页，共58页。1 HTML文档结构一个完整的HTML文档通常由以下三部分1 HTML文档结构1HTML标记 这是定义HTML文档开始与结束的标记，也是HTML文档中最先出现的标识，表明这个文件的内容是用HTML语言来实现的。它必须成对出现，分别表示HTML文件的起始和结束。在容器标记中又包括以下和两个部分。第六页，共58页。1 HTML文档结构第六页，共58页。1 HTML文档结构2头部信息 这一部分用来说明文档标题以及该页

3、面的其他信息，它构成HTML文档的开头部分，在此标记对之间可以使用、等标记，这些标记都是描述HTML文档相关信息的标志，标志对之间的内容是不会在浏览器的框内显示出来的，但是其内容应该尽量简短。第七页，共58页。1 HTML文档结构第七页，共58页。1 HTML文档结构3文本主体 这部分说明HTML文件的主体内容，在浏览器的客户区中显示，这是页面开发者的编写HTML文档的主要部分。第八页，共58页。1 HTML文档结构第八页，共58页。1 HTML文档结构 对于HTML标记的约定：超文本标记是用一对尖括号“”括起来的文本串，例如第一行的。超文本标记一般成对出现，用带“/”的标记结束，如。成对出现

4、的超文本标记也称容器元素。有些标记只有起始标记而没有结束标记称空元素，如。超文本标记可以忽略字母的大小写。构成容器元素的一对标记可以写在不同行，标记属性的相对位置不受限制，但属性必须出现在起始标记里。 第九页，共58页。1 HTML文档结构 对于HTML标记的约定：第九页编写HTML文档的方法:HTML文档是一个纯文本文件，可以使用任何文本编辑器编写保存。例：新建一个html文件第十页，共58页。编写HTML文档的方法:第十页，共58页。2 HTML基本标记的使用2.1 head容器的标记2.2 body容器的标记第十一页，共58页。2 HTML基本标记的使用2.1 head容器的标记第2.1

5、 head容器的标记标记主要用来提供网页文件的整体信息。包括标题栏名称、文件的网址、所采用的文档编码等。标记用来告知浏览器这是文件标题的开头，最后使用标记告知浏览器这是文件标题的结束点。 第十二页，共58页。2.1 head容器的标记标记主要用来提供网页2.1 head容器的标记HTML文档的head是一个容器元素，在head容器元素中允许出现以下元素：1title元素2link元素3meta元素4base元素5script元素第十三页，共58页。2.1 head容器的标记HTML文档的head是一个容器2.1 head容器的标记1. title元素格式： 标题文字 title元素包含文档的标

6、题。它不显示在浏览器窗口中，只显示在浏览器标题栏中。在起始标志（）和结束标志()间，可以放入简述文档内容的标题。如果没有title元素，浏览器的标题栏将显示网页的文件名。 第十四页，共58页。2.1 head容器的标记1. title元素第十四页，共2.1 head容器的标记2link元素格式： link元素在当前文档和另一文档之间建立链接关系。href属性指向相关的文档; rel属性描述了当前文档与被连接文档的关系;type属性描述被连接文档的类型。表示链接一个外部CSS文件如下: 第十五页，共58页。2.1 head容器的标记2link元素第十五页，共582.1 head容器的标记3met

7、a元素格式： meta元素用来描述当前网页的元信息。通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面的自动刷新时间间隔（秒）等。 第十六页，共58页。2.1 head容器的标记3meta元素第十六页，共58一些有关metal元素的例子1. 设置搜索引擎关键字2. 设置网页编码3. 刷新页面第十七页，共58页。一些有关metal元素的例子1. 设置搜索引擎关键字第十七页2.1 head容器的标记4base元素格式：base元素指定一个显式 URL 用于解析对于外部源的链接和引用，如图像和样式表

8、。当用户使用相对URL请求文档时，超链接也会正确地执行。Target指定文档中所有链接的默认窗口，该属性主要用在使用框架结构的网页中，使用框架结构，同一浏览器窗口中可以容纳多个网页，同时在若干不同的框架窗口中显示。 第十八页，共58页。2.1 head容器的标记4base元素第十八页，共582.1 head容器的标记5script元素格式：脚本语言代码段script元素在文档中放置一个脚本。这个元素可以在HTML文档的head或body中出现。脚本可以在script元素中或外部文件中被定义。第十九页，共58页。2.1 head容器的标记5script元素第十九页，共2.2 body容器的标记标

9、记是HTML文件最重要的部分，它是一个容器元素，包含在其中的内容将显示在浏览器的主窗口中。第二十页，共58页。2.2 body容器的标记标记是HTML文件最容器元素中可以包含下表中的常用元素:text定义标题, 其中:n=1,6。定义了最大字号的标题, 定义了最小字号的标题text段落标记，文档主体中两个段落之间插入换行把图像插入到文档中，其中src属性给出图像地址 text 定义超文本链接属性，并将结果返回给用户浏览器放置一个横穿浏览器窗口的水平线在文本中强制换行注释结束。注释中不能包含注释区块容器元素，可容纳段落、标题、表格、图片等各种HTML元素第二十一页，共58页。容器元素中可以包含下

10、表中的常用元素:te2.2 body容器的标记在HTML中，需要使用元素的属性对页面进行一个整体的规划和设置，例如页面的背景颜色、背景图案、页面留白以及大部分文字的颜色等等。例如在百度搜索引擎的主页中，其元素的定义如下： 第二十二页，共58页。2.2 body容器的标记在HTML中，需要使用bodybody元素本身的属性可以分为3类，如下表所示: 背景属性bgColor背景色background背景图案文字属性text正文文字颜色link链接文字颜色alink活动链接文字颜色vlink已访问链接文字颜色边距属性leftmargin页面左侧的左边距topmargin页面顶部的上边距第二十三页，共

11、58页。body元素本身的属性可以分为3类，如下表所示: 背景属性b2-2.html这是我的第一个html程序，我很高兴哦。这个程序简单了点学习嘛，要一步一步地来，不着急。第二十四页，共58页。第二十四页，共58页。3 超链接标记HTML用来表示超链接，英文叫anchor，一个链接的基本格式如下： 链接文字 表示一个链接的开始;表示链接的结束；可指向任何一个文件源：网页、图片、影视文件等;href属性则表示这个链接文件的路径；链接分为本地链接、URL链接和目录链接。第二十五页，共58页。3 超链接标记HTML用来表示超链接，英文叫anch3 超链接标记超链接标记的几个常用属性：1target属

12、性：网易首页2title属性：网易首页3name属性：第一章第二章4链接到email地址：联系网易第二十六页，共58页。3 超链接标记超链接标记的几个常用属性：第二十六页，共583.1 本地链接 对同一台机器上的不同文件进行的连接称为本地链接，它使用UNIX或DOS系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。 （1）以绝对路径表示：文件的链接（2）以相对路径表示：文件的链接/a（3）链接上一目录中的文件：IP地址 第二十七页，共58页。3.1 本地链接 对同一台机器上的不同文件进行的连接称为3.2 URL链接 URL是英文Uniform Resource Locators（

13、统一资源定位器）的缩写，是专为标识Internet网上资源位置而设的一种编址方式，通过它可以以多种通讯协议与外界沟通来存取信息。URL地址一般由三部分组成，例如：协议名 主机名 路径及文件名 第二十八页，共58页。3.2 URL链接 URL是英文Uniform ResoInternet上的通讯协议通常包括以下几种： 协议名功能说明file本地系统文件httpWWW服务器ftpftp服务器telnet基于TELNET的协议mailto电子邮件newsUsenet新闻组第二十九页，共58页。Internet上的通讯协议通常包括以下几种： 协议名功能说3.3 目录链接 目录链接可以直接指到某一个文件

14、的上部、下部或中央部分。其制作方法是：在各种链接的各个要素中，首先把某段落设置为链接位置，使用name属性，它可以跳转到一个文件的指定位置。格式1： 然后，设定一个href指向此链接部分的文件；格式2： 链接文字 第三十页，共58页。3.3 目录链接 目录链接可以直接指到某一个文件的上部、 使用本地链接 互联网 HTML简介 多样化和统一性 互联网 互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。 HTML简介 超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言 (SGML

15、) 的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。 多样性和统一性 万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。 关于我们 联系我们 第三十一页，共58页。第三十一页，共58页。4 HTML表格表格中所有行和列及单元格中的内容必须被包含在一对和标记中，其基本结构如下：. . . . . 第三十二页，共58页。4 HTML表格表格中所有行和列及单元格中的内容必须被包含 row 1, cel

16、l 1row 1, cell 2row 2, cell 1row 2, cell 2 第三十三页，共58页。 第三十三页，共58页4.1 表格定义标记1表格的标题 表格标题的位置，可由align属性来设置，其位置分别由表格上方和表格下方。设置标题位于表格上方： . 设置标题位于表格下方： . 第三十四页，共58页。4.1 表格定义标记1表格的标题 第三十四页，共58页。4.1 表格定义标记2元素元素表示表格中的行标记，表格中的每一行都必须包含在一对标记中。行标记的一般形式是： . 在标记中有两个属性：align指定该行中单元格的对齐方式，如左对齐，居中以及右对齐；bgcolor指定该行的背景颜

17、色第三十五页，共58页。4.1 表格定义标记2元素第三十五页，共58页。4.1 表格定义标记3.元素单元格是表格的基本组成元素，一个td 元素表示表格中的一个单元格，包含在元素内的多个元素构成表格的一行。单元格的一般形式是： . 第三十六页，共58页。4.1 表格定义标记3.元素第三十六页，共58页。4.1 表格定义标记3.元素在标记中的属性如下：width 指定单元格的宽度；height 指定单元格的高度；align 指定单元格水平对齐方式；valign 指定单元格垂直对齐方式；bgcolor 指定单元格的背景颜色background 指定单元格的背景图案rowspan 指定单元格的行跨度c

18、olspan 指定单元格的列跨度第三十七页，共58页。4.1 表格定义标记3.元素第三十七页，共58页。4.2 表格属性的设置 1表格的大小一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式：width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素或百分比来表示。例如定义一个长为200像素，宽为100像素的表格： 第三十八页，共58页。4.2 表格属性的设置 1表格的大小第三十八页，共58页4.2 表格属性的设置 2表格的边框边框是用border属性来设定的，它表示表格的边框风格。将border设成不同的值

19、，有不同的效果。在作为布局使用时往往取默认值“0”，即不显示表格的边框，在=1时，表格边框显示成三维的状态。书写格式为：第三十九页，共58页。4.2 表格属性的设置 2表格的边框第三十九页，共58页4.2 表格属性的设置 3单元格间距单元格与单元格之间的线为格间线，它的宽度可以使用中的cellspacing属性加以调节。格式为： #表示要取用的像素值还可以在中设置cellpadding属性，用来规定内容与格线之间的宽度。格式为： #表示要取用的像素值第四十页，共58页。4.2 表格属性的设置 3单元格间距第四十页，共58页。4.2 表格属性的设置 4表格内文字的对齐方式表格中数据的排列方式有左

20、右排列和上下排列两种。左右排列由align属性来设置，上下排列则由valign属性来设置。格式参照 标记：#为left、center、right之一#为top、middle、bottom之一第四十一页，共58页。4.2 表格属性的设置 4表格内文字的对齐方式第四十一页4.2 表格属性的设置 5单元格的合并利用td的rowspan和colspan属性可以把单元格合并rowspan=“n”：合并其下面n-1个单元格colspan=“n”：合并其右测n-1个单元格第四十二页，共58页。4.2 表格属性的设置 5单元格的合并第四十二页，共58第四十三页，共58页。第四十三页，共58页。5 HTML表单

21、5.1 表单标记结构5.2 单行文本框和多行文本框5.3 命令按钮5.4 单选按钮5.5 复选框5.6 下拉列表框5.7 隐藏域第四十四页，共58页。5 HTML表单5.1 表单标记结构第四十四页，共58页5.1 表单标记结构HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。HTML表单标记的基本结构如下： 表单主体 第四十五页，共58页。5.1 表单标记结构HTML表单(Form)是HTML的一5.2 单行文本框和多行文本框单行文本框允许用户输入一些简短的单行信息，比如用户姓名

22、、密码等。格式如下：第四十六页，共58页。5.2 单行文本框和多行文本框单行文本框允许用户输入一些简IP地址表示链接一个外部CSS文件如下:a href=“mailto:info163.边框是用border属性来设定的，它表示表格的边框风格。链接文字 htm文件的链接格式： 2-2.align指定该行中单元格的对齐方式，如左对齐，居中以及右对齐；例：新建一个html文件2 表格属性的设置html链接文字 成对出现的超文本标记也称容器元素。请输入你的姓名：第四十七页，共58页。form action=http:/www.form5.2 单行文本框和多行文本框多行文本框主要用于输入较长的多行文本信息。格式如下： 第四十八页，共58页。5.2 单行文本框和多行文本框多行文本框主要用于输入较长的请提宝贵意见：第四十九页，共58页。form action=http:/www.aaa.c5.3 命令按钮命令按钮通常用于完成一定的操作，这由按钮的type属性值而确定