URL, URI, URN
URL: 统一资源定位符: Uniform Resource Locator
URN: 持久可用的资源标准名称 Uniform Resource Name , 比如邮箱
URI: Uniform Resource Identifier : 包含URL和URN
文字写在图片上:
<html>
<head>
<title>背景图片</title>
</head>
<body background="qin.jpg">
我写在图片上面了哦!
</body>
</html>
- 设置锚点:
- 05设置test锚点, 06可以链接到这个锚点的位置:
05.html:
<html>
<head>
<title>anchor</title>
</head>
<body>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
<a name="test">我是一个anchor哦! </a>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
</body>
</html>
06.html:
<html>
<head>
<title>link</title>
</head>
<body>
<a name="01">页头</a>
<br>
<a href="05.html#test">05.html</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#01"> 本页中的01 </a>
</body>
</html>
回到页首的实现:
<html>
<head>
<title>anchor</title>
</head>
<body>
<a name="test">我是一个anchor哦! </a>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
我会努力的!<br>
<a href="#test">回到页首</a>
</body>
</html>
- 相对路径:
<html>
<head>
<title>路径问题</title>
</head>
<body background="qin.jpg">
<img src="images/nm.jpg"></img>
<br>
<img src="http://www.bjsxt.com/images/bar/top.jpg"></img>
</body>
</html>
字体:
<html>
<head>
<title>字体</title>
</head>
<body>
<h1>第一级</h1>
<h2>第二级</h2>
<h3>第三级</h3>
<h4>第四级</h4>
<h5>第五级</h5>
<h6>第六级</h6>
</body>
</html>
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>文字显示效果</title>
</head>
<body>
<font color="red" size="5">红色的字, 大小是5 </font>
<br>
<font color="#0000ff" size="2">蓝色的字, 大小是2 </font>
<br>
<font size=6>
<b>黑体</b>
<br>
<i>斜体</i>
<br>
<u>下划线</u>
<br>
<s>中划线</s>
<br>
<blink>闪烁</blink>
<br>
数组下标<sub>5</sub>
<br>
次方<sup>3</sup>
</font>
</body>
</html>
- 特殊字符:
< <
> >
® 注册商标
& &
空格
© copyright
™ 商标TM
" "
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>字体</title>
</head>
<body>
这本书的名字是<<如何在麦当劳白吃白喝>><br>
答案: 找个"网友"替你&付账!<br>
©™ ®
</body>
</html>
文字的布局:
<p></p>分段显示
<div> 分层显示
<span>行内块显示
<ul> 列表 和li一起使用
<ol>数字列表 和li一起使用
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>文字布局</title>
</head>
<body>
<p>这里新起一段, 谈谈中国古代文化, 话说乾隆年间, 有个小朋友...</p>
<div>这个小朋友名字叫做蓝色草原, 你可能回文,好奇怪的名字啊, 说起这个名字来, 有一个来历...</div>
<ul>
<li>来历一: 她爸爸起的
<li type="circle">来历二:瞎编的
<li type="square">来历三: 呵呵, 为什么要告诉你
</ul>
<ol>
<li>来历一:她爸爸起的
<li>来历二:瞎编的
<li>来历三: 呵呵, 为什么要告诉你
</ol>
我换行 , 我自动换行, 我换行, 我自动换行, 我换行, 我自动换行,我换行, 我自动换行,我换行, 我自动换行,我换行, 我自动换行,
<br>
<br>
<br>
<nobr>我就不换行!我就不换行!我就不换行!我就不换行!我就不换行!我就不换行!我就不换行!我就不换行!我就不换行!我就不换行!</nobr>
</body>
</html>
- 对齐:取值: left center, right, top, middle, bottom
还有<center></center>单独构成
<h1 align="left/center/right">
<divalign="left/center/right">
<table align="left/center/right">
- 图片<img src="" align="" alt="" border="">
src: 图片路径, 使用相对路径
alt:图片无法显示时显示的文字
border:表框的厚度
align: 同上
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head><title>图片</title></head>
<body>
<center>
<img src="images/qin.jpg" alt="有qin, 我是不会显示出来的" border=3>
<br>
<img src="images/ddd.jpg" alt="没有图片啊~" border="8">
</center>
</body>
</html>
<hr align="left/center/right">
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>对齐</title>
</head>
<body>
<h1 align="center">中间中间</h1>
<div align="center">div中间, 如果加上表格就看的更清楚些</div>
<center>***中间***</center>
</body>
</html>
- 表格, 表单:(重点!!!)
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head><title>表格</title></head>
<body>
<table width="768" align="center" border="2">
<tr>
<th width="30%" align="center">编号</th>
<th width="30%" align="center">名称</th>
<th align="center">性格</th>
</tr>
<tr>
<td valign="top" height="50">1 </td>
<td valign="middle">小猫咪</td>
<td valign="bottom">温顺</td>
</tr>
<tr>
<td rowspan="2" colspan="2"><font color="red">我是狮子</font></td>
<td>暴躁</td>
</tr>
<tr>
<td>十分暴躁!</td>
</tr>
<tr>
<td align="left">3</td>
<td align="left">蛇</td>
<td align="left">冷酷</td>
</tr>
</table>
</body>
</html>
表单: form的属性: method(get, post), acton
<form method="post" action="user.jsp"> </form>
get和post的区别:
get发送较少数据, 显示在url中
post发送长度无限制, 不会显示在url中
action获取提交的表单里的数据
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head><title>表单</title></head>
<body>
<form action="01.jsp" method="get">
<table width="750" align="center" border="2">
<tr>
<td colspan="2" align="center">用户注册</td>
</tr>
<tr>
<td width="20%">用户名: </td>
<td>
<input type=text name="username" size="30" maxlength="10">
</td>
</tr>
<tr>
<td>密码: </td>
<td>
<input type=password name="pwd" size="15" maxlength="12">
</td>
</tr>
<tr>
<td>密码: </td>
<td>
<input type=password name="pwd2" size="15" maxlength="12">
</td>
</tr>
<tr>
<td>性别: </td>
<td>
<input type=radio name="sex" value="male" checked>男
<input type=radio name="sex" value="female">女
</td>
</tr>
<tr>
<td>你感兴趣</td>
<td>
<input type="checkbox" name="interest" value="vc" checked>VC
<input type="checkbox" name="interest" value="vb">VB
<input type="checkbox" name="interest" value="vfoxpro">VF
<input type="checkbox" name="interest" value="vjava">VJ
<br>
<input type="checkbox" name="interest" value="bc">BC
<input type="checkbox" name="interest" value="cobol">CO
<input type="checkbox" name="interest" value="java">JA
<input type="checkbox" name="interest" value="delphi">Delphi
</td>
</tr>
<input type="hidden" name="interest" value="jsp">
<tr>
<td>你感兴趣: </td>
<td>
<select name="interest2" size=4 multiple>
<option value="vc" selected>VC</option>
<option value="vb">VB</option>
<option value="vfoxpro">VF</option>
<option value="vjava">VJ</option>
<option value="bc">BC</option>
<option value="cobol">CO</option>
<option value="java">JA</option>
<option value="delphi">Delphi</option>
</td>
</tr>
<tr>
<td>你来自</td>
<td>
<select name="province">
<option value=0 selected>请选择</option>
<option value=34>安徽</option>
<option value=11>北京</option>
<option value=50>重庆</option>
<option value=35>福建</option>
<option value=62>甘肃</option>
<option value=44>广东</option>
<option value=45>广西</option>
<option value=52>贵州</option>
<option value=46>海南</option>
<option value=13>河北</option>
<option value=23>黑龙江</option>
<option value=41>河南</option>
<option value=42>湖北</option>
<option value=43>湖南</option>
<option value=32>江苏</option>
<option value=36>江西</option>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea rows="12" cols="80" name="intro" wrap="hard"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="OK">
</td>
</tr>
</table>
</form>
</body>
</html>
为了获取结果, 把action的处理换成04.html, 就会出来连接里的地址:
file:///D:/html/04.html?username=sdfs&pwd=dfsdf&pwd2=dfsdfsfd&sex=male&interest=vc&interest=vb&interest=jsp&interest2=vc&interest2=vfoxpro&province=45&intro=dsfdsf
- 框架, 注意没有body
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head><title>Frame</title></head>
<!--<body>-->
<frameset cols="300,40%,*">
<frame name="left" src="05.html" noresize>
<frame name="middle" src="16.html">
<frame name="right" src="17.html">
<!--</body>-->
</html>
左, 右上, 右下
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head><title>Frame</title></head>
<!--<body>-->
<frameset cols="20%,*">
<frame name="left" src="05.html" noresize>
<frameset rows="40%,*">
<frame name="righttop" src="16.html">
<frame name="rightbottom" src="17.html">
</frameset>
<!--</body>-->
</html>
链接,表单与框架
target值:
_blank: 新窗口
_self: 本窗口
_parent: 父窗口
_top: 浏览器窗口
20.html:
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head><title>Frame</title></head>
<!--<body>-->
<frameset cols="20%,*">
<frame name="left" src="20-1.html" noresize>
<frame name="right" src="20-b.html">
</frameset>
<!--</body>-->
</html>
20-1.html:
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head><title>Frame说明</title></head>
<body>
<center>
<font size="5" color="red">我是20-1
</center>
</body>
</html>
20-b.html:
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head><title>Frame</title></head>
<!--<body>-->
<frameset rows="40%,*">
<frame name="righttop" src="20-2.html" noresize>
<frame name="rightbottom" src="20-3.html">
</frameset>
<!--</body>-->
</html>
20-2.html
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head><title>Frame说明</title></head>
<body>
<center>
<font size="5" color="blue">我是20-2
</center>
</body>
</html>
20-3.html
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head><title>Frame说明</title></head>
<body>
<a href="20-1.html">链接到20-1</a>
<br>
<a href="20-2.html">链接到20-2</a>
<br>
<a href="20-1.html" target="righttop">链接到20-1, 但在右上窗口显示</a>
<br>
<a href="20-1.html" target="_parent">链接到20-1, 但在父窗口显示</a>
<br>
<a href="20-1.html" target="_top">链接到20-1, 但在最上层窗口显示</a>
<br>
<a href="20-1.html" target="_blank">链接到20-1, 但在新窗口显示</a>
<br>
</body>
</html>