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.双标签形式:<标签 属性=参数>对象</标签>。注:任何空格和回车都无效,插入空格和回车有专用的标记。分别是:
 ,<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/>换一行
注释:<!--注视的内容-->。
空格:空格用 表示,两个空格代表一个汉字的位置。
特殊符号:
("):"
(&):&
(<):<
(>):gt;
(×):×
(版权):©
(商标):®
(TM):™
水平线:增加一条默认样式的水平线。语法:
<hr 属性 />
<center>:同align属性功能,实现文字或图像或其他对象的居中对齐。
<pre>标签:是preformatted,和p标签基本相同,除了文字的内容将保留空格和换行符,并且英文字符都使用统一的等宽字体。
6.图像:
如何增加图片:基本语法:
<img src="图像的具体位置" />,默认网页显示的是图像文件的原始尺寸大小。
几种重要的属性:
a.图像的对齐方式:遇到图像与文字混合的时候,有时候要把图像放在左边,文字放在右边,有时要把文字放在图
像中间:可以使用align属性解决:值有:
top(顶),right(右),bottom(底):默认值,left(左),midddle(中间):这是图像相对于文字的位置而言的。
b.边框:用border属性。
c.提示文字:alt属性。
d.水平边距和垂直边距:设置图像与文字之间的距离:hspace属性:垂直边距,vspace属性:水平边距。
7.超级链接:
a.文字链接:基本语法如下:
<a href="链接的地址">文字</a>//链接地址可以是网页地址,图像地址,影视地址。
b.图像链接:如:
<a href="链接的地址"><img src="图像位置" /></a> //浏览器默认会在图像上加上边框,可以把图像的边框值设为0px。
c.描点链接:可以链接到当前网页的任意位置。可以在某个小标题上设置描点链接,就可以实现在同一网页内快速跳转。描点语法:
d.E-mail链接:语法格式:<a name="one">第一段内容</a>,然后再链接中指向这个描如:<a href="#one">第一段</a>。当你点击第一段时会跳转到第一段的内容。
<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="初始值"></input>
密码文本域:<input type="password" name="" />
多行文本域: <textarea name="" id="" cols="30" rows="10"></textarea>
单选按钮:<input name="radio1" type="radio" value="男" checked="checked" />男
<input name="radio1" type="radio" value="女" />女
复选框:<input name="fruit" type="checkbox" value="苹果" />苹果
<input name="fruit" type="checkbox" value="橘子" />橘子
下拉列表:<select name="" id="" size="用户一次可以看到的选项,默认为1"></select>
<option value="" selected="">选项一</option>
</select>
提交按钮:<input type="submit" name="" value="提交" />
重置按钮:<input type="reset" value="重置" />
一般按钮:<input type="button" name="" value="点击我" onClick="javascript:alert(‘你好‘)" />
图像域: <input type="image" src="ima/32.gif" name="" />
隐藏域: <input type="hidden" name="" value="" />
文件域: <input type="file" name="" size="" maxlength="" />