HTML

Posted on | In ,

eclipse的基本设置

用户通过浏览器请求服务器，服务器根据用户的请求响应用户请求，用户浏览器显示的网页就是服务器相应的内容。
HTML（hyper text markup language，超文本标记语言）：用来描述网页的一种语言。特点是标签都是成对的。
开发工具：eclipse j2ee
我安装的版本在eclipse中从java切换到java EE即可。
new -> Dynamic web project（在web选项中）：项目名HeadFirstHtml
Open perspective -> Java （选择java透视图）
在HeadFirsHtml - WebContent选项下新建文件夹chap01-sec02，新建HTML file。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html> //在HTML文件的开头，是形式上的一个标记
<head> //头标记，放置此HTML文件的信息，如提供索引、定义CSS样式等。
<meta charset="UTF-8">
<title>网页标题</title> //标题标记，设置网页标题
</head>
<body> //主体标记，里面是网页所要显示的内容
网页主体
</body>
</html>

最后到workspace文件中打开这个html文件。
右击网页主体，查看网页源代码（Ctrl+U）。

用HTML设置文本

基本结构

文本排版

段落标签<p></p>
换行标签<br/>
标题标签<h1><h6>
文字段落缩进标签<blockquote>//引用，块引用

设置文字列表

文字列表的作用公式有序地编排一些资源信息，使其结构化和条理化，并以列表的样式显示出来。
1）无序列表ul

1
2
3
4
<ul>
	<li>第一项</li>
	<li>第二项</li>
</ul>

2）有序列表ol

1
2
3
4
<ol>
	<li>第一项</li>
	<li>第二项</li>
</ol>

HTML标记与属性

在大多数HTML标记中都可以控制属性的显示，以帮助HTML标记进一步控制HTML文件。如内容的对齐方式、文字的大小、字体、颜色、网页的背景样式、图片的插入等等。基本语法为：
<标记名称 属性名1=“属性值” 属性名2=“属性值2” ….>

1）控制段落的水平位置：align属性 /ə’laɪn/

1
2
3
4
5
6
<body bgcolor = “#FFFF”>
<p align = “center”>
	第一行<br>
第二行<br>
</p>
</body>

2）设置背景颜色：bgcolor属性
（1）直接颜色表示，如red, blue
（2）用RGB表示十六进制，如#FFF00
3）设置文字的特殊样式

标签 特殊样式
<b></b> 文字以粗体方式显示
<i></i> 以斜体方式显示
<u></u> 以加下划线方式显示
<s></s> 以加删除线方式显示
<big></big> 以放大方式显示
<strong></strong> 以加强强调方式显示
<em></em> 以强调方式显示
<address></address> 显示电子邮件地址或网址
<code></code> 用来说明代码和指令

默认文字样式<br>
<b>以粗体方式显示</b></br>
<i>以斜体方式显示</i></br>
…

1） 设置文字的大小和颜色：font标签
<font color = “red” size = “10” face = “宋体”>font标签</font>

特殊文字符号

写法 意义
&lt; <
&gt; >
&copy; Copyright版权符号
<sup></sup> 上标
<sub></sub> 下标

在网页中使用图像

1
<img src= “图片地址”/>

相对路径VS绝对路径

相对路径

1
2
<img src= “当前路径.jpg”/>
<img src= “../上一层路径.jpg”/>

绝对路径：
直接写全部路径地址http://...

设置图片尺寸

1
<img width = “150” height = “200” src = http://.../>

为图像设置替换文本：alt属性

图片还没放进去之前，网页上显示的是一个x，设置文本来代替：

1
<img width = “150” height = “200” alt = “这是图片1” src = http://.../>

为图像设置标题：title属性

鼠标放到图片上会显示图片名称

1
<img width = “150” height = “200” title = “这是我” alt = “这是图片1” src = http://... />

建立超链接

文字超链接

点击文字链接，进入一个新的网页

1
<a href = “指向具体文字的地址”>文字地址</a>

图片超链接（需要嵌套）

点击图片链接，进入一个新的网站

1
<a href = “指向具体图片的地址”><img src = “图片1.gif”></a> //相对路径，先将图片拖到当前地址

以新窗口显示链接页面

1
<a href = “指向具体图片的地址” target = “blank”><img src = “图片1.gif”></a>

电子邮件链接

1
<a href = “mailto: pj2017@tsinghua.edu.cn”>请联系我</a>

框架之间的链接

框架是一种常用的网页布局工具，把浏览器的显示空间分为几个部分，每个部分都可以独立显示不同的网页。
<frameset></frameset>与body是同一级别的，需要将body标签去掉。
1） 将窗口分为左右两部分：cols

1
2
3
4
<frameset cols = “30%, *”> //frameset在HTML5中被废弃了
<frame> //放几个frame标签就代表分成几个部分
<frame>
</frameset>

2） 将窗口分为上中下三部分：rows

1
2
3
4
5
<frameset rows = “30%, 10%, *”>
<frame>
<frame>
<frame>
</frameset>

3） 框架的嵌套
//先分成左右两部分，右边又分为上下两部分

1
2
3
4
5
6
7
8
//先分成左右两部分，右边又分为上下两部分
<frameset clos = “30%, *”>
<frame src =”a.html”> 
<frameset rows = “50, *”>
<frame src = “b.html”>
<frame src = “c.html”>
</frameset>
</frameset>

4） 在框架中插入网页：src
先新建三个HTML页面：a.html，b.html，c.html
5）框架之间建立链接

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<frameset cols = “30%, *”>
<frame src = “a.html”>
<frame name = “main”>
</frameset>
</html>
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href = "b.html" target = "main">b</a><br/>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
b内容
</body>
</html>

嵌入式框架iframe

在一个网页中嵌套另一个网页

1
2
3
<body>
<iframe width = “900” height = “600” src = “http://...></iframe>
</body>

创建表格

表格的基本结构

1
2
3
4
5
6
7
8
9
10
11
12
13
<table border = “1”> //border是边框宽度
	<tr>
		<th>第一列</th> //表头
		<th>第二列</th>
	</tr>
	<tr> 
		<td>1-1</td> //列
		<td>1-2</td> 
	</tr> 
		<td>2-1</td>
		<td>2-2</td>
	</tr>
</table>

合并单元格

1）colspan列合并

1
2
3
4
5
6
7
8
9
10
11
12
<table border = “1”> 
	<tr>
		<th>第一列</th> 
		<th>第二列</th>
	</tr>
	<tr> 
		<td colspan = "2">1-(1+2)</td>
	</tr> 
		<td>2-1</td>
		<td>2-2</td>
	</tr>
</table>

2）rowspan行合并

对齐方式：align属性设置

1
2
3
4
<tr align = “center”> 
	<td>2-1</td>
	<td>2-2</td>
</tr>

表格背景和边框颜色:bgcolor属性

bgcolor

设定边距：用cellpadding和cellspacing属性

cellpadding：设置单元格内容与边框的属性。
cellspaceing：设置表格相邻单元格的边线的宽度。

1
2
3
<table cellpadding = “20px” cellspacing = “10”>
…
</table>

表单

表单是一个包含表单元素的区域，主要作用公式向服务器提交数据。

form表单

1
2
3
<form action = “a.jsp” method = “get”>
里面是具体的表单内容，可以提交到服务器
</form>

文本表单

1）文本框 text

1
2
3
<form action="a.jsp" method = "get">
用户名<input type="text" id="userName" name="userName"/>
</form>

1） 密码框 password
2） 文本域 textarea

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form action="a.jsp" method = "get">
<table>
	<tr>
		<td>用户名
		</td>
		<td><input type="text" id="userName" name="userName"/>
		</td>
	</tr>
	<tr>
		<td>密码
		</td>
		<td><input type="password" id="pwd" name="pwd"/>
		</td>
	</tr>
	<tr>
		<td colspan="2">
		<textarea id="desc" name="desc" rows="10" cols="30"></textarea>
		</td>
	</tr>
</table>
</form>

单选框 radio

单选框只能选一个。若默认选中用checked=”checked”

1
2
性别<input type="radio" name="sex"/>男
<input type="radio" name="sex" checked="checked"/>女

复选框 checkbox

复选框可以选中多个。

1
2
3
兴趣<input type="checkbox" name="hobby" checked="checked"/> 唱歌
<input type="checkbox" name="hobby"/> 跳舞
<input type="checkbox" name="hobby"/> 游泳

下拉框 select, option

1
2
3
4
5
年级
<select id="grade" name="grade">
	<option value="1">一年级</option>
	<option value="2">二年级</option>
</select>

按钮

1）提交按钮 submit
2）普通按钮 button

1
2
3
4
5
6
<tr>
	<td><input type="submit" value="登录"/> //提交后会跳转到一个新页面
	</td>
	<td><input type="button" value="重置"/>
	</td>
</tr>

文件上传 file

1
<input type="file" id="f" name="f"/>

块

大容器 div

元素是块级元素，会换行，用于组合其它HTML元素。 
1
2
3
4
5
<div>元素是块级元素，会换行，用于组合其它HTML元素。
<div id="d1" style="border: 1px red solid">
<h1>呵呵</h1>
<h2>哈哈</h2>
</div>

小容器 span

元素是内联元素，不会换行，可以用作文本的容器。

1
2
<p>这是一个<span style="color: red">段落</span>
</p>