导航

« ps 按钮样式 素材下载vb2008 Access数据库链接代码  »

XHTML基础入门

虚位以待 XHTML

以下内容为李炎恢讲师XHTML摘要,为XHTML基础部分,小记一下。



  第2章HTML基本结构

  

  1.HTML的基本结构

  

  2.HTML控制标记的格式

  

  3.最常用的控制标记

  

  本章讲解最基本的HTML元素,也就是创建文档结构所需的元素。例如:标题、段落、

  

  页面分隔、注释等等。

  

  2.1HTML的基本结构

  

  <html>-------根控制标记

  

  <head>-------头控制标记

  

  <title>标题</title>-------标题标记

  

  </head>-------头控制标记(尾)

  

  <body>

  

  -------网页显示区域

  

  </body>

  

  </html>-------根控制标记(尾)

  

  (1).<html>…</html>根控制标记

  

  开头和结尾成对出现,双标签

  

  (2).<head>…</head>头控制标记

  

  1.<title>很单纯的文件标题声明

  

  2.<meta>控制标记的动态文件转换声明

  

  3.<base>超链接网址基准参考点

  

  4.Javascript和VBScript程序

  

  5.stylesheet可用来设置排版来的声明

  

  6.<link>可引用外部文件,如CSS排版样本

  

  (3).<title>…</title>设置浏览器的视窗标题

  

  (4).<body>…</body>页面可见内容

  

  2.2HTML控制标记的格式

  

  (1).<标记名称>

  

  单一型,无设置值的。

  

  如:<br>

  

  (2).<标记名称属性=”属性值”>

  

  单一型,有设置值的。

  

  如:<hrwidth=”80%”>

  

  (3).<标记名称>…</标记名称>

  

  对称型,无设置值。

  

  如:<title>…</title>

  

  (4).<标记名称属性=”属性值”>…</标记名称>

  

  对称型,有设置值。

  

  如:<bodybgcolor=”red”>…</body>

  

  <fontsize=”7”>…</font>

  

  2.3最常用的控制标记

  

  (1).跳行<br>

  

  格式:<br>

  

  无属性设置

  

  (2).段落<p>

  

  格式:<palign=”排列方式”>…</p>

  

  属性名称属性值说明

  

  alignleft往左靠(默认)

  

  center往中靠

  

  right往右靠

  

  (3).水平直线<hr>

  

  格式:<hr>

  

  属性名称属性值说明

  

  size像素绝对设置,以数字表示,属性值越大,线越粗

  

  百分比相对设置,以%表示,属性值越大,线越粗

  

  width像素绝对设置,长度不会应视窗的改变而改变

  

  百分比相对设置,长度会随着视窗宽度而改变

  

  (4).向中对齐<center>(被废弃的标签)

  

  格式:<center>…</center>

  

  (5).背景色与文字设置

  

  格式:<bodybgcolor=”背景色”text=”文字颜色”>

  

  整体页面的边距,行距

  

  <bodyleftmargin=”像素”topmargin=”像素”>

  

  (6).标题文字设置

  

  格式:<h1>…</h1>

  

  <h2>…</h2>

  

  <h3>…</h3>

  

  <h4>…</h4>

  

  <h5>…</h5>

  

  <h6>…</h6>

  

  属性名称属性值说明

  

  alignleft靠左

  

  center靠中

  

  right靠右

  

  (7).特殊字符设置

  

  格式:<lt;

  

  >gt;

  

  &amp;

  

  “quot;

  

  (8).在HTML备注

  

  格式:<!--…-->

  

  (9).实体字符控制标记

  

  1.<b>…</b>粗

  

  2.<i>…</i>斜

  

  3.<s>…</s>删

  

  4.<u>…</u>下划

  

  5.<tt>…</tt>电报

  

  6.<sub>…</sub>下标

  

  7.<sup>…</sup>上标

  

  (10).语意字符控制

  

  1.<address>…</address>地址

  

  2.<big>…</big>大字

  

  3.<del>…</del>删除

  

  4.<ins>...</ins>修改

  

  5.<samll>…</small>小字

  

  6.<strong>…</strong>加强语气(加粗)

  

  7.<em>...</em>加强语气(倾斜)

  

  (11).<font>字体控制(被废弃的标签)

  

  格式:<font>…</font>

  

  属性名称属性值说明

  

  size0-7字体大小

  

  color英文或十六颜色

  

  face字体字体

  

  (12).格式化

  

  格式:<pre>…</pre>

  

  让书写的文字格式化!

  

  (13).引用文本

  

  格式:<blockquote>...</blockquote>

  

  属性名称属性值说明

  

  citeurl被引用的地址

  

  第3章排列清单控制标记

  

  1.无序号条例式清单<ul>

  

  2.有序号条例式清单<ol>

  

  3.无序列表和有序列表的结合应用

  

  4.叙述式清单<dl>

    

  排列清单控制标记可以创建一般的列表、编号列表或加着重号列表,以及定义列表。还

  

  可以在一种列表中嵌套另一种列表。对于概括因特网上的内容,列表是非常方便的。

  

  3.1无序号条例式清单<ul>与<li>

  

  格式:

  

    <ul>

  <li>…</li>

  <li>…</li>

  <li>…</li>

  <li>…</li>

  </ul>

  功能:<ul>无序条列清单的开始.

  

  </ul>表示结束.

  

  <li>…</li>表示一个项目.

  

  <li>的属性

  

  属性名称属性值说明

  

  typedise实心圆(默认值)

  

  circle空心圆

  

  square实心方块

  

  主讲:李炎恢

  

  第2页共3页PHP100视频教程

  

  3.2有序号条例式清单<ol>与<li>

  

  格式:

  

    <ol>

  <li>…</li>

  <li>…</li>

  <li>…</li>

  <li>…</li>

  </ol>

  功能:<ol>有序条列清单的开始.

  

  </ol>表示结束.

  

  <li>…</li>表示一个项目.

  

  <ol>的属性

  

  属性名称属性值说明

  

  type1表示以1,2,3,4来表示

  

  a表示以a,b,c,d来表示

  

  A表示以A,B,C,D来表示

  

  i表示以i,ii,iii来表示

  

  I表示以I,II,III来表示

  

  3.3无序列表和有序列表的结合应用

  

  格式:<ul>

  

    <li>

  .....

  <ol>

  <li>…</li>

  <li>…</li>

  <li>…</li>

  </ol>

  </li>

  <li>

  .....

  <ol>

  <li>…</li>

  <li>…</li>

  <li>…</li>

  </ol>

  </li>

  </ul>

  3.4叙述式清单(定义列表)

  格式:

  <dl>

  <dt>…</dt>

  <dd>…</dd>

  <dd>…</dd>

  <dd>…</dd>

  <dt>…</dt>

  <dd>…</dd>

  <dd>…</dd>

  <dd>…</dd>

  </dl>

  功能:<dl>叙述清单的开始

  <dt>表示一个项目

  <dd>表示一个项目下的更详细的内容



    第4章表格

  1.表格的基本格式

  2.<table>标签下的常用属性

  3.<table>标签下的边框设置

  4.<tr><th><td>标签下的常用属性

  5.拆分与合并单元格

  6.表格的结构化、直列化、标题

  7.表格的嵌套

  在网页中表格是一种经常使用到得设计结构,就像表格的内容中可以包含任何的数据,

  如文字、图像、表单、超链接、表格等等,所有在HTML中可以使用的数据,都可以被设

  置在表格中,所以有关表格设置的标记与属性页特别多。

  4.1表格的基本格式

  格式:

  <table>

  <tr>…

  <th>…</th>

  <th>…</th>

  <th>…</th>

  </tr>

  <tr>

  <td>…</td>

  <td>…</td>

  <td>…</td>

  </tr>

  </table>

  功能:<table>…</table>用来声明表格开始与结束.

  <tr>…</tr>用来设置表格的行.

  <th>…</th>用来设置标题栏位.

  <td>…</td>用来设置数据栏位.





  4.2<table>标签下的属性

  属性名称属性值说明

  border像素设置表格的边线

  cellspacing像素绝对设置,存储格框线宽度

  百分比相对设置,存储格框线宽度

  cellpadding像素绝对设置,数据与框线的距离

  百分比相对设置,数据与框线的距离

  width像素绝对设置,像素表示表格宽度

  百分比相对设置,百分比表表格宽度

  height像素绝对设置,像素表示表格宽度

  百分比绝对设置,百分比表表格宽度

  alignleft表格往左靠(默认)

  center表格往中靠

  right表格网右靠

  bgcolor英文/十六表格的背景颜色

  backgroundURL表格的背景图片

  summary字符串用来描述表格数据说明

  bordercolor英文/十六边框的颜色

  bordercolorlight同上边框的亮色

  bordercolordark同上边框的暗色



  4.3<table>标签下的边框设置

  属性名称属性值说明

  framevoid不要显现表格的边线

  above只要显现出表格的上边线

  below只显现出表格的下边线

  hsides只显示表格的上下边线

  vsides只显现表格的左右边线

  lhs只显现表格的左边线

  rhs只显现表格的右边线

  border/box会显现出表格的所有边线

  rulesrows只显示出横行的格框线

  cols只显示出直行的格框线

  all显示全部格框线

  groups表示列组合水平部分

  none不显示任何格框线



  4.4<tr><th><td>标签下的常用属性

  该属性必须在border

  的属性值不为0的状

  态下!

  属性名称属性值说明

  width像素绝对设置,以像素值设置宽

  百分比相对设置,以百分比设置宽

  height像素绝对设置,以像素值设置高

  百分比相对设置,以百分比设置宽

  bgcolor英文/十六数据栏的颜色设置

  align(水平方向)left数据靠左

  center数据靠中

  right数据靠右

  valign(垂直方向)top数据靠上

  middle数据靠中

  bottom数据靠下

  nowrap无在单元格中换行



  4.5拆分与合并单元格

  属性名称属性值说明

  colspan数字向两边扩展栏位

  rowspan数字向下扩展栏位



  4.6表格的结构化、直列化、标题

  (1).结构化格式:

  <table>

  <thead>……</thead>--------表头区

  <tbody>……</tbody>--------表体区

  ………………………

  <tfoot>……</tfoot>--------表尾区

  </table>



  (2).直列化格式:<colgroup>….</colgroup>

  属性名称属性值说明

  alignleft靠左

  center靠中

  right靠右

  valigntop靠上

  middle靠中

  bottom靠下

  span数字直列数目

  width像素/百分比宽度

  个别直列设置

  主讲:李炎恢

  第4页共5页PHP100视频教程

  格式:<col>功能完全和<colgroup>一样.



  (3).表格的标题:

  <table>

  <caption>….</caption>

  </table>

  <caption>下的属性值有:

  属性名称属性值说明

  aligntop标题在表格上方

  bottom标题在表格下方

  

  • 顶一下
虚位以待


  • 相关文章:


原创文章如转载,请注明:转载自落日故乡

本文链接地址:http://www.spersky.com/post/XHTMLbase.html

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

内容搜索


虚位以待

常用链接

最新评论及回复

Powered By Z-Blog

Copyright spersky All Rights Reserved.Theme Moonlight,Calf modified.n 浙ICP备16017820号-1