HTML基础标记：
1).文档主体标记
<body>用于标记HTML文档的主体部分，主要属性：
.bgcolor
设置页面背景颜色，如：bgcolor="#ccffcc"
.background
设置页面背景图片，如：background="images/bg.gif"
.bgproperties="fixed"
使背图图片不随着滚动条的滚动而滚动
.text
设置文档正文的文字颜色，如:text="#ff6666"
例1：
<html>
<head>
<title>HTML笔记-body标记</title>
</head>
<body bgcolor="#cc99ff" text="red">
背景颜色：#cc99ff<br>
字体颜色：red
</body>
</html>
例2(背景图):
<html>
<head>
<title>HTML实用教程-body标记</title>
</head>
<!--在body标签中加入属性bgproperties="fixed"后面，背景将固定不会移动 -->
<body background="pic.jpg" bgproperties="fixed" text="red">
<!--
<body background="pic.jpg" text="red">
-->
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
<h3>背景图片随文字滚动<p>美丽风景</h3>
</body>
</html>
2).分段标记:<p>段落文字</p>
3).换行标记:
<p>
段内第一行<br>
段内第二行<br>
段内第三行
</p>
4).正文标记(h1-h6):
<h1>1号正文标题文字</h1>
5).注释标记:<!-- 注释文字 -->
6).水平分隔线标记:<hr>
例:
<html>
<head>
<title>标记</title>
</head>
<body>
<h1>唐宋八大家之欧阳修</h1>
<h2 align="center">唐宋八大家之欧阳修</h2>
<h3 align="right">唐宋八大家之欧阳修</h3>
<h4 align="letf">唐宋八大家之欧阳修</h3>
<hr>
<p>唐宋八大家之欧阳修</p>
<p>唐宋八大家之欧阳修</p>
<hr color="blue" size="5">
<hr color="#00ff00" size="2" width="50%" align="center">
</body>
</html>
7).文档头部信息：
<head>用于标记HTML文档头部信息，主要是供浏览器或网络搜索引擎使用，而不会显示在网页正文中。
<head>主要子标记(子元素):
.<title>
.<link>:建立到外部文件(主要是CSS外部样式表)的链接
<link rel="stylesheet" href="my.css" type="text/css">
.<style>:设置网页的内部样式表
.<meta>:设置当前页面的元数据信息
<meta name="description" content="HTML笔记">
<meta name="keywords" content="笔记">
<meta name="autho" content="gyen">
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
例：
<html>
<head>
<title>标题</title>
<link rel=stylesheet" href="csc/my.css" type="text/css">
<style type="text/css">
body{background-color:#ccff99;color:red;}
</style>
<meta name="description" content="HTML笔记">
<meta name="keywords" content="笔记">
<meta name="autho" content="gyen">
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
</head>
<body>
<h1>头部信息测试！</h1>
5秒钟后页面将跳转...
</body>
</html>
8).文本格式:
.HTML使用文本格式标记设置文本信息的显示格式，如粗体，斜体，上标/下标等。
.常用文本格式标记：
标记 显标格式
<b> 粗体(bold)
<i> 斜体(italic)
<del> 文字中部划线表示删除
<ins> 文字下划线表示填充内容
<sub> 下标
<sup> 上标
<pre> 原样显示，保留空格和换行
例：
<html>
<head>
<title>HTML文本显示格式</title>
</head>
<body>
<p><b>粗体字(bold)</b></p>
<p><i>斜体字(italic)</i></p>
<p><del>启当中划线表示删除(delete)</del></p>
<p><ins>词下划线表示插入/填充内容(insert)</ins></p>
<p>下标:p<sub>1</sub><br></p>
<p>上标:-2<sup>7</sup>~2<sup>7</sup>-1</p>
<pre>
预设(preformatted)文本，原样显示--
保留 文本中的空 格和
换行
</pre>
</body>
</html>
9).字体：
<font>标记用于设置字体的类型，大小和颜色。
<font>标记的属性：
.face:设置字体类型
<font face="宋体">文字内容</font>
.size:设置字体大小
<fotn size="2">文字内容</font>
.color:设置字体颜色
<font color="#ff0000">文字内容</font>
例:
<html>
<head>
<title>HTML实用教程-字体</title>
</head>
<body>
<font face="courier">
Long long age ,there lived a king!
</font><br>
<font face="impact">
Long long age ,there lived a king!
</font><br>
<font face="impact" size="1">
Long long age ,there lived a king!
</font><br>
<font face="impact" size="6">
Long long age ,there lived a king!
</font><br>
<p><font face="宋体">少无适俗，性本爱丘山</font></p>
<p><font face="隶书" size="6" color="#9932cc">
少无适俗，性本爱丘山
</font></p>
<font face="黑体" size="8" color="#47ef2e">
<p align="center">
少无适俗，性本爱丘山<br>
<font color="red">误落尘网中，一去三十年</font><br>
明月几时有，把酒问晴天<br>
不知天上宫阙，今夕是何年
</p>
</font>
</body>
</html>
10).图片
<img>标记用于在HTML页面中插入图片
<img src="you.png">
<img src="http://www.gyen.com/boo.gif">
<img>标记的其它属性：
.alt:在不支持图显示的浏览器中将显示本属性值(alternate text)
<img src="you.png" alt="我的图片">
.width/height:设置图片的大小
<img src="you.png" width="200" height="120">
<img src="you.png" width="30%" height="30%">
.align:设置图片的水平和垂直对齐方式。
<img src="you.png" align="bottom">
.border:设置图片的边框线条宽度
<img src="you.png" border="2">
例:
<html>
<head>
<title>HTML图片</title>
</head>
<body>
<p>显示图片：
<img src="you.jpg" alt="图片" width="200" height="220">
其它文字</p>
</body>
</html>
11).特殊字符显示：
特殊字符:空格符,<,>,&,"等：
显示效果 符号说明 实体名表示 实体编号表示
空格符  
< 小于号 < <
> 大于号 > >
& ＆符号 & &
" 双引号 " "
版板符号 © ©
注册商标 ® ®
Ｘ 乘号 × ×
除号 ÷ &247;
例：
<html>
<head>
<title>HTML特殊字符显示</title>
</head>
<body>
<p>显示特殊字符:</p>
<p>空格符:中 国  人</p>
<p>小于号:<<</p>
<p>大于号:>></p>
<p>符号&:&&</p>
<p>双引号:""</p>
<p>版权号:©©</p>
<p>注册商标:®®</p>
<p>乘号:××</p>
<p>除号:÷÷</p>
</body>
</html>
12).超链接:
HTML使用<a>标记来实现超链接:
<a href="http://www.baidu.com">百度</a>
<a>标记的其它属性:
.target:在指定的窗口或新窗口中显示链接页面
<a href="http://www.baidu.com" target="_blank">百度</a>
.name:设置锚(anchor)标记，实现超链接跳转到页面指定位置:
<a name="p1">文本内容</a>
<a href="p1">跳转到(锚标记p1)指定的位置 </a>
.title:设置超链接的说明文字(鼠标悬停在超链接上时显示)
<a href="you.jpg" title="点击可以看到图片">图片</a>
.链接到email地址:
<a href="mailto:gyenty@yahoo.com.cn">联系我 </a>
.图片作为链接：
<a href="..."><img src="you.jpg"></a>
13).列表：
.有序列表(Ordered List)
<ol type="a">
<li>列表条目</li>
</ol>
.无序列表(Unordered List)
<ul type="disc">
<li>列表条目</li>
</ul>
.定义列表(Definition List)
<dl>
<dt>列表条目标题</dt><dd>列表条目正文</dd>
</dl>
例:
<html>
<head>
<title>HTML教程-列表</title>
</head>
<body>
排序列表：
<!-- 可选属性type允许取值:'1','a','A','i','I' -->
<ol type="a">
<li>吕布</li>
<li>赵云</li>
<li>关羽</li>
<li>张飞</li>
</ol>
<hr>
不排序列表:
<!-- 可选属性type允许值:'disc','circle','square' -->
<ul>
<li>吕布</li>
<li>赵云</li>
<li>关羽</li>
<li>张飞</li>
</ul>
<hr>
定义列表：
<dl>
<dt>视频名称：</dt>
<dd>HTML实用教程</dd>
<dt>作者：</dt>
<dd>gyen</dd>
<dt>出品：</dt>
<dd>computer</dd>
</dl>
</body>
</html>
14).表格：
<table>,<th>,<tr>,<td>
<table>表格相关标记的属性：
.width/height
.border
.bordercolor：边框的线条颜色
.bgcolor：指定表格或某一单元格的颜色
.background：指定表格或某一单元格的背景图片
.align:设置单元格对齐方式
.cellspacing:设置单元格间距
.cellpadding:设置单元格内容与单元格边界之间的距离
.colspan/rowspan
例1：
<html>
<head>
<title>HTML实用教程-表格</title>
</head>
<body>
<table align="center" border="2"
bordercolor="blue" width="300"
height="60" bgcolor="#ffcccc"
cellspacing="0" cellpadding="4">
<caption>
<font color="#887722" size="6">
学生成绩表 </font>
</caption>
<tr bgcolor="#99099">
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
</tr>
<tr>
<td background="you.jpg">张三</td>
<td>语文</td>
<td align="right">80</td>
</tr>
<tr>
<td>李四</td>
<td>数学</td>
<td align="right">100</td>
</tr>
</table>
</body>
</html>
例2:
<html>
<head>
<title>HTML实用教程-表格</title>
</head>
<body>
单元格跨列:
<table border="1" width="250" height="80">
<tr>
<td>xxx</td>
<td colspan="2">xxx</td>
</tr>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</table>
<p>
单元格跨行：
<table border="1" width="250" height="80">
<tr>
<td>yyy</td>
<td>yyy</td>
</tr>
<tr>
<td rowspan="2">联系方式</td>
<td>yyy</td>
</tr>
<tr>
<td>yyy</td>
</tr>
</table>
</body>
</html>
15).表单
.基本语法格式：
<form action="my.jsp" method="post">
<input type="text" name="id"><br>
<input type="sumbit" value="submit">
</form>
.HTML表单的两种提交方式:
.method="get"
.method="post"
表单组件：
组件描述 语法格式
单行文本框 <input type="text" name="age" value="0">
密码输入框 <input type="password" name="psw">
单选按钮 <input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
复选框 <input type="checkbox" name="fruit" value="apple">苹果<br>
<input type="checkbox" name="fruit" value="grap" checked>葡萄<br>
<input type="checkbox" name="fruit" value="orange">桔子<br>
下拉列表框 <select name="fruit" size="3" multiple>
<option value="apple">苹果
<option value="grap">葡萄
<option value="orange">桔子
</select>
多行文本输入框 <textarea name="info" cols="40" rows="5">请留言</textarea>
提交按钮 <input type="submit" name="submit1" value="提交">
重置按钮 <input type="reset' value="重置">
图片提交按钮 <input type="image" src="you.jpg" alt="提交" name="submit2">
隐藏文本框 <input type="hidden" name="role" value="guest">
文件组件 <form action="my.jsp" enctype="multipart/form-data" method="post">
<input type="file" name="f1">
...
</form>
例：
<html>
<head>
<title>HTML-表单</title>
</head>
<body>
会员注册页面:
<form action="http://www.baidu.com" enctype="multipart/form-data" method="post">
注册名称：<input type="text" name="username"><br>
密 码：<input type="password" name="psw"><br>
确认密码：<input type="password" name="cfm"><br>
性 别：
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女<br>
选择水果：
<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="grap" checked>葡萄
<input type="checkbox" name="fruit" value="orange">桔子
<br>
选择城市：
<select name="city" size=3 multiple>
<option value="beijing">北京
<option value="shanghai">上海
<option value="tianjin">天津
</select>
<br>
留言信息：<br>
<textarea name="info" cols="40" rows="5">请您留言</textarea><br>
上传附件：<input type="file" name="f1"><br>
<input type="hidden" name="role" value="guest">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="image" src="you.jpg" width="100"
height="20" align="bottom"
alt="提交" name="submit2">
</form>
</body>
</html>
16).页面框架
使用框架(Frame)可以将一个浏览器窗口分割成多个窗格，以同时显示多个不同页面。
.行分割:
<html>
<frameset rows="25%,*">
<frame src="a.html">
<frame src="b.html">
</frameset>
</html>
.列分割：(noresize为不可调整大小)
<html>
<frameset cols="300,400,*" border="0">
<frame name="myframe1" noresize src="a.html">
<frame name="myframe2" src="b.html">
<frame name="myframe3" src="b.html">
</frameset>
</html>
.混合分割和页面导航:
例1：
main.html文件
<html>
<frameset rows="25%,*">
<frame src="a.html">
<frame src="b.html">
</frameset>
</html>
a.html文件
<html>
<body bgcolor="#89a3e4" text="#00ff00">
<h4>Page A</h4>
<h1><pre>
明月几时有？
把酒问晴天，
不知天上宫阙，
今夕是何年。
</pre></h1>
</body>
</html>
b.html文件：
<html>
<body bgcolor="#89a3e4" text="#00ff00">
<h4>Page B</h4>
<h1><pre>
我谷乘风归去，
又恐琼楼玉宇。
高处不胜寒，
起舞弄清影，
何处似人间。
</pre></h1>
</body>
</html>
例2:
main.html文件：
<html>
<frameset cols="300,400,*" border="0">
<frame name="myframe1" noresize src="a.html">
<frame name="myframe2" src="b.html">
<frame name="myframe3" src="c.html">
</frameset>
</html>
例3:(导航)
main.html文件：
<html>
<head>
<title>带导航功能的多窗格页面</title>
</head>
<frameset rows="80,*">
<frame src="topic.html" noresize>
<frameset cols="200,*">
<frame name="navigaterFrame" src="list.html">
<frame name="contentFrame" src="a.html">
</frameset>
</frameset>
</html>
topic.html文件:
<html>
<body bgcolor="#9a3b4c" text="#00ff00">
<h1>苏轼 江城子</h1>
</body>
</html>
list.html文件:
<html>
<body bgcolor="#abe2d6">
内容列表:<br>
<a href="a.html" target="contentFrame">条目a</a><br>
<a href="b.html" target="contentFrame">条目b</a><br>
<a href="c.html" target="contentFrame">条目c</a><br>
</html>
17).嵌入标记：
.<applet>标记用于在页面中嵌入JavaApplet
.<embed>标记用于在页面中嵌入多媒体文件，但用户计算机上需事先安装好相应的处理程序。
.常用嵌入文档格式：
mp3,mid,wma,asf,asx,rm,ra,ram,swf,avi
.标记用法:
<embed src="1.avi"
autostart="true"
loop="true"
hidden="false"
controls="CONSOLE"
width="200"
height="45"
>
例:
<html>
<head>
<tile>音乐</title>
</head>
<body>
<h3>嵌入mp3,mid,wma,asx格式音频文件：</h3>
<embed src="1.wma"
autostart="true"
loop="true"
controls="CONSOLE"
width="200"
height="45">
<font color=blue>
<pre>
embed src="1.wma"
autostart="true"
loop="true"
controls="CONSOLE"
width="200"
height="45"
</pre></font>
</body>
</html>
例2:(播放rm文件)
<html>
<body>
<h3>嵌入rm,ra,ram格式音频文件</h3>
<embed src="2.rm"
type="audio/x-pn-realaudio-plugin"
autostart="true"
controls="ConrolPanel"
width="250"
height="40">
</body>
</html>
例3:(插入flash)
<html>
<body>
<h3>嵌入flash,avi，跟mp3的方式一样，只不过后缀名不同而已。</h3>
<embed src="3.swf"
autostart="true"
loop="true"
controls="CONSOLE"
width="500"
height="300">
</body>
</html>
18).加入背景音乐(仅限internet Explorer浏览器)
<html>
<body>
<h3>背景单乐</h3>
<h5>只有在IE浏览器中使用</h5>
<bgsound src="1.wma" loop=3>
</body>
</html>
19).插入视频剪辑(仅限Internet Explorer济览器)
<html>
<body>
<h3>插入视频剪辑</h3>
<h5>只有在IE浏览器中使用</h5>
<img dynsrc="4.avi">
</body>
</html>
602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
