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

1、第第1章章 HTML基础基础 第一页，共58页。第1 章 H T ML 基础 第一页，共5 8 页。第1章 HTML基础n1 HTML文档结构n2 HTML基本标记的使用n3 超链接标记n4 HTML表格n5 HTML表单第二页，共58页。第1 章 H T ML 基础1 H T ML 文档结构第二页，共5 8 页。1 HTML文档结构 在互联网中传送的文档，绝大部分使用超文本标记语言编写，这些文档称为HTML文档。在基本HTML文档中，只允许两种元素存在：一种是HTML标记，另一种则是普通文本。第三页，共58页。1 H T ML 文档结构 在互联网中传送的文档1 HTML文档结构HTML文档的

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

3、第六页，共5 8 页。1 HTML文档结构n2头部信息n 这一部分用来说明文档标题以及该页面的其他信息，它构成HTML文档的开头部分，在此标记对之间可以使用、等标记，这些标记都是描述HTML文档相关信息的标志，标志对之间的内容是不会在浏览器的框内显示出来的，但是其内容应该尽量简短。第七页，共58页。1 H T ML 文档结构第七页，共5 8 页。1 HTML文档结构n3文本主体n 这部分说明HTML文件的主体内容，在浏览器的客户区中显示，这是页面开发者的编写HTML文档的主要部分。第八页，共58页。1 H T ML 文档结构第八页，共5 8 页。1 HTML文档结构 对于HTML标记的约定：n

4、超文本标记是用一对尖括号“”括起来的文本串，例如第一行的。n超文本标记一般成对出现，用带“/”的标记结束，如。成对出现的超文本标记也称容器元素。n有些标记只有起始标记而没有结束标记称空元素，如。n超文本标记可以忽略字母的大小写。n构成容器元素的一对标记可以写在不同行，标记属性的相对位置不受限制，但属性必须出现在起始标记里。第九页，共58页。1 H T ML 文档结构 对于H T ML 标记的约定：第九页n编写HTML文档的方法:nHTML文档是一个纯文本文件，可以使用任何文本编辑器编写保存。n例：新建一个html文件第十页，共58页。编写H T ML 文档的方法:第十页，共5 8 页。2 HT

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

6、ript元素第十三页，共58页。2.1 h e a d 容器的标记H T ML 文档的h e a d 是一个容器2.1 head容器的标记n1.title元素n格式：n 标题文字 ntitle元素包含文档的标题。它不显示在浏览器窗口中，只显示在浏览器标题栏中。在起始标志（）和结束标志()间，可以放入简述文档内容的标题。如果没有title元素，浏览器的标题栏将显示网页的文件名。第十四页，共58页。2.1 h e a d 容器的标记1.t i t l e 元素第十四页，共2.1 head容器的标记n2link元素n格式：n nlink元素在当前文档和另一文档之间建立链接关系。href属性指向相关的

7、文档;rel属性描述了当前文档与被连接文档的关系;type属性描述被连接文档的类型。n表示链接一个外部CSS文件如下:第十五页，共58页。2.1 h e a d 容器的标记2 l i n k 元素第十五页，共5 82.1 head容器的标记n3meta元素n格式：n nmeta元素用来描述当前网页的元信息。通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面的自动刷新时间间隔（秒）等。第十六页，共58页。2.1 h e a d 容器的标记3 m e t a 元素第十六页，共5 8一些有关meta

8、l元素的例子n1.设置搜索引擎关键字nn2.设置网页编码nn3.刷新页面n第十七页，共58页。一些有关m e t a l 元素的例子1.设置搜索引擎关键字第十七页2.1 head容器的标记n4base元素n格式：nnbase元素指定一个显式 URL 用于解析对于外部源的链接和引用，如图像和样式表。当用户使用相对URL请求文档时，超链接也会正确地执行。Target指定文档中所有链接的默认窗口，该属性主要用在使用框架结构的网页中，使用框架结构，同一浏览器窗口中可以容纳多个网页，同时在若干不同的框架窗口中显示。第十八页，共58页。2.1 h e a d 容器的标记4 b a s e 元素第十八页，共

9、5 82.1 head容器的标记n5script元素n格式：n脚本语言代码段nnscript元素在文档中放置一个脚本。这个元素可以在HTML文档的head或body中出现。脚本可以在script元素中或外部文件中被定义。第十九页，共58页。2.1 h e a d 容器的标记5 s c r i p t 元素第十九页，共2.2 body容器的标记n标记是HTML文件最重要的部分，它是一个容器元素，包含在其中的内容将显示在浏览器的主窗口中。第二十页，共58页。2.2 b o d y 容器的标记 标记是H T ML 文件最容器元素中可以包含下表中的常用元素:text定义标题,其中:n=1,6。定义了最

10、大字号的标题,定义了最小字号的标题text段落标记，文档主体中两个段落之间插入换行把图像插入到文档中，其中src属性给出图像地址 text 定义超文本链接属性，并将结果返回给用户浏览器放置一个横穿浏览器窗口的水平线在文本中强制换行注释结束。注释中不能包含注释区块容器元素，可容纳段落、标题、表格、图片等各种HTML元素第二十一页，共58页。容器元素中可以包含下表中的常用元素:t e2.2 body容器的标记n在HTML中，需要使用元素的属性对页面进行一个整体的规划和设置，例如页面的背景颜色、背景图案、页面留白以及大部分文字的颜色等等。n例如在百度搜索引擎的主页中，其元素的定义如下：n 第二十二页

11、，共58页。2.2 b o d y 容器的标记在H T ML 中，需要使用 b o d ybody元素本身的属性可以分为3类，如下表所示:背景属性bgColor背景色background背景图案文字属性text正文文字颜色link链接文字颜色alink活动链接文字颜色vlink已访问链接文字颜色边距属性leftmargin页面左侧的左边距topmargin页面顶部的上边距第二十三页，共58页。b o d y 元素本身的属性可以分为3 类，如下表所示:背景属性b2-2.html这是我的第一个html程序，我很高兴哦。这个程序简单了点学习嘛，要一步一步地来，不着急。第二十四页，共58页。第二十四页

12、，共5 8 页。3 超链接标记nHTML用来表示超链接，英文叫anchor，一个链接的基本格式如下：n 链接文字 n表示一个链接的开始;n表示链接的结束；n可指向任何一个文件源：网页、图片、影视文件等;nhref属性则表示这个链接文件的路径；链接分为本地链接、URL链接和目录链接。第二十五页，共58页。3 超链接标记H T ML 用 来表示超链接，英文叫a n c h3 超链接标记n超链接标记的几个常用属性：1target属性：网易首页2title属性：网易首页3name属性：第一章第二章4链接到email地址：联系网易第二十六页，共58页。3 超链接标记超链接标记的几个常用属性：第二十六页，

13、共5 83.1 本地链接 n对同一台机器上的不同文件进行的连接称为本地链接，它使用UNIX或DOS系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。n（1）以绝对路径表示：文件的链接n（2）以相对路径表示：文件的链接/an（3）链接上一目录中的文件：IP地址 第二十七页，共58页。3.1 本地链接 对同一台机器上的不同文件进行的连接称为3.2 URL链接 nURL是英文Uniform Resource Locators（统一资源定位器）的缩写，是专为标识Internet网上资源位置而设的一种编址方式，通过它可以以多种通讯协议与外界沟通来存取信息。nURL地址一般由三部分组成，例如

14、：协议名 主机名 路径及文件名 第二十八页，共58页。3.2 U R L 链接 U R L 是英文U n i f o r m R e s oInternet上的通讯协议通常包括以下几种：协议名功能说明file本地系统文件httpWWW服务器ftpftp服务器telnet基于TELNET的协议mailto电子邮件newsUsenet新闻组第二十九页，共58页。I n t e r n e t 上的通讯协议通常包括以下几种：协议名功能说3.3 目录链接 n目录链接可以直接指到某一个文件的上部、下部或中央部分。其制作方法是：在各种链接的各个要素中，首先把某段落设置为链接位置，使用name属性，它可以跳

15、转到一个文件的指定位置。n格式1：n然后，设定一个href指向此链接部分的文件；n格式2：链接文字 第三十页，共58页。3.3 目录链接 目录链接可以直接指到某一个文件的上部、使用本地链接 互联网 HTML简介 多样化和统一性 互联网 互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。HTML简介 超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言(SGML)的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。多样性和统一性 万事万物都离不开多样性和统一性

16、这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。关于我们 联系我们 第三十一页，共58页。第三十一页，共5 8 页。4 HTML表格n表格中所有行和列及单元格中的内容必须被包含在一对和标记中，其基本结构如下：nn.n n .n .n .n n .n 第三十二页，共58页。4 H T ML 表格表格中所有行和列及单元格中的内容必须被包含 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2 第三十三页，共

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

18、1 表格定义标记n3.元素n单元格是表格的基本组成元素，一个td 元素表示表格中的一个单元格，包含在元素内的多个元素构成表格的一行。n单元格的一般形式是：n.第三十六页，共58页。4.1 表格定义标记3.元素第三十六页，共5 8 页。4.1 表格定义标记n3.元素n在标记中的属性如下：nwidth 指定单元格的宽度；nheight 指定单元格的高度；nalign 指定单元格水平对齐方式；nvalign 指定单元格垂直对齐方式；nbgcolor 指定单元格的背景颜色nbackground 指定单元格的背景图案nrowspan 指定单元格的行跨度ncolspan 指定单元格的列跨度第三十七页，共5

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

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

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

22、，共5 8 页。5 HTML表单n5.1 表单标记结构n5.2 单行文本框和多行文本框n5.3 命令按钮n5.4 单选按钮n5.5 复选框n5.6 下拉列表框n5.7 隐藏域第四十四页，共58页。5 H T ML 表单5.1 表单标记结构第四十四页，共5 8 页5.1 表单标记结构nHTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。nHTML表单标记的基本结构如下：表单主体 第四十五页，共58页。5.1 表单标记结构H T ML 表单(F o r m)是H T ML 的一5.2

23、单行文本框和多行文本框n单行文本框允许用户输入一些简短的单行信息，比如用户姓名、密码等。n格式如下：n第四十六页，共58页。5.2 单行文本框和多行文本框单行文本框允许用户输入一些简IP地址表示链接一个外部CSS文件如下:a href=“mailto:info163.边框是用border属性来设定的，它表示表格的边框风格。链接文字 htm文件的链接格式：2-2.align指定该行中单元格的对齐方式，如左对齐，居中以及右对齐；例：新建一个html文件2 表格属性的设置html链接文字 成对出现的超文本标记也称容器元素。请输入你的姓名：第四十七页，共58页。f o r m a c t i o n=

24、h t t p:/w w w.f o r m5.2 单行文本框和多行文本框n多行文本框主要用于输入较长的多行文本信息。n格式如下：n 第四十八页，共58页。5.2 单行文本框和多行文本框多行文本框主要用于输入较长的请提宝贵意见：第四十九页，共58页。f o r m a c t i o n=h t t p:/w w w.a a a.c5.3 命令按钮n命令按钮通常用于完成一定的操作，这由按钮的type属性值而确定。格式如下：nntype属性指定按钮的类型，其值有三种：n值为“Submit”，表示将表单的信息提交给表单的action所指向的文件来处理；n值为“Reset”，表示清除表单的数据；n值

25、为“Button”，为一般按钮，不产生任何操作。nvalue属性值是显示在按钮上的文字。第五十页，共58页。5.3 命令按钮命令按钮通常用于完成一定的操作，这由按钮的t 用户名:密码:第五十一页，共58页。f o r m a c t i o n=l o g i n.p h p m e t h o5.4 单选按钮n使用单选按钮，让用户在一组选项里只能选择一个。n格式如下：n第五十二页，共58页。5.4 单选按钮使用单选按钮，让用户在一组选项里只能选择一个苹果桔子芒果第五十三页，共58页。f o r m 第五十三页，共5 8 页。5.5 复选框n复选框允许用户在一组选项里，选择一个或多个选项。n格

26、式如下：nnchecked是可选的，表示初始时选中的复选框。第五十四页，共58页。5.5 复选框复选框允许用户在一组选项里，选择一个或多个选项苹果桔子芒果第五十五页，共58页。f o r m a c t i o n=h t t p:/w w w.a a a.c5.6 下拉列表框n下拉列表框既可以用做单选，也可以用做复选；如果要变成复选，加上muiltiple即可。用户用Ctrl来实现多选。n格式如下：文本1 .文本n第五十六页，共58页。5.6 下拉列表框下拉列表框既可以用做单选，也可以用做复选；你最喜欢的水果是：苹果桔子芒果第五十七页，共58页。f o r m a c t i o n=第五十七页，共5 8 页。5.7 隐藏域n隐藏域是指在表单上不显示任何内容。它允许表单使用name和value属性一起传送“预先设置好的信息”。n格式如下：n第五十八页，共58页。5.7 隐藏域隐藏域是指在表单上不显示任何内容。它允许表单使