用Editplus制作HTML网页

来源：互联网发布：怎样在淘宝上买罂粟壳编辑：程序博客网时间：2024/04/29 22:28

最近在学习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 2row 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设置图片显示无表框。

1 0