JSP网站设计ch2解析.ppt

HTML语言和JavaScript语言 第二章 本章学习目标：能够开发一个静态网站 本章学习方法： 要 求 第二章 HTML语言和JavaScript语言 第一节 HTML语言 第二节 JavaScript语言 第一节 HTML语言 一、HTML文本结构 二、HTML基本标记 三、HTML表单标记 四、HTML范例分析 一、HTML文本结构 html head title第一个HTML网页/title /head body 开始学习HTML！ /body /html 第一节 HTML语言 一、HTML文本结构 二、HTML基本标记 三、HTML表单标记 四、HTML范例分析 二、HTML基本标记 （一）HTML注释标记（ex2_1_注释.html） !-- 注释内容，客户端可以看见 -- !-- HTML注释内容1，客户端可以看见-- html head title第一个HTML网页/title /head body !-- HTML注释内容2，客户端可以看见-- HTML注释演示！ /body /html 二、HTML基本标记 （二）HTML文字格式标记 1、标题大小：（ex2_2_h1h6.html） h1最大 /h1 h6 最小 /h6? html head title标题标记/title /head body h1 h1标题1 /h1 h2 h2标题2 /h2 h3 h3标题3 /h3 h4 h4标题4 /h4 h5 h5标题5 /h5 h6 h6标题6 /h6 /body /html 二、HTML基本标记 （二）HTML文字格式标记 2、字体:(ex2_3_字体.html) font face= “宋体” size= “5” color= “#FF0000” 文字内容 /font ? 二、HTML基本标记 （二）HTML文字格式标记 3、其他字体标记： (ex2_4.html) b加粗/b i斜体/i u下划线/u s删除线/s em倾斜/em strong加强显示/strong 二、HTML基本标记 （三）HTML文字版面标记:(ex2_5_版面.html) 1、换行：br 2、不换行： nobr不换行的内容/nobr； 3、段落标记： p align=“center”段落内容/p ? html head title换行和不换行标记/title /head body 你好！这是换行标记效果br nobr 这是不换行标记，请把窗口变窄，看实际效果！ /nobr 去掉不换行标记，请把窗口变窄，看实际效果！ br p align=“left” 居左对齐 /p p align=“right” 居右对齐 /p /body /html 二、HTML基本标记 （四）图像标记(ex2_8_图像.html) img src=images/021.jpg width=283 height=212 ? 二、HTML基本标记 （五）超文本链接标记（关键标记！） a href = sample10.html 链接到网页1 /a ? 专题：URL相对路径与绝对路径 1、绝对路径： 即URL全部，通常以协议开头。 href = “ 87 :8080/ test/ index . jsp” href = “ http:// / test / index . jsp ” 专题：URL相对路径与绝对路径 2、相对路径： 是URL的一部分。两种相对路径：从项目根目录开始的相对路径；从本页面当前目录开始的相对路径。 超链接路径以“ / ”开头，则是从本项目根目录开始的相对路径： href = “/student/pages/bottom.jsp” 若超链接路径不以“ / ”开头