javascript基础之html基础

                             张孝祥JavaScript网页编程第一章  HTML基础
注释标签不可以嵌入。
特殊字符的表示:
&lt;  <
&gt;   >
&nbsp;空格
&#169;&copy;版权符号。
///
解决版权符号在网页中变形的方法:
主要是将字体设为Arial即可。<font style="font-family:Arial, Helvetica, sans-serif">&copy;</font>

&amp;&
&quot;“
格式标签:
<p align="left"></p>        表示段落
<br>  换行
<nobr></nobr>               用于防止浏览器将过长的文字换行显示
<blockquote></blockquote>   加入的文本按缩进的方式显示,即前面添加几个空格
<center></center>           居中
<marquee></marquee>   behavior="slide" "scroll" "alternate"  direction="up" "down" "left" "right"
<dl></dl><dt></dt><dd></dd>创建一个普通的列表,以及列表上层的项目和下层的项目
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>


文本标签:
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h7>7</h7> 字号从大到小
<b></b>    粗体
<em></em>  斜体
<sub></sub>  下标
<sup></sup> 上标
<i></i>   斜体
<u></u>  加一划线
<tt></tt>   用于以打印字体的方式显示
///
在dreamweavor中快速插入换行符的快捷键:shift+enter
//
<cite></cite>引用方式的文本
<strong></strong> 要加重的文本,黑体加粗体
<font></font>  对显示文本的,face,size,color.分别表示字体的名称,字体的大小,字体的颜色。
超链接标签:
<a href=" "></a>用于在文本或图像的两端
<a href="mailto: admin@it315.org"></a>将启动电脑上的邮件发送程序
name属性定义定位标记。例如:<a name="标记1">第一部分</a>,使用用<a href="#标记1">跳转到第一部分</a>就可以定位到网页中标记的这个位置。
<a href="#"></a>将会将网页文件定位到自己本身
<a href=""></a>指向网页文件所在的目录,若在WWW服务器上,将会打开目录下的默认网页。
URL是Uniform Resource Locator的简写,中文是统一资源定位符,用来表示Internet网络资源的位置。
通常的URL一般由协议,主机名,端口号,资源名。
例如:http://www.it215.org:8080/index.html
Http协议规定了浏览器从WWW服务器上获取网页文件的方式。
URL中的端口号部分用来指定客户端所要连接的网络服务器的监听端口号,每一种标准的网络协议都有一个默认的端口号,例如:Http协议的默认端口号为80.如果使用的某种协议使用的是默认端口号,那么,我们在访问这个服务器的URL时不需要指定端口号。
URL是大小写敏感的,在很多时候,人们使用相对URL来增加灵活性,不包括协议和主机地址信息。/表示主机上某种协议的根目录,../表示父目录,../../表示父目录的父目录,直接使用文件名表示当前目录。
为URL指定参数,他们在向WWW服务器传送地址的时候还可以带上参数,每一个参数由参数名和参数值组成。如下:
http://www.it35.org/dearlregister.html?name=zhangsan&passward=12
只有参数名没有参数值也是允许的,但是一定要有等号,URL地址与参数之间用?隔开,每个参数之间用&隔开。接受参数的Internet网络资源通常都是一个可以在服务器上运行的程序,在WWW服务器上可以将这个程序以某种方式映射成为网络文件的格式。
带有定位标记的URL:
http://www.it315.org/index.html#section2
URL编码:
在HTTP协议中,浏览器不能向WWW服务器传递某些特殊字符,需要通过URL编码后传递。
mailtoURL
mailto协议可以带一部分参数,但是里面的空格必须使用20%表示。可以带的参数及其意义是:
subject  主题
CC  抄送
BCC  暗送
body   邮件的正文
关于抄送和暗送的区别:
使用抄送可以使得收件人知道你抄送给了哪些人,使用暗送收件人就不会知道你把这封邮件暗送给了哪些人。
如:
mailto:zxx@it315.org?subject=Feedback&body=how20%are20%you!
URL编码规则:
空格转化为+号
对0-9,a-z,A-Z保持不变。
对于其他所有的字符,用这个字符的16进制格式表示并在每个字节前加一个%号。
对于空格也使用它的十六进制表示,即20%表示。
+  2B%
=  3D%
&  26%
如果确信URL串的特殊字符没有引起使用上的岐义,你也可以对这些字符不进行编码,而是直接传递给服务器,如:
http://www.it315.org/dealregister.html?name=中国&password=123
如果URL中的特殊字会产生岐义,则要对其进行编码如+&
对于服务器端开发人员则要考虑使用URL编码。
图像标签:
<img src="">还可以设置如下属性:alt,align,border,width,height
alt属性表示当鼠标放在图像上面时,图像上方所显示的文本,当src属性的图像无法加载时,浏览器也会显示alt属性所设置的值。
align属性指示了它与周围文本的对齐方式。
<img>标签用于实现网页计数器的一种方式。
<hr>size,color,width,noshade  在网页中插入一条直线
图像地图
有时候我们需要把一个图像分成几个区域,每个区域指向不同的URL,如,将一幅中国地图招安省市划分不同的区域,这些区域被称为热点,单击热点区域,就可以链接到与之相应省市有关的页面,分为服务器端图像地图和客户端图像地图
怎么样产生图像地图?
首先必须定义出图像上的各热点区域的形状,位置,坐标及其指向的URL地址。这个过程叫作图像热点映射,图像热点映射需要使用<map name=mapname></map>标签对进行说明,其中的name属性为该图像热点映射指定了一个名称。
图像热点映射中的各个区域用<area>标签来说明,<area>标签的格式是:
<area shape="" coords=" " href="">href也可以用nohref替换,表示在该区域单击鼠标无效。<area>标签可以有一个target属性,用来表示浏览器在哪个窗口中显示href属性所指向的网络资源。
定义好了图像热点映射后,接着就要在<img>图像标签中增加一个名为usemap的属性设置,usemap指定该图像被用作图像地图,其设置值为所使用的图像热点映射名称,格式为<map>标签的name属性前多加一个#号,如<img src="china.jpg" usemap="#mymap">
图像地图举例:
<img src="china.gif" usemap="#mymap">
<map name="mymap">
<area shape="rect" href="a.html" coords="140,20,280,60">
<area shape="poly" href="b.html" coords="100,100,180,4180,200,140">
<area shape="circle" href="c.html" coords="80,100,60">
</map>
shape属性设置说明:
rect   矩形,左上角和右下角的坐标
poly   多边形,各顶点坐标,
circle  圆形,圆 心坐标和半径。
其中图像地图当中的坐标值是以图像左上角为原点计算的,这样就会比较简单。
///
<b>粗体</b>
<em>加斜体</em><br />
CO<sub>2</sub>
10<sup>12</sup><br />
<i>斜体</i>
<u>加下一划线</u><br />
<tt>用以打印体的方式显示</tt><br />
<cite>引用方式的文本</cite><br />
<strong>黑体加粗体</strong><br />
<font face="Arial, Helvetica, sans-serif" color="#FF0000" size="+3">这是用font来控制的字体</font> <br />
<a href="#">这是超链接</a>
<a href="mailto:1059693014@qq.com">邮件发送</a><br />
<img src="图片.jpg" alt="美女" align="right" border="3px" usemap="#mymap"/> 
<hr size="5px" color="#0000FF"" width="100px">
<map name="mymap">
<area shape="rect" href="#" coords="0,0,200,200" alt="美女">
</map>

///

///

///

///

///

张孝祥javascript第二章      HTML高级部分
表格标签,最明显的好处是行列可以对齐,可以用于对Web页面的规划。
<table></table>
属性如下:bgcolor,border,bordercolor,bordercolorlight,bordercolordark,cellspacing,cellpadding,width,height,
<tr></tr>
<th></th>
属性:align,valign,bgcolor
<td></td>
属性:width,height,align,valign,colspan,rowspan,nowrap
cellspacing:表示在整个单元格当中每个单元格与每个单元格之间的间距,。
cellpadding:表示在每个单元格当中该单元格边框与其中的内容之间的间距。
colspan:单元格所占的列数
rowspan:单元格所占的行数
nowrap:禁止浏览器对过长的内容进行自动换行。浏览器在过长的文本内容中进行换行的依据是空格,中文字符,-。
问题:当表格中的内容过长时,该表格会被撑的很大。该如何解决,在HTML中无法解决,要与将要学到的CSS级联样式表结合就可以控制。
<caption></caption>表格的标题
帧标签
分帧的作用:将一个浏览器文档窗口分隔成多个窗口,每个窗口都实现一个独立的网页文件。即可实现导航式菜单的效果。
考虑如下一段代码:
<frameset rows="20%,*">
<frame src="top.html" name="top">
<frameset cols="30%,*">
<frame src="left.html" name="left">
<frame src="right.html" name="right">
</frameset></frameset>
在left.html中代码如下:
<a href="right1.html" target="right"></a>
<a href="right2.html" target="right"></a>
<frameset>标签属性:rows,cols,border,frameborder
<frame>标签属性:src,name,scrolling,noresize
<noframes></noframes>当浏览器窗口不支持时显示
表单元素一
<form></form>表单的开始和结束标签。<form>标签具有action,method,target,title,enctype等属性。
action属性用来设置接收和处理浏览器表单内容的服务器程序的URL。
例如:<form action="http://www.it315.org/counter.cgi">
method属性用来定义浏览器将表单中的内容提交给服务器端程序的处理方式。取值可以为get,post.
method属性的默认值为get,使用get属性表示浏览器将表单内容作为URL参数的形式发送给WWW服务器,使用get传送的数据量是有限的。它不能超过1kb.
使用post:浏览器将把表单信息作为HTTP的实体内容发送给WWW服务 器,这时URL不会包含参数。通过post传递的数据我们无法直接看到,它传送的数据可以大的多。
一般包含口令或会引起WWW服务 器上数据变化的信息如注册信息要采用post方式。
target属性用来指定服务器返回结果的目标窗口或目标帧。
title用来设置当网站访问者的鼠标在表单上的任一位置停留数秒后,浏览器用黄色小浮标显示的文本,如表单的描述和名称。
title属性是许多HTML元素都具有的一个属性,它的使用频率也是高的。
enctype属性指示浏览器使用哪种编码方法来将表单数据传送给WWW服务器,该属性可以有两种取值:aplication/x-www-form-urlencoded和multipart/form-data;
<form>中的各种标签:
<input type="submit">提交按钮
<input type="reset">重置按钮,重置按钮的名称和值都不会传递给WWW服务器。
<input type="text">单行文本输入区域,有一个size属性,指示文本输入框的宽度,有一个value属性,指示初始值,而且当点击重置按钮后也会显示初始值,。maxlength用来限制最多输进的字符个数。readonly属性表示该对话框可以获得焦点,但是不能改变其值,disabled属性表示该表单输入域不会获得焦点。而且其信息也不会传递给WWW服务 器。
<input type="checkbox">复选框,checked是复选框的首选属性,这是一个不需要赋值的属性,只要设置了这个属性,表示其为选中,value表示复选框的参数值一同传送给WWW服务器。
<input type="radio">单选按钮,只要将若干个单选按钮的name属性设为一样,它们就成为了一组单选按钮,浏览器只允许一个单选按钮被选中,checked表示其实例状态被选中。
<input type="hidden">创建隐藏的表单字段元素,浏览器不会显示隐藏的表单字段元素,但是当用户提交表单的时候,浏览器会将它的name属性和value属性的值传送给WWW服务器。可以预设某些要传递的信息,。
例如:一个网站注册部分分为两部分,第一部分为用户名,第二部分为其他信息,在第二部分提交时也要把第一部分提交,因此需要使用隐藏表单。
<input type="password">密码区域,对于密码的表单,你最好将它的递交方式设置为post.
表单元素二
<input type="file">用于将用户的文件上传,会出现一个单行文本区域和一个浏览按钮,如果要将文件真正的上传到WWW服务 器,需要将method属性设为post,enctype设为multypart/form-data.
<input type="image">可以在表单上创建一个图形元素,这个图像的源文件由src属性指定,单击这个图像,这个图像的X,Y坐标及其他元素的信息传递给了WWW服务 器,X,Y坐标的参数值分别为该图像的name属性必加.x,.y.
<select></select><option></option>
<select>具有两个属性,size,multiple
size属性用来设置在列表框中可以看得见的列表列的数目,默认值为1.当size属性设置的值大于1时,会出现一个滚动条。但是通过这种方式一次只能选择一项,如果想要选择多项,就需要设置它的multiple属性,只要将其加入到标签中即可。不需要对其设值,在列表中想多选的话按住CTRL键。
<option>标签的属性:value,selected
如果选择以后,这个<option>的value值和<select>的name值一同作为参数传递给WWW服务器,如果<option>没有设置value,浏览器就会将<option></option>标签对之间的文本作为参数传递给WWW服务器,selected用来指示初始选中项。。。还可以设置一个选项,使其value值为空。表示放弃选择。
<textarea></textarea>用来表示可以输入多行文本的文本输入域。
属性:cols,rows,用来设置列数,行数。它没有一个可以用来设置初始值的value值。如果想设置初使值,则需要在该标签对中加入值即可。
<label>标签的作用:如果想使用快捷键对表单元素之间进行切换。就需要使用该标签。
对于需要快捷键设置的表单元素,需要设置它的id值。
考虑如下一段代码:
<label for="usr" accesskey="a">用户名</label>
<input type="text" name="usr" id="usr">
即设置了该表单元素的快捷键ALT+A.
meta标签:
有两种类型的meta标签,用不同的属性名来划分。这两种属性名分别为name和http-equiv.即如下两种格式;
<meta name="某个设置值" content="对该设置值进行补充说明信息">
<meta http-equiv="某个设置值“ content="对该设置值进行补充说明信息">
name属性用于在网页中加入一些关于网页的描述信息,例如:网页的关键字(可供网页搜索引擎机器人查找,分类),网页的描述信息等。
http-equiv属性用于在HTML文档中模拟HTTP协议的响应消息头,例如:告诉浏览器是不是应该缓存该网页,使用什么样的字符集来显示网页内容,隔多长时间自动刷新网页等。
meta标签的name属性设置:
keywords   将其content值作为关键字,若有多个关键字,用逗号隔开。例如:
<meta name="keywords" content="vc,java,培训">
description  把content所填入的内容作为网页的简要描述。
robots  content设置值如下:index  noindex   follow  nofollow   all none
index表示可以检索和收录这个页面
noindex表示不可以搜索和收录这个页面
follow表示可以让搜索引擎顺着这个页面的超链接继续往下查找
nofollow与follow相反
all=index+follow
none=noindex+nofollow
4. Generator用于说明编辑这个网页时所使用的工具名称
5.Author 网页作者
6. Copyright版权符号声明,均在content中表示详细内容
meta的http-equiv属性
1.content-type用来说明网页的MIME类型以及文本内容使用的字符编码。
如:<meta http-equiv="content-type" content="text/html;charset=gb2312">
用来说明当前使用的文档是HTML文档,它所使用的字符集是国标2312。
2.Refresh用来模拟http协议的refresh头的作用。用来告诉浏览器在多长时间后自动刷新页面或跳转到另一个页面上。
例如:<meta http-equiv="refresh" content="1;url=http://www.it315.org">
将会在该网页打开一秒后自动打开http://www.it3415.org
3.Expires头  Content的设置值应该是一个GMT的时间文本
例如:<meta http-equiv="Expires" content="MOM,12 may 2001 00:20:00 GMT">
将content设置为0.可以禁止浏览器缓存页面。
4.Windows-target:可以强制某个页面在固定的窗口中显示。
例如:要防止自己的网页被别人当作一个frame页面调用,可以使用<meta http-equiv="Windows-Target" content="_top">即让自己的网页在最顶端显示。
5.Pragma头禁止浏览器在本地计算机上缓存
如下:<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
6.Page-Enter和Page-Exit
用于告诉浏览器刚进入或着刚退出某个页面时所采用的显示效果 。
<meta http-equiv="Page-Enter" content="revealTrans(Transition=23,Duration=1.000)">括号中的分别为显示类型和持续时间。
头元素
头元素通常是指位于<head></head>标签对之间的元素,包括:
<title></title>网页的显示标题
<base>
<link>
<meta>
<base>标签用于指定网页中超链接的基准地址,以改变网页中所有使用相对URL的基准地址。它通常的使用形式如下:
<base href="http://www.it315.com/techworld/" target="_blank">它有两个属性,href,target.href设定网页中所有使用HTTP协义的超链接的相对URL的基准地址。超链接的target属性用于设置网页中所有超链接设置的目标窗口。在<base>中设置以后,要以省得在所有<a>标签中设置。
<link>标签定义了当前网页和另一网页或资源的关系。有以下几个属性:
href:另一个文档或资源的URL。
rel与rev:定义了两个文档之间的关系。
title两个链接资源的关系。描述链接资源的字符串。
type给出了目标资源的MIME类型。如:type="text/css" type="text/javascript"
media属性:用于指定目标资源被接受的介质或媒体。一个网页可以在多种媒体上输出,只有当link标签被指定的媒体所接受,才会显示作用。可以取以下几个值。
screen被提交到屏幕上
print打印机
projection投影仪
tv电视机
rel,rev属性的设置情况,描述链接类型,基本特征。
可以取的设置值如下:
contents 链接文档作为表格内容出现
index 文档中提供当前文档的索引
glossary  这个链接所指向的文档提供当前文档的词汇表
coryright版权语句
next  指向一个文档序列中的下一个文档
previous  上一个文档
start  组合文档中的第一个文档
help  帮助文档
bookmark指向当前文档的书签
stylesheet样式表
例 如:<link rel="stylesheet" href="url" type="text/css">
alternate说明当前指向的是当前文档的一份不同版本的文档
shortcut icon 表示指向的是一个默认图像,将出现在浏览器地址栏中,替换到系统的默认图标
<link rel="shortcut icon" href="ab.ico">
分区标签
<div></div>标签对,用于将若干相邻的组成一个区域块。用于对区域块设置。就可以对所有包含的设置。可以包含任何元素。
<span></span>专用于CSS。用于在同一行文本内选取一段文本。用于进行特殊设置。
<div><span>标签的区别举例:
<div>
<span></span>
<span></span>
<span></span>
</div>



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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值