Web 前端学习之表单制作、网页超链接
1. 综合表单制作
<!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>
执行结果如下：
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>
执行结果如下：
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>
执行结果如下：
注意： ”连接文本“ 不一定要是文本，图片或其他 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>
结束语
若这篇有帮到你，给个赞，收个藏，欢迎大家留言评论；
若文章有什么错误，欢迎大家指教。