第2讲 HTML基本语法.ppt

第2章 Web页面制作基础 2.1 HTML语言概述 2.2 文本的格式与风格 2.3 加入多媒体与超级链接 2.4 制作表格 2.5 制作表单 2.1 HTML语言概述 2.1.1 HTML概述 HTML是（Hyper Text Markup Language，超文本标记语言）的缩写，用来表示网上信息的符号标记语言。 HTML最早源于SGML语言 . HTML语言内容丰富，从功能上大体可分为：文本结构设置、列表建立、文本属性制定、超链接、图片和多媒体插入、对象、表格以及窗体的操作。 2.1 HTML语言概述 2.1.2 HTML文档的结构 包括HEAD、TITLE、BODY三部分，下面是基本结构： HTML HEAD 标题部分 /HEAD BODY 正文部分 /BODY /HTML 2.1 HTML语言概述 2.1.3 HTML标记 1．HTML文档标记 格式：HTML…/HTML标志文件开始和结尾的标记。 2．HTML文件头标记 格式：HEAD…/HEAD用于包含文件的基本信息。 3．HTML文件主体标记 格式：BODY…/BODY文件主体标记。 注意：HEAD与BODY为独立的两个部分，不能互相嵌套。 2.1 HTML语言概述 2.1.4 常用HTML编辑工具 任何一个文档编辑器都是HTML编辑器。 为了减少网页设计师的工作设计了专用的网页编辑器，像Dreamweaver、FrontPage、CutePage、QuickSite等，是专门用来制作网页的，具有所见即所得的功能。 所见即所得的概念。 2.2 文本的格式与风格 2.2.1 设置BODY的属性 1．BODY属性概述 background属性 bgcolor 属性 bgproperties属性 link ，vlink， alink属性 Leftmargin，topmargin属性 Margingwidth，marginheight属性 2.2 文本的格式与风格 2.2.2 段落格式化 1．标题标记 格式：H1…/H1，H2…/H2…H6…/H6设置各种大小不同标题的标记。 2．段落标记 格式：P…/P设置段落标记。 3．预定格式标记 格式：PRE…/PRE在浏览器中浏览时，按照文档中预先排好的形式显示内容。 2.2 文本的格式与风格 4．分区显示标记 格式：DIV…/DIV分区显示标记。 5．词标记 这种标记有两种：BR和HR 格式：BR强制进行换行标记。 格式：HR插入水平线标记。 6．注释标记 格式：!--注释内容--注释标记。 2.2 文本的格式与风格 2.2.4 建立列表 1．有序列表 格式： OL type=符号类型 LI type=”符号类型”…/LI LI type=”符号类型”…/LI … /OL 功能：建立有序列表。 2.2 文本的格式与风格 2．无序列表 格式： UL type=”符号类型” LI type=”符号类型”…/LI LI type=”符号类型”…/LI … /UL 功能：建立无序列表。 2.2 文本的格式与风格 3．自定义列表 格式：DL DT…/DT DD…/DD DT…/DT DD…/DD … /DL 注意：根据文档的具体要求，列表可以嵌套使用。 2.2 文本的格式与风格 2.2.5 字符的格式化 1．字体设置标记 格式：FONT…/FONT 功能：设置字体格式标记。 FONT标记提供了几种属性 ： size：设置文字的大小。 face：设置字体。 color：设置文字的颜色。 2.2 文本的格式与风格 2.3 加入多媒体与超级链接 2.3.1 加入图像、视频、动画 图像在网页设计中是必不可少的，所以用户应掌握在网页中操作图像的方法。 格式：IMG…/IMG 功能：在网页中加入图像、视频、动画等。 2.3 加入多媒体与超级链接 2.3 加入多媒体与超级链接 2．插入视频 2.3 加入多媒体与超级链接 2.3.2 加入超级链接格式：A…/A 2.4 制作表格 2.4.1 建立表格 创建表格是规划页面最常用的方法。 格式：TABLE…/TABLE 功能：创建表格进行页面设计。 在浏览器中显示时，表格的整体外观由TABLE标记的属性决定 。 2.4 制作表格 2.4 制作表格 2.4.2 定制表格 使用TABLE只是定义空表格，还需要定义行和单元格。 格式：TR…/TR 功能：定义表格的一行。