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>

结束语

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

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

前端学习之表单验证（超详细）
表单验证: 主要用于验证input框的非空或者类型是否正确. iView表单验证: 参数详解(html部分): <Form ref="form" :model="f ...
【Web前端HTML+CSS——表单知识点及相关案例】
文章目录表单元素 input元素 select元素 textarea元素按钮元素表单状态(可替换元素不能完全控制) 配合表单元素的其他元素 label datalist(存在兼容性问题,了解即可 ...
Web前端之登录表单
仿照书上的例子写的一.HTML <!DOCTYPE html> <html lang="en"> <head><meta charset ...
前端学习 -- HtmlCss -- 表单
表单的作用就是用来将用户信息提交给服务器的,比如:百度的搜索框注册登录这些操作都需要填写表单. 使用form标签创建一个表单,form标签中必须指定一个action属性,该属性指向的是一个服务器的 ...
Web前端(15)_input表单
1.label标签点击用户名,直接跳到输入框里 <!DOCTYPE html> <html lang="en"> <head><meta ...
Web前端 | HTML | 表格 | 表单
目录--今日任务表格关卡2 表单关卡3 表格表格由 <table> 标签来定义: 每个表格均有若干行,由 <tr> 标签定义: 每行被分割为若干单元格,由 <td ...
web前端培训 - HTML 表单基础知识
1. 创建表单每个表单都以 form 开始标签开始,以 form 结束标签结束.两个标签之间是组成表单的说明标签.控件和按钮.每个控件都有一个 name 属性,用于在提交表单时对数据进行识别.for ...
web前端学习（四）——HTML5的超链接标签设置（页面间链接、锚链接以及邮件链接）
1.HTML5的超链接--页面间链接 <a href ="链接网址" target="目标窗口位置">文本或图像</a> 这里的 hre ...
html表单的课后心得体会,web前端学习心得体会范文
<web前端学习心得体会范文>由会员分享,可在线阅读,更多相关<web前端学习心得体会范文(2页珍藏版)>请在装配图网上搜索. 1.web前端学习心得体会范文web前端学习心得 ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...

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