⽤Editplus制作HTML⽹页
最近在学习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。html网页设计 table
（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详细教程见[链接](www.w3school/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="www.w3school/">Visit W3School</a>
上⾯这⾏代码显⽰为：Visit W3School，点击这个超链接会把⽤户带到 W3School 的⾸页。
提⽰："链接⽂本" 不必⼀定是⽂本。图⽚或其他 HTML 元素都可以成为链接。
eg. <a href="baike.baidu"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="www.w3school/clouds.gif">
本案例在代码正⽂直接⽤图⽚设置背景，⽅法如下：
<div>
<img src="./bg.jpg" />
</div>
8、HTML⿏标触发事件
本案例中，当⿏标略过⽹页中某张图⽚时，图⽚会变成另⼀张，由《权利的游戏》家族旗帜变成家族主要成员，具体实现如下：
<a href="baike.baidu"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设置图⽚显⽰⽆表框。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论