html简介及用法总结

编程入门行业动态更新时间:2024-10-06 20:25:45

html<a href=https://www.elefans.com/category/jswz/34/1769824.html style= 简介及用法总结"/>

html简介及用法总结

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

[b]HTML简介[/b]
下面就一个简单的HTML文件进行解释，使读者对之有一个感性的认识，为以后的学习打下基础。读者可以对照其在浏览器中的显示情况，来了解HTML文件的基本格式、概念和标记。在编辑的文本文件中写出如下内容（可以使用Windows自带的记事本来编写）：

<HTML>
<head>
         <title>一个简单的HTML示例</title>
</head>
<body>
欢迎光临我的主页。
这是我第一次做主页，无论怎么样，我都会努力做好！
</body>
</HTML>

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

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

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

[u]<HR>分隔线标识[/u] :o ：别忽视我阿！
[u]<HR>的语法很简单，在需要插入分隔线的位置输入该标识即可，例如现在需要在上一个实例的第一句话后面插入一条分隔线，使之布局全理[/u]，可以将其源代码更改如下：

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

[b]<br>行中断标识[/b]
[u]在HTML语言中，实现换行是靠一个行中断标识<br>来实现的。[/u]
例如可以将上一个实例的源代码修改如下：

<HTML>
<head>
<title>一个简单的HTML示例</title>
</head>
<body>
欢迎光临我的主页。
<HR>
这是我第一次做主页。
<br>
无论怎么样，我都会努力做好！
</body>
</HTML>

[i]元信息标记<meta>[/i]
<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>
结束标签

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

[b]属性说明：[/b]
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>

[b]<font>文本修饰标识[/b]
先来看一个实例，实例源代码如下：

<HTML>
<head>
<title>一个简单的HTML示例</title>
</head>
<body>
<font size=6>
<font face=＂隶书＂>
<font color=red>
欢迎光临我的主页
</font>
</font>
</font>
<HR>

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

[b]1.字号属性 [/b]: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>

[b]2.字体属性[/b]
Face属性定义的是字体的名称，如中文字体的“宋体”、“楷体”、“隶书”等，可以在写字板和Word等字处理软件中找到不当前系统中安装的字体名称，例如输入以下代码：

<HTML>
<body>
<font size=5>
<font face=＂宋体＂>宋体</font><br>
<font face=＂隶书＂>隶书</font><br>
</font>
</body>
</HTML>

[b]3.颜色属性[/b]
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>

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

把协议换成＂mailto:＂，如：<a href=＂mailto:marsz@163＂>给我来信</a>，这样如果点击该链接，系统就会打开默认的E-mail程序进行处理，另一个和它相似是而的协议是＂newsgroup:＂,它将打开默认的信息组程序，用法和打开E-mail类似。
下面以一个具体实例说明：

<HTML>
<head>
<title>链接标识</title>
</head>
<body>
<a href="" target="_blank">新浪网</a><br>
<a href=".exe" Title=”连接到服务器” >myftp</a><br>
<a href=＂mailto:liuxiaodongxd@163＂>我的信箱</a><br>
<a href=＂telne:bbs.pku.edu＂>北大bbs</a>
<a href=＂telnet:bbs.tsinghua.edu＂>清华bbs</a>
</body>
</HTML>

[b]<Img>图像标识[/b]
[quote]
目前有以下几种图像格式能被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=/>
<img src="kdx.jpg" width="100" height="120" alt="暴躁猪的猪圈" border=2>
</a>
[u]Web浏览器在超链接图的四周显示一个边框，以示可被触发。若想去掉这个边框只需在<img>中加上属性border=0就可以了[/u]。[/quote]

[u]段落标记<P>…</P>与换行标记<br>[/u]

<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>

8)
[u]OL 标记符具有两个常用的属性：type 和 start，分别用来设置数字序列样式和数字序列起始值。start 属性的值可以是任意整数， type 属性的值如下表所示3-5-3.23：[/u]
例如:

<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>

[quote]
[b]声音和视频[/b]
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">

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

第二种：
[u]<embed src=音乐链接地址 width=200 height=50 type=audio/mpeg loop="true" autostart="true"> [/u]
代码说明：
支持的音乐格式： 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>

[b]特殊符号：[/b]
如果想在网页中插入“注册商标”、“空格符号”、“版权”等等，这些都属于特殊
符号的范畴。
注册商标：®
空格符号：
版权符号：©
[/quote]

间距及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>

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

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

[quote][u]内部控件被分成了三大类：textarea、select和input。[/u]

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

select 元素可以表示成一个下拉式的选择框，可以对其中的元素进行选定，它的参数有size和multiple，[u]size如果等于1，则以下拉框显示，如果大于1，则以滚动框显示，multiple表示可以多选，它没有值[/u]。[u]Select中的选项用option表示，iptionr的value属性表示选项的名称，是给CGI程序识别的，而“<option value=o l>……”中的“……”的内容则是给浏览器识别看的，另一个属性是selected，它表示表单在初始化时即有默认选项被选定。[/u]例如：
<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>[/quote]

例如:

<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"最多字符数

[b]<table>表格标识[/b]
[quote]
表格的表示：<table>表格内容</table>
定义表格标题：<caption…> 标题内容</caption>
定义表格列：<tr …> 表格列内容</tr>
定义表头资料：<th..>表头内容</th>
定义表格内容：<td…>表格内容</td>[/quote]

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

[b]2．定义表格标题[/b]
[quote]
<caption>表格名称</caption>，在一对<caption>标记之间是这张表格的名称信息，它通常被Web浏览器显示在表格上方的中央部位。[/quote]

[b]3．定义表格列和内容[/b]
[quote]
<tr>定义表格当前行的内容，单标记<tr>表示一个新的表格行（Table Row）的开始。单标记<th>和<td>都表示在表格的当前行里产生一个新的表项单元。[/quote]

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

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

[u]a.简单的表格实例:[/u]

<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＂>分数查询</a><th>
</tr>
</tr>
<tr><td>80</td><td>90</td></tr>
<tr><td>85</td><td>93</td></tr>
</table>
</body>
</html>

[b]例如:[/b]

 <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>

[b]<Th>和<Td>的属性[/b]
[quote]
属性描述

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

更多推荐

html简介及用法总结

本文发布于:2024-02-07 10:57:05，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1756288.html