第3章 网页基础.pptVIP

第3章 网页基础 本章主要内容： 3.1 HTML基础——重点 3.2 布局基础——重点 3.3 JavaScript的简单应用——了解 3.1 HTML基础 主要内容： 1. 什么是HTML?如何运行？ 2. HTML文档的基本结构 3. 段落控制 4. 表格 5. 表单 6. 图像和超级链接 1. 什么是HTML，如何运行？ HTML：HyperText Mark-up Language超文本标记语言，是表示网页的一种规范，它通过标记定义了网页内容的显示格式。 如何运行：HTML文件通过任意一种文本编辑器都可以编写;保存成扩展名为.html或者.htm;双击该文件即可直接在默认的浏览器中直接运行。也可以通过其他集成开发工具调用浏览器运行。 2. HTML文档基本结构 HTML HEAD TITLE 网页标题 TITLE /HEAD BODY 网页中要显示的具体内容（文本、图 片、链接、表格、表单等） /BODY /HTML 简单HTML文件示例 HTML HEAD TITLE 制作一个简单的网页 /TITLE /HEAD BODY 大家好！ /BODY /HTML 3. 段落控制 1) 分段标记p…/p 格式： p align=“left|center|right”文字/p 示例： HTML HEAD TITLE 段落标记的使用 /TITLE /HEAD BODY p align=“center”枫桥夜泊/p p align=“center”张继/p p align=“right”月落乌啼霜满天，江枫渔火对愁眠/p p align=“left”姑苏城外寒山寺，夜半钟声到客船/p /BODY /HTML 2)换行标记br 格式：文本br 3)标题标记hn…/hn 格式： hn align=“left|center|right”标题文字/hn 其中：n可以取1~6，取1时文字最大，取6时最小。 4）字体标记font…/font 格式： font size=“字体大小” face=“字体名称” color=“颜色”被设置的文字内容/font 示例： font size=“3”color=“red”Hello/fontbr font face=“verdana”color=“blue”Hello/font 4. 表格 表格：可以将文本和图片按行、列排列，实现网页的合理界面布局。 表格的基本结构 table border=“n” width=“x|x%” height=“y|y%” cellspacing=“I” cellpadding=“j” tr th表头1/th th表头2/th /tr tr td表项1 /td td表项2/td /tr /table 表格举例 利用table标记制作一张课程表如何实现？ 不规则表格 制作方法：可以通过设置td、th的rowspan和colspan属性来实现。 示例： table border=1 trtd1,1td1,2td1,3/tr trtd colspan=22,1 2,2td2,3/tr trtd 3,1td rowspan=23,2br4,2td3,3/tr /table 5 表单 表单：表单是一个包含表单元素的区域。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。 表单标签格式： form ... input 元素 ... /form form标记的属性 name:设置表单的名称 action：设置表单提交的目标网址 method:设置表单的传送方式，通常取值为”post”或”get”。Get方式在通过URL提交数据，提交后在地址栏中的地址 ,前者不会。 例如： form name=“myform” action=“greeting.html” method=“post” 表单(Form)的常用input控件 表单(Form)常用input元素控件有： input type=text 单行文本输入框 input type=submit 将表单(Form)里的信息提交给表单里action所指向的文件 input type=checkbox 复选框 input type=radio 单选框 se