实验一网页设计

1、 实验一 网页设计1一、实验目的熟悉超文本描述语言HTML。熟悉常用网页标记，并能熟练掌握。2二、超文本描述语言HTMLHTML文件一般由三部分组成：标记 单一标记（） 成对标记()文字、图像等资料 提供给浏览者查看的内容。统一资源定位器URL 3三、标记使被标记的内容产生所需的各种效果。格式 受标记影响的内容注意 大小写没有限制； 对同一段内容可以用多个标记共同作用； 不是所有标记均有属性（换行标记就没有属性）； 标记、属性的顺序没有特别要求。4四、常用标记一个简单的实例 一个简单的HTML示例 欢迎光临我的主页 51、文件结构的格式标记文档标记 文件头标记 文件标题标记 文件主体标记 62

2、、标题文字标记设置不同大小的标题，使文章条理更清晰。格式 标题文字注意 对齐方式：left、center、right； 属性n的取值范围：16（1最大，6最小）； 标记默认字体为宋体。 7一级标题二级标题四级标题83、段落标记注释标记 强制换行标记 强制换段标记 水平线 (单标记) 对齐 粗细 长度 颜色 平面显示 9一级标题新闻学习窗口104、文字标记被设置的文字红色的隶书Size的取值范围是17（1最小，7最大）11字型设计加粗 斜体 带下划线 标准打印机字体 带删除线 下标 上标 大字体文本 小字体文本 125、超级链接锚点标记格式 热点 注意 地址：目标资源的有效地址。 字符串：当前网

3、页链接时使用的目标有效地址。 打开窗口方式：_blank(开新浏览器窗口) _parent(链接内容显示在父框架窗口) _self(链接内容显示在当前窗口) 131)、链接到同一目录中的网页文件 热点文本 一个简单的HTML示例欢迎光临我的主页 142)、链接到下级目录中的网页 热点文件 一个简单的HTML示例欢迎光临我的主页 153)、链接到上级目录中的网页 热点文件 一个简单的HTML示例欢迎光临我的主页 164)、链接到同级目录中的网页 热点文字 一个简单的HTML示例欢迎光临我的主页 175)、指向本页中的链接 热点文字 学生之家新 闻学习窗口健康信箱聊 天 室 新闻 . 学习窗口 .

4、 186、图片加入网页中的图片常用格式为GIF和JPEG。设置网页的背景 使用标记设计背景。 1）设置背景色 2）以图片作为背景 19一个简单的HTML示例欢迎光临我的主页 20图片标记使用图片标记，可以把一幅图片加入到网页中。用图片标记可以设置图片的替代文本、尺寸、布局的属性。格式 说明 alt属性：在浏览器尚未完全读入图片时，在图片位置显示的文字。 宽度/高度：像素值或百分数。21一个简单的HTML示例信息理论与编码教材原始大小22设置图片布局需要和、等标记一起设置。对齐方式 （特殊： ）图片与文本间的关系 1）图片与文本之间的空白(hspace、vspace) 2）align属性 top

5、 文本与图片的顶部对齐 middle 文本与图片的中央对齐 bottom 文本与图片的底部对齐233）文本环绕图片 借助align属性进行设置 left 图片居左，文本在图片的右边 right 图片居右，文本在图片的左边 取消文本环绕 4）图片作为超链接 格式： 247、表格表格标记 行标记(单标记) 表项标记标头标记 在浏览器中显示时，标记的文字按粗体显示，标记的文字按正常字体显示。表格标题标记25学生成绩表学号姓名数学英语0001张三85 700002李四95 9026跨多行、多列的表项借助、标记的colspan和rowspan属性。表项表项表项278、表单使用表单可以在网页中实现交互操作

6、。表单标记 (单标记)FORM属性 action 表单处理方式，一般为网址或E-mail地址 methord 表单数据的传送方向，get(获得)/post(送出)INPUR属性 type 指定加入表单项目的类型(text、password、heckbox.) name 该表项的控制名，主要在处理表单时起作用。 size 单行文本区域的宽度。 maxlength 允许输入的最大字符数目。28表单实例个人资料姓名：密码： 29复选框和单选框属性名 checkbox(复选框) radio(单选框)例： 性别： 男 女 特长：足球 篮球 309、框架在同一浏览器窗口中显示多个相互隔离的HTML页的结构

7、，每个区域显示一个HTML文件。标记 、(单标记)说明 所有框架标记需要放在一个总起的HTML文件中，这个文件只记录该框架如何划分，不显示任何资料，所以用标记取代标记。划分出来的每一个框体分别由一个标记标示，必须在范围中使用。31标记属性 rows 设定横向分割的框架的数目 cols 设定纵向分割的框架的数目 border 设定边框的宽度 bordercolor 设定边框的颜色 frameborder 设定有/无边框 framespacing 设置各窗口间的空白32标记属性 src 表示该框架对应的源文件 name 制定框架名 border 设定边框的宽度 bordercolor 设定边框的颜色 frameborder 设定有/无边框 marginwidth 设置框架内容与左右边框的空白 marginheight 设置框架内容与上下边框的空白 scrolling 设置是/否/自动加入滚动条 noresize 不允许各窗口改变大小，默认可以33一个简单的框架示例 34纵横排列多个框架 一个简单的框架示例 3510、多媒体滚动字幕标记 属性 loop 设置循环次数，-1或infinite为无限 behavior scroll单向流动 alternate流动文字到达边界反向流动 scrollamoun