Html标签使用笔记

 HTML文本标签用于设置文本的样式及显示属性,可以让浏览器按照某种格式显示文本。

下面主要介绍几下几种常用的文本标签:

1.<b>…</b>标签对指定文字为粗体字。
<i> …</i>标签对指定文字为斜体字。
<u> …</u>标签对指定文字为带有下划线。
<tt> …</tt>标签对指定文字为打字机效果。
<sup> …</sup>标签对指定文字为上标。
<sub> …</sub>标签对指定文字为下标。
<em> …</em>标签对指定对某段文字进行强调,通常用斜体字显示出来。
<strong> …</strong>标签对对文本进行强调,通常用粗体字显示出来。

 

2.字体标签<font>

Font标签可以设置文档的字体,通过改变其属性,对文本进行不同的设置,可以对文本的字体、大小、颜色等进行改变。
1.属性size
2.属性face
3.属性color

 

3.属性href

href是hypertext reference的缩略词,用于设定链接地址,其链接地址必须是URL地址,必须给出具体的路径。其中URL地址可以为下面内容:
(1)网站:可以设置ip地址或者是网站的网址。例如,链接到google站点首页可以表示为以下形式。
<a href="http://www.google.com">Google</a>
<a href=”http://64.233.189.104/”>Google</a>
(2)网页:链接到本机的网页,可以直接直接指定网页所在的路径。
<a href="http://www.sohu.com">搜狐首页</a>
<a href="index。htm">回到主页面</a>

(3)可执行文件:当链接到的文件的扩展名不是.htm(.html)或者.asp(.jsp/.php)时,而是其他可执行的文件,会将链接到的文件下载到本地计算机上或者直接执行。如果是文本文件(如Word格式),则在浏览器中打开文件并进行编辑。
<a href="word。doc">word文档,打开文档进行编辑</a>
<a href="sound。wav">播放声音文件</a>
<a href="javascript。Open()">执行对应的应用程序</a>
(4)网页上的书签:通常使用在网页的长度超过屏幕时,可以使用书签直接跳转到该书签指向的具体内容,节省移动滚动条的时间。
打开链接的位置由target属性进行控制,属性值分为_blank、_self、_parent、_top。taget=”_blank”在新的浏览器窗口中打开

链接的文档,同时保持当前窗口不变。target=”_self”将链接的文档载入链接所在的同一框架或窗口。此目标是默认的,所以通

常不需要指定它。target=”_parent”将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架,

则所链接的文档载入整个浏览器窗口。target=”_top”将链接的文档载入整个浏览器窗口,从而删除所有框架。
<a href=”http://www.sohu.com”  target=_blank>搜狐首页</a>
上述代码表示,在新的窗口中打开搜狐首页。

 

4.属性title

这是一个很实用的属性,title属性可以用来为链接添加附加的解释信息,当鼠标悬停在有超链接的文字或者图片等对象上的时候,显示该超链接的解释信息。以下代码,在显示的时候,当把鼠标放在超级链接文字“兑奖站”上面时,浏览器会以浮动提示的方式显示解释信息“发票代码是……”。
<a href="http://www.qdu.edu.cn" title = "发票代码是……">兑奖站</a>

 

5.属性name

超级链接标签<a>同样可以用来进行文档内部定位,设计者需要做的就是首先在文档内设定一个标签,称为“锚定位”,这样做相当于在文档中的某一个位置放置一个标签,通过超链接标签<a>的href属性,可以跳转到已经设置号的“锚定位”标签的位置。利用标签<a>的name属性可以实现文档内部的定位。代码的说明如下:
<p><a  name=”myanchor”>需要设置定位的文本</a>

此时在该文档的其他任何部位,只要能够用超链接对他进行定位,即可达到文档内部定位的效果。
查看“锚定位”的超链接代码如下:

<a href="#myanchor" >查看已经定位的文本</a>

“#”是文档内部定位的关键,浏览器遇到“#” 则会识别为内部定位,进而在文档内寻找设计者放置的“锚定位”。若没有“#”,浏览器就会认为它指向的是一个文件名。

例:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div style="width:500px; height:2000px; background:block; margin:0 auto;">
<p><a href="#C1">参见第1部分</a><a href="#C2">参见第2部分</a><a href="#C3">参见第3部分</a></p>
<p><a href="#C4">参见第4部分</a><a href="#C5">参见第5部分</a><a href="#C6">参见第6部分</a></p>
<div>
<a name="#C1">第1部分</a>
<a name="#C2">第2部分</a>
<a name="#C3">第3部分</a>
<a name="#C4">第4部分</a>
<a name="#C5">第5部分</a>
<a name="#C6">第6部分</a></div>
</div>
</body>
</html>

结果如图:

Html <wbr>标签


6.链接到Email地址

可以使用电子邮箱作为超级链接的目标。一点击这个链接,就会触发你的邮件客户端,比如Outlook Express,然后显示一个新建E-mail的窗口。用<a>可以实现这样的功能。使用格式如下所示。
<a href = "mailto:emailaddress邮件地址">邮件链接</a>
以下代码添加一个电子邮箱地址链接。
1),<a href = "mailto:yangjie_happy@sina.cn">链接到Email</a>

Html <wbr>标签

点击后会弹出本地安装的outlook,如下图

Html <wbr>标签

2).

<a href="mailto:yangguang_happy@sina.cn?subject=咨询问题&cc=963546340@qq.com&bcc=wangzhibohappy@126.com"> 链接到Email</a>

subject 用于添加主题;cc代表抄送;bcc代表密件抄送;

Html <wbr>标签

7.制作下载

将文件名和文件类型写在href后即可,若不在同一文件夹需加上相关的路径
<p><a href="619测试题.docx">下载</a>
<p><a href="file:///G|/网页制作/css中颜色的情况.doc">xiazai</a>

Html <wbr>标签

点击后会出现下图:

Html <wbr>标签
 


html各级跳转

"window.location.href"、"location.href"是本页面跳转

"parent.location.href"是上一层页面跳转

"top.location.href"是最外层的页面跳转

举例说明:

如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果D中js这样写

"window.location.href"、"location.href":D页面跳转

"parent.location.href":C页面跳转

"top.location.href":A页面跳转

如果D页面中有form的话,

<form>: form提交后D页面跳转

<form target="_blank">: form提交后弹出新页面

<form target="_parent">: form提交后C页面跳转

<form target="_top"> : form提交后A页面跳转

关于页面刷新,D 页面中这样写:
"parent.location.reload();": C页面刷新 (当然,也可以使用子窗口的 opener 对象来获得父窗口的对象:window.opener.document.location.reload(); )

"top.location.reload();": A页面刷新

设为首页
<a οnclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.ganyoo.com');" href="http://www.ganyoo.com">设为首页</a>&nbsp;

加入收藏
<a target=_top href="javascript:window.external.addFavorite('http://www.ganyoo.com','赣友网--赣友社区')">加入收藏</a>


HTML表单标签(form)

表单(Form)是HTML的一个重要部分,主要用于采集和提交用户输入的信息,使网页具有交互的功能。一般是将表单设计在一个HTML文档中,当用户填写完信息后做提交(submit)操作,表单的内容就被传送到服务器上,等处理完毕后,再将结果信息返回到客户端。

 

<form>和</form>标签用来创建一个表单,在标签对之间的都属于表单的内容。<form>标签有三个比较常用的属性,具体如下。
1.属性action  规定当提交表单时,向何处发送表单数据。当提交表单时,表单数据会提交到名为 "form_action.asp" 的页面:

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

2.属性method   规定如何发送表单数据(表单数据发送到 action 属性所规定的页面)。method有get和post两个值。get方式是是将表单控件的name/value信息经过编码之后,通过URL发送(可以在地址栏中看到), 而post方式则是将表单的内容通过http发送,在地址栏中看不到表单的提交信息。
3.属性target  规定在何处打开 action URL。


1.form窗体的method属性是用于设置提交方法,有get方法(不太安全),post方法。action属性用于定义转向的页面。

页面中可以有多高form窗体,但只能有一个含有“runat=server”属性。含有此属性的form窗体不需要些action属性,其默认为是本页面。

2.redioButton(单选按钮)需要通过GroupName属性使几个redioButton成为一组(即几个rediobutton中只能有一个被选中)textalgin属性用于设置文字在复选框左右的位置。

3.checkbox(复选框)textalgin属性用于设置文字在复选框左右的位置,autopostback(属性值有true,false)用于设置被选中后是否与服务器交互,尽量少用,用得多了会增大服务器负担。

checkboxlist(复选框组),可以在里边添加数个复选框(ListIterm),可以通过for循环遍历它的Iterm中的选项

例: 

for(int i=0;i<checkboxlist.Iterms.Count();i++)

{

     if(this.checkboxlist.Iterm[i].selected)

     {

            Response.write(this.checkboxlist.Iterm[i].Text+"");

      }

}

可以用checkboxlist的datasource属性与数据库相连接,将页面复选框做成动态的,DataTextField可以用来存放‘名字’,DataValueField可以用来存放‘主键’repeatcolumns属性用于设置页面列数,repeatdirection(属性值有vertical(垂直方向),horizontal(水平方向))。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值