html标签作用与用法(有对应例子)

标签整理:

标题:<title></title>
几级标题:<h1></h1>、<h2></h2>、<h3></h3>......
一条水平线:<hr>
换行:<br/>
定义一段文本:<span></span>
布局排列:<div></div>
定义段落:<p></p>
文字加粗:<b></b>、<strong></strong>
文字斜体:<i></i>
强调文字:<em></em>
文字小写:<small></small>
文字下标:<sub></sub>
文字上标:<sup></sup>
从左到右输出文字:<bdo dir="ltr"></bdo>
从右到左输出文字:<bdo dir="rtl"><bdo>
链接:<a href=...></a>
文字链接:<a href=...><span></span></a>
图片链接:<a href=...><img src=""></img></a>
定义无序列表:<ul></ul>
定义有序列表:<ol></ol>
列表项:<li></li>
有序列表序号翻转:<ol reversed="true"></ol>
规定起始序号:<ol start=""></ol>
设置序号为字母:<ol type="a"></ol>
图片:<img src="..."></img>
图片的提示信息:<img src="..." alt=""></img>
图片宽度和高度:<img src="..." alt="" width="" height=""></img>
表格:<table></table>
定义表格宽度、线的宽度:<table style="width:..px" border=".."></table>
定义表格标题:<caption></caption>
定义表格的行:<tr></tr>
定义表格的单元头:<th></th>
定义表格的单元格:<td></td>
表格跨越两行:<td rowspan="2"></td>
表格跨越两列:<td colspan="2"></td>

对应实例:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
		<title>基本元素</title>
	</head>
	<body>
		<h1>html</h1>
		<h2>html</h2>
		<h3>html</h3>
		<h4>html</h4>
		<h5>html</h5>
		<h6>html</h6>
		<!--一条线-->
		<hr>
		<!--定义一段文本-->
		<span>html</span>
		<!--换行-->
		<br/>
		<!--布局排列-->
		<div>Tomcat</div>
		<!--定义段落-->
		<p>p标签</p>
		
		<!--文字标签-->
		<span><b>加粗文字1</b></span><br/>
		<span><i>斜体文本</i></span><br/>
		<span><b><i>斜体加粗</i><b></span><br/>
		<span><em>强调</em></span><br/>
		<p><strong>加粗文字2</strong></p><br/>
		<small><span>小写</span></small><br/>
		<span>正常文字<sub>下标</sub><sup>上标</sup></span><br/>
		<bdo dir="ltr">从左到右</bdo><br/>
		<bdo dir="rtl">从右到左</bdo><br/>
		
		<!--链接-->
		<a href="http://www.baidu.com"><span>百度<span></a><br/>
		<a href="http://www.baidu.com"><img src="D:\AAA实习\网页\img\1.jpg"></img></a><br/>
		<a href="text.html"><span>自己text.html<span></a><br/>
		
		<!--ul定义无序列表-->
		<ul>
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
		</ul>
		<!--ol定义有序列表-->
		<ol>
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
		</ol>
		<!--翻转-->
		<ol reversed="true">
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
		</ol>
		<!--规定起始序号-->
		<ol start="2">
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
		</ol>
		<!--设置字母-->
		<ol type="a"> 
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
		</ol>
		
		<!--图片-->
		<img src="D:\AAA实习\网页\img\1.jpg" alt="草莓"></img>
		<!--设置高度和宽度-->
		<img src="D:\AAA实习\网页\img\1.jpg" alt="草莓" width="100" height="100"></img></br/>
		<a href="http://www.baidu.com"><img src="D:\AAA实习\网页\img\1.jpg" alt="草莓"></img></a><br/>
		<a href="http://www.baidu.com"><img src="D:\AAA实习\网页\img\1.jpg" alt="草莓" width="100" height="100"></img></a>
		
		<!--表格-->
		<!--width 定义表格宽度、border 定义线的宽度-->
		<!--caption 定义标题-->
		<!--tr 定义表格的行-->
		<!--th 定义表格的单元头-->
		<!--td 定义表格的单元格-->
		<table style="width:400px" border="1">
			<caption><b>标题加粗1</b></caption>
			<tr>
				<th>书名</th>
				<th>作者</th>
			</tr>
			<tr>
				<td>AA</td>
				<td>aa</td>
			</tr>
			<tr>
				<td>BB</td>
				<td>bb</td>
			</tr>
			<tr>
				<td>CC</td>
				<td>cc</td>
			</tr>
		</table>
		
		<table style="width:400px" border="1">
			<caption><b>标题加粗2</b></caption>
			<tr>
				<th>书名</th>
				<th>作者</th>
			</tr>
			<tr>
				<td rowspan="2">AA</td><!--rowspan 跨越两行-->
				<td>aa</td>
			</tr>
			<tr>
				<td>bb</td><!--td 定义表格的单元格-->
			</tr>
			<tr>
				<td colspan="2">CC</td><!--colspan 跨越两列-->
			</tr>
		</table>
	</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值