• 四、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>


  • 相关阅读:
    盘符格式转换成NTFS格式
    jdk环境变量配置
    修改mysql密码
    端口占用解决
    程序执行原理
    第一个Python程序
    pip安装第三方库失败的问题
    windows本地安装mongoDB并且安装可视化工具studio 3t
    开发时前端测试方法
    虚拟机配置vimrc
  • 原文地址:https://www.cnblogs.com/LinkinPark/p/5233064.html
Copyright © 2020-2023  润新知