HTML代码示例文档格式.docx
《HTML代码示例文档格式.docx》由会员分享，可在线阅读，更多相关《HTML代码示例文档格式.docx（43页珍藏版）》请在冰豆网上搜索。
列分的框架（Frame,cols）39
行分的框架（Frame,rows）39
既有行分又有列分的框架（Frame,rows,cols）40
用框架（Frame）导航40
使用内嵌框架（IFrame）41
如何固定框架（Frame）大小41
HTML列表（List）示例42
不排序列表（UnorderedList）42
排序列表（orderedlist）42
不排序列表的类型（Type）设置43
嵌套的列表（nestedlist）44
定义列表（definitionlist）45
HTML不同类型（Type）的排序列表46
HTML表单（Form）示例48
HTML表单控件-单行文本输入框48
HTML表单控件-密码输入框48
HTML表单控件-复选框（checkbox）49
HTML表单控件-复选框（checkbox）缺省已选（checked）50
HTML表单控件-单选框（radio）50
HTML表单控件-单选框（radio）缺省已选（checked）51
HTML表单控件（FormControl）-下拉框（select）单选52
HTML表单控件-下拉框（select）多选（multiple）52
HTML表单控件-下拉框多选-下拉框设置（size）53
HTML表单控件-多行输入框（textarea）54
HTML表单控件-图片提交（inputtype=image）55
HTML图片（Image）示例55
在HTML里插入图片55
HTML里图片的对齐方式（Align）56
HTML的图片大小（Height,Width）56
HTML图片的说明（Alt属性）57
HTML字体（font）示例57
HTML字体大小（fontsize）57
HTML字体颜色（fontcolor）58
HTML字体风格（fontface）58
HTML网页背景颜色和背景图片示例59
HTML背景颜色59
HTML里加背景图片59
HTML头部信息（Head）示例60
利用Meta的Refresh自动跳转到指定页面60
HTML文本格式示例
一个非常简单的HTML文件
<
html>
body>
这是一个非常简单的HTML。
/body>
/html>
HTML简单段落
p>
这是第一段。
/p>
这是第二段。
这是第三段。
在HTML里，用p来定义段落。
在HTML写多个段落
这一段
在源代码里
包含很多分行，
但是浏览器忽略
这些分行。
这一段在浏览器里
包含很多空格，
但是浏览器忽略多余空格。
你使用的浏览器的窗口大小决定了段落的行数。
如果你改编浏览器窗口的大小，段落的行数会因此改变。
在HTML里如何换行
要<
br>
在一段<
里<
换行<
请使用<
br这个Tag。
HTML正文标题
h1>
这是1号标题<
/h1>
h2>
这是2号标题<
/h2>
h3>
这是3号标题<
/h3>
h4>
这是4号标题<
/h4>
h5>
这是5号标题<
/h5>
h6>
这是6号标题<
/h6>
HTML居中显示的标题
h1align="
center"
>
这是标题<
上面的标题是居中显示的。
在HTML文件里加一条横线（horizontalrule）
用hr这个Tag可以在HTML文件里加一条横线。
hr>
村妇想像皇宫的生活：
皇后得用金扁担挑水吧。
问：
谁是世界上最可怜的人？
答：
炮兵连炊事班战士！
为什么？
戴绿帽背黑锅看别人打炮。
初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：
同学们注意！
我要变形了！
……<
HTML文件的代码注释
!
--这是代码注释-->
代码注释是不会显示在网页里的。
HTML常用格式Tag
b>
粗体用b表示。
/b>
i>
斜体用i表示。
/i>
del>
芙蓉姐姐<
/del>
这个词当中划线表示删除。
ins>
想唱就唱<
/ins>
这个词下划线插入。
X<
sub>
2<
/sub>
其中的2是下标<
sup>
/sup>
其中的2是上标<
blockquote>
好好学习，天天向上。
这句话缩进表示引用<
/blockquote>
pre>
这是
预设（preformatted）文本.
在pre这个tag里的文本保留
空格和
分行。
/pre>
code>
callgetOrders<
/code>
用code显示计算机代码，code里显示的字符是等宽字符。
HTML预格式文本（preformattedtext）
这是预格式（preformatted）
文本
浏览器会保留pre里面的空格和分行。
pre用来表示计算机代码，效果很好。
看如下代码显示：
fori=1to10
printi
nexti
HTML不同计算机输出的Tag
计算机代码Computercode<
kbd>
键盘键入Keyboardinput<
/kbd>
tt>
电报文本Teletypetext<
/tt>
samp>
示例文本Sampletext<
/samp>
var>
计算机变量Computervariable<
/var>
注:
以上这些Tag都可以用来显示计算机程序代码。
HTML里加入地址
address>
上海站长网站长学院路1000号<
站长网站长学院大楼101室<
邮编:
200000<
/address>
HTML里表示删除插入的Tag
我要
删除<
插入<
文字。
还可以使用strike表示删除，效果和del一样。
但是HTML国际标准推荐使用del，不再建议使用strike。
HTML超链接示例
如何创建HTML超链接（hyperlinks）
ahref="
../asdocs/html_tutorials/humor02.html"
这是一个链接<
/a>
target=_blank>
站长网站长学院站点链接<
将图片作为一个超链接
你可以将一张图片作为一个链接，点击这个图片。
../asdocs/html_tutorials/humor03.html"
imgsrc="
../images/html_tutorials/smile.jpg"
>
在HTML文件里跳转
#C6"
参见第六章
aname="
C1"
第1章<
这是站长网站长学院网页教程与代码的中文站点。
C2"
第2章<
C3"
第3章<
C4"
第4章<
C5"
第5章<
C6"
第6章<
C7"
第7章<
C8"
第8章<
C9"
第9章<
C10"
第10章<
C11"
第11章<
C12"
第12章<
C13"
第13章<
C14"
第14章<
C15"
第15章<
C16"
第16章<
C17"
第17章<
在新窗口打开一个链接
../asdocs/html_tutorials/humor01.html"
target="
_blank"
一则笑话<
如果你将target的属性值设成_blank，你点击这个链接的时候，网页就会在一个新窗口出现。
链接到一个邮箱地址
这是一个最简单的邮箱地址的链接：
mailto:
info@"
给新浪网站发信<
这个邮箱地址的链接写了subject内容：
info@?
subject=Hello"
这个邮箱地址链接写了to,cc,bcc,subject,body的内容：
cc=webmaster@&
bcc=media@&
subject=I%20like%20your%20site&
body=真是个好站点！
"
写信给新浪<
空格请用%20表示。
HTML表格（Table）示例
HTML简单表格
表格所用到的Tag：
整个表格开始要用table；
每一行开始要用tr；
每一单元格开始要用td。
只有一行（Row）一列（Column）的表格<
tableborder="
1"
tr>
td>
100<
/td>
/tr>
/table>
一行三列的表格<
200<
300<
两行三列的表格<
400<
500<
600<
没有边界的表格
缺省情况下，表格没有边界。
table>
表格Border设为0，也不显示边界：
0"
有边界的表格
表格的边界值设为1：
第一<
行<
第二<
表格的边界值设为8，边界更粗：
8"
表格的边界值设为15，边界更粗：
15"
HTML表格的表头
有表头的表格：
th>
姓名<
/th>
电话<
传真<
BillGates<
55577854<
55577855<
竖直方向的表头：
表格空单元格
Sometext<
上面的表格中，有一个单元格里是没有任何内容的，这个空的单元格没有显示边界，虽然整个表格设了边界值。
&
nbsp;
上面的例子，你可以看到，给这个单元格加上一个空格符号之后，单元格的边界就显示出来了。
注意：
空格符要用&
bsp;
表示。
是一个HTML特别字符，参见HTML特别字符（HTMLCharacterEntities）。
带标题的表格
这个表格有标题：
6"
caption>
表格标题<
/caption>
包含多行或多列的表格单元格
用colpsan属性，设置包含多列的单元格：
thcolspan="
2"
联系方式<
用rowspan这个属性，设置包含多行的单元格：
throwspan="
一个表格单元格里的内容
这是一段<
这是另外一段。
这个单元格里包含了一个表格：
A<
B<
C<
D<
这个单元格里包含了一个图片：
imgsrc="
../images/html_tutorials/mail.gif"
HELLO<
表格的单元格内容和单元格边界之间的距离（CellPadding）
没有cellpadding的表格：
First<
Row<
Second<
设置cellpadding属性，可以改变单元格内容和单元格边界之间的距离。
以下是设置了cellpadding属性的表格：
cellpadding="
10"
升级会员 