您的位置：首页 > Web前端 > HTML

四、Html常用标签

2015-04-29 22:17 295 查看
1，列表相关标签

<ul>：定义无序列表，只能包含<li>子元素

<ol>：定义有序列表，只能包含<li>子元素，因为这个标签是有序的，所有这个标签还有2个属性，start和type。

start：指定列表项的起始数字，默认是第一个

type：指定使用哪种类型的编号。1，代表使用数字，A和a代表使用字母，I和i代表使用罗马数字

<li>：定义列表项目。

<dl>：定义列表

<dt>：定义标题列表项

<dd>：定义普通列表项。值得注意的是这个标签里面可以放好多的东西，可以包含和<div>完全类似的内容

以下是一份包含上面各个标签的html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>列表相关标签</title>
</head>

<body>
<ul>
<li>这里是无序列表1</li>
<li>这里是无序列表2</li>
<li>这里是无序列表3</li>
</ul>
<ol start="3" type="A">
<li>这里是有序列表1</li>
<li>这里是有序列表2</li>
<li>这里是有序列表3</li>
</ol>
<dl>
<dt>这里是标题1</dt>
<dd>这里是内容1</dd>
<dd>这里是内容2</dd>
<dt>这里是标题2</dt>
<dd>这里是内容3</dd>
<dd>这里是内容4</dd>
</dl>
</body>
</html>



2，图像相关标签

html提供了<img />用来在页面中定义图像，这个元素只能是一个空元素，它不可以包含任何内容。使用这个元素必须指定以下2个内容，src和alt。

src：用于指定图片所在的位置，可以是相对路径，也可以是绝对路径

alt：用于指定一段文本，表示该图片的提示信息。

此外，还可以为这个元素指定height和width，用来表示高度和宽度，可以是百分比，也可以是像素值。

另外的还有2个标签，<map>：用于定义图像映射，<area>：用于定义图像映射的内部区域。<bgsound>：插入声音，<embed>：插入视频。一般都用不到，就不做赘述了。

以下是一份包含上面标签的html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>图像相关标签</title>
</head>

<body>
<img alt="Nightwish..." src="img/nightWish.jpg">
<a href="http://wwww.baidu.com">
<img alt="Nightwish..." src="img/nightWish.jpg">
</a>
</body>
</html>



3，表格相关标签

<table>：定义表格。这个元素只能包含0个或者1个<caption>，0个或者1个<thead>，0个或者1个<tfoot>，多个<tr>，多个<tbody>。

另外它还有如下属性：

align：表格自身对齐方式，left，right，center

bgcolor：表格的背景色

border：表格边框的宽度，该值是一个整数，0表示表格无边框

cellpadding：用于指定单元格内容和单元格边框之间的间距

cellspacing：指定单元格之间的间距

width：指定表格的宽度

<caption>：定义表格标题

<tr>：用于定义表格的行，只能包含<td>或者<th>

<td>：用于定义单元格

这个标签要多说几句，经常用到的2个属性：

colspan：用于指定该单元格跨多少列

rowspan：用于指定该单元格可以跨多少行

<th>：用于定义表格页眉的单元格，和<td>用法基本一样

<tbody>：表格的主体，只能包含<tr>

<thead>：表格的页头，和<tbody>用法类似

<tfoot>：表格的页脚，和<tbody>用法类似

以下是包含上面标签的一份html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表格相关标签</title>
</head>

<body>
<table border="0">
<caption>表格1</caption>
<tr>
<th>乐队</th>
<th>国家</th>
</tr>
<tr>
<td>LinkinPark...</td>
<td>美国</td>
</tr>
<tr>
<td>NightWish...</td>
<td>芬兰</td>
</tr>
</table>

<table border="1" align="center" width="500">
<caption>表格2</caption>
<tr>
<td rowspan="2">跨2行的单元格</td>
<td title="这里是提示">普通的单元格1</td>
<td>普通的单元格2</td>
</tr>
<tr>
<td colspan="2">跨2列的单元格</td>
</tr>
</table>

<table border="1" align="right" width="900">
<caption>表格3</caption>
<thead>
<tr>
<th>乐队</th>
<th>国家</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">这里一般用来做统计</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>LinkinPark...</td>
<td>美国</td>
</tr>
<tr>
<td>NightWish...</td>
<td>芬兰</td>
</tr>
</tbody>
</table>
</body>
</html>



4，框架相关标签

通过使用框架，可以将浏览器分成几个不同的部分，然后在同一个浏览器窗口里面显示不同的XHTML页面。

如果要在html中使用框架，就应该在该html页面中使用Frameset的DTD，而且这个页面的<html>不允许包含<body>元素。

<frameset>：定义一个框架集，用于包含其他的框架

<frame>：用于定义框架集中的一个框架，这是一个空元素。src属性指定加载那个页面。

<iframe>：生成一个内联框架，可以放在html页面上的任意的位置。

对于框架的这几个相关的标签，值得注意的是不要在框架集页面中过多的使用框架，这种分割面板很耗性能的。

以下是包含上面标签的html页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>框架相关标签</title>
</head>

<body>
<iframe src="Park.html"></iframe>
</body>
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Park.html</title>

</head>

<body>
<h1>这里是另外的一个页面</h1>
<hr />
<h1>这里是另外的一个页面</h1>
<hr />
<a name="linkin">这里定义了一个锚点</a>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航