Web 前端学习之表单制作、网页超链接

最新推荐文章于 2023-10-16 19:18:05 发布

菇毒

最新推荐文章于 2023-10-16 19:18:05 发布

阅读量1.9k

点赞数 6

分类专栏： web 前端学习文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_43960383/article/details/120262831

版权

web 前端学习专栏收录该内容

90 篇文章 4 订阅

订阅专栏

Web 前端学习之表单制作、网页超链接

1. 综合表单制作
2. 用 CSS 制作水平导航菜单
3. HTML 超链接（链接）
- 3.1 HTML 超链接的 target 属性
- 3.2 HTML 超链接的 id 链接
结束语

1. 综合表单制作

2021-9-13

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对表单元素进行分组的表单</title>
	</head>
	<body>
		<form>
			<fieldset>
				<legend align="center">个人资料</legend>
				<p>姓名：<input type="text" name="username"/></p>
				<p>性别：
					<input name="xb" type="radio" checked value="男">男
					<input name="xb" type="radio" value="女">女
					<p>出生日期：
						<input type="text" name="birthday">
						<p>主要经历：
							<textarea name="textarea" rows="3" cols="25"></textarea>
							<p>兴趣爱好：
								<input type="checkbox" name="ah" value="01" />唱歌
								<input type="checkbox" name="ah" value="02" />羽毛球
								<input type="checkbox" name="ah" value="03" />下棋
								<input type="checkbox" name="ah" value="04" />网上冲浪
								<input type="checkbox" name="ah" value="05" />网购
						</p>
			</fieldset>
		<fieldset>
			<legend align="center">专业与课程</legend>
			所学专业：
			<select name="select">
				<option>大数据工程技术</option>
				<option selected> 计算机应用</option>
				<option>计算机网络技术</option></select>
			所学课程：
				<select name="select2" size="4">
					<option>计算机应用基础</option>
					<option>office</option>
					<option>数据库应用基础</option>
					<option>C语言</option>
					<option>网页设计</option></select>
			
		</fieldset>
		<p><input type="submit" value="提交" /></p>
			<input type="reset" value="重填" />
		</form>
	</body>
</html>

执行结果如下：
2021-913

2. 用 CSS 制作水平导航菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用CSS+Div制作的水平菜单</title>
		<link rel="stylesheet" type="text/css" href="CSS制作.css" />
	</head>
	<body>
		
		<!-- </<style type="text/css">
			
		</style> -->
		<div class="menu">
			<ul><li><a href="#">HTML与CSS基础</a></li>
			<li><a href="#">客户端脚本</a></li>
			<li><a href="#">PHP 动态网页设计</a></li></ul>
		</div>
	</body>
</html>

创键一个名为 CSS的.css文件；

<style stype="text/css">
*{
	/* 星号代表样式表示应用于所有页面元素*/
	margin: 5;	/*外填充*/
	padding: 0;	/* 内填充 */
}
.menu{
	position:relative;	/* 不是必需的*/
}
.menu ul li {
	float: left;	/*默认情况下，列表是换行的，使用本属性则不换行，即水平菜单*/
	list-style: none;	/* 不显示列表符号*/
	font-size:14px ;
}
.menu ul li a{
	text-decoration: none;
}
.menu a:hover{
	text-decoration: underline;
	background: #f2cdb0;
	color: #F00;
}
</style>

执行结果如下：
2021-9-13

3. HTML 超链接（链接）

HTML 可以用标签 <a> 设置超文本链接；
超链接可以是一个字、一个单词、一组单词、是一幅图像，点击这些内容能跳转到新的文档或当前文档中的某个部分；
在标签 <a> 中使用 href 属性来表述链接的地址；
链接将以如下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线；
访问过的链接显示为紫色并带有下划线；
点击链接时，链接显示为红色带有下划线；

注意： 若这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示；

HTML 超链接语法如下：

<a href="url"> 链接文本 </a>

href 属性描述了链接的目标；

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<a href="https://www.runoob.com/" target="_blank" rel="noopener norefereer">访问菜鸟教程</a>
		<br /><br />
		<a href="https://bz.zzzmh.cn/index" target="_blank" rel="noopener norefereer">访问极简壁纸</a>
	</body>
</html>

执行结果如下：
2021-9-13
注意： ”连接文本“ 不一定要是文本，图片或其他 html 元素也可以成为链接；

3.1 HTML 超链接的 target 属性

用 target 属性，可定义被链接的文档在何处显示；

<a href="https://bz.zzzmh.cn/index" target="_blank" rel="noopener norefereer">访问极简壁纸</a>

3.2 HTML 超链接的 id 链接

id 属性可用于创建一个 HTML 文档书签；
注意： 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示，即对于读者来说是隐藏的；

具体实例入下所示：

在 HTML 文档中插入ID：

<a id ="tipss">有用的提示部分</a>

在 HTML 文档中创建一个链接到 “有用的提示部分（id=“tipss”）”：

<a href="#tipss">访问有用的提示部分信息</a>

或，从另一个页面创建以链接到“有用的提示部分信息（id=“tipss”）”

<a href="https://bz.zzzmh.cn/index/html/html-links.html#tipss"></a>

结束语

若这篇有帮到你，给个赞，收个藏，欢迎大家留言评论；
若文章有什么错误，欢迎大家指教。

菇毒

关注

6
点赞
踩
32

收藏

觉得还不错? 一键收藏
0
评论
Web 前端学习之表单制作、网页超链接

Web 例子1. 综合表单制作2.3. 超链接1. 综合表单制作<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>对表单元素进行分组的表单</title> </head> <body> <form> <fieldset> <legend align="center">个人资
复制链接

扫一扫