HTML常用标签（一）

最新推荐文章于 2022-11-05 12:39:07 发布

DragonChilder

最新推荐文章于 2022-11-05 12:39:07 发布

阅读量105

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/dragonchilder/article/details/117264011

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML常用标签（一）

HTML查询网站：
https://www.w3school.com.cn/h.asp

https://www.runoob.com/

br标签（换行标签）

<br/>

hr标签（分隔线标签）

<hr size="3" color="#FFD700"/>

font标签(字体标签)

<font size="3" color="green">奥里给！</font>
<font size="3" color="#FFFFFF">奥里给！</font>
<!--用来调节字体，颜色可以使用RGB编码-->

p标签（段落标签）

<p>第一段</p>
<p>第二段</p>
<p><font size="3" color="#FFFFFF">第三段</font></p>
<!--不用再使用br来换行，就能独立成段-->

table标签（表格标签）

<table align="center" border="1px" cellspacing="0px" cellpadding="5px">
<!--align对齐方式，border边框粗细，
cellspacing外边距，cellpadding内边距-->
			<tr><!--tr：表格中的行-->
				<th>AAA</th><!--th：标题列-->
				<th>BBB</th>
				<th rowspan="2">CCC</th>
				<!--rowspan="2":合并2个不同行的列单元-->
			</tr>
			<tr align="center">
				<td colspan="2">AAA</td>
				<!--colspan="2":合并2个不同列的行单元-->
				<!-- <td>BBB</td> -->
				<!-- <td>CCC</td> -->
			</tr>
			<tr align="center">
				<td>AAA</td>
				<!-- td:普通列 -->
				<td colspan="2">BBB</td>
				<!-- <td>CCC</td> -->
			</tr>
		</table>

a标签（超链接标签）

		<a name="top"></a><br />
		<a href="http://www.baidu.com" target="_blank"><font size="5" color="pink">前往百度搜索</font></a><br />
		<!--target="_blank"以新页面打开超链接-->
		<a href="#end">前往底部</a><br />
		<img src="img/libai.jpeg" /><br />
		<img src="img/libai.jpeg" /><br />
		<img src="img/libai.jpeg" /><br />
		<img src="img/libai.jpeg" /><br />
		<a href="#top">回到顶部</a>
		<a name="end"></a>

frameset标签（框架标签）

	<head>
		<meta charset="utf-8">
		<title>框架，区域划分</title>
	</head>
	<!-- 不能放再body里面 -->
	<frameset rows="10%,70%,*">
	<!-- 三行，第一行10%，第二行70%，剩下给第三行 -->
		<frame src="top.html"  noresize="noresize"/>
		<!--  noresize="noresize"固定边框位置，使其不能拖到 -->
		<frameset cols="20%,*">
		<!-- 第二行里分两列，第一列20%，剩下给第二列 -->
			<frame src="left.html"  noresize="noresize" name="left"/>
			<frame src="right.html"  noresize="noresize" name="right"/>
		</frameset>
		<frame src="bottom.html" noresize="noresize"/>
	</frameset>
	<body>
		
	</body>

dl标签（列表标签）

<dl>
			<dt>用户管理</dt>
			<!--dt:标题-->
			<dd>添加用户</dd>
			<!--dd:普通选项-->
			<dd>删除用户</dd>
			<dd>更新用户</dd>
			<dd>查询用户</dd>
		</dl>

img标签（图像标签）

<img src="img/libai.jpeg" height="150px" title="李白" alt="谪仙人"/>
<!--title:鼠标悬停时显示   alt:图片加载失败时显示-->

div标签-----块级标签，无直接含义，用于封装数据，整行封装。
span标签-----行内标签，无直接含义，用于封装数据，行内封装。

<div>A</div>
<span>bb</span>
<span>ccc</span>
<div>dddd</div>

form标签（表单标签）

<form action="#" method="get">
			<!-- action="#":提交表单的位置；method：提交数据的方式 -->
			<table align="center" border="1px" cellspacing="0px" cellpadding="5px">
				<caption>
					欢迎注册
				</caption>
				<!-- caption:表头，与table连用 -->
				<tr>
					<th>用户名</th>
					<td>
						<input type="text" name="userName" style="width: 250px;" />
						<!-- 输入框（用户名） -->
					</td>
				</tr>
				<tr>
					<th>密码</th>
					<td>
						<input type="password" name="psw" style="width: 250px;" />
						<!-- 输入框（密码用黑点代替显示 -->）
					</td>
				</tr>
				<tr>
					<th>性别</th>
					<td>
						<input type="radio" name="sex" value="man"  checked="checked"/>男
						<input type="radio" name="sex" value="woman" />女
						<!-- 单选框，name要设置成相同，checked默认选择 -->
					</td>
				</tr>
				<tr>
					<th>兴趣爱好</th>
					<td>
						<input type="checkbox" name="hobby" value="lq" checked="checked"/>篮球
						<input type="checkbox" name="hobby" value="zq" />足球
						<input type="checkbox" name="hobby" value="ppq" />乒乓球
						<!-- 复选框，name设置成相同 -->
					</td>
				</tr>
				<tr>
					<th>隐藏项</th>
					<td>
						<input type="hidden" name="id" value="123" />
					</td>
				</tr>
				<tr>
					<th>图片</th>
					<td>
						<input type="image" name="image" src="img/libai.jpeg"  width="150px"/>
					</td>
				</tr>
				<tr>
					<th>按钮</th>
					<td>
						<input type="button" name="button" value="我是按钮"/>
						<!-- 普通按钮，具体功能要自己实现 -->
					</td>
				</tr>
				<tr>
					<th>上传文件</th>
					<td>
						<input type="file" name="file"/>
					</td>
				</tr>
				<tr>
					<th>国籍</th>
					<td>
						<select name="country">
							<option>--请选择国籍--</option>
							<option value="CN">中国</option>
							<option value="US">美国</option>
							<option value="GM">德国</option>
						</select>
						<!-- 下拉框 -->
					</td>
				</tr>
				<tr>
					<th>留言</th>
					<td>
						<textarea name="text" rows="10" cols="40"></textarea>
						<!-- 长文本框，注意长和宽的调节方式 -->
					</td>
				</tr>
				<tr align="center">
					<td colspan="2">
						<input type="submit"  value="注册"/>
						<!-- 提交按钮，与form配套使用 -->
						<input type="reset" />
						<!-- 重置按钮，与form配套使用 -->
					</td>
				</tr>
			</table>
			
		</form>