第2章 HTML基础.ppt

1、1,$ 知识目标 了解HTML文件的基本结构 掌握HTML中文本及多媒体元素的语法 掌握HTML中各种设置超级链接的语法 掌握HTML中表格和表单的基本语法 8 能力目标 能够编写简单的HTML网页 掌握进行文本及图像的编辑操作 掌握创建各种超级链接的操作 掌握HTML文件中表格和表单的使用,第2章 HTML语言基础,2,HTML（Hyper Text Markup Language）又称超文本标识语言，是网页设计的最初语言。文件的扩展名：“html”或“htm”。 HTML文档是一种纯文本格式的文件，HTML文档的基本结构为： 网页的标题，显示在浏览器标题栏 这是网页上显示的内容，网页的主体

2、部分 由“”组成的就是标记。在HTML语言中标记分“单标记”和“围堵标记”。,2.1.1 HTML简介,2.1 HTML概述,3,1围堵标记 格式： 2单标记 格式： 只有起始标记，没有结束标记。最常用的单标记是，它表示段内换行。 3标记属性 格式： 各属性间无前后顺序，属性也可以省略，当省略属性时取标记的默认值。,2.1.1 HTML简介,2.1 HTML概述,4,实例, 欢迎访问我的主页 .STYLE11 FONT-SIZE: 12px; color: #666666; . . ,5,2.2.1 段落标记 2.2.2 文本标记 2.2.3 标题显示等级 2.2.4 列表,2.2 文本的编辑

3、,6,1段落（） 参数align用于设定段落的位置是靠左、靠右还是居中。默认值是靠左. 2换行不换行 单标记，放在一行的末尾，可以在一个段落内实现文本的强制换行，设置标记后面的文本、图像和表格等内容显示于下一行。 3.注释标记,2.2.1 段落标记,2.2 文本的编辑,7,1字体标记 其基本语法格式为： Size：设置字体的显示字号，范围是从“17”，其中“3”是默认值。 Color：设置文本的颜色，值可以是颜色名（英文，如red代表红色）或颜色的十六进制代码（#000000代表黑色，#FFFFFF代表白色）。 Face：设置文本显示的字体，值为字体的名称。 在文本的标记中还有很多常用的标记，

4、比如表示字体效果的，(黑体)，（斜体），（加下划线）。,2.2.2 文本标记,2.2 文本的编辑,8,2特殊字符 HTML中除了我们上面学的的一些标记外，还有一些我们常用的特殊字符比如“”，这些特殊字符在HTML语言中都有相应的转义符，常用的转义符与特殊字符参见下表：,2.2.2 文本标记,2.2 文本的编辑,9,2特殊字符,2.2.2 文本标记,2.2 文本的编辑,10,3水平线标记 水平线是在网页上划出一条水平的分割线，用来标记水平线。语法格式为： Size：设置水平线的高度，以像素为单位。 Color：设置水平线的颜色。 Width：设置水平线的宽度，单位是像素或百分比，像素是绝对大小，

5、不会随着浏览器窗口的大小而改变，百分比是相对于浏览器窗口水平线所占的比例，会随着浏览器窗口的大小而改变。 Align：设置水平线的对齐方式。对齐方式有三种：左对齐、居中、右对齐。,2.2.2 文本标记,2.2 文本的编辑,11,语法格式为： n：表示不同级别的标题，n值可以是1-6中的任意数字，其中1表示的标题字体最大，6表示的标题字体最小。另外，可以用align属性设置对齐方式，常用的有左对齐、居中、右对齐三种对齐方式。,2.2.3 标题显示等级,2.2 文本的编辑, 使用Hn标记 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 ,12,在HTML中，列表常用的有“有序列表”和“

6、无序列表”。 1有序列表 基本语法结构为： 项目1 项目2 项目n ,2.2.4 列表,2.2 文本的编辑,13,有序列表参数解释： Type：设置列表的序号类型，常用序号： n=1：用数字作为序号。 n=A：用大写字母作为序号。 n=a：用小写字母作为序号。 n=I：用大写罗马数字作为序号。 n=i：用小写罗马数字作为序号。 Start：为可选参数，用于设置序号的起始数值。如不添加“start”则从每类序号的第一个序号开始。,2.2.4 列表,2.2 文本的编辑,14,2无序列表 基本语法结构为： 项目1 项目2 项目n Type：设置符号形状，有实心圆、小正方形、空心圆三种，具体情况如下：

7、 n=disc：符号为实心圆。 n=square：符号为正方形。 n=circle：符号为空心圆。,2.2.4 列表,2.2 文本的编辑,15,2.3.1 插入图像 2.3.2 使用背景图像,我们在网页上经常会浏览图像，适当使用图像可以增加网页的美观。在网页中最常用到的是插入图像和设置背景图像。,2.3 图像编辑,16,1语法格式： ，单标记 Src：指明要添加的图像所在的具体路径和文件名。路径可以是相对路径，也可以是绝对路径。例：。 绝对路径：完整的描述文件位置的路径就是绝对路径。对于绝对路径可以不需要知道其他任何信息就可以判断出文件的位置。 相对路径：所谓相对路径，顾名思义就是当前文档与目

8、标的相对位置。例：。,2.3.1 插入图像,2.3 图像编辑,17,2图像的属性 除了“src”以外，还有其他属性，可以定义图像的对齐方向，与周围元素的距离等，各属性及作用见表2.2。 表2.2 图像属性列表,2.3.1 插入图像,2.3 图像编辑,18,语法格式为： ,2.3.2 使用背景图像,2.3 图像编辑,19,2.4.1 建立超链接 2.4.2 使用书签 2.4.3 标记新窗口和基准链接,2.4 建立超链接,20,建立超链接的标记是，语法格式为： 超链接标识 url：指明链接目标的具体路径和文件名。 超链接标识：是网页中链接的载体，可以是文字或图像、热区等页面元素，用户点击它就会跳到

9、超链接的目标位置。,2.4.1 建立超链接,2.4 建立超链接,21,1定义书签 在HTML中，首先要定义书签，然后才能在链接中使用。定义书签的语法格式为： 书签名不能用中文，只能用英文和数字。 2使用书签链接 其链接的格式为： 超链接标识 #与书签名之间不能有空格。,2.4.2 使用书签,2.4 建立超链接,22,1标记新窗口（target） “target=_blank”，是链接标记的一个参数。语法格式为： 超链接标识 点击链接载体就会在新窗口打开链接目标。,2.4.3 标记新窗口和基准链接,2.4 建立超链接,23,2.5.1 建立表格 2.5.2 表格属性,2.5 表格,24,表格标记

10、有、和4个，具体含义如下： ：定义表格。 ：定义标题单元格，在这个单元格中的文字将用粗体显示。 ：定义表格中的行。 ：定义单元格，使用标记一定要放在标记内部。 可以省略 ，其它三个是必需的。 标记中可以添加属性和参数，其中的border用于设置表格的边框宽度，值为大于等于0的整数，当值为0时，在浏览器中显示为无边框表格，无边框表格是网页布局最主要的手段。,2.5.1 建立表格,2.5 表格,25,除了border外，常用的表格属性参数有： ：定义单元格之间的距离，值为大于等于0的整数，单位是像素，0表示无间距。 ：定义单元格内的文字或其他元素到边框的距离，值为大于等于0的整数，单位是像素，0表

11、示没有距离。 ：定义表格的高度，其值有两种单位，一是像素，表示表格高度为固定大小，一是百分比表示表格占据整个网页高度的百分比。 ：定义表格的宽度，与高度一样有像素和百分比两种表示方法。 ：定义表格边框的颜色。 ：定义表格的背景色。,2.5.2 表格属性,2.5 表格,26,表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。 表单的基本语法 ,2.6.1 表单基本概念,2.6 表单,27, 输入用户姓名 请输入你的姓名： ,2.6 表单,28,学习HTML表单(Form)最关键要掌握的有三个要点： 表单控件(Form Controls) Action Method 先说

12、表单控件(Form Controls)，通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如上面的例句里，input type= text就是一个表单控件，表示一个单行输入框。,29,用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。比如上面例句里的 至于method，表示了发送表单信息的方式。 get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏里看到)。 post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。如果只是为取得和显示数据，用get；一旦涉及数

13、据的保存和更新，那么建议用post。,30,input type=text 单行文本输入框 input type=submit 将表单(Form)里的信息提交给表单里action所指向的文件 input type=checkbox 复选框 input type=radio 单选框 select 下拉框 textArea 多行文本输入框 input type=password 密码输入框(输入的文字用*表示),HTML表单(Form)常用控件有：,31,单行文本输入框(input type=text),单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下： ,32,复选框(inp

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