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="data: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>

　　

  • 特殊字符:

&lt; <

&gt; >

&reg  注册商标

&amp; &

&nbsp;  空格

&copy;  copyright

&trade;  商标TM

&quot;   "

<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>字体</title>
</head>
<body>
这本书的名字是&lt;&lt;如何在麦当劳白吃白喝&gt;&gt;<br>
答案: &nbsp;&nbsp;&nbsp;&nbsp;找个&quot;网友&quot;替你&amp;付账!<br>
&copy;&trade; &reg;
</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="data:images/qin.jpg" alt="有qin, 我是不会显示出来的" border=3>

			<br>

			<img src="data: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>

　　

　　

　　

HTML--绝对路径, 表格,表单, 框架的更多相关文章

  1. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  2. Flask10 登录模块、表单框架、表单渲染、表单验证、bookie、请求之前钩子、g对象、编写装饰器

    from flask import Flask from flask import request from flask import render_template from flask_wtf i ...

  3. HTML表格表单综合——用户注册表

    今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  4. css表格表单和统筹

    css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...

  5. 4 htmlCSS&图像&表格&列表&表单&框架&颜色

    CSS: Cascading Style Sheeet   层叠样式表  cascadig:瀑布 html:网页的结构 css:网页的外观 JavaScript:网页的动作 CSS的使用方式: 内联样 ...

  6. 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容

    01 HTML HTML :Hypertext Markup Language   超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...

  7. 《锋利的JQuery》读书要点笔记4——表格表单的操作

    第五章 jQuery对表单,表格的操作以及更多应用 这章主要以一些具体案例讲解了jQuery对表单,表格的常用操作,以及一些常见的jQuery应用,用到的都是上几章说的东西.下面就以具体的案例来展开. ...

  8. 【html学习整理】meta,img,表格,表单

    meta标签: 作用: 给搜索引擎用 . 告诉浏览器是什么编码 <meta charset="UTF-8"> <meta name="keywords& ...

  9. Bootsrap表格表单及其使用方法

    bootstrap的使用 bootstrap中的js插件依赖于jQuery 因此jQuery要在bootstrap之前引入 参考官网标准引入方法和引入样式 排版 标题 Bootstrap和普通的HTM ...

随机推荐

  1. EL(表达式语言）

    EL(Expression Language):目的是为了简化Jsp页面的语言,使页面看起来更加简洁 基本的语法特点 以“${"开头,以”}“结束 一 与低版本的环境兼容----禁用EL ( ...

  2. HTML+CSS Day06 超链接的样式与搭配

    1.格式 a:link    {} 普通的.未被访问的链接 a:visited {}  用户已访问的链接 a:hover  {} 鼠标指针位于链接的上方 a:active{} 链接被点击的时刻 2.常 ...

  3. split和join函数的比较

    关于split和join方法 处理对象字符串.split拆分字符串,join连接字符串 string.join(sep): 以string作为分隔符,将seq中的所有元素(字符串表示)合并成一个新的字 ...

  4. gpg XXX NO_PUBKEY XXX

    手动添加PPA源遇到找不到公钥的情况 1. gpg --keyserver keyserver.ubuntu.com --recv-keys XXX gpg --armor --export XXX ...

  5. 闭包 -> map / floatMap / filter / reduce 浅析

    原创: 转载请注明出处 闭包是自包含的函数代码块,可以在代码中被传递和使用 闭包可以捕获和存储其所在上下文中任意常量和变量的引用.这就是所谓的闭合并包裹着这些常量和变量,俗称闭包.Swift 会为您管 ...

  6. JS-DOM操作应用高级（三）

    appendChild   1.先把元素从原有的父级上删除    2.添加到新的父级 <title>无标题文档</title> <script> window.on ...

  7. Ubuntu下使用rpm 软件包

    Ubuntu的软件包格式是deb,如果要安装rpm的包,则要先用alien把rpm转换成deb. sudo apt-get install alien sudo alien xxxx.rpm #将rp ...

  8. laravel 报错 mcrypt_decrypt(): Key of size 11 not supported by this algorithm. Only keys of sizes 16, 24 or 32 supported

    修改app/config/app.php文件 将key设置成长度为16,24,32的字符串

  9. shell输出不换行符合换行符

    输出不换行符 例如 echo "Hello\c" echo " World" //Hello World 输出换行符 echo "username\n ...

  10. 2016沈阳网络赛 odd-even number

    odd-even number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...