chap0 预备知识 html

《chap0 预备知识 html》由会员分享，可在线阅读，更多相关《chap0 预备知识 html（62页珍藏版）》请在金锄头文库上搜索。

1、JSP程序设计,软件学院 杜娟 dqpidj,简 介 及 要 求,教 材：JSP实用教程（耿祥义 张跃平） 参考书：JSP动态网站开发相关书籍 课 时： 48学时（24理论+24实验） 考 核： 平时成绩20% +机试20% +笔试60% 联系我： Email：dqpidj 电话:18249667082 要 求：1） 旷课3次不允许参加考试，迟到3次算1次旷课 2） 注意纪律，上课绝对不允许看手机 3） 注意机房卫生 4） 准备作业纸 5） 整理笔记,JSP课程内容,预备知识HTML语言基础 JSP简介及Web项目环境搭建 JSP基本语法和指令标记 JSP内置对象 在JSP中使用数据库 Jav

2、aServlet基础 基于Servlet的MVC模式 综合案例,JSP不是一门语言，而是一项技术需要有以下基础 1、HTML 2、JAVA 3、数据库相关知识,终极目标 使用JSP技术开发基于MVC模式的Web项目,概述,1、 什么是Web项目？ 基于B/S模式的项目，通过浏览器发送请求来获取服务器上的信息。与服务器进行交互。,B/S模式(Browser/Server)：浏览器/服务器 模式 C/S模式(Client/Server)：客户端/服务器 模式,服务端网站程序,网站数据以HTML形式返回,提交用户访问请求,客户端浏览器 IE、傲游、火狐、360等,概述,1、 Web工作机制,网络信息

3、服务采用 浏览器/服务器（Browser/Server,B/S）模型工作的,2、Web工作机制,概述,2、Web工作机制,浏览器,服务器,执行结果（静态代码）,网易的主页面 静态代码 动态代码,http格式的信息,概述,前端开发（静态）,程序员开发程序（动态）,测试员测试程序,正式发布使用,开发一个Web项目的基本流程,HTML 、CSS、javaScript、Photoshop、flash、Jquery.,C#、.net、java、JSP、J2EE框架、AJAX 了解HTML、CSS等基本知识,概述,请打开浏览器，在地址栏中输入以下地址 http:/58.155.36.152:8080/Pr

4、ojManagement 管理员： name：11 psw：11 教 师： name：11,22 psw： 111 学 生： name：11 psw：111 name：22 psw：222,概述,我的第一个web项目 1）进入目录 D:softapache-tomcat-6.0.29webapps 2）新建文件夹test 3）在test下新建记事本文件index 4）在index中书写内容-欢迎光临的主页 5）将index的扩展名改为.html并更改编码方式为UTF-8保存 6）运行 D:softapache-tomcat-6.0.29bin 目录下的startup.bat文件 7）在浏览器中

5、输入地址： http:/计算机IP地址:8080/test/index.html 例如：http:/58.155.36.152:8080/test/index.html,预备知识HTML基础 第1部分,Chapter 0part 1,HTML简介 HTML语法 HTML文档基本结构 HTML标记 基本标记 编写表格 编写表单 本章内容设置目的 主要是针对程序员进行设置，不是培养网页设计师,课程内容,HTML（超文本标记语言 HyperText Markup Language） 1）作用：创建静态网页的标准语言，用于在网络上传递信息，是写给浏览器的语言，由浏览器解释执行 2）语法：标记+属性（实

6、现图文并茂的网页效果） 3）例：查看HTML源代码 4) HTML文档的扩展名为.html 或 .htm,1. HTML简介,HTML文档基本结构 示例：使用记事本编写Hello.html,2. Html文档基本结构,2. Html文档基本结构,练：在记事本中键入如下代码，并把扩展名更改为.html或.htm hellow html！ 网页中的标题 网页中的段落 ,HTML标记(标签或元素)的形式 双标记 内容 示例. 文字 单标记 示例1. 示例2. ,2. Html文档基本结构,起始标记,结束标记,标记关闭,说明1：标记位于尖括号内，可以具有属性值 属性值用“ ” 或 环绕，不写也可以解析

7、， 但是不规范 说明2：HTML标记不区分大小写 说明3：HTML注释方法 说明4：HTML语法不区分大小写,2. Html文档基本结构,注意一些网页专业编写工具会自动生成如下标记 html文件的标准文件头 文件类型：HTML 规格（文档类型）：W3C DTD HTML4.0 语言：英文 ：用于设置一些头信息，可以没有 ,2. Html文档基本结构,常用HTML标记,2. Html文档基本结构,2. Html文档基本结构,2. Html文档基本结构,1、头部标记 1）文字 显示在浏览器标题栏上 2）：用于设置一些头信息 3）定义CSS格式 4） 用于定义脚本，例如：javascript,2.1

8、 头部标记,1、主体标记 HTML的主体标记是，在和中放置的是页面中的所有内容，如文字、图片、链接、表格、表单等。 标记常见属性 1）背景颜色属性bgcolor 作用：设置网页背景色 语法：。 颜色值：可以使用预定义的名字,如red、blue、black等;也可以使用RGB数字值, 例如,2.2 标记,标记常见属性 2）body背景属性background 作用：设置网页背图片 语法： 值： 使用图片的相对路径img_url表示图片的位置 标记的内容中的特殊字符空格 空格是特殊符号 ；,2.2 标记, Hello World Hello  ； ； ； ；

9、 ；World ,实现网页中的5个空格的代码,2.2 标记,标记使用方法示例，在记事本中键入以下代码，并更改扩展名为.html 或.htm 文档的标题 这里是文档的主体部分 ,1、标题标记 作用：标题标记一般用于文档标题部分的文本内容，用来强调要表现的内容，标记中的文本独自占据一个段落并且预定好了一定的格式，一般用来表示文本的标题部分。 语法：文本内容 其中n代表 16（h1定义最大的标题，h6定义最小标题） 标题标记是双标记 属性： align=“left或right或center“ 指定标题在浏览器中的水平排列方式，左对齐，右对齐或居中,2.3 中常用子标记,1、标题 示例,2.3

10、 中常用子标记, Hello World Hello World Hello World Hello World Hello World Hello World ,2、换行标记(单标记) 用于在网页中输出换行，该标记后的文字将在下一行输出 3、段落标记（双标记） 内容 表示网页中的段落，该标记后的文字在下一个段落输出，段落间的间距要比换行后的行距大一些,2.3 中常用子标记,4、水平线标记(单标记) 作用：水平线用于文本间的分隔，使文字的编排更整齐 语法： 属性 1）size= “粗细数值” 整数值，无单位 2）color= “颜色值” 合法颜色值 3）width= “宽度数值” 整数值或百分

11、比，无单位 4）align=“left或right或center“ 示例:,2.3 中常用子标记,2.3 中常用子标记,示例：, 网页中的标题 网页中的段落 ,5、文本修饰 1）字体标签 Welcome 例：Welcome face:定义字体，值为合法的字体值 size:定义大小：1-7, 1、 2、 3、 4、 5、 6 color：定义字的颜色，值为合法的颜色值,2.3 中常用子标记,5、文本修饰 2）字体辅助标签 加粗 或 斜体或 下划线 中划线 使用方法：嵌套在或其他标记中使用，互相之间也可以嵌套，不要求顺序。 注意：不要出现交叉嵌套,2.3 中常用子标记, Welcome to HT

12、ML ,6、图片标记 src 图片路径，一般使用相对路径 border 边框的厚度，值为整数 , 无单位 alt 替代文本，图片无法显示时的替代文字 width图片的宽度；为不带单位的整数或百分比（相对于容器宽度） height图片的高度：值为不带单位的整数或百分比（相对于容器宽度）,2.3 中常用子标记,7、超链接 文字 href任何有效文档的相对或绝对 URL target指定文档目标的打开方式 文字 现有窗口中打开新的链接页面 文字 新开窗口打开,2.3 中常用子标记,点击这里1 点击这里2 用图片做超链接 点击这里2,2.3 中常用子标记,思考： 1）如何将图片做成超链接形式？ 2）如

13、何在需要位置换行？ 3）如何将文字、图片等元素在浏览器中居中？,1）利用align属性（将元素嵌套在有align属性的元素中） 2）利用标记将需要居中的元素环绕。（了解）,利用标记,综合案例1 综合练使用标题标记、段落标记、换行标记、水平线标记、字体标记、超链接等常用标记完成下图效果,综合案例,综合案例01.html,综合案例2,综合案例,综合案例2.html,回 顾,1、HTML语言的全称是什么？作用是什么？ 2、HTML文件的扩展名是什么？ 3、HTML代码是否区分大小写？如何实现HTML代码的注释？ 4、HTML标记主要分为哪两类？HTML文档的基本结构（结构标记之间的嵌套） 5、实现整

14、个网页的标题使用什么标记？ 6、标记的2个属性分别是什么，如何使用？ 7、在标记中的标题标记是什么，如何使用？ 8、在标记中如何实现文本换行？ 9、在标记中如何插入空格？ 10、段落标记如何使用？ 11、如何修饰HTML页面中的文本的颜色、字体、字号？如何为文本加粗、倾斜、添加下划线？ 12、HTML页面中如何插入图片？相关属性有哪些？ 13、HTML页面中如何插入超链接？相关属性有哪些？ 14、如何实现用图片制作超链接？,3. HTML中编写表格重点掌握,1、table的基本结构 表格主要通过三个标记来构成 表格标签: 行标签: 单元格标签: 基本结构示意图, ,3. HTML中编写表格重点

15、掌握,2、table的常用属性,3. HTML中编写表格重点掌握,练 完成一个三行三列的表格，单元格文本如图所示, 单元格1 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7 单元格8 单元格9 ,3. HTML中编写表格重点掌握,cellpadding,cellspacing,3. HTML中编写表格重点掌握,3、tr和td的常用属性,tr属性,td属性, 单元格1 单元格2 单元格3 单元格4 ,3. HTML中编写表格重点掌握,思考： 1）如何修饰表格单元格文本的颜色，文本字号？ 2）如何在单元格中插入图片？,说明：在单元格之间嵌套其他标记，以达到各种修饰效果，表格最大的作用是

16、用来进行页面的布局，利用单元格来固定各种元素在网页中的位置。, 单元格文本 , ,3. HTML中编写表格重点掌握,学生练：实现如图所示的表格，具体要求如下 1）表格为单线表格，边框宽度为1，红色，表格宽600，在浏览器中居中 2）表格第一行“单元格1”文本在单元格中居中对齐 3）表格第二行的高度为50，该行文本水平方向靠右对齐，其中“单元格5”和“单元格8”按照如图所示效果设置垂直方向的对齐方式 4）按照图示设置单元格背景颜色 5）单元格9中文本为红色，黑体，6号，倾斜 6）单元格12文本设置为超链接，链接目标为http: 7）在“单元格4”中插入图片，宽度和高度都为100，图片居中对齐,3. HTML中编写表格重点掌