首页 > 代码库 > 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.双标签形式：<标签 属性=参数>对象</标签>。注：任何空格和回车都无效，插入空格和回车有专用的标记。分别是：
 ，<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=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.描点链接：可以链接到当前网页的任意位置。可以在某个小标题上设置描点链接，就可以实现在同一网页内快速跳转。描点语法：
d.E-mail链接：语法格式：<a name="one">第一段内容</a>，然后再链接中指向这个描如：<a href=http://www.mamicode.com/"#one">第一段。当你点击第一段时会跳转到第一段的内容。
<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="" />