HTML文档的基本结构

1、项目三 HTML代码基本知识 项目三 HTML代码基本知识 HTML文档的基本结构 文字和段落 超级链接标志 图像、背景与颜色标志 表格标志 动态HTML HTML初步 超文本标记语言HTML是生成WWW网页文件的语言，用以生 成超文本文档。在文档中，可以加入任何元素（文本、 图像、动画和声音等）的链接 使用浏览器浏览的网页就是HTML文档 通常是使用记事本作为HTML文档的编辑器，利用浏览器 浏览文档效果 HTML语言基础 HTML只是标记语言，基本上只要明白了各种标记的用法， 就学懂了HTML 标记的写法： 标记由： 括号包围的元素组成，如 标记的表示：起始标记，结束标记 标记中加属性和参

2、数 参数只能加在起始标记中 Hello 标记字母大小写无关 HTML文档中的标记 大多数标志都是成对出现的， 起始标志（如）和结束标记（如） 在起始标记和结束标记之间，放入网页元素 如：文本、图片、超级链接等 welcome to you 所有的HTML文档内容都是由 起始标记和结束标记包围起来的 HTML文档的基本结构 文档标题 文档的正文内容 网页文件格式：网页文件格式： 表示是表示是HTML文档文档 文档头，可加入：文档头，可加入：网页标题网页标题、作作 者信息、版本信息者信息、版本信息 正文区，放置网页中所显示信正文区，放置网页中所显示信 息的标志和属性息的标志和属性 网页标题：网页标

3、题： 加在加在中中 注释：注释： 加在加在中中 两个减号，注释中加入作两个减号，注释中加入作 者信息或版本信息，浏览者信息或版本信息，浏览 时不显示出来时不显示出来 简单的HTML文档 李小龙的主页 欢迎访问我的主页! 输入和保存HTML文档 打开“记事本”编辑器，输入要编辑的HTML语言代码 输入完毕后，保存HTML文档 菜单文件保存/另存为 “保存类型”选择“所有文件” 在“文件名”框中输入：myhtml.htm，注意：扩展名 (.htm)一定不能省略 用IE打开网页文件：myhtml.htm 打开HTML文档 记事本中选择“所有文件”类型，打开文件 浏览器中选择菜单查看源文件 BODY中

4、的标记和属性 标记中放置要在浏览器中所显示信息的所有标记 和属性 标记中间可以放置：文字、段落、图像、表格、超级链 接、框架等 在标记中设置属性，主要是对标记进行补充说明 文字标题标记 标题能分隔大段文字，使得网页显示的内容结构清晰。 共有六级标题：H1H6，从大到小。 , , 对齐方式：设置标题的对齐属性。三个属性： ALIGN=Left、ALIGN=Center、ALIGN=right 实例：实例：欢迎访问我的主页欢迎访问我的主页 Welcome to everybody! 文字段落及换行 文字段落标记： 换行标记： 不成对出现，不用结束标记 在指定位置分行，但不另起段落 实例：实例：这是

5、另一个小段落这是另一个小段落 :在指定位置分行，但在指定位置分行，但 不另起段落不另起段落 这是一个小小的段落这是一个小小的段落 这是另一个小段落这是另一个小段落 分隔符标志 水平分隔线标记 属性：size、color、width、align 不用结束标记 实例：实例： 关于颜色 颜色：由红R、绿G、蓝B三原色组成，每一色由两位十 六进制数表示(简称RGB数)。 如下表 REDGREENBLUE 000000 333333 666666 999999 CCCCCC FFFFFF 强强 弱弱 书写方法：书写方法：#RRGGBB 如黑：如黑：#000000 如白：如白：#FFFFFF 颜色 RGB

6、数的设置：三种颜色组合起来 RGB数设置为000000，颜色为黑色 RGB数设置为CCCCCC，颜色为灰色 RGB数设置为FFFFFF，颜色为白色 英文单词表示颜色 Black（黑）,Olive（橄榄色），Teal（青色），Red（红色 ），Blue（蓝色），Navy（深蓝色）, Maroon（ 栗色的）， Gray（灰色）， Lime（绿黄色），Fuchsia（桃红色）， White（白色）, Green（绿色）， Purple（紫色），Silver （银色）， Yellow（黄色），Aqua（浅绿色） 设置颜色组合时，前面加“#”符号。使用英文单词表 示颜色时，不加#号 页面背景色、文本颜

7、色 在标记中指定页面的背景颜色 属性：BGCOLOR=# 在标记中指定整个文档中文本的颜色 属性：TEXT=# 实例：实例： 或或 实例：实例： 属性属性 参数参数 字体、字号、文字颜色 用标记指定字体、字号和文本颜色 字体 属性： 指定字体 字号 属性： 字号1到7号，默认是3 实例：实例：你明白了吧？你明白了吧？ 字体、字号、文字颜色 文本颜色 属性： 指定字体 粗体、斜体 粗体标志 斜体标志 实例：实例： 你喜欢这个你喜欢这个网页网页吗吗? GRB 建立超级链接 超级链接标记 HREF属性： 指向链接的网址和文件（URL） 实例：实例：表格布局表格布局 实例：实例：友情连接友情连接 用于

8、超级链用于超级链 接的文字接的文字 超级链接的目标超级链接的目标 超级链接 NAME属性： 设置书签位置点，超级链接指向书签p,154 TARGET属性: 在新的窗口中显示链接的内容 实例：实例： 广宁游广宁游 超级链接 TITLE属性： 在超级链接中加上链接的说明，当将鼠标移到链接上时，说明会 自动弹出到光标的尾巴上 插入E-mail链接： 实例：实例：一个一个HTML购物网购物网 实例：实例：请跟我们联系请跟我们联系 交作业给我交作业给我 加进图形图像 图形图像标记 图片格式常见有GIF和JPG 主要属性SRC,称为引用图形的“源(source)” 图片文件和HTML文档在同一文件夹中，直

9、接用文件名 图片文件和HTML文档不在同一文件夹中，指定路径时用相对路径 其它属性：ALT、BORDER、ALIGN、WIDTH 实例：实例： 实例：实例： 实例：实例： 加入影像 直接用链接加入 当用户点击时才下载播放。如： 嵌入影像 嵌入方式使用标记 方法如下： 实例：实例： 实例：实例： 欣赏电影欣赏电影 表格标志 表格标记 基本表格标记：、 、的结束标记最好加上 标标 志志用用 法法 在在HTML文档中标识表格文档中标识表格 标识表格中的一行，结束标志是可选的标识表格中的一行，结束标志是可选的 标识一行中的单元，结束标志是可选的标识一行中的单元，结束标志是可选的 标识一行标题单元，结束

10、标志是可选的标识一行标题单元，结束标志是可选的 表格标记 标记中的常用属性,有些属性同样适用于 、和标记 属属 性性说说 明明 ALIGN=” 将表格放在窗口的左边将表格放在窗口的左边(left)、右边、右边(right)或中间或中间 (center) BACKGROUND=”URL” 指定作为整个表格的背景图形文件的地址指定作为整个表格的背景图形文件的地址 BGCOLOR=”指定表格中所有单元的背景颜色，可用颜色名或指定表格中所有单元的背景颜色，可用颜色名或 RGB值值 BORDER=”n”指定每个单元的边框厚度（象素数），指定每个单元的边框厚度（象素数），0表示不显示表示不显示 边框边框

11、WIDTH=”n”指定表格宽度，可以用象素数，如指定表格宽度，可以用象素数，如600；也可用浏览；也可用浏览 器窗口总宽度的百分比，如器窗口总宽度的百分比，如90%。 表格 属性实例，整个表格的属性 说明：表格的宽度占据整个浏览器窗口的50%，表格边框 线5，背景颜色为灰色，并且居中显示 实例：实例： 定义简单表格 编号品牌 M1001长城 M1002方正 M1003联想 M1004TCL TR为行、为行、TH标题单元格、标题单元格、TD单元格单元格 列表 无序列表标记 基本列表标记 表头标题 表项标识 实例：实例： 或或 A List Header This is item 1 This i

12、s item 2 列表 有序列表标记 基本列表标记 表项标识 实例：实例： A List Header Question one Question two 框架集、表单 框架集 表单 滚动字幕 滚动字幕标记 Direction属性 设置文字滚动的方向：Left, right, up, down Bihavior属性 设置文字滚动方式：scroll（成卷形）, slide（滑动）, alternate（轮流） 实例：实例： 网页制作的技巧网页制作的技巧 很多很多 实例：实例： 使用滚动字使用滚动字 幕幕 滚动字幕 Scrollamount属性 设置文字滚动的速度（像素） scrolldelay属性 设置文字滚动延迟时间（秒） 实例：实例： 网页制作的技网页制作的技 巧很多巧很多 实例：实例： 使用滚动字幕使用滚动字幕 滚动字幕 Align属性 设置滚动字幕的对齐方式：top, middle, bottom Bgcolor属性 设置滚动字幕的背景色 预定义色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 实例：实例：