1、HTML的基本结构
<html>
<head>
<title>...</title>
</head>
<body>
</body>
</html>
<head>
和</head>
中间可以添加的内容:
标签符号 | 说明 |
---|---|
<title></title> |
文件标题声明 |
<meta></meta> |
控制标记的动态文件转换声明 |
<base></base> |
超链接网址基准参考点 |
<script></script> |
Javascript 和 VBScript 程序 |
<style></style> |
stylesheet 用来设置排版的声明 |
<link></link> |
可引用外部文件,如 CSS 排版样本 |
2、常用的控制标记
(1)跳行<br>
格式:<br>
,无属性设置。
(2)段落<p>
格式:<p align=”排列方式”>......</p>
属性名称 | 属性值 | 说明 |
---|---|---|
align | left | 居左(默认) |
align | center | 居中 |
align | right | 居右 |
(3)水平直线<hr>
格式:<hr>
属性名称 | 属性值 | 说明 |
---|---|---|
size | 像素 | 绝对设置,以数字表示,属性值越大,线越粗 |
size | 百分比 | 相对设置,以%表示,属性值越大,线越粗 |
width | 像素 | 绝对设置,长度不会因视窗的改变而改变 |
width | 百分比 | 相对设置,长度会随着视窗宽度而改变 |
noshade | 实体线 |
(4)居中对齐<center>
(被废弃的标签)
格式:<center>......</center>
(5)背景色与文字设置
格式:<body bgcolor=”背景色” text=”文字颜色”>
,<body leftmargin=”像素” topmargin=”像素”>
(6)标题文字设置
格式:<h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6>
属性名称 | 属性值 | 说明 |
---|---|---|
align | left | 居左 |
align | center | 居中 |
align | right | 居右 |
(7)特殊字符设置
格式:
特殊字符 | 代替表示 |
---|---|
< | lt; |
> | gt; |
& | amp; |
" | quot; |
(8)HTML的备注
格式:<!-- -->
(9)实体字符控制标记
标签 | 说明 |
---|---|
<b>…</b> |
加粗 |
<i>…</i> |
倾斜 |
<s>…</s> |
删除 |
<u>…</u> |
下划线 |
<tt>…</tt> |
电报 |
<sup>…</sup> |
上标 |
<sub>…</sub> |
下标 |
(10)语意字符控制
标签 | 说明 |
---|---|
<address>…</address> |
地址 |
<big>…</big> |
大字 |
<del>…</del> |
删除 |
<ins>…</ins> |
修改 |
<samll>…</small> |
小字 |
<strong>…</strong> |
加强语气(加粗) |
<em>…</em> |
加强语气(倾斜) |
(11)字体控制<font>
(被废弃的标签)
格式:<font>…</font>
属性名称 | 属性值 | 说明 |
---|---|---|
size | 0-7 | 字体大小 |
color | 英文或十六进制表示 | 颜色 |
face | 字体 | 字体 |
(12)格式化
格式:<pre>…</pre>
让书写的文字格式化。
(13)引用文本
格式:<blockquote>...</blockquote>
属性名称 | 属性值 | 说明 |
---|---|---|
cite | url | 被引用的地址 |
3、无序列表和有序列表
(1)无序列表<ul>
与<li>
格式:
<ul>
<li>......</li>
<li>......</li>
<li>......</li>
<li>......</li>
</ul>
功能:<ul>
:无序列表的开始,</ul>
:无序列表的结束,<li>......</li>
:表示一个无序列表项。
<li>
的属性
属性名称 | 属性值 | 说明 |
---|---|---|
type | dise | 实心圆(默认值) |
type | circle | 空心圆 |
type | square | 实心方块 |
(2)有序列表<ol>
与<li>
格式:
<ol>
<li>......</li>
<li>......</li>
<li>......</li>
<li>......</li>
</ol>
功能:<ol>
:有序列表的开始,</ol>
:有序列表的结束,<li>......</li>
:表示一个有序列表项。
<ol>
的属性
属性名称 | 属性值 | 说明 |
---|---|---|
type | 1 | 以 1,2,3,4 来表示 |
type | a | 以 a,b,c,d 来表示 |
type | A | 以 A,B,C,D 来表示 |
type | i | 以 i,ii,iii 来表示 |
type | I | 以 I,II,III 来表示 |
(3)无序列表和有序列表的结合应用
格式:
<ul>
<li>
<ol>
<li>......</li>
<li>......</li>
<li>......</li>
</ol>
</li>
<li>
<ol>
<li>......</li>
<li>......</li>
<li>......</li>
</ol>
</li>
</ul>
(4)叙述式清单(定义列表)
格式:
<dl>
<dt>...</dt>
<dd>......</dd>
<dd>......</dd>
<dd>......</dd>
<dt>...</dt>
<dd>......</dd>
<dd>......</dd>
<dd>......</dd>
</dl>
功能:<dl>
:叙述清单的开始,<dt>
:表示一个叙述式列表项,<dd>
:表示一个叙述式列表项下的更详细的内容。
4、表格
(1)<table>
标签下的属性
属性名称 | 属性值 | 说明 |
---|---|---|
border | 像素 | 设置表格的边线 |
cellspacing | 像素 | 绝对设置,格框线的宽度 |
cellspacing | 百分比 | 相对设置,格框线的宽度 |
cellpadding | 像素 | 绝对设置,数据与框线的距离 |
cellpadding | 百分比 | 相对设置,数据与框线的距离 |
width | 像素 | 绝对设置,像素表示表格宽度 |
width | 百分比 | 相对设置,百分比表示表格宽度 |
height | 像素 | 绝对设置,像素表示表格高度 |
height | 百分比 | 绝对设置,百分比表示表格高度 |
align | left | 表格居左(默认) |
align | center | 表格居中 |
align | right | 表格居右 |
bgcolor | 英文或十六进制表示 | 表格的背景颜色 |
background | URL | 表格的背景图片 |
summary | 字符串 | 用来对表格中的数据作说明 |
bordercolor | 英文或十六进制表示 | 边框的颜色 |
bordercolorlight | 英文或十六进制表示 | 边框的亮色 |
bordercolordark | 英文或十六进制表示 | 边框的暗色 |
(2)<table>
标签下的边框设置
属性名称 | 属性值 | 说明 |
---|---|---|
frame | void | 不要显现表格的边线 |
frame | above | 只显现出表格的上边线 |
frame | below | 只显现出表格的下边线 |
frame | hsides | 只显示表格的上下边线 |
frame | vsides | 只显现表格的左右边线 |
frame | lhs | 只显现表格的左边线 |
frame | rhs | 只显现表格的右边线 |
frame | border/box | 会显现出表格的所有边线 |
rules | rows | 只显示出横行的格框线 |
rules | cols | 只显示出直行的格框线 |
rules | all | 显示全部格框线 |
rules | groups | 表示列组合水平部分 |
rules | none | 不显示任何格框线 |
注意:frame属性必须在border属性值不为0的状态下设置才有效果。
(3)<tr><th><td>
标签下的常用属性
属性名称 | 属性值 | 说明 |
---|---|---|
width | 像素 | 绝对设置,以像素值设置宽 |
width | 百分比 | 相对设置,以百分比设置宽 |
height | 像素 | 绝对设置,以像素值设置高 |
height | 百分比 | 相对设置,以百分比设置高 |
bgcolor | 英文或十六进制 | 数据栏的颜色设置 |
align(水平方向) | left | 数据靠左 |
align(水平方向) | center | 数据靠中 |
align(水平方向) | right | 数据靠右 |
valign(垂直方向) | top | 数据靠上 |
valign(垂直方向) | middle | 数据靠中 |
valign(垂直方向) | bottom | 数据靠下 |
nowrap | 在单元格中不换行 |
(4)拆分与合并单元格
属性名称 | 属性值 | 说明 |
---|---|---|
colspan | 数字 | 向两边扩展栏位 |
rowspan | 数字 | 向下扩展栏位 |
(5)表格的结构化
结构化格式:
<table>
<thead>......</thead>
<tbody>......</tbody>
<tfoot>......</tfoot>
</table>
(6)表格的直列化
表格的直列化格式:<colgroup>......</colgroup>
属性名称 | 属性值 | 说明 |
---|---|---|
align | left | 居左 |
align | center | 居中 |
align | right | 居右 |
valign | top | 居上 |
valign | middle | 居中 |
valign | bottom | 居下 |
span | 数字 | 直列数目 |
width | 像素/百分比 | 宽度 |
个别直列设置格式:<col>
功能完全和<colgroup>
一样。
(7)表格的标题
<table>
<caption>......</caption>
</table>
<caption>
下的属性值:
属性名称 | 属性值 | 说明 |
---|---|---|
align | top | 标题在表格上方 |
align | bottom | 标题在表格下方 |