1、第3章 HTML 简介,教学内容:HTML概述HTML的文本格式标记HTML的表格标记HTML的图像与多媒体标记HTML的超级链接标记HTML的表单标记HTML的框架标记HTML的综合实例,HTML语言的基本概念和基本结构,HTML的全称是hypertext makeup language,中文意思是超文本标记语言。 HTML是网页制作最基础的语言，是将纯文本和格式化指令混合在一起的一种标记性语言。HTML语言只描述文档的结构，而不能描述实际的表现形式。它以标签标示及排列各对象，标签内的内容称为元素。,HTML文件的基本结构,HTML文件开始,HTML文件结束,HTML文件的头部区段,HTML
2、文件的主体区段,HTML文件的基本结构.html,HTML文件的编写方法手工直接编写,用“记事本”编制网页源代码文件,用“浏览器”软件显示其网页效果,用记事本编写的HTML文档的例子,注意：文件存盘时一定要加上文件的扩展名.HTML,HTML文件的编写方法使用可视化软件编写,使用FrontPage,HTML文件的编写方法使用可视化软件编写,使用Dreamweaver,HTML语言基本语法,HTML文件由标签组成，绝大多数标签都成对出现。 在起始标签和结束标签的中间部分是网页的内容。,HTML标签有下列三种表示方法：1、文件或超文本2 、文件或超文本3、,HTML文档中的基本结构标记, 网页的开
3、始和结束标记网页的头部标记网页的标题标记网页的主体标记,HTML文档中的主体标记,主体标记中放置了页面中的所有内容，如文字、图片、表格、表单、链接等；设置的属性可定义页面文字的颜色、背景的颜色、背景的图象等。,元素的属性： Text 设定页面文字的颜色 Bgcolor 设定页面的背景颜色 Background 设定页面的背景图象,参考教材P55,设置页面文字颜色 2. 设置页面背景颜色3. 利用平铺图像作背景 ,HTML文档中的主体标记,页面背景与文字颜色.html, #FF0000 红色 #FF00FF 紫色 #00FF00 绿色 #00FFFF 青色 #0000FF 兰色 #FFFF00
4、黄色 注：每两位的取值是从00-FF，前两位为红色的深浅，中间两位是绿色的深浅，最后两位是蓝色的深浅。,HTML文档中的颜色,色彩意象表.html,输入普通文字 , 输入注释语句标题标记 n的取值16 字体标记,HTML的文本格式标记,这些标记放在主体区段中,主体区段中的标题字显示效果网页中的文字 标题字H1-H6 网页制作与发布网页制作与发布网页制作与发布网页制作与发布网页制作与发布网页制作与发布,网页中的文字,标题格式标记.html,文字修饰标记粗体字斜体字仿古形式加下划线大字体小字体加贯穿线地址文字标记,HTML文档中的文字修饰,参考教材P59,定义字符大小,文本内容,N的取值为17 1
5、号字最小 ，7号字最大,定义字体颜色,文本内容,HTML文档中的文字修饰,定义字体,文本内容,文字格式与修饰.html,滚动字,的属性： 方向： 方式： 循环： 速度：n值越大速度越快 延时：,HTML文档中的滚动字,HTML文档中的滚动字示例,左右滚动显示字.html,上下滚动显示字.html, 段落标记预格式化标记 断行标记插入水平线标记文本对中标记,HTML文档中的段落标记,在 HTML 文 档 中 输 入 文 字,文学天地诗的汁液 把死亡当作梦境， 把落日看成凄迷的黄金， 这就是诗不朽而又贫困。 诗就象旭日和夕阳的循环。 ,html的段落格式.html,Size: 横线的宽度Width
6、: 横线占屏幕的宽度Align定义横线的位置，其值取：LEFT RIGHR CENTER 缺省,HTML文档中的段落标记,在网页中加入列表,在网页中加入列表可更清晰地表达出重点，列表在设计 Home Page时是常用的技巧。Home Page的列表分成许 多种类，每一种列表可以独立使用，也可以混合使用。,有序列表与无序列表,在网页中加入列表,有序列表标记, . ,无序列表标记, . ,列表项前加上标记, .,有序列表列表项1列表项2列表项3 ,无序列表列表项1列表项2列表项3 ,有序列表的类型属性和起始属性, . ,数字形式 type=1 大写字母形式 type=A 小写字母形式 type=a
7、 大写罗马数字 type=I 小写罗马数字 type=i起始数字 start=# #号为要开始记数的数字,列表项1列表项2列表项3列表项4 , . ,Type=# 更换标点# disc 实心圆点# circle 空心圆点# square 实心方块,列表项1列表项2列表项3列表项4 ,无序列表的类型属性,例：HTML列表源文档,有序列表与无序列表.html,定义式列表,名词一解释一名词二解释二 ,定义式列表的标记,定义式列表的HTML源文件,定义式列表.html, 定义式列表标记DL 定义式列表是一种两个层次的列表，用于解释 名词的定义，名词为第一层次，解释为第二层次，并且不包括项目符号。菜单列
8、表标记MENU菜单列表用于显示菜单内容，设计单列的菜单，在Internet Explorer 浏览器中显示和无序列表是一样的。,HTML的 表格标记,表格是网页排版的灵魂。无论是使用HTML语言编辑的网页，还是具备动态网站功能的网页，都要借助表格进行排版。浏览网站，会发现几乎所有的网页都要或多或少地采用表格。我们可以使用表格来做报表、网页排版、拼接图片等。,表格标记与属性, 表格的开始标记 表格的结束标记 行标记 表头列标记 表格数据列标记 表的标题,使用表格用户名 密码 ,表格应用示例,BORDER- 用来设置边框的立体高度, 缺省值为1，显示或隐藏表格线。Cellsp
9、acing- 设置表格线的宽度。Cellpadding- 分隔数据与上下左右线条之间的距离。Width- 自动调整表格宽度。（以点或%）align - 调整表格水平位置（left center right),表格属性,参考教材P66,Border属性示例,定义每一行的数据,一个表格使用了多少，就会出现多少行,定义每一列的数据,.,在与之间，每出现一对 就表示一列的数据,定义数据的名称,.,.一般作为数据项的名称放在表 格的最上一行或最左一列，与. 用法相同，只是包含文字加粗。,参考教材P67,定义表格的标题,表的标题,设计表格时最好定义一个标题， .可以放在表格的任意位置，但 为了清晰，最好是紧接在指令之后。,属性align - 定义标题位置align =top 标题放在表格之前 align= bottom 标题放在表格之后,表格示例,表格示例不规则栏.HTML,使用表格编排网页版面,表格内的单元格不仅能放数据，还可以将网页上所有的对象都放入表格内。将图形、超级链接以及交互式文件放入表格，是设计网页版面的一种有效的方法。利用表格的特性安排图形、文字等，网页会更加引人注目。,回到首页我的像册我的文集 ,使用表格排版.html,使用表格拼图,使用表格编排网页版面,使用表格拼图.html,
