《html基础》ppt课件.ppt

[知识目标] 了解HTML文件的基本结构 掌握HTML中文本的编辑及图像的语法 掌握HTML中各种设置超级链接的语法 掌握HTML中表格和框架的基本语法 8 [能力目标] 掌握进行文本及图像的编辑操作 掌握创建各种超级链接的操作 能够编写简单的HTML网页 掌握HTML文件中表格和框架的使用,第2章 HTML语言基础,2.1 HTML概述 2.2 文本的编辑 2.3 图像编辑 2.4 建立超链接 2.5 表格与框架 本章小结,第2章 HTML语言基础,2.1.1 HTML简介 2.1.2 HTML语法结构,2.1 HTML概述,超文本置标语言HTML（HyperText Markup Language）是WWW“世界”的通用“语言” WWW“世界”诸服务器与浏览器之间通过它互相沟通 WWW“世界”中的信息可以通过它来“表现”没有HTML就没有WWW“世界” HTML 不是程序设计语言，而是一种结构语言2.1 HTML概述,HTML有许多元素，文档通过元素置标就形成了所谓的HTML文档 HTML 也是文本文件，所以可以用纯文本编辑器来编辑（如Windows 的记事本、写字板) 其后缀名必须是 .html 或 .htm 只有通过浏览器才可以对HTML文档进行相应的解释。

2.1 HTML概述,HTML的基本语法 HTML 的主要语法是标记、标记属性和内容注释 标记 — 用于描述功能的符号如： 一个HTML实例 标记属性 — HTML语言的的标记具有一定的属性如： 内容注释 — 基本格式： ,2.1.1 HTML简介,2.1 HTML概述,,1．围堵标记 格式：…… 2．单标记 格式： 只有起始标记，没有结束标记最常用的单标记是，它表示段内换行 3．标记属性 格式： 各属性间无前后顺序，属性也可以省略，当省略属性时取标记的默认值2.1.1 HTML简介,2.1 HTML概述, 网页的标题 网页的内容，很多标记都作用于此 ,HTML文档的基本架构,特点解说： 整份文件处于标记与之间 用以声明这是 HTML 文件，让浏览器认出并正确处理此 HTML 文件 文件分两部分，由至称为开头，至称本文基本上两者各有适用的标记，如只可出现于开头部分 开头部分用以存载重要信息，而只有本文部分会被显示所以大部分标记会运用于本文部分 所标示的是文件的标题会出现于浏览器顶部及为别人 Bookmark 时的名称，所以每页有不同而明确的标题 是需要的2.1.1 HTML简介,2.1 HTML概述,实例, 欢迎访问我的主页 .STYLE11 {FONT-SIZE: 12px; color: #666666; } ,2.2.1 段落标记 2.2.2 文本标记 2.2.3 标题显示等级 2.2.4 列表,2.2 文本的编辑,1．段落（） 基本语法格式为： …… 参数align用于设定段落的位置是靠左、靠右还是居中。

默认值是靠左 2．换行 不换行标记… 单标记，放在一行的末尾，可以在一个段落内实现文本的强制换行，设置标记后面的文本、图像和表格等内容显示于下一行 不换行标记… 使文字不能因为太长使浏览器无法显示而换行2.2.1 段落标记,2.2 文本的编辑,1．字体标记 其基本语法格式为： … Size：设置字体的显示字号，范围是从“1～7”，其中“3”是默认值 Color：设置文本的颜色，值可以是颜色名（英文，如red代表红色）或颜色的十六进制代码（#000000代表黑色，#FFFFFF代表白色） Face：设置文本显示的字体，值为字体的名称 在文本的标记中还有很多常用的标记，比如表示字体效果的，(黑体)，（斜体），（加下划线）2.2.2 文本标记,2.2 文本的编辑,2．特殊字符 在HTML中，分别用“”符号来识别是否为HTML标记，因此不能直接将“”当作文本中的符号来使用为了使用这些，需要定义它的转义字符串，当解释程序遇到这类字符时就把它解释为真实的字符2.2.2 文本标记,2.2 文本的编辑,2．特殊字符,2.2.2 文本标记,2.2 文本的编辑,3．水平线标记 水平线是在网页上划出一条水平的分割线，用来标记水平线。

语法格式为： Size：设置水平线的高度，以像素为单位 Color：设置水平线的颜色 Width：设置水平线的宽度，单位是像素或百分比，像素是绝对大小，不会随着浏览器窗口的大小而改变，百分比是相对于浏览器窗口水平线所占的比例，会随着浏览器窗口的大小而改变 Align：设置水平线的对齐方式对齐方式有三种：左对齐、居中、右对齐2.2.2 文本标记,2.2 文本的编辑,语法格式为： … n：表示不同级别的标题，n值可以是1-6中的任意数字，其中1表示的标题字体最大，6表示的标题字体最小另外，可以用align属性设置对齐方式，常用的有左对齐、居中、右对齐三种对齐方式2.2.3 标题显示等级,2.2 文本的编辑, 使用Hn标记 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 ,在HTML中，列表常用的有“有序列表”和“无序列表” 1．有序列表 基本语法结构为： 项目1 项目2 …… 项目n ,2.2.4 列表,2.2 文本的编辑,有序列表参数解释： Type：设置列表的序号类型，常用序号： n=1：用数字作为序号 n=A：用大写字母作为序号 n=a：用小写字母作为序号 n=I：用大写罗马数字作为序号。

n=i：用小写罗马数字作为序号 Start：为可选参数，用于设置序号的起始数值如不添加“start”则从每类序号的第一个序号开始2.2.4 列表,2.2 文本的编辑,2．无序列表 基本语法结构为： 项目1 项目2 …… 项目n Type：设置符号形状，有实心圆、小正方形、空心圆三种，具体情况如下： n=disk：符号为实心圆 n=square：符号为正方形 n=circle：符号为空心圆2.2.4 列表,2.2 文本的编辑,2.3.1 插入图像 2.3.2 使用背景图像,我们在网页上经常会浏览图像，适当使用图像可以增加网页的美观在网页中最常用到的是插入图像和设置背景图像2.3 图像编辑,1．语法格式： ，单标记 Src：指明要添加的图像所在的具体路径和文件名路径可以是相对路径，也可以是绝对路径 绝对路径：完整的描述文件位置的路径就是绝对路径对于绝对路径可以不需要知道其他任何信息就可以判断出文件的位置 相对路径：所谓相对路径，顾名思义就是当前文档与目标的相对位置2.3.1 插入图像,2.3 图像编辑,2．图像的属性 除了“src”以外，还有其他属性，可以定义图像的对齐方向，与周围元素的距离等，各属性及作用见表2.2。

表2.2 图像属性列表,2.3.1 插入图像,2.3 图像编辑,语法格式为： ,2.3.2 使用背景图像,2.3 图像编辑,2.4.1 建立超链接 2.4.2 使用书签 2.4.3 标记新窗口和基准链接,2.4 建立超链接,建立超链接的标记是，语法格式为： 超链接标识 url：指明链接目标的具体路径和文件名 超链接标识：是网页中链接的载体，可以是文字或图像、热区等页面元素，用户点击它就会跳到超链接的目标位置2.4.1 建立超链接,2.4 建立超链接,1．定义书签 在HTML中，首先要定义书签，然后才能在链接中使用定义书签的语法格式为： 书签名不能用中文，只能用英文和数字 2．使用书签链接 其链接的格式为： 超链接标识 #与书签名之间不能有空格2.4.2 使用书签,2.4 建立超链接,1．标记新窗口（target） “target=“_blank“”，是链接标记的一个参数语法格式为： 超链接标识 点击链接载体就会在新窗口打开链接目标 2．基准链接 标记是单标记，禁止使用结束标记，可以改变文件中所有链接标记参数的默认值它只能位于文件的开头部分，即标记 与 之间语法格式为： ,2.4.3 标记新窗口和基准链接,2.4 建立超链接,2.5.1 建立表格 2.5.2 表格属性 2.5.3 建立框架 2.5.4 框架属性,2.5 表格与框架,表格标记有、、和4个，具体含义如下： ：定义表格。

：定义标题单元格，在这个单元格中的文字将用粗体显示 ：定义表格中的行 ：定义单元格，使用标记一定要放在标记内部 可以省略 ，其它三个是必需的 标记中可以添加属性和参数，其中的 border用于设置表格的边框宽度，值为大于等于0的整数，当值为0时，在浏览器中显示为无边框表格，无边框表格是网页布局最主要的手段2.5.1 建立表格,2.5 表格与框架,除了border外，常用的表格属性参数有： ：定义单元格之间的距离，值为大于等于0的整数，单位是像素，0表示无间距 ：定义单元格内的文字或其他元素到边框的距离，值为大于等于0的整数，单位是像素，0表示没有距离 ：定义表格的高度，其值有两种单位，一是像素，表示表格高度为固定大小，一是百分比表示表格占据整个网页高度的百分比 ：定义表格的宽度，与高度一样有像素和百分比两种表示方法 ：定义表格边框的颜色 ：定义表格的背景色2.5.2 表格属性,2.5 表格与框架,1．框架页的基本结构 … … …… …：标记普通的HTML文档，用于在不支持框架的浏览器中显示 ：用于定义分割窗口，可以设置窗口的分割方式及是否显示框架边框等 ：用于设置每个区域显示的内容，每个 url 值指定一个事先己制作好的文件。

2.5.3 建立框架,2.5 表格与框架,2．建立框架 （1）建立纵向框架 建立纵向框架的基本语法为： Cols：设置垂直分割窗口，用“,”分隔，它的值可以是像素值或者是百分比，代表对应的子窗体占屏幕窗口的大小如要将屏幕分割成三个子窗口，其中两个都占整个窗口的30%，那么只要给开始的两个窗口赋值语句为，*代表框架剩余的部分分给最后一个子窗口，当然也可以写成2.5.3 建立框架,2.5 表格与框架,（2）建立横向框架 建立横向框架的基本语法为： rows：这个参数用来水平分割窗口，它的值可以是数字或者是百分比，代表对应的子窗口的大小，使用方法与cols相同 （3）嵌套框架 嵌套框架是在己有的框架中嵌入框架的结构，利用嵌套框架可以实现窗口的横向与纵向的混合分割2.5.3 建立框架,2.5 表格与框架,常用的框架属性有以下几种： 1．：设置框架的边框值为yes（或1）表示有边框或no（或0）表示无边框 2．：设置各窗口之间空白区域的大小其值以像素为单位 3．：设置边框的颜色值可以是的英文或颜色代码 4．：设置框架是否显示滚动条有三个值：yes表示有滚动条，no表示没有，auto表示根据内容由浏览器自动设置。

5．：设置框架在浏览器中的大小不能被调整2.5.4 框架属性,2.5 表格与框架,本章小结,第2章 HTML语言基础,。