整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML-表单认识-第三章

、表单在网页中的应用:登录、注册常用到表单

2、表单的语法:

<form method="post" action="result.html">

<p> 名字:<input name="name" type="text" > </p>

<p> 密码:<input name="pass" type="password" > </p>

<p>

<input type="submit" name="Button" value="提交"/>

<input type="reset" name="Reset" value="重填“/>

</p>

</form>

3、表单元素说明:

type:指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button,默认为 text.

name:指定表单元素的名称.

value:元素的初始值。type 为 radio时必须指定一个值.

size:指定表单元素的初始宽度。当 type 为 text 或 password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位.

maxlength:type为text 或 password 时,输入的最大字符数.

checked:type为radio或checkbox时,指定按钮是否是被选中.

4、示例:


<html >

<head>

<title>表单元素</title>

</head>

<body>

<!-- 表单 -->

<form method="POST" action="#">

<!-- 标签 -->

<label for="username">姓名:</label>

<!-- 文本框 value属性是设置默认显示的值-->

<input id="username" value="songzetong" />



<!-- 密码框 -->

<br/><label for="pwd">密码:</label>

<input type="password" id="pwd">

<br/>


<!-- 单选框 -->

<label for="sex">性别:</label>

<input type ="radio" name ="sex" checked/>男

<input type ="radio" name ="sex"/>女


<!-- 复选框 -->

<br/>

<label for="hobby">爱好:</label>

<input type="checkbox" name ="hobby" id="hobby"/>听音乐

<input type="checkbox" name ="hobby"/>旅游

<input type="checkbox" name ="hobby"/>游泳


<br/>

<!-- 下拉列表 -->

<label for="month">月份:</label>

<select id="month"/>

<option>1月</option>

<option>2月</option>

<option>3月</option>

</select>

<br/>

<!-- 按钮 -->

<input type="reset" value="重置按钮"/>

<input type="submit" value="提交按钮"/>

<input type="button" value="普通按钮"/>

<br/>

<!-- 图片按钮 -->

<input type="image" src="one.jpg" width="200px" heigth="200px"/>

<br/>

<button type="submit">提交</button>

<button type="reset">重置</button>


<br/>

<label for="profile">

个人简介:

</label>

<!-- 多行文本域 -->

<textarea >本人已同意什么条款</textarea>


<br/>

<br/>

<br/>

<!-- 文件域 -->

<label for="upload">上传头像:</label>

<input type="file"/>

<!-- 邮箱 -->

<br/>

<label for="QQ邮箱">邮箱:</label>

<input type="email"/>



<br/>

<!-- 网址 -->

<label for="ur">网址:</label>

<input type="url"/>


<!-- 数字 -->

<br/>

<label for="shuzi">数字:</label>

<input type="number" name="shuzi" min="0" max="100" step="10"/>


<br/>

<label for="huakuai">滑块:</label>

<input type="range" />

<!-- 搜索框 -->


<br/>

<label for="sousuo">搜索</label>

<input type="search"/>


<!-- 隐藏域 -->

<br/>

<input type="hidden"value="1">

<!-- 只读:只能看不能修改,禁用:不能用 -->

<input value="我是只读的" readonly/>

<input type="button" value="我是禁用的" disabled/>


<!-- palceholder默认提示 -->

<br/>

<input placeholder="默认提示框"/>

<br/>

<!-- 文本框内容提示不能为空,否则不允许用户提交表单(网页上的必填项) -->

<input required="必填项"/>

<button type="submit">提交</button>

<br/>

<!-- 用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单-->

<input required pattern="^1[3578]\d{9}"/>

<button type="submit">提交</button>


</form>

</body>

</html>


效果图链接:file:///D:/ruanjian/VS/wenjianxiangmu/htmlThree/form.html

学会这个VS Code技巧,摸鱼的时间又变多了

---

**引子:提升编码效能,解锁更多闲暇时光**

在竞争激烈的Web前端开发领域,如何更高效地运用工具至关重要。本文将揭示一项被低估的VS Code核心技巧,它将大幅提高你的编码速度,进而释放出更多属于你自己的“摸鱼”时间(这里指有效率地休息和自我提升的时间)。

---

**【第一部分】巧用Emmet插件,瞬间构建HTML结构**

**标题:打造HTML的乐高积木**

**实例1:一键生成HTML5基础骨架**

只需在VS Code编辑器中输入`html:5`,然后按下Tab键,即可生成完整的HTML5基本结构:

```html

<!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>

</body>

</html>

```

**实例2:快速生成复杂的HTML元素集合**

使用Emmet表达式可以迅速构造复杂的HTML列表,例如输入`ul>li.item$*5`并按Tab键,将生成:

```html

<ul>

<li class="item1"></li>

<li class="item2"></li>

<li class="item3"></li>

<li class="item4"></li>

<li class="item5"></li>

</ul>

```

---

**【第二部分】JavaScript神器:IntelliSense助力智能编程**

**标题:智能提示,让JS编写如虎添翼**

在VS Code中,内置的IntelliSense特性提供了强大的代码提示与自动补全功能:

```javascript

// 实例:智能提示与自动补全

let arr = ['apple', 'banana', 'cherry'];

arr.f // IntelliSense此时会列出所有数组方法,如filter、forEach等

// 自动导入模块

import React from 'react'; // 在使用React组件时,编辑器会自动识别并提示导入语句

```

---

**【第三部分】实时错误检查与快速修复——ESLint的魅力**

**标题:告别手动排查,迎接即时纠错时代**

安装并配置ESLint插件后,VS Code能实时检查JavaScript代码中的错误并提供修复建议:

```javascript

// 错误示例及即时反馈

function add(a, b) {

return a + b;

}

add('2', 3); // 这里的类型错误会被ESLint立刻捕捉并标注

// 只需点击错误提示,编辑器便会提供可能的修复方案

```

---

**【第四部分】无缝集成终端与Git版本控制**

**标题:一站式解决方案,无需跳出IDE**

- **集成终端**: 直接在VS Code内开启集成终端,执行诸如启动本地服务器、运行npm脚本等各种命令行任务。

- **内置Git支持**: VS Code具备完善的Git功能,无需离开编辑器界面就能查看差异、提交更改、切换分支等,大大简化了版本控制流程。

---

**尾声:掌握高效之道,悠享“摸鱼”之乐**

熟练应用以上VS Code高效开发技巧,不仅能提升你的编程效率,还将无形中拓宽你的时间维度。把节省下来的时间用于拓展知识边界、调整工作状态或是纯粹的放松,都是明智之举。记住,“摸鱼”的真谛在于劳逸结合,持续优化自己的工作与生活质量。现在就开始行动吧,用技术的力量为自己赢得更多的自由时间!

isual Studio 2019重磅来袭!

Visual Studio 2019在一些领域改进了Visual Studio 2017。新版可以通过简化克隆Git仓库或打开现有项目或文件夹来帮助您更快地进入代码。它还引入了对模板选择屏幕的改进,使其更容易启动新项目。

在编写代码时,我们会注意到Visual Studio 2019改进了代码导航并添加了许多重构,以及文档运行状况指示器和一键式代码清理以应用多个重构规则。调试体验也有所改进,包括.NET Core应用程序的数据断点,它们可以帮助您仅仅打破您正在寻找的价值变化,还包括使用Visual Studio IntelliCode获取AI辅助代码。

Visual Studio 2019的目标是从开发,测试,调试甚至部署支持这些项目,同时最大限度地减少您在不同应用程序、门户和网站之间切换的需要。


Visual Studio 2019 中的新功能摘要

安装

  • 效率更高,因为现可在后台下载 Visual Studio 更新
  • 可控制 Visual Studio 更新的安装模式

IDE

  • 使用默认安装的 Visual Studio Live Share 与他人协作。 对 C ++、VB.NET 和 Razor 的附加语言支持为客户提供了解决方案视图和源代码管理差异共享。
  • 打开最近使用过的代码,或通过新的启动窗口从最常用的流程之一(如克隆、打开或创建项目)入手。
  • 使用新列出的按受欢迎度排序的模板新建改进了搜索体验和筛选器的项目。
  • 通过 shell 中一组新的可视更改,为代码提供更多垂直空间和新式外观。
  • 无论显示配置和/或缩放比例如何,都可以查看更清晰的 IDE,因为我们已改进对每监视器感知的支持。
  • 在 Visual Studio 中使用改进的搜索功能来搜索菜单、命令、选项和可安装组件。
  • 使用文档指示器快速了解代码文件的“运行状况”。 通过一键式代码清理从指示器中运行和配置。
  • 使用“选项”对话框中的新“预览功能”页轻松管理选择加入的预览功能。
  • 有关新建项目的改进:可基于标签进行搜索,并且可以轻松访问"最近使用的项目模板"列表。
  • 可直接从 Visual Studio 搜索创建新项,由于相关性获得改进,还可更快查找结果。
  • 借助新的通知体验,随时获取最新的重要信息,如 Visual Studio Live Share 请求。
  • 将一系列代码清理修复程序保存为配置文件,便于轻松选择要在代码清理期间运行的修复程序。
  • 触发新的 .NET 重构和代码修补程序。
  • 使用一流项目文件更轻松地配置 .NET Core 项目。
  • 使用“扩展和更新”对话框中的预览版、付费版和试用版标签查看扩展状态。
  • 由于此预览版中已重置默认值,请检查并配置要激活的预览功能。
  • 排除此版本中已标记为“弃用”的某些测试窗口 API,使扩展随时处于最新状态。
  • 使用 Azure DevOps 从开始窗口登录、浏览以及一键式克隆或连接到托管存储库。
  • 安装其他源代码管理主机的扩展以查看你和你组织拥有的存储库。
  • 体验改进的蓝色主题版本,通过调低亮度、提高整体对比度和解决其他可用性问题,解决反馈的问题。
  • 使用 dotnet format 全局工具从命令行应用代码样式偏好。
  • 默认情况下,MSBuild 和 Visual Studio 现在面向 .NET Framework 4.7.2
  • 与 Azure 应用服务相关的功能已从服务器资源管理器中删除;可改用 Cloud Explorer 中的等效功能。

性能

  • 通过使用 Visual Studio 的新性能改进来控制解决方案的加载方式,这些改进可影响单步执行速度、分支切换速度等。
  • 使用解决方案筛选器文件选择要在打开解决方案时加载的项目
  • 通过限制辅助组件的影响来提高键入性能。
  • 将新选项切换为禁止还原项目层次结构状态和工具窗口状态。
  • 了解“生成选项”的新快捷方式,并使用新的“全部生成”命令快速在 CMake 中执行“全部生成”操作。
  • 用于 CMake 项目中 C++ 文件的 IntelliSense 的 性能经过改进,提升了编码速度。
  • 加载更大的 .NET Core 解决方案随着时间的推移,可以显著减少内存。
  • 可使用新的项目上下文菜单命令快速加载项目依赖项。
  • 可在性能中心查看性能提示。

常规调试和诊断

  • 在调试的同时,在“监视”、“自动”和“局部变量”窗口中搜索关键字,提高了查找对象或值的能力。
  • 在检查数据时,在“监视”、“自动”和“局部变量”窗口中查看格式说明符下拉列表。
  • 使用自定义可视化工具,此工具现与 .NET Core 兼容。
  • 调试包含大量模块和 PDB 的超大型应用程序。
  • 在 Visual Studio IDE 内即可使用自定义参数启动 Google Chrome 和调试 JavaScript 应用程序。
  • 可为性能探查器中的 CPU 和 DotNet 对象分配工具使用突出显示热路径。
  • 当某个特定对象的属性值在 .NET Core 3.0+ 应用程序中更改时,可使用数据断点中断,此功能最初为 C++ 所独有。
  • 自预览版 1 开始,我们更新了用于在“自动”、“局部变量”和“监视”窗口中搜索的 UI,界面更加简单。 “深度搜索”功能已更改为一个下拉菜单,因此可快速选择初始搜索和后续搜索所需的深度。

源代码管理和团队资源管理器

  • 暂时存储更改,以便利用团队资源管理器的 Git 工具对 Git 储藏的支持来处理其他任务。
  • 查看 Visual Studio Marketplace 中提供的可选扩展 Visual Studio 的可取请求,该扩展将拉取请求评审集成到 Visual Studio 中。 使用新的 Azure DevOps 工作项体验,该体验专注于开发人员工作流,包括用户特定的工作项视图、从工作项创建分支,使用 #mentions 搜索工作项,以及内联编辑。

扩展性

  • 使用 NuGet 包 Microsoft.VisualStudio.SDK 中独立、统一的 Visual Studio SDK。
  • 利用 VSIX Project 的更新立即包括 AsyncPackage。
  • 体验新的空 VSIX Project 模板。
  • 了解扩展是免费、付费还是试用,现在“扩展和更新”对话框中已显示有相关提示。

编程语言——C#

  • 可为空引用类型:开启此功能后(例如,使用 #nullable enable 或在项目级别使用enable),如果使用 ? 注释,则引用类型将被视为可为空,否则将引用类型视为不可为空。 随后编译器分析 null 值的流向,并警告可能的不安全使用情况。
  • switch 表达式:在表达式上下文中提供类似 switch 的语义。
  • 递归模式匹配:新模式可使用测试字段/属性和位置元素(来自元组或析构函数)。
  • 支持 CoreFX 中用于切片的 Range 和 Index 类型,包括范围的 x..y 文字语法。
  • IAsyncEnumerable 表示的异步流可以与 await foreach 异步枚举,并且可以使用 async IAsyncEnumerable 迭代器方法生成。
  • using 声明:在当前块的末尾进行释放,但不增加嵌套级别。 可以通过实现公共 Dispose() 方法来处理 ref 结构。
  • static 本地函数:标有 static 的本地函数不能引用封闭函数中的 this 或变量。
  • 本地函数和 lambdas 现在可以声明影响封闭函数变量名称的参数和局部变量。
  • 空接合赋值:如果 x 为 null,x ??= y; 仅会将 y 赋值给 x。

编程语言——C++

  • 使用可为代码提供 AI 辅助建议的可选扩展 Visual Studio IntelliCode 来编写 C++ 和 XAML 代码,以节省时间。
  • 体验编辑器内代码分析警告。代码分析在后台自动运行,且警告显示为绿色波形曲线。
  • 试用全新模板栏,它使用速览窗口用户界面并支持嵌套模板。
  • 运行更新后的全新 C++ 生存期配置文件检查器实现。
  • 使用新的 CMake 设置编辑器配置 CMake 项目,它提供 CMakeSettings.json 的替代方案。
  • 体验一系列后端改进,包括 OpenMP SIMD 矢量化、链接时间加速和更高性能的内联。
  • 打开由外部工具(例如 CMakeGUI 或定制的元数据生成系统)生成的现有 CMake 缓存。
  • 借助用于为 Spectre Variant 1 提供迁移缓解的 /Qspectre 改进分析 (CVE-2017-5753)。
  • 现在模板 IntelliSense 的模板栏具有最近使用的下拉列表,可以在之前的示例参数之间快速切换。

编程语言——F#

  • F# 4.6 及其他各种编译器改进功能已发布
  • 体验适用于 F# 和 F# 工具的大型解决方案和各种 bug 修补程序的性能改进。
  • 了解开放源代码参与者对 F# 语言和工具完成的出色工作。

编程语言——JavaScript/TypeScript

  • Node.js 项目中调试单元测试。
  • 体验面向从 NuGet 和 npm 包生成 TypeScript 项目的用户的额外支持。

编程语言——Python

  • 使用 Python“添加环境”对话框轻松添加 Python 虚拟环境和 conda 环境。
  • 更轻松地使用 Python 环境,包括通过新 Python 环境选择器工具栏对“打开文件夹”工作区支持的改进。
  • 创建 Visual Studio Live Share 会话并与其他 Visual Studio 用户协作处理 Python 代码。

Web 技术

  • 利用新增的对使用 .NET Core 3.0 项目的支持。
  • 查看 ASP.NET 的 CPU 分析。
  • 对在虚拟机、虚拟机规模集和 Azure Kubernetes 服务上运行的 .NET Web 应用使用快照调试程序。
  • 使用 Visual Studio Kubernetes 工具开发适用于 Kubernetes 的容器应用程序
  • 获取 Azure DevOps 工作项体验的增强功能,包括有关工作项分配的内联支持和改进的 #mentions 体验。
  • 更轻松地使用项目文件,同时体验针对 .NET Core 工具的更出色的控制台应用。
  • 体验针对所有应用的发布配置文件摘要增强功能。 此外,当应用发布到 Azure 应用服务时,现可使用名为依赖项的新分区。
  • 体验创建新的 ASP.NET 应用程序时的各种视觉效果。
  • 为现有 Azure Functions 发布配置文件重新提供发布凭据。

通用 Windows 平台 (UWP)

  • 从设计器中进行修改时,将保留注释、间距、命名空间和任何其他文本更改。 程序包清单设计器对 Package.appxmanifest 文件中的 xml 更改提供原样不变的高保真度。
  • 使用适用于 .NET Core 项目的 Windows 应用程序打包项目生成 MSIX 包。
  • 使用包创建向导,可直接向 Microsoft Store 提交。
  • Visual Studio 2019 中不再支持部署到 Windows Mobile 设备。 尝试部署到 Windows 10 Mobile 设备将导致显示“Visual Studio 2019 中不再支持部署到 Windows Mobile 设备”错误。 如需继续使用 Windows 10 Mobile 设备处理应用程序,请继续使用 Visual Studio 2017。

使用 Xamarin 进行移动开发

  • 在创建新项目时,通过缩减 Xamarin 工作负载大小更快地开始使用并提高性能。
  • 配合使用 IntellicodeXamarin.Forms XAML
  • 使用新 Xamarin.Forms 预览器设备下拉列表在不同设备上预览 Xamarin.Forms XAML。
  • 无需先使用新 Xamarin.Forms 预览器中的基本预览模式构建项目。
  • 使用新增的用于 Xamarin.Forms 的 Shell 模板。
  • Xamarin.Android 初始和增量生成性能的改进
  • 使用部署目标菜单创建新的 Android 模拟器。
  • 使用 Xamarin.Android 中的生成改进缩短生成时间。
  • 体验增强的快速部署和针对 Xamarin.Android 的 d8/r8 支持。
  • 利用 Xamarin Android Designer 中提高的工作效率。
  • 使用 Xamarin Android Designer,利用转到定义和面向 Android 资源文件的增强的 XML IntelliSense/自动完成功能来提高效率。

SQL Server Data Tools

  • 体验更新的 SSDT 和 DacFX,现在包括 UTF-8 排序规则支持。

想要获取更多Visual Studio 2019教程资源,可在评论区留言哦。