HTML总结

在这里插入图片描述
在这里插入图片描述

行列的总结
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- table一定不能少 -->
		<table border="2px">
		<tr>
			<td colspan="3">学习成绩</td>
		</tr>
		<tr>
			<td rowspan="2">狂神</td>
			<td>语文</td>
			<td>100</td>
		</tr>
		<tr>
			<td>数学</td>
			<td>100</td>
		</tr>
		<tr>
			<td rowspan="2"></td>
			<td>语文</td>
			<td>100</td>
		</tr>
		<tr>
			<td>数学</td>
			<td>100</td>
		</tr>
		</table>
	</body>
</html>

媒体元素的总结
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- src:链接 controls:控制播放 autoplay:自动播放 -->
	<body>
		<audio src="../前端复习/张远-有生之年.mp3" controls autoplay>
		</audio>
		
		<!-- <video  src="../前端复习/张远-有生之年.mp4" controls autoplay>
			</video> -->
	</body>
</html>

网页页面元素总结
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<header>
			<h1>头部</h1>
		</header>
		<section>
			<h1>主体</h1>
		</section>
		<footer>
			<h1>尾部</h1>
		</footer>
	</body>
</html>

内联框架总结
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <iframe src="https://www.bilibili.com" width="300px" height="300px"></iframe>
		 -->
		 <!-- src:引用页面地址 name:框架标识名 -->
		 <iframe src="" name="remark" width="300px" height="300px"></iframe>
	
		 <a href="媒体元素.html" target="remark">点击跳转</a>
	</body>
</html>

表单总结(重点):
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 这两个是必须的 -->
		<!-- method: 规定如何发送表单的数据 常用值:get|post-->
		<!-- 
		get方式:可以在url中看到提交的信息,不安全但高效
		post方式:比较安全,可以传输大文件
		 -->
		<!-- action :表示向何处发送表单数据-->
		<form action="媒体元素.html" method="post">
			<h1>注册</h1>
			<p>
				名字
				<!-- type:类型 value:默认值  maxlength:最大值   size:输入框的大小  readonly:只读  disabled:禁用 hidden:隐藏 -->
				<!-- placeholder:表单的提示信息 required:非空的属性,一旦为空,则不能进行提交-->
				<input type="text" name="username"    maxlength="8" size="30"   placeholder="请输入你的名字"  required=""/>
			
			</p>
		<p>
				密码
				<input type="password" name="password" id="" value="123456"  required/>
		
		</p>
		<!-- name相同表示在同一个组别中,只能选择一个 -->
		<p>
			<input type="radio"  value="boy" name="sex"  /><input type="radio" value="girl" name="sex" /></p>
		<!--  -->
		<p>
			爱好
			<input type="checkbox" name="1"  value="a" />1
			<input type="checkbox" name="1"  value="b" checked/>2
			<input type="checkbox" name="1"  value="c" />3
			<input type="checkbox" name="1"  value="d" />4
		</p>
		<p>
			<!-- 图片按钮的话和submit的提交方式一样 -->
			<input type="button" name="bt1"  value="点击变长" />
			<!-- <input type="image"  src="./R-C.jpg" name="bt2"  value="tupian" /> -->
		</p>
		<!-- 下拉框,列表框 -->
		<p>
			下拉框:
			<!-- selected代表默认选定的值 checked -->
			<select name="">
				<option value="选项的值">中国</option>
				<option value="选项的值" selected="selected">俄罗斯</option>
				<option value="选项的值">斯里兰卡</option>
			</select>
		</p>
		
		<p>
			文本域:
			<textarea rows="10" cols="50"></textarea>
		</p>
		
		<p>
			文件域:
			<input type="file" name="file" />
		</p>
		<!-- 常见验证 -->
		<p>
			邮箱验证:
			<input type="email" name="email" />
		</p>
		<p>
			URL验证:
			<input type="url" name="url"  />
		</p>
		<p>
			数字验证:
			<input type="number" name="number" max=100 min=10 step="10" />
		</p>
		
		<p>
			滑块:
			<input type="range" name="range" min=0 max=100 step="10" />
		</p>
		
		<p>
			搜索:
			<input type="search" name="search"  />
		</p>
		
		
		<p>
			<input type="submit" />
			<input type="reset" />
		</p>
		
		<!--  增强鼠标的可用性(扩充)-->
		<p>
			<label for="mark">你点我试试</label>
			<input type="text"  id="mark"/>
		</p>
		<p>
			自定义邮箱:
			<!-- pattern:正则表达式验证 -->
			<input type="text" name="diymail" pattern="	\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />
		</p>
		</form>
	</body>
</html>

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值