学习前端第三天（一）

最新推荐文章于 2024-07-23 21:42:00 发布
最新推荐文章于 2024-07-23 21:42:00 发布
阅读量214 收藏
点赞数 5
文章标签： 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75428540/article/details/136993147
版权
这篇文章详细介绍了HTML中的各种表单元素，包括文本框、密码框、单选框、多选框、上传文件、下拉菜单、文本域、label标签以及不同类型的按钮，展示了它们的用法和特点，适合初学者了解基础表单构建与交互设计。
摘要由CSDN通过智能技术生成

01表单预习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        作用：收集用户信息
            使用场景：1.登录页面
                    2.注册页面
                    3.搜集页面   
    -->
    <!-- 
        input标签
        type属性值：
            1.text 文本框   单行文本
            2.password 密码框
            3.radio 单选框
            4.checkbox 多选框
            5.file 上传文件
     -->
     <!-- 特点：输入什么就显示什么  -->
     文本框 <input type="text">
     <br><br>
     <!-- 特点：输入什么都是以点的形式显示 -->
     密码框 <input type="password">
     <br><br>
     单选框 <input type="radio">
     <br><br>
     多选框<input type="checkbox">
     <br><br>
     上传文件<input type="file">
</body>
</html>

02表单_input占位文本预习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input站位文本</title>
</head>
<body>
    <!--input标签站位文本
            占位文本：提示信息
             <input type="text" placeholder="提示信息">
             文本框和密码框使用
    -->
    <!-- placeholder 默认浅色字体 -->
    文本框<input type="text" placeholder="请输入用户名">
    <br><br>
    密码框 <input type="password" placeholder="请输入密码">
</body>
</html>

03单选框预习

<!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>
    <!-- 单选框 radio
            属性：
                name 作用：控件名称 控件分组，同组中只能选一个（单选功能）   
                checked 作用：默认选中一个 
    -->
    性别：<input type="radio" name="gender" id="">男
        <input type="radio" name="gender" checked>女
</body>
</html>

04上传文件file预习

<!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>
    <!-- 默认情况下，文件上传表单控件只能上传一个文件
        添加multiple属性实现多文件上传功能
    -->
    上传文件 <input type="file" multiple>
</body>
</html>

 05多选框预习

<!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>
    <!-- 多选框默认选择   checked -->
    <input type="checkbox">敲代码
    <input type="checkbox" checked>敲前端代码
    <input type="checkbox" checked>敲前端HTML代码
</body>
</html>

06下拉菜单预习

<!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>
    <!-- 标签 select 嵌套 option
            select是下拉菜单整体，option是下拉下单的每一项
    -->
    城市：
    <select >
        <option >北京</option>
        <option >上海</option>
        <option >广州</option>
        <option  selected>深圳</option>
        <option >武汉</option>
    </select>
</body>
</html>

07文本域预习

<!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>
    <!-- 作用：多行输入文本的表单控件   换行   默认可以拖拽
       textarea 双标签 
    -->
    <!-- 右下角有拖拽功能，未来禁用 -->
    <textarea  >请输入评论</textarea>
</body>
</html>

08  label标签预习

<!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>
    <!-- label标签
            作用：网页中某个空间的说明文本  增大表单点击范围
                写法：1. <input type="radio" id="man">
                        <label for="man">男</label>
                        2. <label ><input type="radio">女</label>
    -->
    <input type="radio" id="man"><label for="man">男</label>
    <label ><input type="radio">女</label>

</body>
</html>

09  按钮预习

<!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>
    <!-- button标签
           <button type=""></button>
            type：1.submit提交按钮，点击可以把数据提交到后台，默认按钮
                2.reset 重置按钮，点击后将表单控件恢复成默认值
                3.button普通按钮，默认没有功能，一般配合JavaScript使用

     -->
    <!-- form  表单区域 -->
    <!-- action 未来发送数据的地址 -->
<form action="">
用户名：<input type="text">
<br><br>
密码： <input type="password">
<br><br>
<!-- 如果省略type 也是提交功能 -->
<button type="submit">提交</button>
<!-- reset配合form -->
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>
</html>

10 练习

<!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>
<form >
    姓名：<input type="text" placeholder="请输入您的名字" >
    <br>
    密码：<input type="password" placeholder="请输入您的密码">
    <br>
    确认密码：<input type="password" placeholder="请确认您的密码">
    <br>
    密码提示问题：<select name="" id="">
        <option value="">你的爸爸叫什么</option>
        <option value="">你的妈妈叫什么</option>
        <option value="">你的初中叫什么</option>
        <option value="" selected>请选择一个问题</option>
    </select>
    <br>
    密码提示答案：<input type="text">
    <br>
    性别： <label ><input type="radio" name="gender" checked>男</label> 
            <label > <input type="radio" name="gender">女</label>
    <br>
    年龄：<input type="text">
    <br>
    籍贯：<select name="" id="">
        <option value="" selected>请选择省</option>
        <option value="">山东</option>
        <option value="">山西</option>
        <option value="">北京</option>
    </select>
    省/直辖市：<select name="" id="">
        <option value="">请选择市</option>
        <option value="">临沂</option>
        <option value="">青岛</option>
        <option value="">济南</option>
    </select>市
    <br>
    爱好：<label ><input type="checkbox" checked>上网</label>
           <label > <input type="checkbox">体育</label>
           <label> <input type="checkbox">学习</label>
    <br>
    个人介绍：<textarea name="" id="" cols="30" rows="10"></textarea>
    <br>
    上传头像：<input type="text">
                <input type="file">
    <br>
    <button>提交</button>
    <button type="reset"> 重置</button>
</form>
</body>
</html>

小白学前端3.22
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学习前端第三天
sinat_41143098的博客
07-14 2331
一、HTML5介绍 html5不仅仅只是作为标记语言的一个最新版本，更最要的是它制定了Web应用开发的一系列标准，成为第一个将Web作为应用开发平台的html语言。 html5定义了一系列新元素，如新语义标、只能表单、多媒体标签等，可以帮助开发者创建互联网应用，还提供了一系列JavaScript api，如地理定位、重力感应、硬件访问等，可以在浏览器内实现原生应用，甚至结合Canvas我们可以开发网页版游戏，同事结合css3的过度、转换、动画等特性，可以极大的增强用户体验，提升开发功能的可应用性。 我们日.
学习前端第二天
m0_59060850的博客
02-03 142
前端学习第二天
前端页面的简单学习与项目搭建（主要针对HTML和VUE的学习）
热门推荐
张彦峰的博客
04-09 169万+
备注：只是本人的自学与备注，自己本身不是做前端的，只是简单搭建一些前端的东西，自己玩的。 一、HTML简单的回顾 （一）HTML 基本结构 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&...
前端学习路线（简洁清晰，直击学习途径）
m0_67911008的博客
03-30 6万+
第一阶段：前端入门 1.Html5 2.Css3 第二阶段：JavaScript ①JavaScript 基础语法 ②JavaScript 高级（WebAPI/Dom Bom） ③JavaScript 框架（jQuery） ④数据可视化（echarts） 第三阶段 服务端编程 1.node js基础 2.ajax 3.promise 4.axios 5.了解学习es6语法，http协议规则 6.TypeScript 第四阶段 Vue.js
Web前端----学习uniapp的第一天
软件测试的坑，让我来踩吧
08-02 1699
随着计算机的不断发展，Web前端这门技术也越来越重要，很多人都开启了前端的学习，本篇文章就是简单的写了一下uniapp的语法，用来对uniapp进行基础的学习。一、
零基础学习前端的第三天
10-11
零基础学习前端的第三天
学习前端的第三天复习.rar
10-13
在学习前端开发的过程中，第三天的复习至关重要，因为这标志着你已经初步接触并理解了一些基础概念。前端开发是构建互联网应用程序的重要部分，它涉及到用户在浏览器中直接可见和交互的所有内容。下面，我们将深入...
前端基础css第一天,对应博客
04-03
本文将根据提供的“前端基础css第一天”学习资料，深入探讨第一天学习中涉及的重要CSS知识点，帮助初学者建立扎实的基础。 首先，我们来了解CSS的基本概念。CSS通过分离文档的内容与表现，使得网页设计更加灵活和...
前端学习的第04天.zip
09-22
-- 这个表格用于展示销售数据，第一列是日期，第二列是产品，第三列是销售额 --> <!-- ... --> ``` 在编辑器中，你可以利用快捷键如`CTRL+/`（在许多IDE或文本编辑器中）快速插入或删除注释，这大大提高了编写和...
前端学习的第12天.zip
10-22
在前端开发领域，选择器是CSS（层叠样式表）中的关键组成部分，它们用于精确地定位和...在"前端学习的第12天"这个阶段，掌握这些基础知识是至关重要的，因为它们构成了CSS选择器的基础，是构建任何复杂CSS规则的基石。
5.CSS学习（浮动）
ShawLee0925的博客
07-23 172
css浮动——float特点
编程学习之路：从零到一的成长指南
KsuferNotes
07-22 293
在当今数字化时代，编程技能已经成为许多人职业发展的重要组成部分。不论你是已经在IT业从业多年的老手，还是刚刚起步的编程新手，这篇博客将带你走过编程学习的每一个重要阶段，从而顺利完成从零到一的华丽转变。
手写简易版Spring IOC容器02【学习】
weixin_44794897的博客
07-19 573
其中applyPropertyValues用于从beanDefinition中读取属性的配置信息然后通过BeanUtil(hutool-all中提供的类)为其赋值@Overridetry {// 创建bean实例Class<?if (null!break;// 设置属性值try {// 从beanDefinition中获取property通过Resource获取文件流。
昇思25天学习打卡营第16天|munger85
MungerVC
07-20 432
MobileNet网络是由Google团队于2017年提出的专注于移动端、嵌入式或IoT设备的轻量级CNN网络，相比于传统的卷积神经网络首先安装依赖下载数据。
2024论文精读：利用大语言模型（GPT）增强上下文学习去做关系抽取任务
YxinMiracle's Studio.
07-20 1007
高引论文精度，如何利用大预言模型做关系抽取任务
MISRA C2012学习笔记(7)-Rules 8.12
赞的博客
07-20 686
为便于理解以下示例，应注意，1u 的基本类型是 unsigned char，而 1UL 的基本类型是 unsigned long。在下面这个示例中，表达式 DELAY + WIDTH 的值为 70000，但是在具有 16 位 int 类型的计算机上，该。所有这些都是合规的，但取决于 a，b 和 c 的类型，具有多个运算符的任何表达式都可能违反其他规则。，可以消除程序员的期望与事实不符的可能性。下面的示例显示具有单目或后缀运算符的表达式，其操作数是主表达式或顶级运算符具有优先级 15 的表达式。
从0开始的STM32HAL库学习6
hwq_1229_0525的博客
07-21 267
配置红色框图中的各种配置时钟源选择外部时钟 21.预分频器Prescaler，下面填0，不分频2.计数模式，计数模式选择为向上计数3.自动重装寄存器，自动重装计数器填为10，计数到10后清空并出发中断4.滤波器的频率分频：不使用影子寄存器。
学习华为IPD流程黑话2.0
最新发布
产品线负责人
07-23 368
管道管理是指根据资源需求（管道需求）尽早地对可获得性资源（管道供给）进行平衡，任何企业做研发、做产品，它的可用资源都是有限的，可以把企业的资源比喻成管道。既是对产品包进行验证，也是内部技能传递的重要环节，同时能为客户带来价值。这个时候就只需要对切片的概念做一下了解就应该可以直接应用了。而且主要做的是 C 语言，Python 也确实没具体用过。并保证在任意时刻产出的研发价值（即出口流量）的最大化，好了，这个话题就不展开来讲了，后续可以单独展开聊聊。评审的对象是新产品的业务计划，而不是产品的开发计划。
FreeModbus学习——eMBPoll轮询
rerrick_rose的博客
07-23 685
接收状态机为空闲态时（每次定时器溢出中断会将接收机状态置为空闲态），接收到一个字符，会进入串口接收中断，串口接收中断中会将接收到的字符保存作为帧首，并且把接收状态机变为STATE_RX_RCV。直到一帧结束，也就是距离下个字符超过定时器溢出时间，进入定时器中断，此时接收状态机还为STATE_RX_RCV，这就意味着接受完成了一帧。协议栈使能后，会将接收状态机赋值为初始化态，且定时器也使能，定时器进入溢出中断，会将接收状态机由初始化态变为空闲态，并且发布一个EV_READY事件。
学习前端第一个阶段html项目的复盘回顾目标
07-02
### 回答1： 学习前端的第一个阶段是学习HTML，而复盘回顾则是对所学知识的总结和反思。那么，学习HTML的复盘回顾目标可以包括以下几个方面。 首先，复盘回顾的目标是巩固和加深对HTML的理解。在学习HTML的过程中，我们通过了解HTML的语法规则、标签和属性等，掌握了如何创建网页的结构和内容。通过复盘回顾，可以巩固这些知识点，提高对HTML的理解和应用能力。 其次，复盘回顾的目标是发现和纠正自己在学习HTML过程中存在的问题和不足之处。可能在学习HTML的过程中，我们遇到了某些困难，或者对某些知识点理解不够透彻，或者在实践中出现了一些错误。通过复盘回顾，可以仔细检查自己的学习过程，找出问题所在，从而有针对性地进行纠正和改进。 另外，复盘回顾的目标是提升自己的实践能力。学习HTML不仅是理论知识的学习，更重要的是能够将所学知识应用到实际项目中。通过复盘回顾，可以回顾自己在实践中的表现，发现自己在实践中的不足之处，并通过实践的经验不断提升自己的实践能力。 最后，复盘回顾的目标还可以包括对学习HTML的感悟和未来的规划。通过复盘回顾，可以总结自己在学习HTML过程中的体会和收获，为以后的学习和发展做好规划。同时，也可以思考并规划下一个阶段的学习目标和计划，为之后的学习打下坚实的基础。 ### 回答2： 学习前端第一个阶段的HTML项目的复盘回顾目标主要包括以下几个方面。 首先，目标是回顾并巩固HTML的基本知识和技能。在这个阶段，我学习了HTML的基本标签、元素和属性的用法，以及如何创建网页的结构和布局。通过实际项目的练习，我巩固了这些知识，提高了对HTML的熟练程度。 其次，目标是学会使用常用的HTML标签和元素来构建网页内容。在项目中，我学习了如何使用标题、段落、链接、图片、表格等标签和元素来创建丰富多样的网页内容。我学会了使用这些标签和元素实现文本、图片和表格的显示和排版，同时也学会了如何添加链接和导航等功能。 另外，目标是了解并掌握HTML的语义化。在项目中，我学习了如何正确选择和使用HTML标签和元素，以达到更好的语义化效果。我了解到使用适当的标签能够提高网页的可读性和可访问性，对搜索引擎优化也有一定的帮助。 最后，目标是培养自我实践和解决问题的能力。在项目中，我遇到了一些技术问题和困难，但通过查找文档、搜索和尝试，我成功地解决了这些问题。这个过程提高了我自主学习和解决问题的能力，也为接下来的学习和项目打下了坚实的基础。 总的来说，学习前端第一个阶段的HTML项目的复盘回顾目标是回顾并巩固HTML的基本知识和技能，学会使用常用的HTML标签和元素，了解并掌握HTML的语义化，以及培养自我实践和解决问题的能力。通过这个项目的学习，我对HTML有了更深的理解和掌握，为接下来的学习打下了坚实的基础。 ### 回答3： 学习前端的第一个阶段，主要是学习HTML的基础知识和技能。在完成第一个HTML项目后，进行复盘回顾是为了总结学习经验并确定进一步的目标。 首先，复盘回顾的目标是回顾项目的整体结构和设计，并评估自己对HTML基础知识的掌握程度。通过回顾项目，可以了解自己在项目中的表现，发现并改正可能存在的问题，并提升项目的整体质量。同时，回顾还可以帮助我们深入了解HTML的各种标签和属性的使用方法，以及它们之间的关系和作用。 其次，复盘回顾的目标是梳理学习过程中遇到的困难和问题。学习HTML的过程中，可能会遇到一些难以理解或掌握的概念和技术，或者在项目中遇到了一些难以解决的问题。通过回顾这些困难和问题，可以找到学习的瓶颈和不足之处，然后有针对性地进行学习和提升。 最后，复盘回顾的目标是制定下一阶段学习的目标和计划。通过回顾项目，我们可以更好地了解自己在前端学习的过程中的进步和不足，并且确定下一个阶段需要学习和提升的重点。在制定学习目标和计划时，我们可以考虑自己的兴趣和职业发展方向，并选择相应的学习资源和实践项目。 总而言之，学习前端的第一个阶段完成一个HTML项目后，进行复盘回顾的目标是总结、评估和改进学习过程和成果，并制定下一阶段的学习目标和计划。通过不断的回顾和提升，我们可以逐渐成为一名优秀的前端开发者。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值