`

html简介及用法总结

阅读更多
WWW基本概念
www的全称为World Wide Web,即全球广域网(万维网),是一种基于TCP/IP协议的网络信息服务。当WWW服务器接收到请求时,将HTML标记的文本发送给请求者,请求者的浏览器把HTML文本翻译后,显示在窗口中。


HTML简介
下面就一个简单的HTML文件进行解释,使读者对之有一个感性的认识,为以后的学习打下基础。读者可以对照其在浏览器中的显示情况,来了解HTML文件的基本格式、概念和标记。在编辑的文本文件中写出如下内容(可以使用Windows自带的记事本来编写):
<HTML>
<head>
         <title>一个简单的HTML示例</title>
</head>
<body>
欢迎光临我的主页。
这是我第一次做主页,无论怎么样,我都会努力做好!
</body>
</HTML>



通过上面的实例可以发现HTML文件是纯文本文件,是用ASCⅡ码编写的源文件,可以用任何一个文本编辑器(如记事本notepad)打开和编辑。HTML文件包括两部分。
*文件的内容部分
*HTML的标识部分。


大多数HTML标识的书写格式如下:
<标识名>显示内容</标识名>
浏览器的功能是:解释并显示HTML文件。需要注意的是:对于同一个HTML文件,不同的浏览器显示的效果可能不一样。


下面介绍所用的标识:
*<HTML></HTML>标识:任何一个HTML文件都应该以该标识开头和结尾,该标识告诉浏览器使用HTML语言来解释和显示该文件。其他内容都应写在该标识之间。
*<head></head>标识:该标识是网页头部标识。写在该标识之间的内容一般不显示出来,只有后面讲到的<title></ title >标识会显示在浏览器顶部的蓝色标题栏中。
< title ></ title >标识:该标识放置于< head ></ head >标识之间,其中间书写的内容将显示在浏览器的顶部标题栏中,是HTML文件的标题,如上例所示,标题的内容可以任意制定,也可以不写。
*<body></body>标识:网页的主题内容应该放置在该标识之间,而该标识应该放置在<HTML></HTML>标识内部。

<HR>分隔线标识 :别忽视我阿!
<HR>的语法很简单,在需要插入分隔线的位置输入该标识即可,例如现在需要在上一个实例的第一句话后面插入一条分隔线,使之布局全理,可以将其源代码更改如下:
<HTML>
<head>
<title>一个简的HTML示例</title>
</head>
<body>
欢迎光临我的主页。
<HR>
这是我第一次做主页,无论怎么样,我都会努力做好!
</body>
</HTML>


<br>行中断标识
在HTML语言中,实现换行是靠一个行中断标识<br>来实现的。
例如可以将上一个实例的源代码修改如下:
<HTML>
<head>
<title>一个简单的HTML示例</title>
</head>
<body>
欢迎光临我的主页。
<HR>
这是我第一次做主页。
<br>
无论怎么样,我都会努力做好!
</body>
</HTML>



元信息标记<meta>
<HEAD>
开始标签
<TITLE>银河信息技术学院</TITLE>
网页文档标题
<meta http-equiv="Content-type" content="text/html; charset=gb2312">
网页文档字符编码设置
<META content=银河,网盾工程,安全资讯,黑客入门,黑客攻防,软件下 name=keywords>
网页文档关键字的设置
<META content=银河信息技术学院。 name=description>
网页文档描述信息的设置
<LINK href="../images/cixicn.css" type=text/css rel=stylesheet>
网页文档链接样式表文件的设置
</HEAD>
结束标签

<meta>标记的主要作用是向服务器和客户端传达关于文档的隐藏信息。
<meta http-equiv="Content-type" content="Text/html; charset=gb2312">

属性说明:
http-equiv:设置或获取用于将 META 标签的 content 绑定到 HttP 响应头的信息。
Content:设置或获取与 HttP-EQUIV 或 NAME 关联的资源信息。
Charset:设置或获取用于解码对象的字符集。

<META content=银河,信息技术学院,网盾工程 name=keywords>
<META content=银河信息技术学院 name=descripTion>
属性说明:
Name:设置或获取META 对象的 CONTENT 标签属性中指定的值。
           name值为“keywords”主要设置网站的关键字。
           name值为“description”主要设置网站的描述信息。
例如:
<HTML>
<head>
<META content=银河,信息技术学院,网盾工程 name=keywords>
<META content=银河信息技术学院 name=description>
<title>一个简的HTML示例</title>
</head>
<body>
欢迎光临我的主页。
<HR>
这是我第一次做主页,无论怎么样,我都会努力做好!
</body>
</HTML>



<Bgcolor>
例如:
<HTML>
<head>
<title>一个简的HTML示例</title>
</head>
<body bgcolor=red>
欢迎光临我的主页。
<HR>
这是我第一次做主页,无论怎么样,我都会努力做好!
</body>
</HTML>


Background
<HTML>
<head>
<title>一个简的HTML示例</title>
</head>
<body background =red>
欢迎光临我的主页。
<HR>
这是我第一次做主页,无论怎么样,我都会努力做好!
</body>
</HTML>


<text>
例如:
<HTML>
<head>
<title>一个简的HTML示例</title>
</head>
<body background =red text="#00ff00">
欢迎光临我的主页。
<HR>
这是我第一次做主页,无论怎么样,我都会努力做好!
</body>
</HTML>



Leftmargin  设定页面左边距,Topmargin   设定页面上边距
例如:
<HTML>
<head>
<title>一个简的HTML示例</title>
</head>
<body background =red text="#00ff00" Leftmargin="200" Topmargin="200"
>
欢迎光临我的主页。
<HR>
这是我第一次做主页,无论怎么样,我都会努力做好!
</body>
</HTML>



<font>文本修饰标识
先来看一个实例,实例源代码如下:
<HTML>
<head>
<title>一个简单的HTML示例</title>
</head>
<body>
<font size=6>
<font face="隶书">
<font color=red>
欢迎光临我的主页
</font>
</font>
</font>
<HR>

这是我第一次做主页。
<br>
无论怎么样,我都会努力做好!
</body>
</HTML>


1.字号属性 :twisted:
Size属性有1到7个等级,1级的字号最小,7级最大,默认的字号大小是3号(大约相当于Word里的5号,16个像素),可以使用“size=?”定义字号的大小,例如输入下面的代码:
<HTML>
<body>
<font size=1>这是1号字的效果</font><br>
<font size=2>这是2号字的效果</font><br>
<font size=3>这是3号字的效果</font><br>
<font size=4>这是4号字的效果</font><br>
<font size=5>这是5号字的效果</font><br>
<font size=6>这是6号字的效果</font><br>
<font size=7>这是7号字的效果</font>
<body>
<HTML>



2.字体属性
Face属性定义的是字体的名称,如中文字体的“宋体”、“楷体”、“隶书”等,可以在写字板和Word等字处理软件中找到不当前系统中安装的字体名称,例如输入以下代码:
<HTML>
<body>
<font size=5>
<font face="宋体">宋体</font><br>
<font face="隶书">隶书</font><br>
</font>
</body>
</HTML>



3.颜色属性
Color属于可以用浏览器承认的颜色名称和十六进制数值表示(如<font color=red>或<font color=#808080>)。


<h1>到<h6>
例如:
<HTML>
<body>
<font size=5>
<h1>第一级标题</h1><br>
<h2>第二级标题</h2><br>
<h3>第三级标题</h3><br>
<h4>第四级标题</h4><br>
<h5>第五级标题</h5><br>
<h6>第六级标题</h6><br>
</font>
</body>
</HTML>



粗体标记<b>\斜体标记<i>\下划线标记 <U>
例如:
<HTML>
<head>
<title>文字段落的修饰标记</title>
</head>
<body bgcolor="red" text="#00ff00">
银河信息技术学院欢迎你!<br>
<b>银河信息技术学院欢迎你!</b><br>
<i>银河信息技术学院欢迎你!</i><br>
<u>银河信息技术学院欢迎你!</u><br>
<s>银河信息技术学院欢迎你!</s><br>
</body>
</HTML>



上标标记 (<SUP>…</SUP>)\下标标记 (<SUB>…</SUB>)
例如:
2<SUP>2</SUP>
银河信息技术学院<SUB>数码组</SUB>



<a>超链接标识
语法:<a>文档</a>
属性:
1.Href 设置文本链接的地址
2.Target 目标窗口打开方式,值为“_blank”是弹窗打开,值为“_self”为自身窗口重定向。
3.Title 是鼠标悬停在链接文本上的文字提示。
现在可以创建一个最简单的链接:
<a href="http://www.sina.com">新浪网</a>

把协议换成"mailto:",如:<a href="mailto:marsz@163.net">给我来信</a>,这样如果点击该链接,系统就会打开默认的E-mail程序进行处理,另一个和它相似是而的协议是"newsgroup:",它将打开默认的信息组程序,用法和打开E-mail类似。
下面以一个具体实例说明:
<HTML>
<head>
<title>链接标识</title>
</head>
<body>
<a href="http://www.sina.com" target="_blank">新浪网</a><br>
<a href="ftp://ftp.leapware.com/pub/myftp.exe" Title=”连接到服务器” >myftp</a><br>
<a href="mailto:liuxiaodongxd@163.com">我的信箱</a><br>
<a href="telne:bbs.pku.edu.cn">北大bbs</a>
<a href="telnet:bbs.tsinghua.edu.cn">清华bbs</a>
</body>
</HTML>


<Img>图像标识
引用

目前有以下几种图像格式能被Web浏览器直接解释:GIF格式(.GIF文件,支持256色);X位图格式(.XBM文件,黑白图像);JPEG格式(.JPG、.JPEG文件,支持RGB色)。
对于段落中的图像,[u]还可以利用align属性定义图像与文本行的对齐方式,其属性值可取top(与文本行顶部对齐)、middle(中间对齐)、bottom(底部对齐,默认值)、left(将此图显示在窗口左方)、right(将此图显示在窗口右方)。[/u]
用<img>来表示网页中的一幅图像
<h2><img align=middle src="kdx.gif"> This text lineis middle-align.</h2>
如果让图像单独占一块区域,要在图像标记的前后加上<P>或<BR>标记:
<p><img src="kdx.gif"><p>This image is stand al onewith the text.<p>
例如在网页中插入一个名字为kdx.jpg的图像,宽度为100个像素,高为120个像素,则输入:
<img src="kdx.jpg"width="100"height="120"alt="暴躁猪的猪圈">
还可以在图像上设置超级链接,其标记为<A></A>:
<a href=http://www.lilacsoft.com/>
<img src="kdx.jpg" width="100" height="120" alt="暴躁猪的猪圈" border=2>
</a>
Web浏览器在超链接图的四周显示一个边框,以示可被触发。若想去掉这个边框只需在<img>中加上属性border=0就可以了



段落标记<P>…</P>与换行标记<br>
<HTML>
<head>
<title>段落标记</title>
</head>
<body>
<p>
<h1>夜归鹿门山歌</h1>
<h4>孟浩然</h4>
山寺钟鸣昼已昏,渔梁渡头争渡喧。<br>
人随沙路向江村,余亦乘舟归鹿门。<br>
鹿门月照开烟树,忽到庞公栖隐处。<br>
岩扉松径长寂寥,惟有幽人自来去。<br>
</p>
<p>
<h1>登幽州台歌</h1>
<h4>陈子昂</h4>
前不见古人,后不见来者。<br>
念天地之悠悠,独怆然而涕下!<br>
</p>
</body>
</HTML>



水平线标记<hr>
插入一条水平线
属性:Color 颜色的定义 如:color=#ff0000  红色
Size  粗细的定义 如:Size=5
Width 宽度的定义 如:width=500像素  宽度的单位有两个,像素(像素)或%(百分比)
<HTML>
<head>
<title>段落标记</title>
</head>
<body>
<p>
<h1>夜归鹿门山歌</h1>
<h4>孟浩然</h4>
山寺钟鸣昼已昏,渔梁渡头争渡喧。<br>
人随沙路向江村,余亦乘舟归鹿门。<br>
鹿门月照开烟树,忽到庞公栖隐处。<br>
岩扉松径长寂寥,惟有幽人自来去。<br>
</p>
<hr color="#FFaa00" width="500" size="5" >
<p>
<h1>登幽州台歌</h1>
<h4>陈子昂</h4>
前不见古人,后不见来者。<br>
念天地之悠悠,独怆然而涕下!<br>
</p>
</body>
</HTML>



居中标记<center>…</center>
居中标记从文本意义上理解就是居中对齐,凡是放在<center>开始标记和</center>结束标记中的内容,无论是文本还是图片或者是表格等等都可以实现居中显示。
<HTML>
<head>
<title>段落标记</title>
</head>
<body>
<center>
<p>
<h1>夜归鹿门山歌</h1>
<h4>孟浩然</h4>
山寺钟鸣昼已昏,渔梁渡头争渡喧。<br>
人随沙路向江村,余亦乘舟归鹿门。<br>
鹿门月照开烟树,忽到庞公栖隐处。<br>
岩扉松径长寂寥,惟有幽人自来去。<br>
</p>
<hr color="#FFaa00" width="500" size="5" >
<p>
<h1>登幽州台歌</h1>
<h4>陈子昂</h4>
前不见古人,后不见来者。<br>
念天地之悠悠,独怆然而涕下!<br>
</p>
</center>
</body>
</html>


预先格式化标记<pre>…</pre>
<HTML>
<head>
<title>预先格式化标记</title>
</head>
<body>
<h1>夜归鹿门山歌</h1>

<h4>孟浩然</h4>
<pre>
山寺钟鸣昼已昏,渔梁渡头争渡喧。
人随沙路向江村,余亦乘舟归鹿门。

鹿门月照开烟树,忽到庞公栖隐处。
岩扉松径长寂寥,惟有幽人自来去。
</pre>
</body>
</html>



无序列表:
无序列表标记符<UL></UL>和列表项标记符<LI></<LI>
<HTML>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
<li>银河信息技术学院</li>
<li>银河信息技术学院</li>
<li>银河信息技术学院</li>
<li>银河信息技术学院</li>
<li>银河信息技术学院</li>
</ul>
</body>
</html>


有序列表:
有序列表标记符<OL></OL>和列表项标记符<LI></LI>
<HTML>
<head>
<title>无序列表</title>
</head>
<body>
<ol>
<li>银河信息技术学院</li>
<li>银河信息技术学院</li>
<li>银河信息技术学院</li>
<li>银河信息技术学院</li>
<li>银河信息技术学院</li>
</ol>
</body>
</html>


OL 标记符具有两个常用的属性:type 和 start,分别用来设置数字序列样式和数字序列起始值。start 属性的值可以是任意整数, type 属性的值如下表所示3-5-3.23:
例如:
<HTML>
<head>
<title>有序列表</title>
</head>
<body>
<ol type=”A”>
<li>银河信息技术学院</li>
<li>银河信息技术学院</li>
<li>银河信息技术学院</li>
</ol><br>
<ol start=”3”>
<li>银河信息技术学院</li>
<li>银河信息技术学院</li>
<li>银河信息技术学院</li>
</ol><br>
<ol >
<li>银河信息技术学院</li>
<li value="5">银河信息技术学院</li>
<li>银河信息技术学院</li>
</ol><br>
<ol >
<li>银河信息技术学院</li>
<li type="a">银河信息技术学院</li>
<li>银河信息技术学院</li>
</ol><br>

</body>
</html>


引用

声音和视频
Web浏览器自身不能解释声音和视频文件,但它能通过其他辅助工具的帮助来播放声音和视频文件。一般声音文件带有.WAV、.AU、SND等文件扩展名,而视频文件带有.AVI、.MPG等文件扩展名。
<h2><a href="沉默的羔羊.avi">这是一段电影</a>.</h2>,用户触发这段超级链拉后,Web浏览器会立即启动默认的网络视频播放工具程序,如Media Player程序来播放“沉默的羔羊”视频文件。

背景音乐的插入方法很多,在这里我们只介绍两种:
第一种:
<bgsound   src="file:///F://mp3/爱情转移.wma"   loop="1">
<bgsound src="your.mid"> 

   属性设置:
   因为bgsound嵌入的音频文件在网页中没有控件显示,所以在使用bgsound时,它的各个属性就必须加以设置。 
  1.自动播放: 
  语法:autostart=true、false 
  说明:该属性规定音乐文件是否在下载完之后就自动播放。 
  True:音乐文件在下载完之后自动播放; 
  false:音乐文件在下载完之后不自动播放。 
  示例:<bgsound src="your.mid" autostart=true> 
        <bgsound src="your.mid" autostart=false> 
  2.循环播放: 
  语法:loop=正整数或infinite 
  说明:该属性规定音乐文件的循环次数。

第二种:
<embed src=音乐链接地址 width=200 height=50 type=audio/mpeg loop="true" autostart="true">
代码说明:
支持的音乐格式: wma、mp3、rm、ra、ram、asf,尽量选用可连接性高的音乐链接,保证音乐可以顺利播放;
width和height表示播放器宽度和高度,可以灵活设置;
autostart="true"表示自动播放,autostart="false"表示不自动播放; loop="true"表示连续循环播放,loop="false"表示不循环播放; loop也可以设为一个整数,比如loop="3",表示音乐循环播放3次;
<marquee>
<marquee><strong><font color="#FF0000">前不见古人,后不见来者。</font></strong></marquee>

特殊符号:
如果想在网页中插入“注册商标”、“空格符号”、“版权”等等,这些都属于特殊
符号的范畴。
注册商标:&reg;
空格符号:&nbsp;
版权符号:&copy;


间距及align用来设置图片旁边文本的排列对齐方式
   常用值:Top,middle,absmiddle,bottom,left,right,absbottom
<HTML>
<head>
<title>有序列表</title>
</head>
<body>
<img src="5.jpg" width="100" height="120" alt="暴躁猪的猪圈" border=2 hspace="100" 
vspace="110" align="middle">fdvfdgdgd
</body>
</html>



<frame>框架标识
要在一个浏览器窗口中显示多个页面,实际上表示一个帧的划分,而frame表示这个划分中的单元。下面是一个简单的框架文件的内容:x
例如2:"
<html>
<head>
<title>无标题文档</title>
</head>

<frameset cols="80,*" frameborder="no" border="0" framespacing="0">
  <frame src="5.jpg" name="leftFrame" scrolling="No" noresize="noresize"  title="leftFrame" 

/>
  <frame src="5.jpg" name="mainFrame"  title="mainFrame" />
</frameset>
<noframes><body>
</body>
</noframes>
</html>


例如2:
<html>
<head>
<title>无标题文档</title>
</head>
<frameset rows="70,*" cols="*" framespacing="0" frameborder="yes" border="0" 

bordercolor="#FF0000">
  <frame src="top.html" name="topFrame" frameborder="no" scrolling="No" noresize="noresize" 

id="topFrame" title="topFrame" />
  <frameset cols="191,*" frameborder="no" border="0" framespacing="0">
    <frame src="life.html" name="leftFrame" frameborder="no" scrolling="auto" 

noresize="NORESIZE" id="leftFrame" title="leftFrame" />
    <frame src="main_2.html" name="mainFrame" frameborder="no" id="mainFrame" 

title="mainFrame" />
  </frameset>
</frameset>
<noframes><body>
</body>
</noframes></html>

引用

属性:
noresize="noresize":滚动条: noresize:默认, auto:自动,yes有,no无.
framespacing="0"边界添充
frameborder="no"边框显示否, yes有,no无.
border="0"边框宽度

<form>表单标识
表单的首要标记是<form>,也是制作表单的第一步,一个页面中可以包含多个表单,而<form>就是它们的分界线,<form>也是表示表单如何工作的重要标记,它有两个重要参数:actiont和method
*action参数表示表单要提交到的地点,一般为一个CGI程序,如:“http://www.somewhere.com/cgi-bin/talk.pl”(CGI程序可以用各种编程语言编写,如C、VB、Java,这里的.pl为Perl语言)。
*method表示表单发送的方法,有两种:get(默认方法)和post,它们之间略有区别,主要是传输的信息量和接收的接口不同,get有255个字符的限制,而post没有(另一个参数是target,和超链接标识<a>的Target参数用法一样)。


引用
内部控件被分成了三大类:textarea、select和input。

textarea     表示可以输入多行的文本框,有两个参数:rows表示文本框的行数,cols表示文本框的列数,例如:<textarea name="tl"cols=40 rows=7>请您留言</textarea>
表示宽40列、高7行的文本输入框。

select 元素可以表示成一个下拉式的选择框,可以对其中的元素进行选定,它的参数有size和multiple,size如果等于1,则以下拉框显示,如果大于1,则以滚动框显示,multiple表示可以多选,它没有值Select中的选项用option表示,iptionr的value属性表示选项的名称,是给CGI程序识别的,而“<option value=o l>……”中的“……”的内容则是给浏览器识别看的,另一个属性是selected,它表示表单在初始化时即有默认选项被选定。例如:
<select name=hobby size=6 multiple>
<option value=music selected>音乐
<option value=sports>运动
<option value=reading>读书
<option value=collection>收藏
<option value=art>艺术
<option value=writing>写作
</select>



例如:
<body>
<form id="form1" name="form1" method="post" action="">
    <label>姓名:
    <input name="textfield" type="text" size="10" maxlength="10" />  
    </label> <br />
    <label>个人简历
    <textarea name="textarea" cols="50" rows="5"></textarea>
    </label><br>
    性别:
    <label>
    <input type="radio" name="radiobutton"/>
    男</label>
    <label>
    <input type="radio" name="radiobutton" />
    女</label><br>
    爱好:
    <label>
    <input type="checkbox" name="checkbox"/>
    读书</label>
	<label>
    <input type="checkbox" name="checkbox"/>
    上网</label>
	<label>
    <input type="checkbox" name="checkbox"/>
    打篮球</label>
	<label>
    <input type="checkbox" name="checkbox"/>
    睡觉</label><br>
    <label>
    <select name="select">   select:下拉列表
      <option>初中</option>
      <option>高中</option>
      <option>大学</option>
      <option>博士</option>
      <option>工程师</option>
    </select>
    </label>
</form>
</body>

属性说明: size="10" 字符宽度
maxlength="10"最多字符数

<table>表格标识
引用

表格的表示:<table>表格内容</table>
定义表格标题:<caption…> 标题内容</caption>
定义表格列:<tr …> 表格列内容</tr>
定义表头资料:<th..>表头内容</th>
定义表格内容:<td…>表格内容</td>


1.表格的表示
引用

一对<table>标记是一个table结构的最外层,它有三个重要属性。一个是用来表示表格边框粗细的属性border,属性值取整数,如果省略border属性,则表示不加边框。另一个是用来表示表格宽度的属性width,其属性可取相对值(由一对引号括起来的百分数,表示相对于充满窗口的百分比),也可取绝对值(用整数表示的屏幕像素点的个数,如width=300),缺省值是100%。还有一个属性是cellpading,用来表示每个表项单元的内容与表格边框之间所空开的距离,以屏幕像素点为单位,缺省值是0。


2.定义表格标题
引用

<caption>表格名称</caption>,在一对<caption>标记之间是这张表格的名称信息,它通常被Web浏览器显示在表格上方的中央部位。


3.定义表格列和内容
引用

<tr>定义表格当前行的内容,单标记<tr>表示一个新的表格行(Table Row)的开始。单标记<th>和<td>都表示在表格的当前行里产生一个新的表项单元。


[b]4.一个表格实例[/u]
引用
属性:
属 性                              描 述
width                          表格的宽度
height                        表格的高度
align                          表格在页面的水平摆放位置
background               表格的背景图片
bgcolor                      表格的背景颜色
border                        表格边框的宽度(以像素为单位)
bordercolor              表格边框颜色
bordercolorlight     表格边框明亮部分的颜色
bordercolordark      表格边框昏暗部分的颜色
cellspacing               单元格之间的间距
cellpadding               单元格内容与单元格边界之间的空白距离的大小


水平方向:align: center  left  right
垂直方向:top 顶   middle 居中  bottom  底对齐


a.简单的表格实例:
<html>
<head>
<title>html表格实例</title>
</head>
<body>
<center>
<table border=1 width="408">
<caption>表格实例</caption>
<tr><th height="32" colspan="4" align="center">成绩表</th>
</tr>
<tr align="center"><td>姓名</td><td>性别</td><td>班级</td><td>成绩</td></tr>
<tr align="center"><td>张磊</td><td>男</td><td>ATP</td><td>99</td></tr>
<tr align="center"><td>吴燕</td><td>女</td><td>ATP</td><td>97</td></tr>
<tr align="center"><td>刘芳</td><td>女</td><td>ATP</td><td>100</td></tr>
<tr align="center"><td>徐石</td><td>男</td><td>ATP</td><td>98</td></tr>
</table>
</center>
</body>
</html>

b.Table通常是由一个表格名称再加上一行或多行的表格内容所构成的块状结构。
<html>
<head>
<title>html表格实例</title>
</head>
<body>
<table border=2 cellspacing=4 cellpadding=10>
<caption>表格实例</caption>
<tr>
<th rowspan=6>备注</th>
<th colspan=5>英语成绩</th>
</tr>
<tr>
<th rowspan=6><ahref="mailto:liuxiaodong@163.com">分数查询</a><th>
</tr>
</tr>
<tr><td>80</td><td>90</td></tr>
<tr><td>85</td><td>93</td></tr>
</table>
</body>
</html>


例如:
 <html>
<head>
<title>html表格实例</title>
</head>
<body>
<center>
<table width="408" border=5 bordercolor="#FF0000" bordercolordark="#00FF00" bordercolorlight="#0000FF">
<caption>表格实例</caption>
<tr><th height="32" colspan="4" align="center" bgcolor="#FF0000">成绩表</th>
</tr>
<tr align="center"><td bgcolor="#00FF00">姓名</td>
<td bgcolor="#00FFFF">性别</td>
<td bgcolor="#CCFF00">班级</td>
<td bgcolor="#FFCC00">成绩</td>
</tr>
<tr align="center"><td bgcolor="#00FF00">张磊</td>
<td bgcolor="#00FFFF">男</td>
<td bgcolor="#CCFF00">ATP</td>
<td bgcolor="#FFCC00">99</td>
</tr>
<tr align="center"><td bgcolor="#00FF00">吴燕</td>
<td bgcolor="#00FFFF">女</td>
<td bgcolor="#CCFF00">ATP</td>
<td bgcolor="#FFCC00">97</td>
</tr>
<tr align="center"><td bgcolor="#00FF00">刘芳</td>
<td bgcolor="#00FFFF">女</td>
<td bgcolor="#CCFF00">ATP</td>
<td bgcolor="#FFCC00">100</td>
</tr>
<tr align="center"><td bgcolor="#00FF00">徐石</td>
<td bgcolor="#00FFFF">男</td>
<td bgcolor="#CCFF00">ATP</td>
<td bgcolor="#FFCC00">98</td>
</tr>
</table>
</center>
</body>
</html>



<Th>和<Td>的属性
引用

属 性                                描 述

width/height        单元格的宽和高,接受绝对值(如 80及相对值(如 80%)。
colspan                   单元格向右打通的栏数
rowspan                  单元格向下打通的列数
align                       单元格内字画等的摆放贴,位置(水平),可选为:left,center,right。                                          
valign                     单元格内字画等的摆放贴 位置(垂直),可选值为: Top, middle, bottom。
bgcolor                   单元格的底色
bordercolor           单元格边框颜色
background             单元格 背景图片


0
0
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    html标签大全标签用法详解

    它详尽地介绍了每个标签的用法、属性及注意事项。通过实践和查阅资料,开发者可以熟练掌握HTML,从而创建出功能丰富、用户体验优秀的网站。 总结,HTML标签是构建网页的基础,理解和熟练运用各种标签能有效提升网站...

    HtmlEncode编码与解码用法定义

    ### HtmlEncode与HtmlDecode编码及解码用法详解 #### 一、HtmlEncode与HtmlDecode概念解析 在Web开发中,经常会遇到需要处理HTML代码的情况。为了确保网页内容的正确显示以及防止潜在的安全威胁(如XSS攻击),...

    asp.net mvc @html用法

    如果方法返回的是 `MvcHtmlString` 类型,则通常需要使用等号 (`=`) 来输出结果,因为这表明该方法的输出可以直接插入到页面中,而不会被转义。例如: ```csharp &lt;%= Html.ActionLink("链接文本", "ActionName", ...

    checkbox用法小结

    这篇名为“checkbox用法小结”的博客文章可能涵盖了复选框的基本用法、HTML/CSS/JavaScript实现、以及可能涉及到的前端框架如Bootstrap或jQuery的相关知识。以下是对这些知识点的详细阐述: 1. HTML复选框基础: -...

    html标签和属性总结

    HTML标签和属性总结 HTML标签是构建Web页面的基础,了解HTML标签的属性和使用方法是非常重要的。本文将详细介绍HTML标签...本文总结了HTML标签的种类、属性和使用方法,希望能够帮助初学者更好地学习和理解HTML语言。

    web服务器控件与html服务器控件的区别及用法

    ### Web服务器控件与HTML服务器控件的区别及用法 #### 概述 在ASP.NET开发过程中,开发者经常需要在项目中使用各种控件来构建动态网页。在这些控件中,有两种常见的类型:Web服务器控件(WebControls)与HTML...

    实验一 JSP运行环境安装及常用HTML标记使用

    实验内容涉及HTML框架的使用,这是构建网页布局的一种方法。HTML框架允许我们将一个页面分割成多个独立的区域,每个区域可以加载不同的内容。在本实验中,学生需要创建一个名为`index.html`的静态页面,页面布局应...

    疯狂HTML 5+CSS 3+JavaScript讲义(第2版)+源代码

    1.4 本章小结 12 第2章 HTML 5的常用元素与属性 14 2.1 HTML 5保留的常用元素 15 2.2 HTML 5增强的iframe元素 34 2.3 HTML 5保留的通用属性 40 2.4 HTML 5新增的通用属性 44 2.5 HTML 5新增的结构元素 48 2.6...

    simple_html_dom,php下的html文件DOM解析库

    本文将详细讲解这个库的核心概念、功能及使用方法。 一、Simple HTML DOM解析库简介 PHP Simple HTML DOM解析库,正如其名,是一个专为PHP设计的HTML文档对象模型解析工具。它的主要优点是简单易用,可以快速地对...

    wireshark常用用法总结

    ### Wireshark常用用法总结 #### 一、Wireshark简介 Wireshark是一款强大的网络包分析工具,被广泛应用于网络安全分析、故障排查、性能优化等领域。它能够捕获并解析网络通信中的数据包,提供详细的协议分析及丰富...

    MVC3处理反复提交,HtmlHelper用法大全,拓展方法

    本文将深入探讨如何在MVC3中处理反复提交,并全面介绍`HtmlHelper`的用法及其拓展方法。 一、处理反复提交 在ASP.NET MVC中,一种常见的处理反复提交的方法是使用"POST-Redirect-GET"(PRG)模式。当用户成功提交...

    前端编程技术+html2canvas 使用总结

    通过本文的学习,我们不仅了解了`html2canvas`的基本使用方法,还深入探讨了在实际应用过程中可能遇到的一些问题及其解决策略。合理运用这些技巧,可以帮助开发者更高效地完成前端截图功能的开发工作。需要注意的是...

    JavaScript中document用法小结

    JavaScript 中 document 对象用法小结 JavaScript 中的 document 对象是一个非常重要的对象,它提供了大量的属性和方法来操作 HTML 文档。下面是对 document 对象的一些常用属性和方法的总结。 属性 1. `document...

    ASP.NET MVC HtmlHelper用法大全

    这些示例展示了如何使用`TextBox`方法来创建不同类型的文本框输入字段,包括不带初始值的文本框、带有模型绑定和自定义样式的文本框等。 #### 六、总结 以上介绍的`ActionLink`、`RouteLink`、`BeginForm`和`...

    html总结学习资料

    ### HTML标题标签与使用规范 #### 一、HTML标题标签定义 HTML中的标题标签由`&lt;h1&gt;`至`&lt;h6&gt;`组成,用于定义不同级别的标题。这些标签主要用于文档结构中的不同层次的标题,例如文章标题、章节标题等。 #### 二、...

    CSS用法总结.xmind

    CSS用法总结,介绍了css基本语法、盒子模型、选择器等等,还介绍与html文档结合使用的方式,通过css的使用实现Html显示页面更加美观,另外附带CSS的参考文档(帮助文档)。

    FSO对象详细用法全面总结

    本文旨在基于站长多年的实践经验,全面总结FSO组件的使用方法,为用户提供一个详尽的技术指南。尽管无法覆盖FSO的所有细节,但本文将聚焦于其基本使用、核心方法和实用案例,以满足日常开发需求。 #### 二、FSO组件...

    html引入html实例

    总结起来,“html引入html实例”涵盖了HTML中嵌入、链接以及动态引入其他HTML文件的各种方法。这些技术在构建大型网站和实现页面模块化时非常有用,可以帮助我们提高代码复用性和维护性。理解并熟练掌握这些技术对于...

Global site tag (gtag.js) - Google Analytics