Web开发-html篇-下

news2024/9/29 13:31:13

这篇是接着上篇的内容，接着介绍html的其他标签及属性的用法，感兴趣的可以从我的html上篇看起

1. 超链接示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>超链接</title>
</head>
<body>
	<dl>

		<!--target属性，在新的浏览器窗口打开链接-->
		<!--title属性，鼠标悬停显示信息-->

		<p id="top"></p>	<!-- 顶部id唯一 -->
		<dt><h4>导航站</h4></dt>
		<dd><a href="http://www.xiaomi.com" target="_self">小米</a></dd>
		<dd><a href="http://www.baidu.com" title="点击一下，了解更多" target="_blank">百度</a></dd>
		<dd><a href="http://www.Bing.com" target="_blank">必应</a></dd>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>

		<a href="mailto:2052619274@qq.com">联系我</a>	<!--向指定邮箱发送邮件-->
		
		<a href="#top">点击回到顶部</a>



	</dl>
	
</body>
</html>

<a>: 超链接。

href: 链接目标。
target: 指定打开链接的方式（如_self、_blank）。（具体来说就是，_self实在自身页面打开新的超链接，而_blank是在浏览器中打开新的窗口打开超链接）
title: 鼠标悬停时显示的文本。

效果展示：

1号：会利用a标签向指定邮箱发送一封邮件

2号：如果网页过长，可以方便快速回到网页最顶部

2. 图片标签示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>图片标签</title>
</head>
<body>
	<!--图片标签，img标签src属性-->
	<!-- 这两张图片是其他网页上扒过来的 -->
	<!-- alt属性用于图片无法加载是作为文本进行代替 -->
	<!-- width，height属性为图片设置宽度和高度，如果只设置一项，另一项会默认按比例缩放 -->
	<!-- title 属性，鼠标悬停显示信息 -->
	
	<img src="https://pic1.zhimg.com/v2-ec477e4aa3f4c0edfee1fe943907476b_r.jpg" width="800" title="爱情是蓝色的" alt="蕾姆">
	<img src="https://i04piccdn.sogoucdn.com/b26e0f294db10d4d" height="800" alt="02">

	<!-- 注意src的相对路径与绝对路径-->
	<!-- 下面两张都是同一张图片 -->
	<img src="./images/20240604hlag8k.webp" alt="鬼灭之忍">	<!-- 这是相对路径 -->
	<img src="D:\code\web\web_html\images\20240604hlag8k.webp" alt="鬼灭之忍">	<!-- 这个是图片在我本地电脑的绝对路径 -->

	
</body>
</html>

<img>: 图像元素。

我的代码中的注释比较详细易懂，至于为什么是动漫角色的图片，因为我喜欢，只是为了做个示例，可以根据个人需要进行更改发挥

src: 图像的URL。
alt: 替代文本（用于描述图片内容）。
title: 鼠标悬停时显示的文本。
width, height: 设置图像的宽高。

效果展示：

只截图了部分，我就不长截图了哈……感兴趣的自己复制试试哈。

3. 表单示例

form，表单主要用于和服务器交互，例如常见的登录，注册都需要交互校验用户信息

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>form表单</title>
</head>
<body>

	<!-- 将网页数据提交至服务器校验登录 -->
	<form action="http://www.baidu.com" method="post"> <!-- 输入服务器地址 -->

		<p><input type="text" placeholder="请输入用户名"></p>
		<p><input type="password" placeholder="请输入密码"></p>


		<!-- 单选框 -->
		<p>
			男：<input type="radio" name="gender">
			女：<input type="radio" name="gender" checked="checked">
		</p>
		

		<!-- 多选框 -->
		<h4>购买课程</h4>
		<p>
			web前端：<input type="checkbox">
			Python开发:<input type="checkbox">
			Java编程：<input type="checkbox">
			HTML:<input type="checkbox" checked="checked">
			CSS：<input type="checkbox">
		</p>

		<hr>
		<h3>下拉列表代替单选</h3>
		<p>
			<select name="class" id="001">
				<option value="a">web前端</option>
				<option value="b" selected="selected">Python开发</option>
				<option value="c">Java编程</option>
				<option value="">HTML</option>
				<option value="">CSS</option>

			</select>
		</p>

		<hr>
		<h3>下拉列表代替多选</h3>
		<p>
			<select name="class" id="002" multiple="multiple">
				<option value="a">web前端</option>
				<option value="b" selected="selected">Python开发</option>
				<option value="c">Java编程</option>
				<option value="">HTML</option>
				<option value="">CSS</option>
				<option value="">Vue</option>
				<option value="">React</option>
				<option value="">JavaScript</option>
				<option value="">Python爬虫</option>
			</select>
		</p>


		<hr>
		<h3>文本域多行输入</h3>
		<p>
			<strong>个人描述:<br></strong>
			<textarea name="" id="" rows="10" cols="40"></textarea>
			
		</p>

		<p>
			<input type="submit" value="登录">
			<input type="reset" value="清空购物车">
		</p>
		

	</form>
	
	
	
</body>
</html>

<form>: 表单元素。
action: 提交数据的目标URL。
method: 提交数据的方式（如GET或POST）。
<input>: 输入控件。
type: 输入类型（如text、password、radio、checkbox、submit、reset）。
text，单行文本输入框
password，输入进去的会变成小黑点，跟平时输入密码一样，看不见
radio，用于单选
checkbox，用于多选
submit，用于提交至服务器
reset，清空表单，例如常见的购物时的清空购物车
placeholder: 提示文本。
name: 输入的名称。
value: 提交时的值。
checked: 默认选中状态。
<select>: 下拉列表。
multiple: 允许多选。

效果展示：

4.label标签

label标签最重要的功能是，可以通过id进行关联文本输入框，当然你也可以用上面中的placehoder

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>label标签</title>
</head>
<body>
	<form action="">
		<p>
			<label for="username">用户名：</label>
			<input type="text" id="username">
		</p>
		
		<p>
			<label for="password">密码：</label>
			<input type="text" id="password">
		</p>
		<p>
			<input type="submit" value="注册">
			<input type="reset" value="清空">

		</p>



	</form>
	<button>普通按钮</button>
</body>
</html>

效果展示：

<label>: 标签，用于描述表单控件。

for: 指定与之关联的输入框的id。

5. div标签示例

div这是一个用的很多，很重要的标签，你可以随意打开一个网页，右键去查看源码，就会看到很多div

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>div标签</title>
</head>
<body>
	<div>
		张三
	</div> <!-- 分组 -->
	<div>
		李四
	</div> <!-- 分组 -->
	<!-- div标签用于网页的区域划分 -->
</body>
</html>