没有合适的资源?快使用搜索试试~ 我知道了~
java教程_第三章HTML相关技术基础知识.pdf
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 22 浏览量
2021-11-04
22:17:26
上传
评论
收藏 781KB PDF 举报
温馨提示
试读
19页
java教程_第三章HTML相关技术基础知识.pdf
资源推荐
资源详情
资源评论
第 3 章 HTML 相关技术基础知识
纵观各种动态页面开发技术,无论是 JSP、 ASP 还是 PHP 都无法摆脱 HTML 的影子。这些动态的
页面开发技术无非是在静态 HTML 页面的基础上添加了动态的可以交互的内容。 HTML 是所有动态页
面开发技术的基础。在接下来的章节将要详细介绍的就是 HTML 相关的一系列技术,包括 HTML 、
JavaScript 和 CSS。其中 HTML 是一组标签,负责网页的基本表现形式; JavaScript 是在客户端浏览器运
行的语言,负责在客户端与用户的互动; CSS 是一个样式表,起到美化整个页面的功能。
本书不是详细介绍 HTML 的专著,在本章也只是讲解 Web 开发中最常见的 HTML 知识,目的在于
使读者能尽快进入 Web 开发的状态。如果读者有更深层次的需求可以参考专门讲解 HTML 的书籍。
3.1 HTML 基础知识
在各种 Web 开发技术中, HTML 无疑是最为基础的。任何动态语言都离不开 HTML 的支持。所以
在开始 Web 开发的学习之前,读者还是需要静下心来打好这个基础。在这个章节中将会概述 HTML 的
框架知识。
3.1.1 什么是 HTML
HTML (Hyper Text Markup Language)即超文本标记语言,用来描述 Web 文档数据。用户可以通
过 URL 链接来访问这种 Web 文档,从而达到信息展示、信息共享的目的。下面就是一个简单的 HTML
文档的例子。
//-------- 文件名: First.html-------------------
<html>
<head>
<title> 这是第一个 HTML 例子 </title>
</head>
<body>
欢迎光临!这是我的第一个 HTML 文档。 <br/>
</body>
</html>
在这个 HTML 文档中,可以看出 HTML 的简单结构,每个 HTML 文档都包括一对 <html></html>
标 签 , 这 是 所 有 HTML 文 档 所 必 需 的 。 在 这 个 标 签 中 间 还 包 括 着 其 他 两 对 <head></head> 、
<body></body> ,其中在 <head></head>中是 HTML 文档的头信息,包括标题、关键字、页面编码格式、
引入的 CSS 或者是 JavaScript 文件的路径等基本信息。在 <body></body> 中间放置的是文档要表述展示
的内容,在上面这个例子中我们要展示的仅仅是 “欢迎光临!这是我的第一个 HTML 文档。 ”这句话。
所以在 <body></body> 这对标签中间没有其他内容。
注意:一般情况下,可以包括其他内容的 HTML 标签都是成对出现的,例如上面例子中的
<title></title> 这对标签,它包含了一个文字的标题信息,所以成对出现。而 <br/> 这样的标签仅仅是一个
回车换行的作用,它不包含其他内容,所以不成对出现。
3.1.2 HTML
运行原理
在上面的例子中我们看到的仅仅是几行代码,而在大家的印象中 HTML 文档就是网页,究竟如何
把 HTML 文档转化成我们常见的网页,这就是接下来要介绍的内容。
我们平时所看的丰富多彩的网页都是通过浏览器看到的,当你在浏览器中敲入网址,然后就可以看
到对应的一个网页,上面有各种各样的内容。其实在本质上你敲入的网址就是互联网上一个 HTML 文
档的访问路径,浏览器可以根据这个路径取回这个 HTML 文档,取回的文档格式和上面例子中的类似。
只不过把这些代码翻译成了一个形象的网页。
前面介绍 HTML 定义的时候就说过, HTML 是一种标记语言,每一种 HTML 标签都是有一定表现
含义的。浏览器就是按照 HTML 标签的语义规则把 HTML 代码翻译成漂亮的网页。就像上面的 HTML
文档示例会被翻译成如图 3.1 所示的效果。
图 3.1 First.html 在浏览器中的运行效果
在图 3.1 中可以明显看到,上面文档中 “<title>这是第一个 HTML 例子 </title> ”这行代码被翻译成
了网页的标题。而 <body></body> 标签中包含的内容被翻译成了网页只能够显示的内容,在这里就只有
一句话。等接下来常用的 HTML 标签介绍结束之后,就可以构造出丰富表现形式的网页了。
3.1.3 HTML 常用标签
在本节要介绍的是常用标签的基本用法。
1.<table>
在 HTML 的布局标签中, <table> 标签是使用频率最高的一个。它可以把一组信息用表格的形式表
示出来,具体使用示例参考下面这个示例。
//-------- 文件名: Table.html--------------------
<html>
<head>
<title> 表格标签示例 </title>
</head>
<body>
<table border="1">
<tr>
<td> 第一行第一列 </td>
<td> 第一行第二列 </td>
</tr>
<tr>
<td> 第二行第一列 </td>
<td> 第二行第二列 </td>
</tr>
</table>
</body>
</html>
在这个示例程序中展示了表格的基本用法,其中 <table></table> 标签的含义是表格,这个表格还有
一个属性 border= ’1’,含义是这个表格的边框是 1 像素。在表格中间有 <tr></tr> 标签,这个标签的含义
是表格的行,在行中间有 <td></td> ,这个标签的含义是表格的列。在 <td></td> 中间有文字,这些是这个
单 元 格 要 显 示 的 内 容 。 其 中 <td></td> 标 签 必 需 用 在 <tr></tr> 之 间 , 而 <tr></tr> 标 签 只 可 以 用 在
<table></table> 之间。如果这三对标签的位置或者是顺序用错,整个表格就不能正常显示。
按照上面介绍的标签的语义,上面这段程序表示的就是一个两行两列的表格。在浏览器中的运行效
果如图 3.2 所示。
图 3.2 表格示例程序运行效果
上面这个示例程序仅仅展示了一个简单的布局,而常见的复杂布局都可以是利用表格的嵌套来实
现,这也是在很长一段时间内开发人员采取最多的一种布局手段。
2.DIV
在以往的 Web 页面开发中,表格是首选的布局元素,但是近来 DIV 元素越来越受开发者的欢迎,
究其愿意就是定位比较方便,可以采取相对定位,也可借助于 CSS 绝对定位,同时采用 DIV 作为布局
元素可以避免像表格那样的层层嵌套。
其实层也就是一个容器,在里面可以放任何需要展示的内容。和表格的使用方法类似。在章节 3.3.3
中我们将结合 CSS 详细解释 DIV 的使用方法。
3.<a>
在浏览一个网站的时候,我们经常会遇到一些链接,单击这些链接就会导航的其他的页面。这个链
接使用的就是 <a></a> 超链接标签,这个标签可以像下面这个程序中这样使用。
//-------- 文件名: Link.html--------------------
<html>
<head>
<title> 超链接示例 </title>
</head>
<body>
<a href="http://www.sohu.com" target="_blank"> 搜狐</a>
</body>
</html>
在这个程序中定义了一个超链接。
<a href="http://www.sohu.com" target="_blank"> 搜狐</a>
<a></a> 是超链接的标签,其中 href 是链接的地址,在这里我们指向 http://www.sohu.com ,
tartget= ” _blank ”指的是在一个新的浏览器窗口打开这个链接,这个属性的值还可以选择 _self 、_parent、
_top。“搜狐 ”是我们显示在这个链接标签中的内容,单击这两个字的时候就跳转到链接地址。上面这
个例子中 href 属性是必不可少的。 targert 是可选的属性。这个程序的运行效果如图 3.3 所示。
单击 “搜狐 ”这个链接就会在新窗口打开搜狐网站主页面。
注意:在 HTML 中对字母的大小写不敏感,同样一个标签大些小写都不影响显示的效果。
4.<img>
在目前的网站开发中,对图片的依赖是其他元素所不能替代的,一个漂亮的网页往往是由一系列图
片组合而成。在这里介绍 HTML 中图像标签 <img> 的使用方法,具体方法参考下面例子。
//-------- 文件名: Image.html--------------------
<html>
<head>
<title> 图片使用示例 </title>
</head>
<body>
<img src="hand.gif"/>
</body>
</html>
<img> 是图像标签, src 属性指明了图像文件的位置,上面这个程序运行效果如图 3.4 所示。
图 3.3 超链接示例程序运行效果 图 3.4 图片使用示例程序运行效果
注意: HTML 文档的源文件都是以 .html 或者 .htm作为后缀名。在上面这个程序中,图片和 HTML
文档在放在同一个文件夹中,所以只用给 src属性提供文件名即可,如果图片和 HTML 文档不在同一个
文件夹中就需要提供相对的访问路径。
3.1.4 HTML 表单标签
前面讲述的都是 HTML 向用户展示信息的标签,在本节要介绍的内容就是 HTML 用来收集用户输
入的标签。 <form></form> 是表单标签,只有在这个标签中的用户输入才会被提交给服务器。表单标签
的使用方法类似下面这种格式。
<form action="" method="get"></form>
其中 action 属性指明了处理这个表单数据的对象。 method 属性指明传送这个表单中的数据所使用的
方法, method 属性有两个值可选, get 提交表单的时候,表单的所有的输入都会显示在浏览器的地址栏
中,而且 get 对所能提交数据的大小也比较小,因为所有提交的内容都要显示在地址栏,而 URL 的大小
是有限制的。 method 还可以选择 post 方法,这个方法对提交数据的时候不在浏览器的地址栏中显示,
而且所能支持数据量比较大。
在表单中可以包含用输入标签收集用户输入的数据,其中 <input></input> 是输入标签,使用方法类
剩余18页未读,继续阅读
资源评论
lilixiaozhan
- 粉丝: 1
- 资源: 4303
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功