《第章HTML基础(共58张)课件.pptx》由会员分享，可在线阅读，更多相关《第章HTML基础(共58张)课件.pptx（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页。
2、,1 HTML文档结构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页
5、。,2 HTML基本标记的使用2.1 head容器的标记第,2.1 head容器的标记,标记主要用来提供网页文件的整体信息。包括标题栏名称、文件的网址、所采用的文档编码等。标记用来告知浏览器这是文件标题的开头，最后使用标记告知浏览器这是文件标题的结束点。,第十二页，共58页。,2.1 head容器的标记标记主要用来提供网页,2.1 head容器的标记,HTML文档的head是一个容器元素，在head容器元素中允许出现以下元素：1title元素2link元素3meta元素4base元素5script元素,第十三页，共58页。,2.1 head容器的标记HTML文档的head是一个容器,2.1 h
6、ead容器的标记,1.title元素格式：标题文字 title元素包含文档的标题。它不显示在浏览器窗口中，只显示在浏览器标题栏中。在起始标志（）和结束标志()间，可以放入简述文档内容的标题。如果没有title元素，浏览器的标题栏将显示网页的文件名。,第十四页，共58页。,2.1 head容器的标记1.title元素第十四页，共,2.1 head容器的标记,2link元素格式：link元素在当前文档和另一文档之间建立链接关系。href属性指向相关的文档;rel属性描述了当前文档与被连接文档的关系;type属性描述被连接文档的类型。表示链接一个外部CSS文件如下:,第十五页，共58页。,2.1 h
7、ead容器的标记2link元素第十五页，共58,2.1 head容器的标记,3meta元素格式：meta元素用来描述当前网页的元信息。通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面的自动刷新时间间隔（秒）等。,第十六页，共58页。,2.1 head容器的标记3meta元素第十六页，共58,一些有关metal元素的例子,1.设置搜索引擎关键字2.设置网页编码3.刷新页面,第十七页，共58页。,一些有关metal元素的例子1.设置搜索引擎关键字第十七页,2.1 head容器的标记,4base元
8、素格式：base元素指定一个显式 URL 用于解析对于外部源的链接和引用，如图像和样式表。当用户使用相对URL请求文档时，超链接也会正确地执行。Target指定文档中所有链接的默认窗口，该属性主要用在使用框架结构的网页中，使用框架结构，同一浏览器窗口中可以容纳多个网页，同时在若干不同的框架窗口中显示。,第十八页，共58页。,2.1 head容器的标记4base元素第十八页，共58,2.1 head容器的标记,5script元素格式：脚本语言代码段script元素在文档中放置一个脚本。这个元素可以在HTML文档的head或body中出现。脚本可以在script元素中或外部文件中被定义。,第十九页
9、，共58页。,2.1 head容器的标记5script元素第十九页，共,2.2 body容器的标记,标记是HTML文件最重要的部分，它是一个容器元素，包含在其中的内容将显示在浏览器的主窗口中。,第二十页，共58页。,2.2 body容器的标记标记是HTML文件最,容器元素中可以包含下表中的常用元素:,第二十一页，共58页。,容器元素中可以包含下表中的常用元素:te,2.2 body容器的标记,在HTML中，需要使用元素的属性对页面进行一个整体的规划和设置，例如页面的背景颜色、背景图案、页面留白以及大部分文字的颜色等等。例如在百度搜索引擎的主页中，其元素的定义如下：,第二十二页，共58页。,2.
10、2 body容器的标记在HTML中，需要使用body,body元素本身的属性可以分为3类，如下表所示:,第二十三页，共58页。,body元素本身的属性可以分为3类，如下表所示:背景属性b,2-2.html这是我的第一个html程序，我很高兴哦。这个程序简单了点学习嘛，要一步一步地来，不着急。,第二十四页，共58页。,第二十四页，共58页。,3 超链接标记,HTML用来表示超链接，英文叫anchor，一个链接的基本格式如下：链接文字 表示一个链接的开始;表示链接的结束；可指向任何一个文件源：网页、图片、影视文件等;href属性则表示这个链接文件的路径；链接分为本地链接、URL链接和目录链接。,第
11、二十五页，共58页。,3 超链接标记HTML用来表示超链接，英文叫anch,3 超链接标记,超链接标记的几个常用属性：1target属性：网易首页2title属性：网易首页3name属性：第一章第二章4链接到email地址：联系网易,第二十六页，共58页。,3 超链接标记超链接标记的几个常用属性：第二十六页，共58,3.1 本地链接,对同一台机器上的不同文件进行的连接称为本地链接，它使用UNIX或DOS系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。（1）以绝对路径表示：文件的链接（2）以相对路径表示：文件的链接IP地址,第二十七页，共58页。,3.1 本地链接 对同一台机器上
12、的不同文件进行的连接称为,3.2 URL链接,URL是英文Uniform Resource Locators（统一资源定位器）的缩写，是专为标识Internet网上资源位置而设的一种编址方式，通过它可以以多种通讯协议与外界沟通来存取信息。URL地址一般由三部分组成，例如：协议名 主机名 路径及文件名,第二十八页，共58页。,3.2 URL链接 URL是英文Uniform Reso,Internet上的通讯协议通常包括以下几种：,第二十九页，共58页。,Internet上的通讯协议通常包括以下几种：协议名功能说,3.3 目录链接,目录链接可以直接指到某一个文件的上部、下部或中央部分。其制作方法是
13、：在各种链接的各个要素中，首先把某段落设置为链接位置，使用name属性，它可以跳转到一个文件的指定位置。格式1：然后，设定一个href指向此链接部分的文件；格式2：链接文字,第三十页，共58页。,3.3 目录链接 目录链接可以直接指到某一个文件的上部、,使用本地链接 互联网 HTML简介 多样化和统一性 互联网 互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。HTML简介 超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言(SGML)的子集，但与它有着某种程度上的关联。SG
14、ML是一种文档格式语言表示方法。多样性和统一性 万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。关于我们 联系我们,第三十一页，共58页。,第三十一页，共58页。,4 HTML表格,表格中所有行和列及单元格中的内容必须被包含在一对和标记中，其基本结构如下：.,第三十二页，共58页。,4 HTML表格表格中所有行和列及单元格中的内容必须被包含,row 1,cell 1row 1,cell 2row 2,cell 1ro
15、w 2,cell 2,第三十三页，共58页。,第三十三页，共58页,4.1 表格定义标记,1表格的标题 表格标题的位置，可由align属性来设置，其位置分别由表格上方和表格下方。设置标题位于表格上方：.设置标题位于表格下方：.,第三十四页，共58页。,4.1 表格定义标记1表格的标题 第三十四页，共58页。,4.1 表格定义标记,2元素元素表示表格中的行标记，表格中的每一行都必须包含在一对标记中。行标记的一般形式是：.在标记中有两个属性：align指定该行中单元格的对齐方式，如左对齐，居中以及右对齐；bgcolor指定该行的背景颜色,第三十五页，共58页。,4.1 表格定义标记2元素第三十五页
16、，共58页。,4.1 表格定义标记,3.元素单元格是表格的基本组成元素，一个td 元素表示表格中的一个单元格，包含在元素内的多个元素构成表格的一行。单元格的一般形式是：.,第三十六页，共58页。,4.1 表格定义标记3.元素第三十六页，共58页。,4.1 表格定义标记,3.元素在标记中的属性如下：width 指定单元格的宽度；height 指定单元格的高度；align 指定单元格水平对齐方式；valign 指定单元格垂直对齐方式；bgcolor 指定单元格的背景颜色background 指定单元格的背景图案rowspan 指定单元格的行跨度colspan 指定单元格的列跨度,第三十七页，共58
17、页。,4.1 表格定义标记3.元素第三十七页，共58页。,4.2 表格属性的设置,1表格的大小一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式：width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素或百分比来表示。例如定义一个长为200像素，宽为100像素的表格：,第三十八页，共58页。,4.2 表格属性的设置 1表格的大小第三十八页，共58页,4.2 表格属性的设置,2表格的边框边框是用border属性来设定的，它表示表格的边框风格。将border设成不同的值，有不同的效果。在作为布局使用时往往取默认
18、值“0”，即不显示表格的边框，在=1时，表格边框显示成三维的状态。书写格式为：,第三十九页，共58页。,4.2 表格属性的设置 2表格的边框第三十九页，共58页,4.2 表格属性的设置,3单元格间距单元格与单元格之间的线为格间线，它的宽度可以使用中的cellspacing属性加以调节。格式为：#表示要取用的像素值还可以在中设置cellpadding属性，用来规定内容与格线之间的宽度。格式为：#表示要取用的像素值,第四十页，共58页。,4.2 表格属性的设置 3单元格间距第四十页，共58页。,4.2 表格属性的设置,4表格内文字的对齐方式表格中数据的排列方式有左右排列和上下排列两种。左右排列由a
19、lign属性来设置，上下排列则由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表单,5.1 表单标记
20、结构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 单行文本框和多行文本框,单行文本框允许用户输入一些简短的单行信息，比如用户姓名、密
21、码等。格式如下：,第四十六页，共58页。,5.2 单行文本框和多行文本框单行文本框允许用户输入一些简,IP地址表示链接一个外部CSS文件如下:链接文字 htm文件的链接格式：2-2.align指定该行中单元格的对齐方式，如左对齐，居中以及右对齐；例：新建一个html文件2 表格属性的设置html链接文字 成对出现的超文本标记也称容器元素。,请输入你的姓名：,第四十七页，共58页。,form action=http:/www.form,5.2 单行文本框和多行文本框,多行文本框主要用于输入较长的多行文本信息。格式如下：,第四十八页，共58页。,5.2 单行文本框和多行文本框多行文本框主要用于输入
22、较长的,请提宝贵意见：,第四十九页，共58页。,form action=http:/www.aaa.c,5.3 命令按钮,命令按钮通常用于完成一定的操作，这由按钮的type属性值而确定。格式如下：type属性指定按钮的类型，其值有三种：值为“Submit”，表示将表单的信息提交给表单的action所指向的文件来处理；值为“Reset”，表示清除表单的数据；值为“Button”，为一般按钮，不产生任何操作。value属性值是显示在按钮上的文字。,第五十页，共58页。,5.3 命令按钮命令按钮通常用于完成一定的操作，这由按钮的t,用户名:密码:,第五十一页，共58页。,form action=lo
23、gin.php metho,5.4 单选按钮,使用单选按钮，让用户在一组选项里只能选择一个。格式如下：,第五十二页，共58页。,5.4 单选按钮使用单选按钮，让用户在一组选项里只能选择一个,苹果桔子芒果,第五十三页，共58页。,form第五十三页，共58页。,5.5 复选框,复选框允许用户在一组选项里，选择一个或多个选项。格式如下：checked是可选的，表示初始时选中的复选框。,第五十四页，共58页。,5.5 复选框复选框允许用户在一组选项里，选择一个或多个选项,苹果桔子芒果,第五十五页，共58页。,form action=http:/www.aaa.c,5.6 下拉列表框,下拉列表框既可以用做单选，也可以用做复选；如果要变成复选，加上muiltiple即可。用户用Ctrl来实现多选。格式如下：文本1.文本n,第五十六页，共58页。,5.6 下拉列表框下拉列表框既可以用做单选，也可以用做复选；,你最喜欢的水果是：苹果桔子芒果,第五十七页，共58页。,form action=第五十七页，共58页。,5.7 隐藏域,隐藏域是指在表单上不显示任何内容。它允许表单使用name和value属性一起传送“预先设置好的信息”。格式如下：,第五十八页，共58页。,5.7 隐藏域隐藏域是指在表单上不显示任何内容。它允许表单使,
