HTML基本认识02

于 2020-12-20 17:18:25 发布
阅读量132 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45174508/article/details/111452202
版权
本文将带你深入了解HTML的基本概念，包括其结构、元素和属性。通过学习，你将能够创建基本的网页布局，并理解如何组织网页内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--用于实现一个页面嵌套其他页面-->
	<frameset rows="30%,*" >
		//noresize属性用于无法拖动
		<frame src="01_Body属性.html" noresize="noresize"></frame>
		<frameset cols="30%,*">
			<frame src="work2.html" noresize="noresize" name="t1"/>
			<frame src="work1.html" />
		</frameset>
	</frameset>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
//form表单
		<form>
			用户名<input type="text" /><br />
			密码&nbsp;  <input type="password"/><br />
	//name的设置用于捆绑两个单选框，实现单选
			性别&nbsp; <input type="radio" name="1" />男 <input type="radio" name="1" />女
			<br />
	//复选框 checkbox
			爱好&nbsp; <input type="checkbox"  />学习
			<input type="checkbox"  />编程
			<input type="checkbox"  />工作
			<br />
			birth <input type="date" /><br />
			salary <input type="number" /><br />
	//下拉列表select option selected设置为默认选择项
			学历 <select>
				<option >大专</option>
				<option>本科</option>
				<option selected="selected">硕士</option>
				<option>博士</option>
			</select>
	//multiple下拉框
			学历 <select multiple="multiple">
				<option >大专</option>
				<option>本科</option>
				<option selected="selected">硕士</option>
				<option>博士</option>
			</select><br />
	//textarea文本框
			info:<textarea cols="30" rows="6" ></textarea>
			<input type="submit" value="提交" />
		
		</form>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*固定定位fixed*/
			#parent{
				width: 300px;
				/*清除浮动*/
				/*overflow: hidden;*/
				/*父容器也要有相对定位*/
				border: dashed chartreuse 3px;
				position: absolute;
				top: 30px;
				left: 40px;
				
			}
			.bb{
				width: 150px;
				height: 150px;
				border-radius: 35px;
				box-shadow: 10px 10px 20px #0000FF ;
			}
			.a{
				font: "微软雅黑";
				
				/*float: right;*/
				
				/*float: left;*/
				border: solid black 5px ;
				/*外边距，控件与控件之间的边距margin
				 	内边距：控件与内容的间距*/
				padding-left: 30px;
				padding-top: 50px;
				margin-left: 30px;
				background-color: red;
			}
			.b{
				/*float: left;*/
				/*相对定位，相对于原有位置*/
				/*position: relative;*/
				position: absolute;
				/*绝对定位，相对于父容器去定位，否则就一直向上找直到body*/
				left: 30px;
				top: 50px;
				background-color: blue;
			}
			.c{
				
			/*float: left;*/
				background-color:gold;
			}
			
			
			
		</style>
	</head>
	<body>
		
		<div id="parent">
			<div class="a" ><b style="color: black;">框1</b></div>
			<div class="b bb">框2</div>
			<div class="c bb">框3</div>
		</div>
		<!--清除浮动-->
		<div style="clear: both;"></div>
		<h1>aaaa</h1>
		
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.aa{
				color: black;
			}
			.cc{
				font-size: 15px;
				padding-top: 15px;
			}	
			
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>
				<div style="background-color: antiquewhite;  font-size: 15px; height: 20px; width: 1000px; padding-left:15px ;padding-top: 5px; padding-bottom: 5px;float: left; " >
				<a style="color: red;" href="">亲，请登录</a>
				<a href="regis.html">免费注册</a>
				<a href="">手机逛淘宝</a>
					<div style="float: right; font-size: 15px;">
						<a style="color: red;" href="work.html">淘宝网首页</a>
						<a href="">我的淘宝</a>
						<a href="">购物车</a>
						<a href="">收藏夹</a>
						<a href="">商品分类</a>
						<a href="">卖家中心</a>
						<a href="">联系客服</a>	
					</div>
				</div>
				</td>
			</tr>
			
		</table>
		<table  style="width: 1000px;">
			<tr>
				<td style="width: 30%;">
					
					<div style="padding-left: 30px;" style="float: left; " >
						<img src="../img/taobao.png"/>	
					</div>
					
				</td>
				<td>
					<div style=" padding-left: 70px">
						<input type="text" style="width: 85%;"/>
						<input type="submit" value="提交" />
					</div>
					<div style="padding-left: 70px; margin-left: 30px; color: black;">
						
						<a class="aa" href="">客厅灯</a>
						<a class="aa" href="">客厅灯</a>
						<a class="aa" href="">客厅灯</a>
						<a class="aa" href="">客厅灯</a>
						<a class="aa" href="">客厅灯</a>
						<a class="aa" href="">客厅灯</a>
						<a class="aa" href="">客厅灯</a>
						<a class="aa" href="">客厅灯</a>
						
						
					</div>
				
				</td>
				
				
				
			</tr>
		</table>
		<div style="float: left;padding-left: 30px; background-color: antiquewhite;width: 1000px; height: 25px;">
			<a  class="cc"  >
				你是不是要找:<a class="aa" href="">客厅灯</a>
						<a class="aa" href="">客厅灯</a>
						<a class="aa" href="">客厅灯</a>
						<a class="aa" href="">客厅灯</a>
						<a class="aa" href="">客厅灯</a>
						<a class="aa" href="">客厅灯</a>
						<a class="aa" href="">客厅灯</a>
						<a class="aa" href="">客厅灯</a>
			</a>
		</div>
		<table  style="margin-top: 50px;";>
			<tr >
				<td style="width: 30px;"></td>
				<td style="width: 1000px;">
					<div style="float: left;" >
						价格:<input type="number" />-<input type="number" />
					</div>
					<div style="float: right;">
						<input name="a" type="radio" />包邮	
						<input name="a" type="radio" />正品保障	
						<input name="a" type="radio" />七天无理由
						<input name="a" type="radio" />消费者保障	
					</div>
					
				</td>
				
			</tr>
		</table>
		<table style="margin-top: 30px;">
			<tr>
				<th align="center"><img src="../img/002.png"  width="150px" height="150px" hspace="50px" /><br>作者：<br>售价：</th>	
				<th align="center"><img src="../img/003.png" width="150px" height="150px" hspace="20px" /><br>作者：<br>售价：</th>
				<th align="center"><img src="../img/004.png" width="150px" height="150px" hspace="20px" /><br>作者：<br>售价：</th>
				<th align="center"><img src="../img/005.png"  width="150px" height="150px" hspace="20px" /><br>作者：<br>售价：</th>
				<th align="center"><img src="../img/006.png" width="150px" height="150px" hspace="20px" /><br>作者：<br>售价：</th>
			</tr>
			<tr>
				<th align="center"><img src="../img/007.png"  width="150px" height="150px" hspace="20px" /><br>作者：<br>售价：</th>	
				<th align="center"><img src="../img/008.png"  width="150px" height="150px" hspace="20px" /><br>作者：<br>售价：</th>
				<th align="center"><img src="../img/009.png"  width="150px" height="150px" hspace="20px" /><br>作者：<br>售价：</th>
				<th align="center"><img src="../img/011.png"  width="150px" height="150px" hspace="20px" /><br>作者：<br>售价：</th>
				<th align="center"><img src="../img/2.jpg" width="150px" height="150px" hspace="20px" /><br>作者：<br>售价：</th>
			</tr>
			
		</table>
		<div style="background-color: antiquewhite;height: 100px;width: 1150px;">
			
		</div>
		
	</body>
</html>
Kotak
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值