HTML标签二

最新推荐文章于 2024-08-01 12:55:27 发布

.本

最新推荐文章于 2024-08-01 12:55:27 发布

阅读量113

点赞数 3

文章标签： html 前端

本文链接：https://blog.csdn.net/2302_80016129/article/details/138470644

版权

本文详细介绍了HTML中的各种基本元素，如链接、锚点、图片、无序列表、有序列表、自定义列表、表格以及表单控件如input、radio、checkbox等，展示了如何使用这些元素构建网页结构和交互功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--链接标签：<a href="链接地址"></a>href属性指向链接地址  #空链接-->
		<a href="https://www.baidu.com" target="_self"></a> <!--跳转到网址-->
		<a href="#">空链接</a> <!--不做人和跳转，停留在本页面-->
		<a href="logn.html" target="_blank">登陆</a> <!-- 跳转到指定页面-->
		<!--在target属性中,链接打开在当前窗口_self:(就在当前窗口显示)和新建一个窗口_blank:(新打开一个窗口显示)-->
		<p id="top">此情可待成追忆</p>
		<!--锚点链接:
		    href里指向一个标签,(怎么确定是这个标签:id 属性)
			给需要指向的标签设置一个id(id具有唯一性),给id取个名字
			href里用#id作为链接地址. 用于在从页面的最下方到达指定链接位置-->
		<a href="#top">top</a>
		<img src="img/薇尔莉特.jpg" alt="图片加载出错" width="300" height="300" />
		<!--图片标签:<img/> 1.src:源地址
		2.alt:图片加载出错
		tips:在设置图片宽和高时一般只设置一边，另一边会等比列缩放-->
		<br />
		<!--列表标签:无序列表、有序列表、自定义列表-->
		<!-- 无序列表：ul -->
		<ul>
			<li>第一列</li> <!--列标签 -->
			<li>第二列</li>
			<li>第三列</li>
		</ul>
		<!-- 有序列表:ol -->
		<ol>
			<li>第一列</li>
			<li>第二列</li>
			<li>第三列</li>
		</ol>
		<!-- 自定义列表:dl -->
		<dl>
			<dt>服务中心</dt>
			<dd>在线客服</dd>
			<dd>售后电话</dd>
			<dd>线下门店</dd>
		</dl>
		<!-- 4月2号 表格标签:table
		border:边框
		cellspacing：单元格之间的空间距离
		cellpadding：单元格内的填充距离（相当于文字到边框的距离）-->
		<table border="1" cellspacing="0" cellpadding="20">
			<thead> <!--表格头部-->
				<tr> <!--表格的横排-->
					<th>学号</th> <!--表头 -->
					<th>班级</th>
					<th>姓名</th>
				</tr>
			</thead>
			<tbody><!--表格数据部分-->
				<!--第一行数据-->
				<tr>
					<td>201</td> <!--table data数据单元格-->
					<td>计算机一班</td>
					<td>刘珊</td>
			</tbody>
		</table>
		<!-- 表单标签：
		1、表单域: form
		2、表单控件:输入、选择、文本域
		3、提示信息：提示文本
		input:输入
		type：类型
		text：文本
		placeholder:提示
		password:密码
		-->
		<form>
			<span>用户名：</span><input type="text" placeholder="6到8个字符" />
			<br />
			<span>密码：</span><input type="password" placeholder="请输入密码" />
			<br />
			<!-- 单元按钮：radio -->
			<span>性别：</span><input type="radio" name="sex" /><span>男</span>
			<input type="radio" name="sex" /><span>女</span>
			<input type="radio" name="sex" /><span>其他</span>
			<br />
			<!-- 复选框：checkbox -->
			<span>个性化标签：</span><input type="checkbox" name="gxh" /><span>文艺</span>
			<input type="checkbox" name="gxh" /><span>深夜emo</span>
			<br />
			<!-- button：按钮 -->
			<!-- value：值 -->
			<input type="text" placeholder="请输入验证码" />
			<input type="button" value="点击发送验证码" />
			<br />
			<!-- rest：重置，点击按钮清空表单域中填入的内容。 -->
			<input type="reset">
			<!-- submit:提交 -->
			<input type="submit"/>
			<br/>
			<hr/>
			<select>
				<option>大学语文</option>
				<option>高数</option>
				<hr/>
				<span>描述</span>
				<textarea>文本区域</textarea>
			</select>
		</form>
	</body>
</html>