四、Html常用标签
- 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>
四、Html常用标签的更多相关文章
- HTML学习笔记（四）常用标签
1.超链接 <a href="url">Link text</a> eg:<a href="http://www.w3school.com. ...
- HTML的怎么使用，开发工具以及常用标签。
前端学习:学习地址:黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动,下面这些都是一些学习笔记.临渊羡鱼,不如退而结网!!愿我自己学有所成,也愿每个前端爱好者学有所成 ...
- CSS常用标签
CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...
- 9月5日网页基础知识 通用标签、属性（body属性、路径、格式控制） 通用标签（有序列表、无序列表、常用标签）（补）
网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
- Struts2常用标签
Struts2常用标签总结 一 介绍 1．Struts2的作用 Struts2标签库提供了主题.模板支持,极大地简化了视图页面的编写,而且,struts2的主题.模板都提供了很好的扩展性.实现了更好的 ...
- jsp学习--JSP运行原理,九大隐式对象和JSP常用标签
一.JSP运行原理 每个JSP 页面在第一次被访问时,WEB容器都会把请求交给JSP引擎(即一个Java程序)去处理.JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个servlet ...
- 转--Android按钮单击事件的四种常用写法总结
这篇文章主要介绍了Android按钮单击事件的四种常用写法总结,比较了常见的四种写法的优劣,有不错的参考借鉴价值,需要的朋友可以参考下 很多学习Android程序设计的人都会发现每个人对代码的 ...
- JSTL与EL常用标签（转）
JSTL与EL EL相关概念 JSTL一般要配合EL表达式一起使用,来实现在jsp中不出现java代码段.所以我们先来学习EL表达式 EL主要用于查找作用域中的数据,然后对它们执行简单操作:它不是编程 ...
- HTML5常用标签总结
一.常用的标签 <h1>~<h6> 表示是一个标题 <p> 段落标签 <hr/> 水平线标签 <br/> 换行标签 <sub> ...
- 第2天：HTML常用标签
今天学完主要对所学知识点进行了整理. 一.超链接ahref:www.baidu.com(跳转页面):id名(锚点跳到相应div位置):01.rar(压缩包) target:_blank(新窗口打开): ...
随机推荐
- AspNet Core 核心 通过依赖注入（注入服务）
说起依赖注入 相信大家已经很熟悉了,这里我在简要的描述一遍, 什么是依赖注入: 我们从字面意义上来解释一下:依赖代表着两个或者多个对象之间存在某些特定的联系:举一个不是很恰当的例子 比如说一度夫妻组成 ...
- mysql导入数据load data infile用法整理
有时候我们需要将大量数据批量写入数据库,直接使用程序语言和Sql写入往往很耗时间,其中有一种方案就是使用MySql Load data infile导入文件的形式导入数据,这样可大大缩短数据导入时间. ...
- npm package.json文件解读
每个Nodejs项目的根目录下面,一般都会有一个package.json文件.该文件可以由npm init生成,定义了项目所需要的各种模块,以及项目的配置信息(比如名称.版本.许可证等元数据). pa ...
- LVS集群DR模式实例(4)
LVS集群DR模式实例 1. 实验拓扑图 2. 实验环境 3台CentOS6.4 64bit的服务器. 类型 IP DR eth0:10.20.73.20 VIP eth0:0 10.20.73.3 ...
- 强化学习 - Q-learning Sarsa 和 DQN 的理解
本文用于基本入门理解. 强化学习的基本理论 : R, S, A 这些就不说了. 先设想两个场景: 一. 1个 5x5 的 格子图, 里面有一个目标点, 2个死亡点二. 一个迷宫, 一个出发点, ...
- mongodb 聚合查询
操作符介绍: $project:包含.排除.重命名和显示字段 $match:查询,需要同find()一样的参数 $limit:限制结果数量 $skip:忽略结果的数量 $sort:按照给定的字段排序结 ...
- Java与算法之(8) - 堆排序
堆是一种特殊的完全二叉树,其特点是所有父节点都比子节点要小,或者所有父节点都比字节点要大.前一种称为最小堆,后一种称为最大堆. 比如下面这两个: 那么这个特性有什么作用?既然题目是堆排序,那么肯定能用 ...
- Machine Learning - week 3 - Overfitting
The Problem of Overfitting 如果有太多的 features,假设可能与训练数据太匹配了以致于预测未来的数据不准确.如下图: 解决 overfitting 1. 既然是由太多的 ...
- 2017ecjtu-summer training #7 POJ 2689
Prime Distance Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 18731 Accepted: 5006 D ...
- hbmy周赛1--B
B - 改革春风吹满地 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit ...