首页 > 代码库 > xhtml 学习

xhtml 学习

1.xhtml和html的区别:html与xhtml是一种语言的不同阶段,xhtml是网页标准化过程中由html走向xml的一座桥梁。xhtml的要求比

html的更严格。如:xhtml要求正确嵌套,xhtml的所有元素必须关闭,xhtml区分大小写,xhtml属性值要用双引号,xhtml用id替代

name属性等等。使用dw默认使用xhtml.

2.<html>的基本语法:由标签和属性构成。不同的标签之间可以嵌套,不能交叉。

标签 可分为:

a.单标签:形式<标签 属性=参数>,最常见的如:强制换行符<br>,分割线标签<hr>,插入文本标签<input>

b.双标签形式:<标签 属性=参数>对象</标签>。注:任何空格和回车都无效,插入空格和回车有专用的标记。分别是:

&nbsp,<br/>

3.<head>:

a.<title>标签:搜索引擎robots搜索的主要依据。

b.<meta>标签:主要用于为搜索引擎robots定义页面的主题信息和定义用户浏览器上的cookie,作者,版权信息或关键字。定

时刷新时间等。

                    几个重要的属性:

b1.http-equiv属性:指定网页字符集:如:<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

b2.name属性:指定页面的关键字:搜索引擎会自动读取meta标签关键字的内容,并使用该信息在它们的数据库中将页

面编入索引。如:<meta name="keywords" content="关键字内容" />

b3.name属性:指定页面说明:搜索引擎会自动读取该内容,有些搜索引擎会显示该信息。<meta name="description" content="页面说明内容"/>

b4.http-equiv属性:设置页面的刷新时间:可以在一段时间后自动刷新,如:<meta http-equiv="refresh" content="2"/> 或

者在指定时间后跳转到某页面:<meta http-equiv="refresh" content="5;URL="http://jquery.com"/>

b5.name属性:robots:用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。content的参数有all,index,

none,noindex,follow,默认值all。如:<meta name="robots" content="all" /> 

b6.name属性:author:<meta name="author" content="zuozheming"/>

4.<body>:可以在dw中修改:在 修改――>页面属性――>外观和链接选项卡   就可以对相应的属性进行修改。

5.网页文字:在网页增加文字:只要在〈body〉</body>之间,需要插入文字的地方插入文字就可以实现。        

            如何设置文本格式:用html标签格式化文本和使用层叠样式表css格式化文本(主要)。

            文字的语法为:<font 属性设置>需要显示的文字</font>,网页文字的样式主要是设置文字的字体(face),字号(size),颜

色(color)等属性。

            标题字体的语法:<h1>标题字体</h1>,数字越小字体越大,标题的字体为黑体,并且和下面的文字自动隔一行。

            逻辑字体:不指明字体如何显示,让web浏览器自行决定显示方式,如:

<address>将网页需要显示的地址文字突出显示,一般用斜体显示</address>

<em>一般强调,通常以斜体显示</em>,<strong>特别强调,通常用粗体显示</strong>

<code>以等宽字体显示命令或计算机程序代码</code>

<samp>用于字母序列,用等宽字体显示</samp>

<kbd>用粗体等宽字体显示</kbd>

<var>用较小的固定宽度字体显示字体,也可以表示一个程序变量</var>

<dfn>用于名词解释,用斜体显示别解释的术语或名词缩写</dfn>

<cite>用于标题文字,通常用斜体显示</cite>,<strike>删除线。</strike>

<small>比网页中的字体减小一号</small>

<big>比网页中的缺省字体大一号</big>

            物理字体:物理字体明确指明了字体的类型,无论何种浏览器,遇到这些表示字体的标签时,都是用相同的方式进行显示。

如:

<b>粗体</b>

<i>斜体</i>

<u>下划线</u>

<sup>上标,将文字显示为上标。</sup>

<sub>将文字显示为下标</sub>

<tt>用等宽字体来显示文本,相当于打字机的效果</tt>

<s>删除线,该标签在指定的文本上画一条删除线</s>

            段落:网页由多个段落构成。段落语法:

<p>段落</p>,段落与段落之间有一空行。

            回车换行

<br/>就是强制换行,一个<br/>换一行

            注释:<!--注视的内容-->。

            空格:空格用&nbsp;表示,两个空格代表一个汉字的位置。

            特殊符号

("):&quot;

 (&):&amp;

 (<):&lt; 

 (>):gt; 

(×):&times 

(版权):&copy; 

(商标):&reg; 

(TM):&trade;

            水平线:增加一条默认样式的水平线。语法:

<hr 属性 />

            <center>:同align属性功能,实现文字或图像或其他对象的居中对齐。

            <pre>标签:是preformatted,和p标签基本相同,除了文字的内容将保留空格和换行符,并且英文字符都使用统一的等宽字体。

6.图像

如何增加图片:基本语法

<img src=http://www.mamicode.com/"图像的具体位置" />,默认网页显示的是图像文件的原始尺寸大小。

                     几种重要的属性

a.图像的对齐方式:遇到图像与文字混合的时候,有时候要把图像放在左边,文字放在右边,有时要把文字放在图

像中间:可以使用align属性解决:值有:

top(顶),right(右),bottom(底):默认值,left(左),midddle(中间):这是图像相对于文字的位置而言的。

b.边框:用border属性。

c.提示文字:alt属性。

d.水平边距和垂直边距:设置图像与文字之间的距离:hspace属性:垂直边距,vspace属性:水平边距。

7.超级链接

a.文字链接:基本语法如下:

<a href=http://www.mamicode.com/"链接的地址">文字//链接地址可以是网页地址,图像地址,影视地址。

b.图像链接:如:

<a href=http://www.mamicode.com/"链接的地址"> //浏览器默认会在图像上加上边框,可以把图像的边框值设为0px。

c.描点链接:可以链接到当前网页的任意位置。可以在某个小标题上设置描点链接,就可以实现在同一网页内快速跳转。描点语法:

<a name="one">第一段内容</a>,然后再链接中指向这个描如:<a href=http://www.mamicode.com/"#one">第一段。当你点击第一段时会跳转到第一段的内容。

d.E-mail链接:语法格式:

<a href="mailto:邮箱地址">文字或图像</a>

e.链接的属性

e1.target:以何种方式打开超级链接,其值有:

_blank:表示单机该链接时会弹出一个新窗口载入被链接的网页。

_parent:表示在上一级浏览器窗口中显示被链接的网页。

_self:表示在当前浏览器窗口中显示被链接的网页,(默认)。 

_top:表示在顶端浏览器窗口中显示被链接的网页。

e2.title:当鼠标放在链接上时,稍后会出现一行提示文字。title为提示的内容。

8.列表:列表主要分为三种类型:

一:有序列表(ordered list)用ol表示。

二:无序列表(unordered list)用ul表示。

三:定义列表(definition list)用dl表示。还有目录列表和菜单列表可用css代替。

            a.无序列表:用没有序号的符号来标志每个列表项,无序列表由<ul>开始,</ul>结束,内部每个列表项由<li>开始,</li>结

束。列表项内部可以使用段落,换行符,图

片,链接以及其他列表等。

            b.无序列表的嵌套

     <ul>

                                 <li>第一项内容
                                     <ul>
                                       <li>潜逃的列表</li>
      </ul>
                                  </li>
                                  <li>第二项内容</li>
                               </ul>
             c.无序列表的type属性:其值有:disc:实心黑圆圈。 cercle:空心圆圈。 square:空心正方形。

             d.有序列表:按照数字或字母等顺序来排列列表项目。有序列表由<ol>开始,</ol>结束,每个列表项由<li>开始,</li>结束。

             e.有序列表的type属性:默认是以数字序号作为列表的开始。其值可以为:

(1):数字1,2,3... 

(a):小写字母a,b,c 

(A):大写字母:A,B,C 

( i):小写罗马数字i,ii,iii...

 (I):大小罗马字母。

             f.有序列表的start属性:可以用过start设置列表项起始的数字。

             g.定义列表:是一种两个层次的列表,用于解释名词的定义,名词为第一层,解释为第二层,不包括项目符号。使用<dl>作

为定义列表的声明,使用<dt>作为名词的标

题,<dd>用来解释名词。语法如下:<dl>
<dt>名词1</dt><dd>解释一</dd>
<dt>名词2</dt><dd>解释二</dd>
  </dl>

9.表格:表格可用做布局和显示数据的作用。布局可用css替代,所用只使用表格的显示数据功能。用<table></table>表示表格,用

<tr></tr>表示一行,用<td></td>表示一列,用<th></th>表示表格的表头,<caption>定义表格的标题。

         a.表格的标题:基本语法:<caption>标题内容</caption>,表格标题caption应该放在<table>和<tr>之间。

         b.表格的表头:表格的第一行称为表头,表格有几列就设置多少个<th>表头内容</th>,外面用<tr></tr>包围。

         c.表格常用的属性

a.align属性:用来指定表格是放在网页文本的左边还是右边,还是让文本在表格周围环绕。其值有:left,center,

right。

b.border属性:表格默认是没有边框的,可以用border设置边框宽度。用bordercolor设置边框颜色。用bordercolorlight:

设置亮边框颜色。用bordercolordark设置暗边框颜色。

c.width属性:表格宽度(数字或百分比),height:表格高度(数字或百分比)建议不要设置。

d.bgcolor属性:表格的默认背景颜色是白色,可以用bgcolor设置整个表格或一行或一个单元格的背景颜色。background

属性:提供一副图象的URL作为表格的

背景,如果表格比图象小的话,图象会被修剪。

e.cellspacing属性:控制相邻单元格之间的距离,此属性的参数值是数字(像素点数),对应于dw表格属性中的(间

距)。

f.cellpadding属性:控制单元格的边框和它的内容之间的距离,它的默认值是一个像素值。对应于dw中表格属性中的

(填充)。

         d.单元格的属性:

a.align属性:单元格中的文字内容的水平对齐方式。其值有left,center,right。

b.valign属性:单元格中的文字内容的垂直对齐方式。其值有top(顶端),middle(居中),bottom(底部),

baseline(基线)。

c.colspan属性:列方向合并,其值为需要合并列的数目。

d.rowspan属性:行方向合并,其值为需要合并行的数目。

         e.表格的嵌套:在一个大表格中,再嵌进去一个或几个小的表格,即插入到单元格中的表格。一般在网页布局时使用,现在用

<div>标签和css来实现网页布局。

10.表单:凡是要求用户输入信息地方就要用到表单。表单是由一个或多个文本输入框,可单击的按钮,下拉列表或菜单,多选框组

成。所有的这些都放在<form>标签中。在网页中可以包含多个表单,表单内可以放置文字和图象,文字为用户提供各种提示和指

示,告诉他们如何填写表单,图象其美化的效果。还可以用javascript事件处理来实现多种效果,如检验用户输入表单的内容是否符

合要求等。

         a.表单的语法:<form></from>,在dw中选择:插入--〉表单--〉表单,选择相应的属性即可。

         b.表单的属性

a.action属性:表示表单提交后发送的URL地址,如:action=“2.jsp”,当提交表单时,就会把用户输入的所有数据提交给

2.jsp

网页来处理表单信息。对应于dw表单属

性中的(动作)选项。(用来定义表单处理程序,如asp,jsp,php等程序)

          b.method属性;定义表单结果从浏览器传送到服务器的方法,其值有:post和get。对应dw表单属性中的(方法)。get

的方式是将表单控件的name/value信息经过编码之后通过URL发送(可以在地址栏看到)。post则将表单的内容通过http发

送,用户在地址栏看不到表单提交的信息。如果只是为了取得和显示数据,用get,一旦涉及数据的保存和更新,用post。 

c.表单子项

单行文本域: <input type="text" name="" id="" size="宽度" maxlength="最多输入字符数" value=http://www.mamicode.com/"初始值">

              密码文本域:<input type="password" name="" />

              多行文本域: <textarea name="" id="" cols="30" rows="10"></textarea>

              单选按钮:<input name="radio1" type="radio" value=http://www.mamicode.com/"男" checked="checked" />男

                  <input name="radio1" type="radio" value=http://www.mamicode.com/"女" />女

              复选框:<input name="fruit" type="checkbox" value=http://www.mamicode.com/"苹果" />苹果

                 <input name="fruit" type="checkbox" value=http://www.mamicode.com/"橘子" />橘子

              下拉列表:<select name="" id="" size="用户一次可以看到的选项,默认为1"></select>

        <option value=http://www.mamicode.com/"" selected="">选项一

      </select>

    提交按钮:<input type="submit" name="" value=http://www.mamicode.com/"提交" />

    重置按钮:<input type="reset" value=http://www.mamicode.com/"重置" />

    一般按钮:<input type="button" name="" value="点击我" onClick="javascript:alert(‘你好‘)" />

    图像域:  <input type="image" src=http://www.mamicode.com/"ima/32.gif" name="" />

    隐藏域:  <input type="hidden" name="" value=http://www.mamicode.com/"" />

    文件域:  <input type="file" name="" size="" maxlength="" />