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. 转: Windows下安装Oracle Database 12c Release 1(12.1.0.2.0) - Enterprise Edition

    http://www.cnblogs.com/xqzt/p/4395053.html Windows下安装Oracle Database 12c Release 1(12.1.0.2.0) - Ent ...

  2. OpenGL ES着色器语言之变量和数据类型（二）（官方文档第四章）

    OpenGL ES着色器语言之变量和数据类型(二)(官方文档第四章) 4.5精度和精度修饰符 4.5.1范围和精度 用于存储和展示浮点数.整数变量的范围和精度依赖于数值的源(varying,unifo ...

  3. Apache 的常见问题

    Apache "No services installed"问题的处理以及Apache提示 the requested operation has failed而无法启动 安装完 ...

  4. Java BigDecimal Class

    Using BigDecimal to perform precise calculations with floats. BigDecimal is a class type. So declare ...

  5. RxSwift 之官方文档

    RxSwift 官方文档结构 Introduction: Subjects Transforming Observables Filtering Observables Combining Obser ...

  6. POJ 2289 Jamie's Contact Groups

    二分答案+网络最大流 #include<cstdio> #include<cstring> #include<cmath> #include<vector&g ...

  7. thinkphp整合系列之rbac的升级版auth权限管理系统demo

    权限管理基本是作为网站的标配了: 除非是像博客这类个人使用的:否则权限管理的重要性不言而喻: 今个就来写写auth权限管理: thinkphp已经内置了auth权限类位于:/ThinkPHP/Libr ...

  8. zf-关于业务量统计柱形图（上月份的没显示出来的解决办法）

    首先要想到是存储过程里面除了问题,导致没有显示出来 因为本年度和本季度 是能显示出来的 所以后台代码是没问题的 存储过程里 有个tj_type  这个tj_type有3个值 1 代表本年度 2 代表本 ...

  9. wireshark 使用技巧

      Wireshark使用技巧-GeoIP显示IP地理位置     在使用Wireshark时,有的时候需要知道抓取的报文中某个IP地址的具体地理位置,笨一点的方法是将IP地址复制,然后通过一些软件或 ...

  10. msf常用命令

    msf > search -r great -t exploits search命令查找rank为great的exploit msf > setg RHOST 192.168.1.102 ...