第2章 HTML基础.ppt

《第2章 HTML基础.ppt》由会员分享，可在线阅读，更多相关《第2章 HTML基础.ppt（37页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、$知识目标知识目标 了解了解了解了解HTMLHTML文件的基本结构文件的基本结构文件的基本结构文件的基本结构掌握掌握掌握掌握HTMLHTML中文本及多媒体元素的语法中文本及多媒体元素的语法中文本及多媒体元素的语法中文本及多媒体元素的语法掌握掌握掌握掌握HTMLHTML中各种设置超级链接的语法中各种设置超级链接的语法中各种设置超级链接的语法中各种设置超级链接的语法掌握掌握掌握掌握HTMLHTML中表格和中表格和中表格和中表格和表单表单的基本语法的基本语法的基本语法的基本语法8 8 能力能力目标目标 能够编写简单的能够编写简单的能够编写简单的能够编写简单的HTMLHTML网页网页网页网页掌握进行文

2、本及图像的编辑操作掌握进行文本及图像的编辑操作掌握进行文本及图像的编辑操作掌握进行文本及图像的编辑操作掌握创建各种超级链接的操作掌握创建各种超级链接的操作掌握创建各种超级链接的操作掌握创建各种超级链接的操作掌握掌握掌握掌握HTMLHTML文件中表格和表单的使用文件中表格和表单的使用文件中表格和表单的使用文件中表格和表单的使用第第2章章 HTML语言基础语言基础1HTML（Hyper Text Markup Language）又称超文本标识）又称超文本标识语言语言，是，是网页设计的最初语言。文件网页设计的最初语言。文件的扩展名：的扩展名：“html”或或“htm”。HTML文档是一种纯文本格式的

3、文件，文档是一种纯文本格式的文件，HTML文档的基本结构为：文档的基本结构为：网页的标题，显示在浏览器标题栏网页的标题，显示在浏览器标题栏 这是网页上显示的内容，网页的主体部分这是网页上显示的内容，网页的主体部分 由由“”组组成成的的就就是是标标记记。在在HTML语语言言中中标标记记分分“单标记单标记”和和“围堵标记围堵标记”。2.1.1 HTML简介2.1 HTML概述 21围堵标记围堵标记格式：格式：2单标记单标记格式：格式：只只有有起起始始标标记记，没没有有结结束束标标记记。最最常常用用的的单标记是单标记是，它，它表示段内换行表示段内换行。3标记属性标记属性格式格式：各各属属性性间间无无

4、前前后后顺顺序序，属属性性也也可可以以省省略略，当省略属性时取标记的默认值。当省略属性时取标记的默认值。2.1.1 HTML简介2.1 HTML概述3实例欢迎访问我的主页.STYLE11 FONT-SIZE:12px;color:#666666;.42.2.1 段落标记段落标记2.2.2 文本标记文本标记2.2.3 标题显示等级标题显示等级2.2.4 列表列表2.2 文本的编辑51段落（段落（）参参数数align用用于于设设定定段段落落的的位位置置是是靠靠左左、靠靠右还是居中。默认值是靠左右还是居中。默认值是靠左.2换行换行不换行不换行 单单标标记记，放放在在一一行行的的末末尾尾，可可以以在在

5、一一个个段段落落内内实实现现文文本本的的强强制制换换行行，设设置置标标记记后后面面的的文文本、图像和表格等内容显示于下一行。本、图像和表格等内容显示于下一行。3.注释标记注释标记2.2.1 段落标记2.2 文本的编辑61字体标记字体标记其基本语法格式为：其基本语法格式为：Size：设设置置字字体体的的显显示示字字号号，范范围围是是从从“17”，其中，其中“3”是默认值。是默认值。Color：设设置置文文本本的的颜颜色色，值值可可以以是是颜颜色色名名（英英文文，如如red代代表表红红色色）或或颜颜色色的的十十六六进进制制代代码码（#000000代表黑色，代表黑色，#FFFFFF代表白色）。代表白

6、色）。Face：设设置置文文本本显显示示的的字字体体，值值为为字字体体的的名名称。称。在在文文本本的的标标记记中中还还有有很很多多常常用用的的标标记记，比比如如表表示示字字体体效效果果的的，(黑黑体体)，（斜斜体体），（加下划线）。（加下划线）。2.2.2 文本标记2.2 文本的编辑72特殊字符特殊字符HTML中除了我们上面学的的一些标记外，还有中除了我们上面学的的一些标记外，还有一些我们常用的特殊字符比如一些我们常用的特殊字符比如“”，这些特殊字符，这些特殊字符在在HTML语言中都有相应的转义符，常用的转义符与语言中都有相应的转义符，常用的转义符与特殊字符参见下表：特殊字符参见下表：2.2.

7、2 文本标记2.2 文本的编辑82特殊字符特殊字符2.2.2 文本标记HTML 代码显示结果说明<大于号或显示标记&&可用于显示其它特殊字符"引号®注册©版权™商标 不断行的空格2.2 文本的编辑93水平线标记水平线标记水水平平线线是是在在网网页页上上划划出出一一条条水水平平的的分分割割线线，用用来标记水平线。语法格式为：来标记水平线。语法格式为：Size：设置水平线的高度，以像素为单位。：设置水平线的高度，以像素为单位。Color：设置水平线的颜色。：设置水平线的颜色。Width：设设置置水水平平线线的的宽宽度度，单单位位是是像

8、像素素或或百百分分比比，像像素素是是绝绝对对大大小小，不不会会随随着着浏浏览览器器窗窗口口的的大大小小而而改改变变，百百分分比比是是相相对对于于浏浏览览器器窗窗口口水水平平线线所所占占的比例，会随着浏览器窗口的大小而改变。的比例，会随着浏览器窗口的大小而改变。Align：设设置置水水平平线线的的对对齐齐方方式式。对对齐齐方方式式有有三三种：左对齐、居中、右对齐。种：左对齐、居中、右对齐。2.2.2 文本标记2.2 文本的编辑10语法格式为：语法格式为：n：表表示示不不同同级级别别的的标标题题，n值值可可以以是是1-6中中的的任任意意数数字字，其其中中1表表示示的的标标题题字字体体最最大大，6表

9、表示示的的标标题题字字体体最最小小。另另外外，可可以以用用align属属性性设设置置对对齐齐方方式式，常常用用的的有有左左对对齐齐、居居中中、右对齐三种对齐方式。右对齐三种对齐方式。2.2.3 标题显示等级2.2 文本的编辑使用使用Hn标记标记 一级标题一级标题 二级标题二级标题 三级标题三级标题 四级标题四级标题 五级标题五级标题 六级标题六级标题 11在在HTML中，列表常用的有中，列表常用的有“有序列表有序列表”和和“无序列表无序列表”。1有序列表有序列表基本语法结构为：基本语法结构为：项目项目1项目项目2项目项目n2.2.4 列表2.2 文本的编辑12有序列表有序列表参数解释：参数解释

10、：Type：设置列表的序号类型，常用序号：设置列表的序号类型，常用序号：n=1：用数字作为序号。：用数字作为序号。n=A：用大写字母作为序号。：用大写字母作为序号。n=a：用小写字母作为序号。：用小写字母作为序号。n=I：用大写罗马数字作为序号。：用大写罗马数字作为序号。n=i：用小写罗马数字作为序号。：用小写罗马数字作为序号。Start：为为可可选选参参数数，用用于于设设置置序序号号的的起起始始数数值值。如如不不添添加加“start”则则从从每每类类序序号号的的第第一一个个序序号开始。号开始。2.2.4 列表2.2 文本的编辑132无序列表无序列表基本语法结构为：基本语法结构为：项目项目1项

11、目项目2项目项目nType：设置符号形状，有实心圆、小正方：设置符号形状，有实心圆、小正方形、空心圆三种，具体情况如下：形、空心圆三种，具体情况如下：n=disc：符号为实心圆。：符号为实心圆。n=square：符号为正方形。：符号为正方形。n=circle：符号为空心圆。：符号为空心圆。2.2.4 列表2.2 文本的编辑142.3.1 插入图像插入图像2.3.2 使用背景图像使用背景图像我我们们在在网网页页上上经经常常会会浏浏览览图图像像，适适当当使使用用图图像像可可以以增增加加网网页页的的美美观观。在在网网页页中中最最常常用到的是插入图像和设置背景图像。用到的是插入图像和设置背景图像。2.

12、3 图像编辑151语法格式语法格式：，单标记单标记Src：指指明明要要添添加加的的图图像像所所在在的的具具体体路路径径和和文文件件名名。路路径径可可以以是是相相对对路路径径，也也可可以以是是绝绝对对路径。例路径。例：。绝绝对对路路径径：完完整整的的描描述述文文件件位位置置的的路路径径就就是是绝绝对对路路径径。对对于于绝绝对对路路径径可可以以不不需需要要知知道道其其他任何信息就可以判断出文件的位置。他任何信息就可以判断出文件的位置。相相对对路路径径：所所谓谓相相对对路路径径，顾顾名名思思义义就就是是当当前前文文档档与与目目标标的的相相对对位位置置。例例：。2.3.1 插入图像2.3 图像编辑16

13、2图像的属性图像的属性除除了了“src”以以外外，还还有有其其他他属属性性，可可以以定定义义图图像像的的对对齐齐方方向向，与与周周围围元元素素的的距距离离等，各属性及作用见表等，各属性及作用见表2.2。表表2.2 图像属性列表图像属性列表2.3.1 插入图像名称作用border border 设定图像的边框 vspacevspace 设定图像、文字与图像上下之间的间隔 hspacehspace 设定图像、文字与图像左右之间的间隔 width width 调整图像的宽度 height height 调整图像的高度 alt alt 当浏览器无法显示图像时，会显示出alt属性所设定的文字 2.3 图

14、像编辑17语法格式为：语法格式为：2.3.2 使用背景图像2.3 图像编辑182.4.1 建立超链接建立超链接2.4.2 使用书签使用书签2.4.3 标记新窗口和基准链接标记新窗口和基准链接2.4 建立超链接19建立超链接的标记是建立超链接的标记是，语法格式为：，语法格式为：超链接标识超链接标识 url：指明链接目标的具体路径和文件名。：指明链接目标的具体路径和文件名。超超链链接接标标识识：是是网网页页中中链链接接的的载载体体，可可以以是是文文字字或或图图像像、热热区区等等页页面面元元素素，用用户户点点击击它它就会跳到超链接的目标位置。就会跳到超链接的目标位置。2.4.1 建立超链接2.4 建

15、立超链接201定义书签定义书签在在HTML中中，首首先先要要定定义义书书签签，然然后后才才能能在在链接中使用。定义书签的语法格式为：链接中使用。定义书签的语法格式为：书签名不能用中文，只能用英文和数字。书签名不能用中文，只能用英文和数字。2使用书签链接使用书签链接其链接的格式为：其链接的格式为：超链接标识超链接标识#与书签名之间不能有空格。与书签名之间不能有空格。2.4.2 使用书签2.4 建立超链接211标记新窗口（标记新窗口（target）“target=_blank”，是是链链接接标标记记的的一一个个参数。语法格式为：参数。语法格式为：a target=_blank 超链接标识超链接标识

16、超链接标识超链接标识点击链接载体就会在新窗口打开链接目标。点击链接载体就会在新窗口打开链接目标。2.4.3 标记新窗口和基准链接2.4 建立超链接22 2.5.1 建立表格建立表格 2.5.2 表格属性表格属性 2.5 表格23表表格格标标记记有有、和和4个个，具体含义如下：具体含义如下：定义表格。：定义表格。：定定义义标标题题单单元元格格，在在这这个个单单元元格格中中的文字将用粗的文字将用粗体显示体显示。：定义表格中的行定义表格中的行。：定定义义单单元元格格，使使用用标标记记一一定定要要放在放在标记内部标记内部。可以省略可以省略，其它三，其它三个个是必需的。是必需的。标标记记中中可可以以添添

17、加加属属性性和和参参数数，其其中中的的border用用于于设设置置表表格格的的边边框框宽宽度度，值值为为大大于于等等于于0的的整整数数，当当值值为为0时时，在在浏浏览览器器中中显显示示为为无无边边框框表表格格，无边框表格是网页布局最主要的手段。无边框表格是网页布局最主要的手段。无边框表格是网页布局最主要的手段。无边框表格是网页布局最主要的手段。2.5.1 建立表格2.5 表格24除了除了border外，常用的表格属性参数有外，常用的表格属性参数有：定定义义单单元元格格之之间间的的距距离离，值为大于值为大于等于等于0的的整数，单位是像素整数，单位是像素，0表示无间距表示无间距。：定定义义单单元元

18、格格内内的的文文字字或或其其他他元元素素到到边边框框的的距距离离，值值为为大大于于等等于于0的的整整数数，单单位位是是像像素素，0表示表示没有距离。没有距离。：定定义义表表格格的的高高度度，其其值值有有两两种种单单位位，一一是是像像素素，表表示示表表格格高高度度为为固固定定大大小小，一一是是百百分分比表示表格占据整个比表示表格占据整个网页高度的百分比网页高度的百分比。：定定义义表表格格的的宽宽度度，与与高高度度一一样样有有像素和百分比像素和百分比两种表示方法。两种表示方法。：定义表格边框的颜色定义表格边框的颜色。：定义表格定义表格的背景色。的背景色。2.5.2 表格属性2.5 表格25表单表单

19、(Form)是是HTML的一个重要部分，主要用于的一个重要部分，主要用于采集和提交用户输入的信息。采集和提交用户输入的信息。表单的基本语法表单的基本语法 2.6.1 表单基本概念2.6 表单26输入用户姓名输入用户姓名请输入你的姓名：请输入你的姓名：2.6 表单27学习学习HTML表单表单(Form)最关键要掌握的有三个最关键要掌握的有三个要点：要点：表单控件(Form Controls)Action Method先说表单控件先说表单控件(Form Controls)，通过，通过HTML表单的各种控件，用户可以输入文字信息，或表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的

20、操作。比如上者从选项中选择，以及做提交的操作。比如上面的例句里，面的例句里，input type=text就是一个就是一个表单控件，表示一个单行输入框。表单控件，表示一个单行输入框。28用户填入表单的信息总是需要程序来进行处理，用户填入表单的信息总是需要程序来进行处理，表单里的表单里的action就指明了处理表单信息的文就指明了处理表单信息的文件。比如上面例句里的件。比如上面例句里的http:/ type=text 单行文本输入框 input type=submit 将表单(Form)里的信息提交给表单里action所指向的文件 input type=checkbox 复选框 input ty

21、pe=radio 单选框 select 下拉框 textArea 多行文本输入框 input type=password 密码输入框(输入的文字用*表示)HTML表单表单(Form)常用控件有：常用控件有：30单行文本输入框单行文本输入框(input type=text)单行文本输入框允许用户输入一些简短单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下：的单行信息，比如用户姓名。例句如下：31复选框复选框(input type=checkbox)复选框允许用户在一组选项里，选择多个。示复选框允许用户在一组选项里，选择多个。示例代码：例代码：苹果苹果桔子桔子芒果芒果用用che

22、cked表示缺省已选的选项。表示缺省已选的选项。32单选框单选框(input type=radio)使用单选框，让用户在一组选项里只能选择一个。示例使用单选框，让用户在一组选项里只能选择一个。示例代码：代码：苹果苹果桔子桔子芒果芒果用用checked表示缺省已选的选项。表示缺省已选的选项。33下拉框下拉框(select)下拉框下拉框(Select)既可以用做单选，也可以用做既可以用做单选，也可以用做复选。单选例句如下：复选。单选例句如下：苹果苹果桔子桔子芒果芒果如果要变成复选，加如果要变成复选，加muiltiple即可即可,用户用用户用Ctrl来实现多选来实现多选 用size属性来改变下拉框(

23、Select)的大小 34多行输入框多行输入框(textarea)多行输入框多行输入框(textarea)主要用于输入较主要用于输入较长的文本信息。例句如下：长的文本信息。例句如下：其中其中cols表示表示textarea的宽度，的宽度，rows表示表示textarea的高度。的高度。35密码输入框密码输入框(input type=password)密码输入框主要用于一些保密信息的输密码输入框主要用于一些保密信息的输入，比如密码。因为用户输入的时候，入，比如密码。因为用户输入的时候，显示的不是输入的内容，而是特殊字符。显示的不是输入的内容，而是特殊字符。例句如下：例句如下：36提交提交(input type=submit)通过提交可以将表单通过提交可以将表单(Form)里的信息提里的信息提交给表单里交给表单里action所指向的文件。格式所指向的文件。格式如下：如下：37