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>