以下内容为李炎恢讲师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;
&
“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标题在表格下方