首页 / HTML / 四、Html常用标签

四、Html常用标签

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了四、Html常用标签，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4423字，纯文字阅读大概需要7分钟。

内容图文

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>：用于定义图像映射的内部区域。一般都用不到，就不做赘述了。

以下是一份包含上面标签的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>

原文：http://blog.csdn.net/u011794238/article/details/45372703

内容总结

以上是互联网集市为您收集整理的四、Html常用标签全部内容，希望文章能够帮你解决四、Html常用标签所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1089784.html

来源：【匿名】

【上一篇】HTML笔记3 【下一篇】PHP 和 HTML

更多 ►

【四、Html常用标签】教程文章相关的互联网学习教程文章

HTML中button标签点击实现页面跳转【代码】

方法1：使用onclick事件<input type="button" value="按钮" onclick="javascrtpt:window.location.href=‘http://www.baidu.com/‘" />或者直接使用button标签<button onclick="window.location.href = ‘https://www.baidu.com/‘">百度</button> 方法2：在button标签外套一个a标签<a href="http://www.baidu.com/"><button>百度</button> </a>或使用<a href="http://www.baidu.com/"><input type="button" value=‘百度‘></a> ...

HTML表格标签【代码】

<table>表格标签　　常用属性：　　border指定边框　　width宽　　height高，内容多不用指定，自动适应　　bgcolor背景颜色　　align对齐方式，控制表格　　background背景图片<caption>表格标题<th>表头单元格<tr>行　常用属性：　　bgcolor背景颜色　　align对齐方式，控制内容　　background背景图片<td>列table>tr>td【此时按下Tab（制表键），输入内容中间和后面都不能留有空格和换行等内容】表格合并　　colspan跨列　　...

如何使用JS脚本从HTML中分离图片标签与文本，替换文本中指定的内容并加粗（原创）【代码】

var html=‘ddfsdfsdfdsd dfsdfsdffds<img _src="http://localhost:8490/60E86EA7-FE7B-44BF-8270-4DF2036B2118.PNG" data-latex="x=\frac {-b\pm \sqrt {{b}^{2}-4ac}} {2a}" src="http://localhost:8490/60E86EA7-FE7B-44BF-8270-4DF2036B2118.PNG" class="kfformula">dfsdfsrewewrererew ds<img _src="http://localhost:8490/60E86EA7-FE7B-44BF-8270-4DF2036B2118.PNG" data-latex="x=\frac {-b\pm \sqrt {{b}^{2}-4ac}} {2a}...

HTML5 常用标签属性【代码】

<input type="submit" value="提交" autofocus="on" formaction="b.jsp"><input type="submit" value="提交" formaction="c.jsp">提交不同的界面上传<input type="file" multiple="multiple">multiple 允许上传多个文件<input type="text" pattern="[0-9]{6}" required="required" placeholder="请输入六位邮箱" title="格式不正确"> pattern里面填正则 required不能为空 placeholder提示内容 title错误后的提示信息原文：http:...

HTML标签总结【代码】

1. HTML常用标记：属性值需要带等号连接，属性值需要带引号(单、双引号都可以文本标题：h1~h6 i. h1:一般应用在网页文章标题，网站的logo处 ii. h2:新闻稿件的标题，或者是二级标题处 iii. h3:新闻稿件居多，布局元素中有加粗效果 iv. h4~h6:根据实际情况选择应用段落文本：p空格： &emsp;(能够实现空出一个字符)换行：<br/>水平线：<hr/>加粗： i. <b>加粗的内容</b> 只是显示加粗 ii. <strong>强调的内容</strong> 突出的文...

解决JSON包含HTML标签无法显示的问题

主要是将json无法识别的字符进行转义 function dotran($str) { $str = str_replace(‘"‘,‘//"‘,$str); $str = str_replace("/r/n",‘//r//n‘,$str); $str = str_replace("/t",‘//t‘,$str); $str = str_replace("//",‘//‘,$str); $str = str_replace("/b",‘//b‘,$str); return $str; }这样返回的数据就可以正常显示，下面是转换后的内容：jsontext=‘{"jqry":[{"id":"12...

HTML5笔记1——HTML5的发展史及标签的改变【代码】【图】

记得第一次接触HTML5还是在《联信永益》实习那会儿（2011），当时一个项目技术选型的时候面临两种选择，分别是Silverlight和HTML5，记得当年用的最新的IE浏览器版本还是IE9，才刚刚开始支持HTML5。后来考虑到当时各个版本的浏览器对HTML5的支持都不怎么好，最终公司还是选择了Silverlight，想不到多年以后Silverlight没落了，HTML5却随着移动互联网的兴起而焕发出强大的活力。HTML5的发展路程一路走来，我们回顾一下HTML的发展之路...

html页面标签元素总结【代码】【图】

html页面标签元素总结前言学习python的flask架构对于有丁点C功底的人来说代码问题研究研究还能勉强跟得上脚步，但是html前端就蒙圈了，完全小菜比一枚。故此总结下我目前接触过的标签以及经常需要用的小功能(例如下拉框，单选框等等)。本篇仅从为w3c官网http://www.w3school.com.cn/收藏以供自己日后方便使用。PART I ：常用的html标签 1.1 基础篇标签描述 <!DOCTYPE> 定义文...

一个完整的html 每个标签的含义【代码】

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 5<title>无标题文档</title> 6<script type="text/javascript" src="js/index.js"></script...

html5 form表单常用标签【代码】

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body> <form><input type="email"><input type="submit"><input type="tel"><input type="submit"><input type="url"><input type="submit"><input type="search"><input type="submit"><input type="r...

超级简单却不知道：html标签的嵌套规则

XHTML的标签有许多：div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、span、 strong……我们在运用这些标签搭建页面结构的时候，是可以将它们无限嵌套的，但是，嵌套也需要有一定规则，不能任由自己的个人习惯胡乱嵌套，那么，html标签的嵌套规则有哪些呢？　　一、HTML 标签包括块级元素(block)、内嵌元素（inline）　　1、块级元素　　一般用来搭建网站架构、布局、承载内容……它包括以下这些标签：　　address、blockquote、...

JS HTML标签尺寸距离位置定位计算【图】

四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)网页正文全文宽：document.body.scrollWidth网页正文全文高：document.body.scrollHeight网页被卷去的高：...

html标签中英文对照,更好理解html标签

HTML标签英文全称中文释义aAnchor锚abbrAbbreviation缩写词acronymAcronym取首字母的缩写词address Address地址dfn Defines a Definition Term定义定义条目kbd Keyboard键盘（文本）samp Sample示例（文本var Variable变量（文本）tt Teletype打印机（文本）codeCode源代码（文本）prePreformatted预定义格式（文本）blockquote Block Quotation区块引用语cite ...

HTML标签marquee实现滚动效果【代码】

页面的自动滚动效果，可由javascript来实现，但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果，无需js控制。使用marquee标记不仅可以移动文字，也可以移动图片，表格等.语法：<marquee>...</marquee>；说明：在标记之间添加要进行滚动的内容。重要属性：1.滚动方向direction（包括4个值：up、 down、 left和 right）　　语法：<marquee direction="滚动方向">...</marquee>2.滚动方式behavior（scro...

freemarker 集成 sitemesh 装饰html页面 shiro 标签

guest标签：验证当前用户是否为“访客”，即未认证（包含未记住）的用户；　　shiro标签：<shiro:guest></shiro:guest> ；　　freemark中： <@shiro.guest> </@shiro.guest> user标签：认证通过或已记住的用户　　shiro标签：<shiro:user> </shiro:user> ；freemark中： <@shiro.user> </@shiro.user> authenticated标签：已认证通过的用户。不包含已记住的用户，这是与user标签的区别所在。　　 shiro标签：<shiro:auth...

首页 / HTML / 四、Html常用标签

四、Html常用标签

内容导读

内容图文

内容总结

内容备注

内容手机端

【四、Html常用标签】教程文章相关的互联网学习教程文章

标签 - 相关标签

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程