从0开始学前端第一天

学习内容:

acwing web应用课

1、各种标签

2、MDN网站,用来搜各种标签的含义

3、CTRL+/ 快速注释

表单:

<form>标签

HTML <form> 元素表示文档中的一个区域,此区域包含交互控件,用于向 Web 服务器提交信息。

<input>标签

HTML <input>用来填写内容,常见类型有:

<input type="text">:创建基础的单行文本框。

<input type="number">:用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头,让用户可以使用鼠标增加和减少输入的值,或者只需用指尖敲击即可。

<input type="email">:带有 "email" (电子邮箱) 类型标记的输入框元素 (<input>) 能够让用户输入或编辑一个电子邮箱地址,此外,如果指定了multiple属性,用户还可以输入多个电子邮箱地址。在表单提交前,输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址 (非空值且符合电子邮箱地址格式). CSS 伪标签 :valid 和 :invalid 能够在校验后自动应用。

<input type="password">:<input> 元素 里有一种叫做 "password" 的值,给我们一个方法让用户更加安全的输入密码。这个元素是作为一行纯文本编辑器控件呈现的,其中文本被遮蔽以致于无法读取,通常通过用诸如星号("*")或点("•")等符号替换每个字符来实现。这个符号会根据用户的浏览器和操作系统来具体显示哪个。

<input type="radio">:<input> 的 radio 类型元素默认渲染为小型圆圈图表,填充即为激活,类似于之前描述额复选框(checkbox)类型。单选按钮允许你选择单一的值来提交表单。

常用属性有:

name: 名称

id: 唯一ID

maxlength:最大长度

minlength:最小长度

required:是否必填

placeholder:当表单控件为空时,控件中显示的内容

<textarea>标签

HTML <textarea> 元素表示一个多行纯文本编辑控件,当你希望用户输入一段相当长的、不限格式的文本,例如评论或反馈表单中的一段意见时,这很有用。

<select>与<option>标签

HTML <select> 元素表示一个提供选项菜单的控件。

示例:

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">

<option value="">--Please choose an option--</option>

<option value="dog">Dog</option>

<option value="cat">Cat</option>

<option value="hamster">Hamster</option>

<option value="parrot">Parrot</option>

<option value="spider">Spider</option>

<option value="goldfish">Goldfish</option>

</select>

<button>标签

HTML <button> 元素表示一个可点击的按钮,可以用在表单或文档其它需要使用简单标准按钮的地方。 默认情况下,HTML 按钮的显示样式接近于 user agent 所在的宿主系统平台(用户操作系统)的按钮, 但你可以使用 CSS 来改变按钮的样貌。

遇到的问题:

相关推荐
*neverGiveUp*9 分钟前
Python基础语法
开发语言·python
努力努力再努力wz12 分钟前
【Qt入门系列】一文掌握 Qt 常用显示类控件:QLCDNumber、QProgressBar 与 QCalendarWidget
c语言·开发语言·数据结构·数据库·c++·git·qt
右耳朵猫AI25 分钟前
JS/TS周刊2026W21 | Deno2.8RC、Angular22RC、TypeORM1.0
开发语言·javascript·ecmascript
闪电悠米31 分钟前
黑马点评-秒杀优化-02_lua_precheck
开发语言·redis·分布式·缓存·junit·wpf·lua
盈建云系统31 分钟前
外贸网站SEO怎么做?从产品关键词到询盘页面,独立站内容优化流程和费用参考
开发语言·网站搭建
Dream_ksw37 分钟前
Python多继承之super()继承问题解决
开发语言·python
迈巴赫车主44 分钟前
蓝桥杯21241灯塔java
java·开发语言·数据结构·算法·职场和发展·蓝桥杯·动态规划
半个烧饼不加肉1 小时前
JS 底层探究-- 调用栈(Call Stack)
开发语言·前端·javascript
弹简特1 小时前
【Java项目-轻聊】08-用户管理模块-实现获取用户信息+头像上传+显示头像
java·开发语言·springboot
vickycheung31 小时前
RK182X 如何在 RK3588 上进行应用测试
开发语言·php