html笔记

MaxOmnis

浏览: 496852 次
性别:
来自: 武汉

最近访客更多访客>>

xx5333

无为我是谁

sunshine217

smzyyyjyrctl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML 浏览器应用服务器中国移动框架

格式标签
<body>标签的属性

Text属性：用于设定整个网页中的文字颜色。
Link属性：用于设定一般超链接文本的显示颜色
Alink属性：设定鼠标移动到超链接上时，超链接文本的显示颜色
Vlink属性：设定已经访问过的超链接文本的显示颜色
Background属性：用于设定背景墙纸所用的图像文件,gif,jpeg文件
Bgcolor属性：设定背景颜色，当已设定背景墙纸时，这个属性失去作用，除非墙纸具有透明作用。
Leftmargin属性：设定网页显示画面与浏览器窗口左边边沿的间隙，单位为像素
Topmargin属性：设定网页显示画面与浏览器窗口上边边沿的间隙，单位为像素

<nobr></nobr>禁止文本过长而自动换行
<blockquote><blockquote>sdfsfsdfffffffffffffffffffffffffffffff</blockquote></blockquote>(将缩进两次)将标签内的文本内容缩进显示，可以嵌套使用

<marquee></marquee>使文本或者图片在页面上动画的显示，比如从右边一直运动到左边
<marquee behavior="slide" >---------------behavior="slide"----------------</marquee>
<marquee behavior="scroll">---------------behavior="scroll"----------------</marquee>
<marquee behavior="alternate">--------------- behavior="alternate"----------------</marquee>
<marquee behavior="alternate" direction="up">-----behavior="alternate" direction="up"-----</marquee>
<marquee behavior="alternate" direction="left">-----behavior="alternate" direction="left"-----</marquee>
<marquee behavior="alternate" direction="down">-----behavior="alternate" direction="down"-----</marquee>

<dl><dt><dd></dl></dt></dd>


<ol>有序列表，1，2，3，a,b,c等
<ul>创建无序列表,以原点，星号等排序
<li>只能嵌套在<ol><ul>中作为每一行
<!--<p>中国城市</p>
<ol>
<li>武汉</li>
<li>上海</li>
<li>北京</li>
</ol>

<p>美国</p>
<ul>
<li>芝加哥</li>
<li>纽约</li>
</ul>

<pre></pre>对文本进行与格式化处理，标签内的内容将按.html文件中的排版方式显示

文本标签
<h1>….<h6>越来越小
<sub></sub>建立上标
<sup></sup>建立下标
<tt></tt>以打印字体显示文本
<cite></cite>以引用的方式显示文本
<em></em>以强调的方式显示文本
<strong></strong>以加重的方式显示文本
<b></b>粗体
<i></i>斜体
<u></u>下划线
<font face=”字体” size =”大小（值在-7道+7之间）” color=”颜色”></font>

超链接
<a href=mailto:zj19880814@126.com?subject=”咨询”>我要留言</a>
会启动本地的邮件程序，给zj19880814@126.com邮箱发送主题为咨询的邮件
HTML进阶-超级链接标记A (包括target属性详解)
超级链接<a>标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像，这已是众所周知了，但关于它的语法结构可能有点鲜为人知，而要用活它则必须了解其语法结构。<a>标记的基本语法结构是：
<a
class=type
id＝value
href＝reference
name＝value
rel=same|next|parent|previous
rev＝value
target＝window
style＝value
title=title
onclick＝function
onmouseout＝function
onMouseOver=function>连接</a>
从标记的语法结构可以看出，在设定一个超级链接时有很多参数可供选择，以实现不同的链接效果，这有点出乎意料吧？！
TARGET详解:
1._blank      <a href="example.html" target="_blank">example</a>        浏览器会另开一个新窗口显示example.html文档
2._parent     <a href="example.html" target="_parent">example</a>      指向父frameset文档
3._self          <a href="example.html" target="_self">example</a>           把文档调入当前页框
4._top          <a href="example.html" target="_top">example</a>            去掉所有页框并用document.html取代frameset文档
小技巧1：使别人的页框不能引用你的网页       在文件头加：<base target="_top">
小技巧2：在当前页打开连接或做刷新，提交到当前页在文件头加：<base target="_self">
　　其中class和id选项：用于设定链接点所属的类型和分配的ID号，通常不加以设定。最常用的两个参数是href和name。其中href是hypertext reference的缩略词，用于设定链接地址。链接地址必须为url地址，如果没有给出具体路径，则默认路径和当前页的路径相同。链接到的文件也分为几种情况：如果为HTML文件，则在当前浏览器中直接打开；如果为可执行文件（.exe文件），则直接执行或下载，我们提供下载的文件就是用它的这种特性做的；如果为文本文件如word格式的文件，则在浏览器中打开此文件，并可以进行编辑加工。
　　rel：表示设定链接的关系：rel=same表示待链接的文件与此文件相同，rel=next表示待链接的文件为下一页，rel＝parent表示本文件为待链接文件的父文件，rel=previous则表示待链接的文件为上一页。
　　rev：则用于设定反向链接。
　　target：是在采用帧窗口的情况下设定链接到哪一个窗口，还有target="_bank"是表示新开一窗口打开网页。
　　title：用于设定链接点被选到时显示的标题。
　　onclick：对应于一个事件，当链接点被点击后将触发这个事件，执行对应的子程序。
　　onmouseover：与onclick类似，对应的事件在鼠标移到链接点上时被触发。
　　
　　举几个例子：
        <a href="index.htm">回到主页</a>
        <a href="sound.wav">播放语音文件</a>
        <a href="javascipt.open()">执行对应的程序</a>
        <a herf="document.doc">打开对应的文档进行加工</a>
应用技巧
　　1、提供下载文件
　　有不少网友来信问，提供下载的效果怎么做。实际上仍然是做一个超级链接，不过供下载的文件必须上传到网站上。例：有一个“网页技巧”的文件包供下载，文件名是“homepagejq.zip”且已上传到网站了，则这个链接的代码可以这样写：<a href="homepagejq.zip">点击这里下载“网页技巧”文件包</a>。
　　2、在新窗口中打开链接的网页
　　设定“target”的值为“_blank”。例：新开窗口打开网页“aboutme.htm”。产生该效果的代码是：<a href="aboutme.htm" target="_blank">关于我......</a>。
　　3、鼠标移到链接，显示一行说明文字
　　设定“title”参数值，即可获得这种效果。例：当鼠标移到“黄山村夫”这个链接上时，显示说明“这是一个介绍网页制作技巧的专业网站”。这个链接的代码是这样的：<a href="hscf.htm" title="这是一个介绍网页制作技巧的专业网站">黄山村夫</a>。
　　4、鼠标移到一个链接上弹出一个窗口
　　这是设定 href="其它网页.htm" onmouseover="alert('鼠标悬停效果演示！')">链接</a>。用类似的方法可以制作当鼠标按下后弹出提出示窗口、当鼠标离开时弹出提示窗口的效果。
　　5、链接到本页的指定内容
　　要实现链接到本页的某一部分内容上（也就是“文件内跳转”），必须用参数name指定链接点的名称。选定一块文本，可以用name参数为其命名，以备链接所用。所谓同一个文件内的跳转是指当读者在阅读一个很长的文件的时候，若只对某部分的内容感兴趣，可以采用跳跃式的阅读方式。其基本格式是：
<a href＝"＃链接点名称">第二部分</a>第一部分内容......
...........................................
<a name＝"链接点名称"></a>第二部分实际内容......
...........................................
这样当你点击“第二部分”这个超级链接后，就会自动转移到“第二部分实际内容”这个地方来。“name”参数所定义的链接点名称可以随意取，但链接的“href”参数中的链接点名称必须与其一致，不要忘记在前面加上“#”。
　　6、链接到其它页面的指定内容位置
　　方法与上例类似，但在“href”参数中的链接点名称前要加上网页的文件名。例：有两个网页page1.htm和page2.htm ，每页均有两部分内容，现要在page1.htm中制作一个超级链接，按下该链接后将转到page2.htm的第二部分内容上。那么我们可以这样做，首先在page2.htm第二部分内容开始的地方写上这样一句代码：<a name="链接点名称"></a>；在page1.htm中写上这样一个链接代码：<a href="pagw2.htm#链接点名称">page2 的第二部分内容</a>。
　　7、链接到E_mail
　　点击一个超级链接后，将启动客户机上的电子邮件管理软件给你写信。例这行代码：<a href="mailto:web@webjx.com">请给我写信</a>。一旦你点击了“请给我写信”这个链接，将自动启动电子邮件管理软件（如OE）的写信功能，并已把邮件地址加在了收信人的地址栏里了。
　　链接不仅可以以文本作载体，也可以以图象作载体，而且可以以图片的某一部分作载体，且都能实现上述这些效果，方法也相同，所不同只是载体，也就是链接的两对方括号中间的那部分，所以不再另举例了。

<a>的target属性：1.值为_blank在新的窗口中打开网页
同一个页面跳转：
<a href=”#para1”>第一个段落</a>

<a name=”para1”></a>。。。。。段落内容。。。。。。。
<a href=”#”>…</a>与<a href=””>…</a>的区别：<a href=””>…</a>打开的是该网页所在的服务器的根目录。
URL
url基本组成：协议，主机名，端口号，资源名
http协议的默认端口号是80
http://www.baidu.com/index.jsp?name=zhangjun&password=123
                                  参数
URL编码规则：
*将空格转换为加号(+)
*对0-9，a-z,A-Z之间的字符保持不变
*对于所有其他的字符，用这个字符的当前字符集编码在内存中的十六进制格式表示，并在每个字节的前加上一个百分号(%)，如字符“+”用%2B表示，字符“=”用%3D表示，每个中文字符在内存中占用两个字节，字符“中”用%D6%D0表示，字符“国”用%B9%FA表示
*对于空格也可以直接使用其十六进制编码方式，%20表示

说明：如果确信URL串的特殊字符没有引起使用上的歧义或冲突，你也可以对字符不进行编码，而是直接传递给服务器。

图像标签
<img src=”my.gif”>其他属性
..alt鼠标经过，或者图片无法显示的时候的文字提示
.border边框粗细
..align图像与文本的对齐方式

表格标签 <table>
<table>的属性：
Border:为边框的粗细
Bordercolor：设置边框颜色
Bordercolorlight设置边框明亮部分的亮度，只有在border值大于或等于1才有效
Bordercolordark:设置昏暗部分的颜色
Cellspacing:设置表格中单元格之间的大小
Cellpadding:设置单元格与单元格中的内容的距离大小

<tr></tr>行标签（只能在table中使用，在其他表情中无效）：
属性：align设置该行中所有的单元格水平位置，valign设置垂直位置，bgcolor背景色。
如果<tr>与<table>设置了相同大的属性，但值不同，会以<tr>为准。

<td></td>列标签（在<td>中使用）
属性：height列的高度，colspan设置单元格所跨站的列数，rowspan设置单元格跨站的行数。

<th></th>用法与<td>相同，<th>显示效果有点区别

<caption></caption>设置表格的标题，对表格进行概括性的说明，必须紧随<table>之后

框架标签：
分帧的作用：
将一个浏览器文档窗口分隔成多个窗口，每个窗口中显示一个独立的网页

帧标签<frameset>
框架集标签<frame>
*<frameset> 是用以划分框窗，每一框窗由一标记所标示，<FRAME>必须在 <FRAMESET> 范围中使用
*<frameset>不能包含在<body>中以及<body>的任何子标签中,并且使用<frameset>标签的网页不能使用<body>标签
*<frameset>中也不能使用<body>等标签，因为<frameset>标签只是用于划分网页。
*<frameset>的 rows cols属性，定义的时候至少必须有一个，若没有，只会显示第一个<frame>中的网页。若定义了rows cols属性就会显示不只一个网页了。

<frameset>属性：
Cols:水平分割，有多少个值就有多少个水平分割，就有多少个<frame>标签对
Rows;垂直分割
Frameborder:是否显示边框，取值为0，1，no,yes
Border:边框的粗细
<html>
<frameset rows="20%,20%,*" cols="30%,30%,*">
<frame>
<frame>        三个横向分割，三个垂直分割，就有九个区，就要用九个<frame>
<frame>
<frame>
<frame>
<frame>
<frame>
<frame>
<frame>
</frameset>
</html>
<frame>标签：用来定义具体的窗口
属性：src:插入的.html文件的位置
,name:给<frame>分区定义的名字，在<a>标签的target时可以使用
,scrolling：是否用滚动条
.noresize:用户是否可以调动分区的大小，
<a href=””>标签的target的属性值可以是html定义的值，也可以是<frame>的name值，如果target的值不存在，那么超链接的目标网页将在一个新的窗口中显示。如果指定的值为<frame>的name，则窗口将在该<frame>中显示。

       该.html文件由三个.html文件组成，框架集将其分成三个分区，分别右击三个分区得到的分别是三个分区的scr的.html文件的源码。

Html.html
<html>
<frameset rows="20%,*" >
<frame src="top.html">
<frameset cols="20%,*">
<frame src="left.html">
<frame src="right.html" name="right">
</frameset>
</frameset>
</html>

Top.html
<html>
<body>
网页头
<body>
</html>

Right.html
<html>
右边网页
</html>

Left.html                                      <frame src="right.html" name="right">

<html>
左边网页<br>
<a href="http://www.baidu.com" target="right">baidu</a><br>
<a href="http://www.google.com">google</a><br>
</html>

<noframes>用来在不支持<frameset>标签的浏览器中显示图像和文本信息。如果支持该标签内的内容不会在网页中显示。

<html>
<frameset rows="20%,*" >
<frame src="top.html" noresize>
<frameset cols="20%,*">
<frame src="left.html">
<frame src="right.html" name="right">
</frameset>
</frameset>
<noframes>
<body>
这是一个框架窗口，但是你的浏览器不支持！
</body>
</noframes>
</html>

<iframe>标签，实现页中页的效果
…..html.html,top.html,left.html不变，将right.html改为
Right.html
<html>
右边网页
<a href="http://www.iteye.com" target="nei">页中页的效果</a>
<iframe name="nei" frameborder=0>
</iframe>
</html>

<form>标签及其属性
Target:指定服务器返回结果显示的目标窗口，或目标帧
Title:用来设置当网站访问者的鼠标在表单的任一位置停留过几秒时，浏览器用黄色小浮标显示的文本（如表单的名称或描述）
Enctype:指示浏览器使用哪种编码方法将表单数据传送给服务器，该属性可以有两种取值：application/x-www-form-urlencoded(默认值)和multipart/form-data(上传文件时)需要改为此值。

表单字段元素：
*<input type=”submit” value=”提交”/>提交按钮只能放在<form>中
*<input type=”reset”    value=”重置” />所有表单中的值恢复到初始状态
*<input type=”text”     name=”name” size=5   value=”zhangjun”(默认值) maxlength=5（最大长度） readonly disabled(文本中的值不能提交给服务器，字体变成灰色)       />
*<input type=”checkbox” name=”check” value=” “ >复选框
   属性:checked默认选项
*<input type=”radio” name=”” value=”nv”>女</input>单选按钮,女只是提示作用，nv才是其值
*<input type=”hidden” >隐藏，在页面中不显示，隐藏提交
*<input type=”password”>密码
*<input type=”button”>按钮
*<input type=”file”>上传 enctype=” multipart/form-data”
*<input type=”image” src=”fadf.gif”>当图片被按了后，图片左边和表单中的所有有数据会被提交，不用按按钮提交页可以.
<select ><option>AAA</option>BBB<option></option></select>下拉列表
<select>属性：
size默认显示一个值，默认只能提交一个值，
multiple:可以提交多个值
<option>属性：
Value:如果没有给value赋值，则会提交<option></option>中间的值给表单
Selected

<meta>标签
有两种类型的<meta>，用不同的属性名来划分，这两种属性名为：name,和http-equiv
   --<meta name=”某个设置值” content=”对该设置值进行具体补充说明的信息”>
   --<meta http-equiv=”某个设置值” content=”对该设置值进行具体补充说明的信息”>
*name属性用于在网页中加入一些关于网页的描述信息，例如，网页的关键字（可提供搜索引擎查找，）网页描述信息等。
   *http-equiv属性用于在html文档中模拟http协议的响应消息头，例如：告诉客户端浏览器是否缓存该网页，用什么样的字符集来显示网页内容，格多长时间自动刷新网页等等。

Meta标签的name属性设置：
*keywords
例如：<meta name=”keywords” content=”vc ,java,培训” >
*description
*robots
此时的content的值可以有：index(默认)，noindex,follow,nofollow,all,noe
*generator 编辑网页的软件的名称
*authot 作者信息
*copyright 版权声明

<meta>标签的http-equiv属性设置
*content-type   告诉浏览器使用gb2312编码来产看网页文档
<meta http-equiv=”content-type”   content=”text/html;charset=gb2312” >
*refresh 用于告诉浏览器在在指定的时间后跳转到其他网页或者刷新网页
例如：A.<meta http-equiv=”refresh” content=”1; url=http://www.baidu.com “ >
1秒后跳转到baidu

B. <meta http-equiv=”refresh” content=”1”>
1秒后刷新网页

*expires 设置网页的过期时间，如果过期，则客户端需要从新到服务器上下载该网页
例如：<meta http-equiv=”expires”   content=”mon,12 may 2001 00:20:00 gmt”>将content设置为0，则客户端浏览器不能保存该网页

*windows-target
例如：要防止自己的网页被别人当做一个frame页面调用，可以使用<meta http-equiv=”windows-target” content=”-top”>

*pragma
禁止客户端缓存页面
<meta http-equiv=” pragma”   content=”no-cache” >同效
<meta http-equiv=”cache-control”   content=”no-cache” >

*page-enter和page-exit（特殊效果，像百叶窗那种，不是所有的浏览器都支持）
浏览器刚进入页面或者离开页面时，页面的效果。
例如：
<meta……..http-equiv=”page-enter” content=”revealTrans(transition23 ,duration=1.000” >
                                                             效果持续的时间

                           页面效果，后面的数字代表效果，值不同，效果不同

头元素
位于<head></head>标签内的标签
<link>,<base>,<title>,<meta>
<base >标签用于指定网页中的超链接的基准地址，以改变网页中所有使用相对地址url的基准地址
例如：
<base>标签通常的使用形式如下：
<base href=http://www.it314.com/techworld/ target=”_blank”>
作用：
   如果要超链接<a href=http://www.it314.com/techworld/index.jsp>,如果用上面的<base>则，只需在超链接时写<a href=”index.jsp”></a>就可以了。
如果<base>中加入了target属性,则网页中的所有<a>都不用设置target了。

<link>
属性：rel与rev必须有一个      样式表
<link rel=”stylesheet” type=”text/css” href=”url”>

<link   rel=”shortcutlcon”   href=”favioc.ico”>在地址栏中显示图标

这两个属性的意思分别是：从源文档到目标文档的关系；从目标文档到源文档的关系。这里的源文档可以理解为链接所处在的当前文档，而目标文档也就是这个链接将要打开的文档。这下我们应该清楚了，其实rel与rev是一种文档之前的链接关系，而并非是与浏览器相关的如何显示目标文档的属性。

分区标签
*<div></div>标签可以组合其他的html元素，但不能嵌套在段落元素中，
例如：<p><div>sfsdfsdfsdfsffffffffffffffff</div></p>的结果是不确定的。

*<span></span>要将文本“zhangjun”中的前半部分“zhang”单独选取出来，就可以使用
例如：<span>zhang</span>jun

举例：
   <div id=”client” class=”client” >
              <span class=”name”>name:</span>zhangjun
               <span class=”phone”>telephone:</span>2343434
              <span class=”email”> Email:</span> dfafda@qq.com
   </div>

分享到：