HTML学习笔记（2019.8.3）

最新推荐文章于 2023-12-03 09:50:25 发布

汐汐如梦

最新推荐文章于 2023-12-03 09:50:25 发布

阅读量149

点赞数

分类专栏：学习笔记文章标签： HTML

本文链接：https://blog.csdn.net/weixin_43877400/article/details/98378492

版权

学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML学习笔记总结

1. 文字页面
2. 图片及链接页面
3. 表格页面
4. 注册页面

注：下面会展示会相关页面的知识点、代码和页面效果

1、文字页面
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页基本信息操作</title>
	</head>
	<body>
		<h1>网站信息实际操作！</h1>
		<h2>网站信息实际操作！</h2>
		<h3>网站信息实际操作！</h3>
		<h4>网站信息实际操作！</h4>
		<h5>网站信息实际操作！</h5>
		<h6>网站信息实际操作！</h6>
		<br />
		<hr />
		<p>这里是<b>HTML学习制作案例</b>，<b><font color="red ">小可爱们！</font></b>快来学习HTML呀，一起来秃头吧啦啦啦，学完了HTML，来上上手写写效果啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦来了来了</p>
		<p>这里是<strong>HTML学习制作案例</strong>，<b><font color="red " size="2">小可爱们！</font></b>快来学习HTML呀，一起来秃头吧啦啦啦，学完了HTML，来上上手写写效果啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦来了来了</p>
		<p>这里是<b><i>HTML学习制作案例</i></b>，<b><font color="red " face="仿宋">小可爱们！</font></b>快来学习HTML呀，一起来秃头吧啦啦啦，学完了HTML，来上上手写写效果啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦来了来了</p>
		<p>这里是<b><em>HTML学习制作案例</em></b>，小可爱们！快来学习HTML呀，一起来秃头吧啦啦啦，学完了HTML，来上上手写写效果啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦来了来了</p>
		<hr />
        	作者：3103237868@qq.com<br />
        	时间：2019-08-03<br />
        	描述：信息页面<br />
	</body>
</html>

在这里插入图片描述
2、图片及链接页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站图片</title>
	</head>
	<body>
		<h1><i>图片操作</i></h1>
		<hr />
		<img src="0101.jpg" />
		<img src="0101.jpg" alt = "图片加载失败"/><br />
		<img src="../img/10431051_214051610109_2.jpg" alt= "图片加载失败，请重新加载"/><br />
		<hr />
		<ul>
			<li type="circle">链接1</li><br />
			<li type="disc">链接2</li><br />
			<li type="square">链接3</li><br />
		</ul>
		<hr />
		<ol start="2">
			<li type="1">链接4</li><br />
			<li>链接5</li><br />
			<li>链接6</li><br />
		</ol>
		<ol start="3">
			<li type="a">链接6</li><br />
			<li type="a">链接7</li><br />
			<li type="a">链接8</li><br />
		</ol>
        <a href="网站信息.html" target="_blank">网站信息</a>
        <a href="表格案例.html" target="_self">表格案例</a>
        <hr />
        	作者：3103237868@qq.com<br />
        	时间：2019-08-03<br />
        	描述：图片及链接页面<br />
	</body>
</html>

在这里插入图片描述
3、表格页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格案例</title>
	</head>
	<body>
		
	<h1>这里是表格案例</h1>
	<table border="1px" bgcolor="aqua" width="300px" height="200px">
		<tr>
			<td>111</td>
			<td>111</td>
			<td>111</td>
			<td>111</td>
			<td>111</td>
		</tr>
		<tr>
			<td align="center">111</td>
			<td align="center">111</td>
			<td align="center">111</td>
			<td align="center">111</td>
			<td align="center">111</td>
		</tr>
		<tr>
			<td colspan="2">111</td>
			<td colspan="2" rowspan="2" align="center">
				<table border="1px" bgcolor="antiquewhite" width="100%" height="100%">
					<tr>
						<td>222</td>
						<td>222</td>
					</tr>
					<tr>
						<td>222</td>
						<td>222</td>
					</tr>
					<tr>
						<td>222</td>
						<td>222</td>
					</tr>
				</table>
			</td>
			<td rowspan="2">111</td>
		</tr>
		<tr>
			<td>111</td>
			<td>111</td>
		</tr>
	</table>
	<hr />
        	作者：3103237868@qq.com<br />
        	时间：2019-08-03<br />
        	描述：表格页面<br />
	</body>
</html>

在这里插入图片描述
4、注册页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
	</head>
	<body>
		<form>
		用户名：<input type="text" placeholder="请输入用户名"/><br />
		密码：<input type="password" placeholder="请输入密码"/><br />
		确认密码：<input type="password" placeholder="请再次输入密码" /><br />
		邮箱：<input type="email" placeholder="请输入邮箱"/><br />
		手机号码：<input type="tel" placeholder="请输入手机号码" /><br />
		照片：<input type="file" /><br />
		性别：<input type="radio" name="sex"/>男
		<input type="radio" name="sex"/>女
		<input type="radio" name="sex"/>保密<br />
		兴趣爱好：<input type="checkbox" />打球
		<input type="checkbox" />上网
		<input type="checkbox" />玩游戏
		<input type="checkbox" />睡觉
		<input type="checkbox" />吃东西<br />
		交友宣言：<textarea width="60px" height="40px">
			
		</textarea><br />
		籍贯：<select>
			<option>--请选择--</option>
			<option>广东</option>
			<option>湖南</option>
			<option>山东</option>
			<option>北京</option>
			<option>上海</option>
		</select><br />
		出生日期：<input type="datetime-local" /><br />
		验证码：<input type="text" /><br />
		
		<input type="button" value="普通按钮"/>
		<input type="submit" value="提交"/>
		<input type="reset" value="重置"/>
		<hr />
        	作者：3103237868@qq.com<br />
        	时间：2019-08-03<br />
        	描述：注册页面<br />
        </form>
	</body>
</html>

在这里插入图片描述