1、HTML 语言与文本编辑,张振蕊,,Web页面制作基础,1 HTML概述 2 HTML文本设计 3 加入多媒体与超级链接 4 制作表格 5 制作表单 6 框架结构,1 HTML概述,1.1 什么是 HTML 文件？ HTML是（Hyper Text Markup Language，超文本标记语言）的缩写HTML 指超文本标签语言。 HTML 文件是包含一些标签的文本文件。 这些标签告诉 WEB 浏览器如何显示页面。 HTML 文件必须使用 htm 或者 html 作为文件扩展名。 HTML 文件可以通过简单的文本编辑器来创建。,1 HTML概述,1.2 HTML文档的结构 包括HEAD、TIT
2、LE、BODY三部分，下面是基本结构：标题部分正文部分,1 HTML概述,1.3 HTML标记 1HTML文档标记格式：标志文件开始和结尾的标记。 2HTML文件头标记格式：用于包含文件的基本信息。 3HTML文件主体标记格式：文件主体标记。 注意：与为独立的两个部分，不能互相嵌套。,1 HTML概述,为什么我们要使用小写的标签？万维网联盟 (W3C) 的标准是：建议在 HTML 4 中使用小写标签，而在 XHTML（下一代 HTML）中，必须使用小写标签。 HTM 还是 HTML 扩展名？习惯于HTM这样做的人也许是因为使用某些过时的软件而养成了这个坏习惯，这些软件只允许三个字母作为扩展名。
3、,1 HTML概述,1.4 常用HTML编辑工具 使用记事本等编辑器在保存文档或者更改文件名时，把文件的扩展名设为.htm或者.html即可，那么这个文件就是一个HTML文档。 为了使设计网页更加的方便，很多公司设计了专用的网页编辑器，像Dreamweaver、FrontPage等，是专门用来制作网页的，具有所见即所得的功能。,2 HTML文本设计,2.1 设置的属性 属性概述： Background设置网页的背景图片 bgcolor 设置网页的背景颜色 Bgproperties设置背景是否随滚动条滚动(fixed ) link 设置尚未被访问过的超文本链接的颜色 vlink已被访问过的超文本
4、链接的颜色,2 HTML文本设计,2.1 设置的属性 属性概述： Alink 设置超文本链接在被单击的瞬间的颜色 Leftmargin 设置网页左边的空白 Topmargin 设置网页上方的空白 Margingwidth 设置网页空白的宽度 Marginheight 设置网页空白的高度,2 HTML文本设计,2.2 段落格式化 1. 标题标记 格式： ， 设置各种大小不同标题的标记。 2段落标记 格式：设置段落标记。 3预定格式标记 格式：在浏览器中浏览时，按照文档中预先排好的形式显示内容。,2 HTML文本设计,4分区显示标记 格式：分区显示标记。 5词标记 格式： 功能：空白标签,强制换行
5、。 格式： 功能：插入水平线标记。 6注释标记 格式：注释标记。,对 HTML 元素的重新认识,每个 HTML 元素都有一个元素名（比如 body、h1、p、br） 开始标签是被括号包围的元素名 结束标签是被括号包围的斜杠和元素名 元素内容位于开始标签和结束标签之间 某些 HTML 元素没有内容 某些 HTML 元素没有结束标签,2 HTML文本设计,2.3 建立列表 在网页中经常使用的列表分为：有序列表和无序列表。由带有序号标志（如数字、字母等）的表项组成有序列表。否则就为无序列表。 1. 有序列表 格式：功能：建立有序列表。,2 HTML文本设计,2. 无序列表 格式：功能：建立无序列表。
6、 Type的值： disc、 circle、 square,2 HTML文本设计,3. 自定义定义列表 格式：注意：根据文档的具体要求，列表可以嵌套使用。,2 HTML文本设计,2.4 字符格式化 1字体设置标记 格式： 功能：设置字体格式标记。 size=size：设置文字的大小，默认的数值为3。face=fontstyle：设置字体，如宋体、黑体、隶书等。 color=colorvalue：设置文字的颜色。,2 HTML文本设计,2其他标记,3 加入多媒体与超级链接,3.1 加入图像、视频、动画格式：空标签功能：在网页中加入图像、视频、动画等。1插入图像图像在网页设计中是必不可少的，所以用
7、户应掌握在网页中操作图像的方法。,3 加入多媒体与超级链接,3 加入多媒体与超级链接,2插入视频 使用插入视频或动画时，含有的属性如下表：,3 加入多媒体与超级链接,3.2 加入超级链接 格式：功能：在当前页和其他内容间建立超链接。,4 制作表格,4.1 建立表格 ,4 制作表格,4.1 建立表格 创建表格是规划页面最常用的方法。 格式： 功能：创建表格进行页面设计。 在浏览器中显示时，表格的整体外观由标记的属性决定 。,4 制作表格,4 制作表格,4.2 定制表格 只是空表格，还需要定义行和单元格。 格式： 功能：定义表格的一行。,4 制作表格,4.2 定制表格 格式： 功能：定义表格中的单
8、元格。,4 制作表格,4.2 定制表格格式： 功能：定义表格标题，显示在表格上方。,5 制作表单,5.1 表单的结构 格式：定义表单。,5 制作表单,5.2 FORM中常用的标记 1输入域（1）单行输入域,5 制作表单,（2）多行输入域标记,5 制作表单,2按钮 格式： 功能：定义按钮。,5 制作表单,3选择域 格式：选项一选项二功能：定义选择栏。,6 框架结构,2.6.1 框架结构的文件格式 注意：在老版本的浏览器可能不支持框架结构。 ,在文档中若使用了, 就不应该有标记,6 框架结构,2.6.2 框架结构标记的使用 格式：,6 框架结构,2.6.3 FRAME标记,6 框架结构,TARGET属性三种常见的用法： 1用于A标记 2用于BASE标记 3用于FORM标记 ,7 动态标记, . 方向 #=left, right 啦啦啦，我从右向左移！ 啦啦啦，我从左向右移！,
