HTML语法教学.ppt

1、HTML 语 法 教 学,2/64,HTML语法教学,2020年7月29日星期三,网页架构 分隔标签 排版标签 字体标签 文字标签 影像标签 背景标签,链接标签 表格标签 序列标签 表单标签 框架标签 其他技巧,认识HTML语法,3/64,HTML语法教学,2020年7月29日星期三,网页架构,网页制作教学BODY之间则为主要语法所在，也是网页的主要呈现部分。,4/64,HTML语法教学,2020年7月29日星期三,分隔标签-【文字上的分隔标签】,使用方法：强制断行标签、强制分段标签,5/64,HTML语法教学,2020年7月29日星期三,分隔标签-【分隔线标签】,使用方法：上一段文字内容下一

2、段文字内容,6/64,HTML语法教学,2020年7月29日星期三,分隔标签-【分隔线标签】,使用方法：上一段文字内容下一段文字内容,7/64,HTML语法教学,2020年7月29日星期三,分隔标签-【分隔线标签】,使用方法：上一段文字内容下一段文字内容,8/64,HTML语法教学,2020年7月29日星期三,分隔标签-【分隔线标签】,使用方法：上一段文字内容下一段文字内容,9/64,HTML语法教学,2020年7月29日星期三,分隔标签-【分隔线标签】,使用方法：上一段文字内容下一段文字内容,10/64,HTML语法教学,2020年7月29日星期三,分隔标签-【分隔线标签】,使用方法：上一段

3、文字内容下一段文字内容,11/64,HTML语法教学,2020年7月29日星期三,排版标签-【文字置左、置中、置右】,使用方法：分段标签再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了。,12/64,HTML语法教学,2020年7月29日星期三,排版标签-【置中标签】,使用方法： 这是置中,13/64,HTML语法教学,2020年7月29日星期三,排版标签-【向右缩排标签】,使用方法： 要缩排的文字,14/64,HTML语法教学,2020年7月29日星期三,排版标签-【保存原始格式标签】,使用方法：文字内容,15/64,HTML语法教学,2020年7月29日星期三,字体标签-

4、【标题标签】,使用方法：标题内容,16/64,HTML语法教学,2020年7月29日星期三,字体标签-【设定字体大小标签】,使用方法：文字内容,17/64,HTML语法教学,2020年7月29日星期三,字体标签-【字型变化标签】,使用方法：文字,18/64,HTML语法教学,2020年7月29日星期三,字体标签-【文字颜色设定】,使用方法：文字颜色,19/64,HTML语法教学,2020年7月29日星期三,文字标签-【文字字型设定】,使用方法：文字,20/64,HTML语法教学,2020年7月29日星期三,文字标签-【特殊字元】,使用方法： ；,21/64,HTML语法教学,2020年

5、7月29日星期三,文字标签-【设定文字内定值大小】,使用方法： 说 明： 改变文字大小的默认值； 标签之后； 一般预定值为3。,22/64,HTML语法教学,2020年7月29日星期三,影像标签-【影像标签】,使用方法： ,23/64,HTML语法教学,2020年7月29日星期三,影像标签-【网页影像重要观念】,路径：,24/64,HTML语法教学,2020年7月29日星期三,影像标签-【网页影像重要观念】,影像单位： 影像格式：,25/64,HTML语法教学,2020年7月29日星期三,背景标签,使用方法：,26/64,HTML语法教学,2020年7月29日星期三,背景标签,使用方法：,27

6、/64,HTML语法教学,2020年7月29日星期三,背景标签-【内文、链接文字颜色设定】,使用方法： ,28/64,HTML语法教学,2020年7月29日星期三,背景标签-【内文、链接文字颜色设定】,使用方法： ,29/64,HTML语法教学,2020年7月29日星期三,背景标签-【内文、链接文字颜色设定】,使用方法： ,已连结颜色,30/64,HTML语法教学,2020年7月29日星期三,背景标签-【内文、链接文字颜色设定】,使用方法： ,已连结颜色,31/64,HTML语法教学,2020年7月29日星期三,链接标签-【WWW链接标签基本概念】,相对路径、绝对路径,32/64,HTML语法

7、教学,2020年7月29日星期三,链接标签-【网页内部的链接】,使用方法： 先在欲连结处作记号：这里是你想连结的点 设定连结：连结,33/64,HTML语法教学,2020年7月29日星期三,链接标签-【网页外部的链接】,34/64,HTML语法教学,2020年7月29日星期三,表格标签-【网页中的表格】,一个2行3列的表格 步骤1：利用标签告诉电脑我要做一个表格； 步骤2：利用一组标签先做一行，然后在行中利用三组标签再分出三个单元格； 步骤3：重复第二个步骤，再做一行然后再分三栏，如此才能得到一个3行2列的表格。,35/64,HTML语法教学,2020年7月29日星期三,表格标签-【连结标签的

8、参数】,使用方法：在连结后面加入 target=_参数,36/64,HTML语法教学,2020年7月29日星期三,表格标签-【连结标签的参数】,使用方法：在连结后面加入 target=_参数,37/64,HTML语法教学,2020年7月29日星期三,表格标签-【合并表格栏位】,上下合并（行间的合并） 左右合并（列间的合并）,38/64,HTML语法教学,2020年7月29日星期三,表格标签-【合并表格栏位】,上下合并（行间的合并） 左右合并（列间的合并）,39/64,HTML语法教学,2020年7月29日星期三,表格标签-【表格栏位对齐位置设定】,例：一个宽100、高60的表格,40/64,H

9、TML语法教学,2020年7月29日星期三,表格标签-【表格背景、底色设定】,41/64,HTML语法教学,2020年7月29日星期三,表格标签-【表格背景、底色设定】,42/64,HTML语法教学,2020年7月29日星期三,表格标签-【表格框线设定】,43/64,HTML语法教学,2020年7月29日星期三,表格标签-【表格栏距设定】,44/64,HTML语法教学,2020年7月29日星期三,序列标签-【无序标签】,使用方法：,TYPE：DISK（实心圆）、SQUARE（小正方形）、CIRCLE（空心圆）,45/64,HTML语法教学,2020年7月29日星期三,序列标签-【有序标签】,使

10、用方法：,TYPE： 1（数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）,46/64,HTML语法教学,2020年7月29日星期三,序列标签-【列表标签】,CSS（Cascading style sheet） CSS是由W3C于1996年12月所公布的一项新技术，什么叫做Cascading style sheet？简单说来他是一种具有阶层性的形式设定，能够让网页设计者在设计网页时，对于网页上的任何物件均有更佳的操控性,47/64,HTML语法教学,2020年7月29日星期三,序列标签-【列表标签】,48/64,HTML语法教学,2020年7月29日星期三

11、,表单标签-【各种输入类型】,1、文本输入框,NAME=名称，设定名称。 SIZE=数值，设定宽度。 VALUE=预设内容。 ALIGN=“对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、 BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。 MAXLENGTH=数值，设定最大长度。,49/64,HTML语法教学,2020年7月29日星期三,表单标签-【各种输入类型】,2、单选表单,NAME=名称。 VALUE=“内容”，设

12、定此栏的内容、值或是意义。 ALIGN=对齐方式，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。 CHECKED，是设定此一栏位为预设选取值。,50/64,HTML语法教学,2020年7月29日星期三,表单标签-【各种输入类型】,3、复选框表单,NAME=名称。 VALUE=内容，设定此栏的内容、值或是意义。 ALIGN=对齐方式，是设定此一栏位的对齐方式

13、，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。 CHECKED，设定此栏为预设选取值。,51/64,HTML语法教学,2020年7月29日星期三,表单标签-【各种输入类型】,4、密码框表单,NAME=“名称”。 SIZE=数值，设定此栏显现的宽度。 VALUE=“内容”，设定此栏预设内容。 ALIGN=对齐方式，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（

14、向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。 MAXLENGTH=数值，设定此栏位可输入的最大长度。,52/64,HTML语法教学,2020年7月29日星期三,表单标签-【各种输入类型】,5、提交按钮,NAME=“名称”。 VALUE=“内容”，设定此栏预设内容。 ALIGN=对齐方式，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEF

15、T（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。,53/64,HTML语法教学,2020年7月29日星期三,表单标签-【各种输入类型】,6、普通按钮,NAME=“名称”。 VALUE=“内容”，设定此栏预设内容。 ALIGN=对齐方式，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABS

16、BOTTOM（绝对置下）等。,54/64,HTML语法教学,2020年7月29日星期三,表单标签-【各种输入类型】,7、隐藏表单,NAME=“名称”。 VALUE=“内容”，设定此栏值、文字或意义。,55/64,HTML语法教学,2020年7月29日星期三,表单标签-【大量文字输入元件】,NAME=名称。 WRAP=“设定值”，是设定此元件的换行模式。三种：OFF（输入文字不会自动换行）、VIRTUAL（输入文字在萤幕上会自动换行，不过若是使用者没有自行按下ENTER换行，发送资料时，也视为没有换行）、PHYSICAL（输入文字会自动换行，发送资料时，会将萤幕上的自动换行，视为换行效果送出）。

17、 COLS=数值，设定列数。 ROWS=“数值”，设定行数。,56/64,HTML语法教学,2020年7月29日星期三,表单标签-【下拉式选单】,SIZE=“数值”，是设定选单大小。 MULTIPLE，设定选单为复选。,57/64,HTML语法教学,2020年7月29日星期三,框架标签,58/64,HTML语法教学,2020年7月29日星期三,框架标签-【开始分割1】,59/64,HTML语法教学,2020年7月29日星期三,框架标签-【开始分割2】,60/64,HTML语法教学,2020年7月29日星期三,框架标签-【开始分割3】,61/64,HTML语法教学,2020年7月29日星期三,框架标签-【其他标签参数说明】,COLS=“120,*”，垂直切割画面，三组、四组； ROWS=“120,*”，横向切割画面。 frameborder=0，设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。 framespacing=5，表示框架与框架间保留空白的距离。,62/64,HTML语法教学,2020年7月29日星期三,框架标签-【其他标签参数说明】,SRC=“a.htm”，设定此框架中要显示的网页名称。 NAME=“1”，设定这个框架的名称。 frameborder=0，同上。 scrolling=“no”，设定是否要显示卷轴。 Noresize，