Fork me on GitHub

HTML复习

HTML复习

HTML介绍

1什么是HTML:

HTML  (HyperText Markup Language) 超文本标记语言,是用特殊标记(tag)来描述文档结构和表现形式的一种语言。使用HTML语言描述的文件,需要通过Web浏览器显示出效果。

2 HTML开发工具:

HTML开发工具:记事本、EditPlus、UltraEdit、Dreamweaver等。

3 HTML标记控制内容显示的语法:

 

4 HTML文件结构:

 

5 HTML的执行方式:

HTML的执行方式是边解释边执行的方式。

 

6 HTML 包含:

 

1. 文本:

无论科技如何发达传输信息文本还是最主要的方式之一,先看一下文本在网页中的设计:

2. 图片:

图片现实也是网页必要的一部分:


3. 超链接

网页之所以成为网页,就是因为它可以连接转换到其他网页,超级连接,可以连接网页中的某个位置,连接某个互联网网页,连接某个文件等。

 

4. 表格:

 

表格也是我们经常在网页中看见的,看一下如何创建表格:

 

5. 框架:



                 <frameset>标签的属性:

6 . 层:

也就是我们使我们的一张网页可以多层显示内容:



7. 表单:

 

 就是我们提交的信息表,这里简单说一下他的建立和简单属性:


HTML详细内容

1 HTML中的标签(单标签和双标签):

单标签:只需单独使用就能完整地表达意思的标记,

语法:

           < 标签名称>

 如:<br>断行标记   <hr>水平线标记

双标签:必须成对使用,其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能,尾标签告诉Web浏览器在这里结束该功能。

语法:

       <标签> 内 容</ 标签>

 如:<p>段落内容 </p>

2 HTML的标签属性:

许多单标记和双标记的始标记内可以包含一些属性, 其语法是:< 标签名   属性1 属性2 属性3 … > </标签名>

各属性之间无先后次序,属性也可省略(即取默认值)。

如:<HR SIZE=3 ALIGN=LEFT WIDTH="75%“ color="#CC6600">

3 HTML中的元素:

HTML文件一对起始和终止标记符以及它们之间的所有内容称为一个元素。 HTML文件是以各种功能的元素所组成的。

如:<p align=“center”>最新新闻</p>

      <hr size=3 width="75%“ color="#CC6600">

4  HTML  head部分

title    文档标题

title元素

语法格式:<title>文档标题</title>

如:<title>温州大学首页</title>

meta   描述HTML元信息

描述HTML文档的元信息,即关于文档自身的信息。

<meta http-equiv=“content-type” content=“text/html”;charset=“GB2312”>

<meta http-equiv=“Refresh”content=’2’/>  每过两秒钟刷新一次

link    描述当前文档与其它文档之间的链接关系

该网页与哪些文件设有链接

语法格式:<link href="pic/style.css" rel=stylesheet>

Script  脚本程序内容

语法格式:<script  language=“脚本语言名”>程序代码</script>

属性:language

style   指定CSS样式表

5 Body部分的文本

1.符号:

      &gt---->

      &quot----”

      &amp----& 

      &nbsp---空格

      &lt ----<     

2 字体格式:

文本字体,大小,颜色

<font size=# color=# face=#> this is a test!</font>

SIZE属性的有效值范围为1-7,其中缺省值为3。我们可以在SIZE属性值之前加上“+”、“-”字符,来指定相对于字号初始值的增量或减量。

3 文字格式控制:

粗体<b>    </b>

斜体 <i>    </i>

下划线<u>   </u>

上标<sup>   </sup>

下标<sub>  </sub>

闪烁效果<blink></blink>

 

4 文字位置的控制:

 <P  Align=#>山东省</P>             Align属性:Left,Center,Right

 <div  Align=#>山东省</div>          Align属性:Left,Center,Right

 <span  Align=# class=#>山东省</span>  Align属性:Left,Center,Right

 Class属性:CSS样式名称

5 标题元素  

 语法格式:

 <hn > 标题内容 </hn>

其中n为标题的等级,HTML总共提供六个等级的标题(n=1,2,3,4,5,6), n越小,标题字号就越大,默认字体为黑体。

6 预格式化元素

语法格式:

<pre >……</pre>

其间的内容能承认用户输入的回车、空格。

7 常用标签

<b>

字体变粗

<i>

文字变斜体

<u>

文字加下划线

<br>

换行

<p>

段落

<pre>

预格式化段落

<span>

行级层

<div>

块级层

<sub>

下标

<sup>

上标

<hr>

水平线

<Hn>

文字标题大小hn

<ol>

有序列表

<ul>

无序列表

注:块级标签会另起一行来显示层中的内容,而行级标签会在同一行显示内容。

8 <marquee> </marquee>滚动字幕

属性:

bgcolor      背景颜色         direction    字幕滚动方向

height        字幕高度         width          字幕宽度

vspace        字幕与上页边垂直距离      

Hspace       字幕与左页边水平距离

scrolldelay  每次移动的时间间隔

scrollamout 每次移动的距离

behavior (= scroll, alternate, slide)

loop    循环次数                 

Align   字体位置

6 链接:

链接语法

<a href=? target=?  title=?>……</a>

属性:href          链接目标

         target     目标窗口

         title            链接提示

                链接文字或图片

 

href 路径表示法:

物理路径表示:(不提倡)

<a href=“c:\study\link01.htm”>文件的链接</a>
相对路径表示:

<a href="link01.htm">文件的链接</a>

绝对路径(URL)表示法:

<a href=“http://www.wzu.edu.cn/index.jsp”>温州大学</a>

 

target属性

  _blank     打开一个新窗口

  _self      在当前窗口中打开链接

  _parent    在当前窗口的父窗口中打开链接,仅用于框架窗口

  _top         在最高一级窗口中打开链接,仅应用于框架窗口

 

7 锚链接:

目录链接:网页内部链接。

要点:

锚点的HTML标记:(链接的目标)

<a name=“锚点名”>   </a>

链接到锚点的HTML标记:

<a href=“#锚点名”>……</a>

8 邮件链接:

<a href=“mailto:weiyingzhi@wznc.zj.cn”>联系我</a>

9 图像的插入:

<body background=“背景图片路径和文件名”  >

属性:

    src          图片文件的地址

    alt           图片的说明文字

       align    图片与文字的对齐方式

    border   图片的边框

    hspace   图片与文字的水平距离

    vspace   图片与文字的垂直距离

 

10 声音的插入(视频 Flash等基本一致)

(1)链接法:<a href=# >声音提示说明</a>

(2)嵌入式:<embed src=#  width=#  height=#  autostart=#></embed>

 背景声音格式限制:mp3  wav midi  wma

 前景声音格式没有限制,只要有相应的播放软件即可。

11  表格

 

1 表格的基本结构

<table>                          
 <caption>...</caption> 
 <tr>  
         <th> </th>
 </tr>

</table>

 

2 表格的标题

<caption>...</caption> 
表格标题的位置,可由align属性来设置,其位置分别为表格上方和表格下方。

设置标题位于表格上方:

       <caption align=top> ... </caption>

设置标题位于表格下方:

       <caption align=bottom> ... </caption>

      <tfoot>页脚</tfoot>

3 表格尺寸设置

<table width=n1 height=n2>

  width和height属性分别指定表格一个固定的宽度和长度,可以用像素来表示,也可以用百分比来表示。

4 表格边框粗细设置

<table border=n>

边框是用border属性来体现的,它表示表格的边框边厚度和框线。将border设成不同的值,有不同的效果。

5 表格边框的颜色

表格边框颜色  

 <table bordercolor=# bordercolordark=# bordercolorlight=# >

6 表格的背景设置

在表格中,既可以对整个表格填入底色,和背景图。

表格的背景色彩 

 <table bgcolor=#  background="">

7 表格单元格间线宽度设置

<table cellspacing=n>

  格与格之间的线为格间线,它的宽度可以使用<table>中的cellspacing属性加以调节。

8 表格排版位置设置

<table align=“center”>

 align属性用来设置整个表格在页面中的排版位置:left ,center,right。

9 表格的跨行跨列

Colspan、rowspan:

一个单元格跨多列: <th colspan=?> <td colspan=?>
一个单元格跨多行: <th rowspan=#> <td rowspan=#> 

10 技巧:

制作一个像素的表格

    border="0" cellspacing="1" cellpadding="0"

表格制作水平直线

    <td width="558" scope="col" style="background-color:#0F3" height="1"></td>

表格制作竖线

     <th height="580" scope="col"  style="background-color:#000" width="1"></th>

 

<tr></tr>表示一行

<td></td> 表示一个单元格

12 表单

1为什么使用表单?

   表单主要的作用是用户注册,用户认证,,修改数据,收集数据,搜索工具。

2.表单由容器组成,容器里面有各种元素。

3.格式:

  <form>

  </form>

4.表单的主要属性:

①action:设置或返回表单的 action 属性

          说明了表单数据提交时提交到哪里。***.html。

 

②method :提交表单的方式

          一种是get,get提交一般用在搜索等提交少量的数据地方,因为它的提交方式决定了用处。明文提交,可以看见提交的数据。一般不超过5K,根据浏览器的不同所决定。

          另一种是post,post提交方式很常见,注册,修改数据等地方使用,理论上可以提交大量数据。密文提交数据。

5.表单里面有三种:

      input:包含text,password,radio,checkbox,image,file等;

             radio里面name是一样的就表示一组,可以形成单选。不然不能单选。

             checked里面checked="checked"表示默认选中。

      select:下拉框;<option> 下拉内容 </option>

      textarea:多行文本框;

      disabled="disabled" 当前是灰色的,达到某一条件时可以选择。

      readonly="readonly"指当前状态下不能修改内容。

      submit:提交按钮

      reset:重置按钮

      button:按钮

13 框架

适用场合:

网页上经常出现一些重复部分,用框架可将整个窗口分成几个独立的小窗口,每一个窗口可分别载入不同的文件,每个窗口是可以相互沟通。最常见的是用来定义页面的导航区域、LoGo标志和内容区域,从而使浏览者随时能找到自己感兴趣的内容

 

框架的相关概念:

框架

    框架不是文件,是在框架集中定义的区域,它可以通过指定URL显示任何文档。

框架集

   框架集是个文档,它本身没有提供显示在浏览器中的HTML内容。它用来定义一系列框架的属性以及他们大小、位置等布局方式,以及每个框架中最初始的页面的URL。

框架代码:

<html>
  <head>
     <title></ title >
   </head>
  <framesetrows="80,*" frameborder="NO" border="0" framespacing="0">

      <frame src=“" name="topFrame" scrolling="NO" noresize>

      <frame src=“" name="mainFrame">

  </frameset>

  <noframes>

     <body>

     </body>

  </noframes>

</html>

总结:

1 框架集文件只是对窗口进行划分,并在各窗口载入相应的网页。

(1)<frameset></frameset>是对窗口进行划分,并预设了各窗口属性和特点

(2)<frame src=""> src值指定了事先做好的、要载入该窗口的文件

(3)<noframes></noframes>该部分用于不支持框架的浏览器所显示的内容

2 .<frameset>

    主要实现多个页面在一个窗口打开

    例.<frameset cols="100,*" border="5">     <frame src="1.html ">

        <frame src="2.html ">

        </frameset>

    <frameset></frameset>框架组

    实现一个窗口内容在另一个窗口出现 改name为目标窗口的框架名

     <target="rightFrame">

      target  打开方式:

        在新的窗口打开: _bank

        在自身窗口中显示:_self

在上级窗口显示:_top2.<iframe >

     在body中实现

       iframe属性: src="路径"

                    name="框架名"              

                    frameborder="边框"

                    scrolling="no"滚动条"

3.技巧:

直接打开dw,插入需要的框架,逐一命名保存,保存全部。一共需要的网页有需要的分页数+1;总框架。

14.细节

<!> 跑马灯

<marquee>...</marquee>普通卷动

<marquee behavior=slide>...</marquee>滑动

<marquee behavior=scroll>...</marquee>预设卷动

<marquee behavior=alternate>...</marquee>来回卷动

<marquee direction=down>...</marquee>向下卷动

<marquee direction=up>...</marquee>向上卷动

<marquee direction=right></marquee>向右卷动

<marquee direction=’left’></marquee>向左卷动

<marquee loop=2>...</marquee>卷动次数

<marquee width=180>...</marquee>设定宽度

<marquee height=30>...</marquee>设定高度

<marquee bgcolor=FF0000>...</marquee>设定背景颜色

<marquee scrollamount=30>...</marquee>设定滚动速度

<marquee scrolldelay=300>...</marquee>设定卷动时间

<marquee onmouseover="this.stop()">...</marquee>鼠标经过上面时停止滚动

<marquee onmouseover="this.start()">...</marquee>鼠标离开时开始滚动

<!>字体效果

<h1>...</h1>标题字(最大)

<h6>...</h6>标题字(最小)

<b>...</b>粗体字

<strong>...</strong>粗体字(强调) (同上效果略同)

<i>...</i>斜体字

<em>...</em>斜体字(强调)

<dfn>...</dfn>斜体字(表示定义)

<u>...</u>底线

<ins>...</ins>底线(表示插入文字)

<strike>...</strike>横线

<s>...</s>删除线

<del>...</del>删除线(表示删除)

<kbd>...</kbd>键盘文字

<tt>...</tt> 打字体

<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)

<plaintext>...</plaintext>固定宽度字体(不执行标记符号)

<listing>...</listing> 固定宽度小字体

<font color=00ff00>...</font>字体颜色

<font size=1>...</font>最小字体

<font style =’font-size:100 px’>...</font>无限增大

区断标记

<hr>水平线

<hr size=’9’>水平线(设定大小)

<hr width=’80%’>水平线(设定宽度)

<hr color=’ff0000’>水平线(设定颜色)

<br>(换行)

<nobr>...</nobr>水域(不换行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>连结格式

<base href=位址>(预设好连结路径)

<a href=位址></a>外部连结

<a href=位址 target=’_blank’></a>外部连结(另开新视窗)

<a href=位址 target=’_top’></a>外部连结(全视窗连结)

<a href=位址 target=’页框名’></a>外部连结(在指定页框连结)

<!>贴图/音乐

<img src=图片位址>贴图

<img src=图片位址 width=’180’>设定图片宽度

<img src=图片位址 height=’30’>设定图片高度

<img src=图片位址 alt=’提示文字’>设定图片提示文字

<img src=图片位址’ border=’1’>设定图片边框

<bgsound src=MID音乐档位址>背景音乐设定

<!>表格语法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=图片路径>...</table>背景图片的URL=就是路径网址

<table border=边框大小>...</table>设定表格边框大小(使用数字)

<table bgcolor=颜色码>...</table>设定表格的背景颜色

<table borderclor=颜色码>...</table>设定表格边框的颜色

<table borderclordark=颜色码>...</table>设定表格暗边框的颜色

<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色

<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)

<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)

<table cols=参数>...</table>指定表格的栏数

<table frame=参数>...</table>设定表格外框线的显示方式

<table width=宽度>...</table>指定表格的宽度大小(使用数字)

<table height=高度>...</table>指定表格的高度大小(使用数字)

<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)

<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

分割视窗

<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整

<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整

<frameset cols="20%,*">分割左右两个框架

<frameset cols="20%,*,20%">分割左中右三个框架

<分割上下两个框架

<frameset rows="20%,*,20%">分割上中下三个框架

属性:

cols 垂直切割窗口(如左右分割两个窗口)接受整数值,百分数,*(*代表占用余下空间)数值的个数代表分成的部分数目,要以逗号分隔。例:cols="30,*,50%"可以 切成三个视窗,第一部分是30像素(pixels)为绝对分割,第二部分是当分配完第一和第三视图后剩下的空间,第三部分则占整个窗口的50%宽度,为相对分割。

rows 就是横向切割,将窗口上下分开,数值设置同上。

以上两属性尽量不要在同一个<frameset>标记中,因为王井(netscape)不支持,尽量采用多重分割。

frameborder 设置框架的边框,其值有0不要边框,1要边框。

border 设置框架边框厚度

framespacing 表示框架与框架间保留空白的距离

frame 元素(单标签)

语法格式:

<frame name="" src="url" scrolling="yes/no" noresize>

属性:

name 框架名称,指定框架来做连接的目标窗口。

src 框架中要显示的网页文当url地址,每个个框架要对应一个html文挡。

scrolling 是否显示滚动条,yes/no,auto是自动。

noresize 设置不让使用者改变这个框架的大小,

noframe元素

指定当使用了框架的页面在不支持框架的浏览器中打开时显示的信息

语法格式:

<noframe>

......

</noframe>

表单<form></form>

语法格式:

<form action="url" method="get/post">

....

<input type=submit><input type=reset>

</form>

method有两种提交方式get,post

action 是指明处理该表单的程序位置,这样表单所填的资料才能传给cgi做处里,可设定此参数为action="mailto:lwr8494@163.com" 这样此表单所填的资料将会发送到这个邮箱地址。

method 是指传送信息给cgi等网络程序的方式。可选post方法, get方法,post方法容许传送大量信息。get方法只接受低于1k的信息。

申请表单用的是post搜索引擎用的是get

 

<! - - ... - -> 注解

<A HREF TARGET> 指定超连结的分割视窗

<A HREF=#锚的名称> 指定锚名称的超连结

<A HREF> 指定超连结

<A NAME=锚的名称> 被连结点的名称

<ADDRESS>....</ADDRESS> 用来显示电子邮箱地址

<B> 粗体字

<BASE TARGET> 指定超连结的分割视窗

<BASEFONT SIZE> 更改预设字形大小

<BGSOUND SRC> 加入背景音乐

<BIG> 显示大字体

<BLINK> 闪烁的文字

<BODY TEXT LINK VLINK> 设定文字颜色

<BODY> 显示本文

<BR> 换行

<CAPTION ALIGN> 设定表格标题位置

<CAPTION>...</CAPTION> 为表格加上标题

<CENTER> 向中对齐

<CITE>...<CITE> 用於引经据典的文字

<CODE>...</CODE> 用於列出一段程式码

<COMMENT>...</COMMENT> 加上注解

<DD> 设定定义列表的项目解说

<DFN>...</DFN> 显示"定义"文字

<DIR>...</DIR> 列表文字标签

<DL>...</DL> 设定定义列表的标签

<DT> 设定定义列表的项目

<EM> 强调之用

<FONT FACE> 任意指定所用的字形

<FONT SIZE> 设定字体大小

<FORM ACTION> 设定户动式表单的处理方式

<FORM METHOD> 设定户动式表单之资料传送方式

<FRame MARGINHEIGHT> 设定视窗的上下边界

<FRame MARGINWIDTH> 设定视窗的左右边界

<FRame NAME> 为分割视窗命名

<FRame NORESIZE> 锁住分割视窗的大小

<FRame SCROLLING> 设定分割视窗的卷轴

<FRame SRC> 将HTML档加入视窗

<FRameSET COLS> 将视窗分割成左右的子视窗

<FRameSET ROWS> 将视窗分割成上下的子视窗

<FRameSET>...</FRameSET> 划分分割视窗

<H1>~<H6> 设定文字大小

<HEAD> 标示文件资讯

<HR> 加上分格线

<HTML> 文件的开始与结束

<I> 斜体字

<IMG ALIGN> 调整图形影像的位置

<IMG ALT> 为你的图形影像加注

<IMG DYNSRC LOOP> 加入影片

<IMG HEIGHT WIDTH> 插入图片并预设图形大小

<IMG HSPACE> 插入图片并预设图形的左右边界

<IMG LOWSRC> 预载图片功能

<IMG SRC BORDER> 设定图片边界

<IMG SRC> 插入图片

<IMG VSPACE> 插入图片并预设图形的上下边界

<INPUT TYPE NAME value> 在表单中加入输入栏位

<ISINDEX> 定义查询用表单

<KBD>...</KBD> 表示使用者输入文字

<LI TYPE>...</LI> 列表的项目 ( 可指定符号 )

<MARQUEE> 跑马灯效果

<MENU>...</MENU> 条列文字标签

<meta NAME="REFRESH" CONTENT URL> 自动更新文件内容

<MULTIPLE> 可同时选择多项的列表栏

<NOFRame> 定义不出现分割视窗的文字

<OL>...</OL> 有序号的列表

<OPTION> 定义表单中列表栏的项目

<P ALIGN> 设定对齐方向

<P> 分段

<PERSON>...</PERSON> 显示人名

<PRE> 使用原有排列

<SAMP>...</SAMP> 用於引用字

<select >...</select > 在表单中定义列表栏

<SMALL> 显示小字体

<STRIKE> 文字加横线

<STRONG> 用於加强语气

<SUB> 下标字

<SUP> 上标字

<TABLE BORDER=n> 调整表格的宽线高度

<TABLE CELLPADDING> 调整资料栏位之边界

<TABLE CELLSPACING> 调整表格线的宽度

<TABLE HEIGHT> 调整表格的高度

<TABLE WIDTH> 调整表格的宽度

<TABLE>...</TABLE> 产生表格的标签

<TD ALIGN> 调整表格栏位之左右对齐

<TD BGCOLOR> 设定表格栏位之背景颜色

<TD COLSPAN ROWSPAN> 表格栏位的合并

<TD NOWRAP> 设定表格栏位不换行

<TD VALIGN> 调整表格栏位之上下对齐

<TD WIDTH> 调整表格栏位宽度

<TD>...</TD> 定义表格的资料栏位

<TEXTAREA NAME ROWS COLS> 表单中加入多少列的文字输入栏

<TEXTAREA WRAP> 决定文字输入栏是自动否换行

<TH>...</TH> 定义表格的标头栏位

<TITLE> 文件标题

<TR>...</TR> 定义表格美一行

<TT> 打字机字体

<U> 文字加底线

<UL TYPE>...</UL> 无序号的列表 ( 可指定符号 )

<var>...</var> 用於显示变数

BlockQuotc文本缩进

表示颜色的有三种方式;

1,16进制颜色代码

语法:#RRGGBB

例:<font color="#ff0000">红色</font>

2,10进制RGB码

语法:RGB(RRR,GGG,BBB)

例:<font color="rgb(255,000,000)">红色</font>

3,直接用颜色的英文名称

例:<font color="red">红色</font>

<body>.....</body>属性可分为三种:

1,背景属性

包括:bgcolor,background

2,文字属性:

包括:text,link,alink,vlink,

3,留白属性:

其中分为:leftmargin,topmargin

.bgcolor背景色

语法格式:<body bgcolor="#ff0000">

.background背景图案。

语法格式:<body background="url">

.text文本颜色(非连接文字颜色)

.link连接文字颜色(可连接文字颜色)

.alink活动连接文字颜色(正被点击的可连接文字的颜色)

.vlink已访问连接文字颜色)(已经点击访问过的可连接文字的颜色)

语法格式:<body text="color" link="color" alink="color" vlink="color">

.leftmargin 页面左侧的留白距离

.topmargin 页面顶部的留白距离

语法格式:<body leftmargin="value" topmargin="value">

注:value为长度值为数字

align 属性

语法:<h2 align="?">文字</h2>

其属性有三种:left靠左,center居中,right靠右

〈p〉</p>为段落标记,可利用以上属性对整个段落进行设置

〈br>为换行标记

<nobr></nobr>为不换行标记 放在文字两边即可

例:<body>

<h3>江南逢李龟年</h3>

<p>歧王宅里寻常见<br>

催九堂前几度闻<br>

正是江南好风景<br>

落花时节又逢君</p>

</body>

预格式化:

<pre>......</pre> 浏览是效果和编写是效果格式一样

列表

1无序列表又称符号列表

语法格式:

<ul type="">type的属性可选直disc实心圆点,clrcle空心圆点,square实心方框

<li>文字</li>

<li>文字</li>

</ul>

2有序列表

语法格式:

<ol type="?" start"?">

<li>文字</li>

<li>文字</li>

</ol>

type的值是编号字符可选的有1...,a...,A...,i... ,I...

start为起始值例:如果start为3是那么将从3开始,而且必须是数字。

3定义列表

<dl>定义列表标记

<dt>标示定义条目

<dd>标示定义内容

语法格式:

<dl>

<dt>文字</dt>

<dd>文字内容</dd>

</dl>

连接和图像

语法格式:

<a href="url" name="?" target="?" title="?">....</a>

属性:href 连接目标 值可以是url地址也可以是连接锚点

<a href="url">...</a>或者

<a href="锚点">...</a>

name 连接名称

语法格式:<a name="锚点名称">...</a>

例:<a name="abcdcf">...</a>

连接到该锚点的连接则应是:

<a name="#abcdef">....</a>

target目标窗口语法格式

<a href="url"target="_blank|_self|_farent|_top|windowname">....</a>

-blank打开新窗口

_self当前窗口打开

一下两个仅在框架叶面中应用

_parent当前窗口的父级窗口(上一级)打开

_top在最高一级的窗口打开

windowname已命名的窗口或框架中打开连接

title连接提示

<a href="http://www.crazytribe.net" title="打开狂人部落的首页">狂人部落</a>

图像<img> 语法格式:

<img src="url" alt="?" width="?" height="?" border="?" align="?">

border属性定义图片边框的宽度,默认值为0

align属性设置图片旁边文字的位置

语法格式:<img src="" align"">

可选值有:

top图片和文字顶部对齐

middle图片和文字居中对齐

bottom图片和文字底边对齐(默认)

left图片居左对齐,文字沿图片绕排

right图片居右对齐,文字沿图片绕排

absmiddle图片对齐到目前文字行绝对中央

absbottom图片对齐到目前文字行绝对底部

文字的排版

不换行空白标记

font元素

语法格式:

<font face="字体名称" size="字体大小" color="字体颜色">

字体大小可选值为1——7,默认为3

例:〈font face="黑体" size="4" color="#ff00ff">....</font>

水平线<hr>

语法格式:<hr width="宽度" align="对齐方式默认居中center" size="水平线厚度默认为2" color="颜色" noshade>

noshade无阴影,既实线

层〈div><span>两种元素

<div>是块级元素,和段落元素<p>相似,不同的是两个<div>元素之间不会产生两个<p>元素之间的空行,

<span>是行内元素,可以定义段落中部分文字的属性

语法格式:

<div align="" style="">...</div>

align设置层中元素的水平对齐方式

stule设置元素应用css规范的属性

<div>兼容性比<span>要好一点,最好使用<div>

表格语法格式:

<table width="" bgcolor="" background="" border="" cellspacing="" cellpadding="">

<tr>...<td>....</td>....</tr>

</table>

border边框宽度默认值为0,既没有边框

cellspacing表格中单元格的边距大小,默认值为两个像素

cellpadding表格中单元格之间的间距大小,默认值为两个像素

tr元素

语法格式:

<tr align="" bgcolor="">....</tr>

align属性对齐方式可选值如下:left,center,tight,默认为left

bgcolor指定该行的背景颜色

td元素

语法格式:

<td width="宽度" height="高度" align="水平对齐方式" valign="垂直对齐方式" bgcolor="" background="" rowspan="单元格的行跨度" colapan="单元格的列跨度">.....</td>

align属性的可选值有:left,center,right

valign属性的可选值有:top,middle,bottom

rowspan和colapan跨行和跨列的数量,默认为1

input元素 语法格式:

<input type="">

type属性的可选值有:

text 单行文本框

属性:name 文本框名称

value 文本框的初始值

size 文本框的长度

maxlength 可输入字符串最大的长度

radio 单选框

属性:name 单选框名称

value 内部值

checked 默认选定

checkbox 复选框

属性:name 复选框名称

value 内部值

checked 默认选定

reset 重置按钮

submit 确定按钮

属性:name 按钮名称

value 显示在按钮上的文字

password 密码框

属性与文本框的属性完全相同

file 文件域

属性:name文件域名称

size 文件域的长度

maxlength 文件域可接受的字符数量的上限

hidden 隐藏域

属性:name 隐藏域名称

value 内定值

image 图片域

属性:name 所要代表的按钮,可以是submit,reset,或其他.

src 按钮图片的url 地址

列表框<select>

语法格式:

<select>

.....

<option>....</option>

.....

</select>

select元素

语法格式:<select name="" size=""multiple></select>

name 指定列表框的名字

size 指定列表框显示列表项的条数,如果指定了该参数,select元素是个列表,否则是一个下拉列表框

multiple 指定了这个参数,则表示该列表框可选择多项,否则只可选择一项

option属性

语法格式:<option value="" selected></option>

value 该列表项的值

selected 如果设定了这个参数,默认为选定这一项

多行文本框<textarea>

<textarea name="" cols="" rows="" wrap="off/physical/virtual"></textarea>

属性:

name文本框的名称

cols文本框的宽度

rows文本框的高度

wrap文本框的折行方式可选值有:

off不保存换行信息

physical强迫浏览器在发送信息到web服务器端时必须将多行文本框的文字一行一行的送出,

virtual送出连续成串的字除非使用者按回车。

 

posted @ 2015-03-17 08:47  淡无心  阅读(402)  评论(0编辑  收藏  举报