最近在学习java web开发,作为预备知识,首先要学习HTML编程,这里记下我制作第一个网页的过程,我的学习分为以下几个步骤:
- ①初识HTML
- ②Editplus简介
- ③网页总体构思
- ④涉及的知识点
一、初识HTML
1、为什么要学HTML
网络应用程序常用的构架有C/S构架和B/S构架,其中,B/S构架的系统一般由动态网页负责完成信息呈现和引导交互的任务,JSP是
Java EE的体系中编写动态网页的一种技术,而HTML则是JSP一个不可或缺的组成部分,所以有必要先掌握HTML。
2、HTML的本质
(1)它是超文本。首先它与本文有联系,其次它不仅仅是文本,还可以有图片、音频、视频、动画、超链接等更丰富的元素,超越了传
统文本的限制。因此它可以被看做是传统文本的一个扩展或者电子化,当然它也具有区别于传统媒体的特点。
(2)它是标记语言。标记语言是一套标记标签,HTML用标记标签来描述网页。它不是一种编译型语言,所以不需要编译器,它以一系列
标记标签为基础,客户端只是要有浏览器就可以对标记标签进行分析解析,从而还原发布者的源内容。
二、Editplus简介
EditPlus是一款由韩国 Sangil Kim 出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器,你甚至可以通过设置用户工具将其作为C,Java,Php等等语言的一个简单的IDE。
(1)默认支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript和VBScript等语法高亮显示。
(2)EditPlus提供了与Internet的无缝连接,可以在EditPlus的工作区域中打开Intelnet浏览窗口。
(3)提供了多工作窗口。不用切换到桌面,便可在工作区域中打开多个文档。
(4)正确地配置Java的编译器“Javac”以及解释器“Java”后,使用EditPlus的菜单可以直接编译执行Java程序。
Editplus的具体使用见博客
三、网页总体框架
喜欢看美剧的应该都听过《权利的游戏》,又名《冰与火之歌》,七个国家九大家族的权力之争,一个个个性鲜明的任务在银屏上相继出 现,过瘾之余,不免让人觉得眼花缭乱,为了使人物关系更加清晰有条理,可以设计一个相关网页,实现感兴趣信息的链接,网页初样先上图,以后有时间再完善。
网页标题GAME OF THRONES链接到《权利的游戏》小说的介绍,下面是剧中九大家族的旗帜,为了美观,加入了守夜人的旗帜,连接到 另一方势力——长城以北的抗争,包括守夜人、野人和异鬼。
这是我的第一个网页,比较简单,主要包括图片的链接、背景的设置、表格的利用、网页的布局、鼠标掠过表格元素时图片的更换和网页 尺寸的自适应,准备再在右下角加入几个标签链接到《权利的游戏》电视剧。
四、涉及的知识点
HTML详细教程见[链接](http://www.w3school.com.cn/html/index.asp),本博客结合案例讲解所使用到的知识点。
1、HTML 标题
HTML 标题(Heading)是通过 <h1>-<h6> 等标签进行定义的,指的是打开网页时浏览器的标签,本案例用EditPlus设计的代码如下,其中<meta>是由EditPlus创建时自动生成,嵌套<title>The Game of Thrones</title>后,浏览器标签显示The Game of Thrones。
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>The Game of Thrones</title>
</head>
2、HTML 段落
HTML 段落是通过 <p> 标签进行定义的。
eg.<p>This is a paragraph.</p>
<p align="left">This is a paragraph.</p>//其中,align="left"为段落属性
3、HTML 文档
HTML文档的通用结构如下:
<html>
<head>
<title>The Game of Thrones</title>
</head>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
4、HTML 链接
链接的 HTML 代码类似这样:
<a href="url">Link text</a>
其中,href 属性规定链接的目标,开始标签和结束标签之间的文字被作为超级链接来显示。
eg.<a href="http://www.w3school.com.cn/">Visit W3School</a>
上面这行代码显示为:Visit W3School,点击这个超链接会把用户带到 W3School 的首页。
提示:"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
eg. <a href="http://baike.baidu.com" target="_parent" >
<img src="./FAMILY/stark.jpg" width=100% border=none>
</a>
5、HTML 表格
本案例中使用了2x5的表格,每个表格单元放置了一张图片链接。表格由 <table> 标签来定义。
每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。
字母 td 指表格数据(table data),即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
6、HTML 样式
当单个文件需要特别样式时,就可以使用内部样式表,通过 <style> 标签定义内部样式表。 本案例中,分别对body部分、表格单元中图片以及表格整体设置了相应的样式。
<style>
body{ margin:0; padding:50px; }
div{ height:100%; width:80%; margin:0 auto;}/*这里的width height 大于图片的宽高*/
table{ height:100%;width:100%; padding:50px; }
</style>
7、HTML 背景
背景可以通过RGB 值或者图片来设置
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
<body background="http://www.w3school.com.cn/clouds.gif">
本案例在代码正文直接用图片设置背景,方法如下:
<div>
<img style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-Index:-1; border=none; solid blue" src="./bg.jpg" />
</div>
8、HTML鼠标触发事件
本案例中,当鼠标略过网页中某张图片时,图片会变成另一张,由《权利的游戏》家族旗帜变成家族主要成员,具体实现如下:
<a href="http://baike.baidu.com" target="_parent" >
<img src="./FAMILY/stark.jpg" width=100% border=none
onmouseover='src="./FAMILY/starks.jpg"' onmouseout='src="./FAMILY/stark.jpg"'>
</a>
其中,onmouseover='src="./FAMILY/starks.jpg"' onmouseout='src="./FAMILY/stark.jpg"'为关键设置,
border=none设置图片显示无表框。