.NET开发人员的Blazor的入门指南

lazor为数百万.NET开发人员带来了WebAssembly的世界，允许他们编写在浏览器上运行的C＃。

多年来，如果您想编写代码以在浏览器中运行，您的选择是JavaScript或JavaScript。对于某些浏览器上的几个短暂时期，您可以使用其他语言，但它们并不重要：IE上的VBScript和特殊版Chrome上的Dart。

还有一些语言可以编译成JavaScript（TypeScript，CoffeeScript，...），但它们仍然是真正的JavaScript。JavaScript单一文化的日子随着WebAssembly（Wasm）的出现而出现。对于.NET开发人员，Wasm以Blazor的形式到达。

什么是WebAssembly？

WebAssembly是浏览器中支持运行Wasm字节码的虚拟机规范。这种二进制格式允许比典型的JavaScript更快的执行，因此性能可以比纯JavaScript更好。有许多编译器可以输出这种格式，包括LLVM。因此，现在可以用C ++编写代码，将其编译为Wasm程序集，将其发送到浏览器，然后直接运行。

浏览器对Wasm的支持非常广泛。即使在较旧的浏览器上，也可以通过asm.js获得支持，尽管性能阈值较低。

.NET如何支持Wasm

许多语言已经开始通过输出Wasm程序集将其语言带到WebAssembly的项目。微软采用的方法与大多数其他平台略有不同。通常，您会将输出二进制文件编译为Wasm，然后直接在浏览器中加载它们。但是，.NET二进制文件已经采用通用语言设计，可以在.NET Framework上运行：中间语言。因此，如果不是将代码编译为Wasm，而是将框架本身编译为Web Assembly，他们可以解释他们已经使用这个框架的Wasm版本的相同二进制文件。

当然，.NET Standard统一了.NET Framework的几种不同风格。作为WebAssembly运行的版本实际上是Mono。有人担心使用Mono而不是.NET Core，我可以理解。使用多个.NET框架有点烦人，但各种框架之间的标准化工作非常好。

什么是Blazor？

我想告诉人们Blazor并将整个.NET Framework编译为Wasm是完全疯狂的。事实上Blazor是Steve Sanderson的一个项目，他之前曾创建过一些伟大的疯狂项目：xVal，Knockout，JavaScript服务。因此，随着疯狂项目的进行，我们掌握得非常好。

Blazor是一个高度实验性的项目，它将ASP.NET的感觉带给了Wasm。您使用您识别并记住的所有工具在C＃中编写代码。您仍然可以使用过去的相同工具进行单元测试。您仍然可以使用相同的日志记录工具。实际上，您可以掌握所有C＃知识并编写Web应用程序。

服务器端VS. 客户端

目前Blazor有两种型号：客户端和服务器端型号。客户端版本实际上通过Wasm在浏览器中运行，并且在那里完成对DOM的更新，而服务器端模型在服务器上保留DOM的模型并使用以下方式在浏览器和服务器之间来回传输差异。 SignalR管道。事实上，服务器端更有可能成为一个真正的产品，并且已经承诺用于ASP.NET Core 3，这听起来好像是一年之后。

这真的可以表现吗？

有许多因素使得以这种方式部署的应用程序的性能看起来很糟糕。第一个是.NET Framework的大尺寸。将.NET框架的加载捆绑到每个网站加载中是很大的。但是，已有技术可以使其更易于管理。如果框架是从CDN传递的，浏览器可以缓存框架，甚至可以在站点之间重用它。稍微更奇特的方法是使用树摇动来移除应用程序未使用的框架的巨大条带。

该项目中最大的资产是mono.wasm文件，即869KB。项目中使用的各种DLL总计几乎达到一兆字节。

这是很多下载的框架代码，几乎没有任何实际功能的2MB，所以这确实是一个问题。

接下来，.NET代码可以在传送到浏览器时以高效的方式运行并编译成奇怪的汇编语言吗？目前，编译为Wasm的C项目似乎有50％的减速。显然，在浏览器中运行框架会有一些开销，但我们还不确定它将在何处着陆。正在努力改进和优化速度，并且当它达到生产性能时可能是合理的。很多这种表现只是因为Wasm通常比JavaScript更有效，尽管这样的基准测试非常困难。

最终结果是，Wasm似乎比典型的JavaScript Web应用程序具有更大的启动成本，但是一旦您启动并运行任何类型的计算复杂操作都会更快。

Blazor项目入门

第一步是确保您在Visual Studio和.NET Core方面拥有的所有内容都是最新的。在撰写本文时，我使用的是.NET Core工具版本2.1.500。接下来，有一些工具可以让Blazor更加愉快。第一个是可以通过运行安装的模板集合：

dotnet new -i Microsoft.AspNetCore.Blazor.Templates

从命令行。我们将在本文中使用完整的Visual Studio，但您可以使用VS Code或vi或任何您想要的。在Visual Studio中，安装Blazor扩展，官方Blazor文档建议运行至少VS 15.9，但我运行15.8没有问题。

有了所有这些，我们就可以开始一个全新的Blazor项目。在新项目对话框中，选择一个新的ASP.NET Core项目。在模板选择对话框中，有三个基于Blazor的模板：

Blazor - 完整的客户端Blazor应用程序，没有任何服务器端组件。这适用于部署到S3或Azure Blob存储等静态主机。
Blazor（ASP.NET Core托管） - 一个客户端应用程序，其服务器端为Blazor提供服务，并且还提供放置服务器端API的位置。
Blazor（ASP.NET核心中的服务器端） - 服务器端应用程序，通过SignalR从服务器更新DOM

出于我们的目的，我们将使用ASP.NET Core托管变体。请记住，这个将DLL发送到浏览器的版本不会出现在ASP.NET Core 3的官方支持中，至少目前还没有。

探索守则

从该模板创建的解决方案有三个项目。

客户端包含在浏览器上运行的代码。
服务器是服务器端代码。默认项目有一个简单的控制器，可以返回有关天气的一些数据。
共享包含在客户端和服务器端使用的代码。像模特这样的东西是一件很棒的事情。验证元数据在这里也可能是一个很好的补充，因为它意味着你可以应用相同的验证逻辑客户端和服务器端。

最有趣的代码是在Client项目中，因为Server项目主要只是一个标准的ASP.NET Core应用程序。您将注意到客户端结构中的第一件事是它与ASP.NET Core项目的结构非常相似。

有一个Program.cs作为引导程序，就像你在ASP.NET Core应用程序中看到的那样。Startup.cs包含设置服务和配置应用程序的代码。这种相似性允许您将更多的ASP.NET核心知识带到Blazor世界。HTML文件也都具有您熟悉和喜爱的相同.cshtml扩展名。打开其中一个文件可以发现它们使用的是与MVC相同的Razor语法，直到2008年。

最有趣的cshtml文件是FetchData.cshtml。

我们可以从FetchData.cshtml学到什么

@using Blazor2.Shared
@page "/fetchdata"
@inject HttpClient Http
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
@if (forecasts==null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@functions {
WeatherForecast[] forecasts;
protected override async Task OnInitAsync()
{
forecasts=await Http.GetJsonAsync<WeatherForecast[]>("api/SampleData/WeatherForecasts");
}
}

在这个文件中，你会发现一些有趣的部分。@page指令用于提供路由器可用于将人们引导到页面的位置。@inject允许注入服务。HttpClient是默认注册的，不需要在Startup.cs中显式输入。这里有趣的是，这里使用的HttpClient与您在服务器端使用的HttpClient不同，因为在Wasm沙箱中不允许访问原始套接字，就像在JavaScript中不允许这样。最后，您会注意到有一个分支基于预测是否为空。Blazor实际监视此属性，当它更改时，将重新运行页面呈现。变更检测内置于。

扩展项目

为了将项目扩展到完全成熟的应用程序，您只需添加服务和cshtml页面即可。只要您注意结构并匹配扩展ASP.NET Core应用程序的方式，您就应该保持良好的信誉。您可以通过NuGet添加对外部库的引用，其中大部分都可以正常工作。但是，您应该记住，每次添加增加有效负载大小的包时，都需要将其发送到客户端。由于基本软件包的容量接近2MB，因此每下载的内容都要多得多。

限制

显然，在浏览器中可以执行的操作存在一些限制。在Wasm中运行的所有内容都在JavaScript沙箱中运行，这意味着您无法直接访问磁盘或网络等内容。因此，使用SQLClient直接与数据库通信等许多功能都无法工作（无论如何这也是一个糟糕的想法）。库可能包含尝试写入临时文件的功能，这些功能无效。在计划如何测试应用程序时，请记住这些限制。

点击原生JavaScript代码

Blazor和Wasm的一个非常好的部分是，它可以与JavaScript API进行交互。因此，如果您想通过地理定位API进行地理定位，您可以安装Blazor.Geolocation（新近更新Blazor 0.7，BTW）等软件包，它就可以正常工作。复杂的编组是为了映射JavaScript和.NET数据类型来回完成所有这些都是由Blazor完成的。在大多数情况下，您可以从.NET代码轻松地从JavaScript和JavaScript方法调用.NET方法。心灵爆炸！

在Blazor.Geolocation示例中，要从浏览器的JavaScript上下文中获取位置信息，您只需要在cshtml中注入位置服务并运行

location=await locationService.GetLocationAsync();

该软件包负责处理从浏览器获取位置信息的异步性质。其他JavaScript API可以类似地包装。

您可以在Blazor文档中详细了解如何与JavaScript 交互。

出现问题时调试Blazor

调试故事目前并不出色。使用服务器端Blazor，在Visual Studio中一切都是F5可调试的，但是一旦你转到客户端，调试故事就没有完全充实。Chrome中的“来源”选项卡包含一个令人困惑的文件阵列和Wasm函数，此时无法轻松调试。最终，可能会为所有这些提供源映射支持，并且体验应该更好。但是，目前，编译器无法输出映射。

网络流量可以像调整任何其他网络流量一样进行调试，例如在前缀中。同样，服务器端仍然是标准的ASP.NET核心应用程序，因此它可以从Retrace或Prefix的检测中受益。在这方面，至少调试和分析的故事非常好。

WebAssembly在哪里？

只有傻瓜才会对未来作出陈述，所以我在这里：我认为WebAssembly有一个光明的未来。为无数语言和编程范例解锁Web开发将产生一些非常有趣的新框架。WebAssembly的速度也适用于从游戏到AI的各种代码。

、Html概述

Html是Hyper Text Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容文件渲染成网页，显示的网页可以从一个网页链接跳转到另一个网页。

二、Html标签语法

Html中标签分为：成对标签和自闭合标签【空标签】

1、成对标签

成对出现，有开始标签必须有结束标签，内容包裹在两个标签中，而且开始标签名和结束标签名一致,并且结束标签必须以斜杠/开头

语法：

<font>内容</font>

2、自闭合标签

只有一个标签，用斜杠结束，斜杠也可以省略

语法：

<br/>

注意事项：

成对标签中，结束标签必须以斜杠开头
成对标签与成对标签可以嵌套不能交叉
标签名不区分大小写，但是我们都必须小写

三、Html基本架构

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    
</body>
</html>

1、！DOCTYPE

!DOCTYPE html是文档声明，定义文档类型为html，并且告诉不同的浏览器用标准方式进行解析html语言，如果不写的话，会产生怪异模式，所谓怪异模式，就是浏览器会用自己的方式进行解析，不同的浏览器有各自的解析方式，从而会出现无效果、不兼容等问题。
注意，html中有两种声明类型，一种叫做xhtml，即html，另一种叫做html5，html5是xhtml的升级版，所以我们建议使用html5的声明方式
xhtml声明方式：
<htmlxmlns="http://www.w3.org/1999/xhtml">
html5声明方式：
<!DOCTYPE html>

2、html

html是html文档的整体，也就是表示一个网页。
html中的lang="en"是定义该文件语言是英文

3、head

head是html的第一层子元素【子标签】，负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和JavaScript文件等。设置的内容不会显示在网页上，标题的内容会显示在标题栏中。即title标签。

4、meta

meta是html语言head标签中的一个辅助性标签，该标签不包含任何内容，但是该标签的属性定义了与文档相关联的名称，比如：编码

<meta charset="utf-8"></meta>

5、body

body也是html的第一层子元素，我们页面中显示的所有内容全部都是编写在该标签体中。

四、Html文档规范

html制定了文档的编写规范，必须遵守。
所有的标签必须小写
所有的属性必须用双引号括起来

五、Html注释

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上。
注释的语法：


六、html基本属性

注：属性是标签的辅助作用。

属性描述 bgcolor 设置网页的背景颜色 background 设置网页的背景图片

1.bgcolor

设置网页的背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的属性</title>
</head>
<body bacolor="pink">
    
</body>
</html>

2.路径

我们在开发网页时，需要经常的插入图片、视频、文件等一些操作，但是我们需要指定文件所在的位置，这个位置就是所谓的路径

路径分为：

相对路径指目标相对于当前文件的路径，网页结构设计中多采用这种方式来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下： ./ ：代表文件所在的目录（可以省略不写）../ ：代表文件所在的父级目录../../ ：代表文件所在的父级目录的父级目录/ ：代表文件所在的根目录【/ ：可以理解为目标文件的绝对路径】
绝对路径指目标文件的完整路径，从盘符开始。

3.background

设置网页的背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的属性</title>
</head>
<body background="../images/10.jpg">
    
</body>
</html>

注意事项：
bgcolor和background不能同时使用
background不能指定绝对路径

七、Html标签

1.网页的组成

网页的组成：文字、图片、视频、超链接、列表、表格、表单等组成。

2、文本段落标签

标签描述 hn 设置文字标题【n：取值范围 1~6】 center 居中对齐 hr 水平线属性（width：宽度 color：颜色 size：粗细） br 换行 p 段落

3、文本控制标签

标签描述 font 设置字体，需要借助属性设置

属性描述 color 设置字体颜色 size 设置字体大小，不需要带单位，取值范围：1~7【浏览器默认值：3】 face 设置字体风格

<font size="2" color="red" face="黑体"></font>

4、文本格式化标签

标签描述 b 定义粗体文本 em 定义着重文字 i 定义斜体文字 small 定义小号字 strong 定义加重语气 sub 定义下标字 sup 定义上标字 ins 定义插入字 del 定义删除字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html文本格式化标签</title>
</head>
<body>

    <b>粗体文本</b>
    <i>倾斜文本</i>
    <em>着重文本</em>
    <small>小号字</small>
    <strong>加重语气</strong>
    <sub>上标</sub>
    <sup>下标</sup>
    <ins>插入字</ins>
    <del>删除字</del>
    
</body>
</html>

5、图片标签

在Html中，图像由
标签定义。
是空标签，意思是说，它只包含属性。
要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。

标签描述 img 图片标签

属性描述 src 指定图片的地址 width 设置图片的宽度 height 设置图片的高度 alt 设置图片的预备文本

注意事项：不建议设置图片大小，容易失真

6、audio

在Html中，声音由标签定义。

标签描述 audio 声音标签

属性描述 src 指定声音地址

<audio src="nice.mp3">对不起，您的浏览器不支持</audio>

7、video

在Html中，视频由video标签定义

标签描述 video 视频标签

属性描述 src 指定视频地址

<video src="美女.mp4">对不起，您的浏览器不支持</video>

8、超链接

a标签定义超链接，用于从一个页面链接到另一个页面。
a标签最重要的属性是href，它指定链接的目标。
在所有浏览器中，链接的默认外观如下：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

语法：

<a href="链接目标">点击内容</a>

属性描述 href 指定链接目标 name 指定锚的名称 download 指定下载链接 target 指定跳转方式属性值描述 _blank 新窗口打开【常用】 _parent 在父窗口中打开链接【了解】 _self 默认，在当前窗口打开【了解】 _top 在当前窗体打开链接，并替换当前的整个窗体【了解】 framename 到 iframe 在讲【常用】

超链接分类：

内部链接链接目标：本地页面 <a href="demo.html">点击内容</a>
外部链接链接目标：外部页面 <a href="http://www.baidu.com">点击内容</a>
多媒体链接链接目标：图片、视频等 <a href="images/美女.jpg">点击内容</a>
电子邮件链接链接目标：电子邮件【系统自带的电子邮件】 <a href="mailto:12345@qq.com">点击内容</a>
锚链接链接目标：锚点 1.建立锚点
<a name="锚点名"></a>

2.跳转
<a href="#锚点名">点击内容</a>

9、列表

列表的使用与word等软件的列表概念相似，只不过是应用在网页展示中。

1.有序列表

有序列表是指有数字编号或字母的列表项，可以使用css定义更多样式。

<!-- 有序列表 -->
    <ol type="a">
        <li>新闻一</li>
        <li>新闻二</li>
        <li>新闻三</li>
    </ol>

属性描述 type 设置符号类型值：1 a A I i 默认数字 start 从第几个开始【用于ol标签中】 value 从第几个开始【用于li标签中】

<!-- 有序列表 -->
    <ol type="a" start="4">
        <li>新闻一</li>
        <li type="1" value="1">新闻二</li>
        <li>新闻三</li>
    </ol>

2、无序列表

无序列表是指没有数字编号或字母的列表项，可以使用css定义更多样式。

<!-- 无序列表 -->
<ul>
    <li>童装</li>
    <li>男装</li>
    <li>女装</li>
</ul>

属性描述 type 用于设置符号类型，默认：实心圆值：空心圆、正方形【用于ul、li】

<!-- 无序列表 -->
<ul type="square">
        <li>童装</li>
        <li type="circle">男装</li>
        <li>女装</li>
    </ul>

3、描述列表

描述列表指每个列表项有单独的标题。

<!-- 描述列表 -->
    <dl>
        <dt>开源产品</dt>
        <dd>Java封装库</dd>
        <dd>Web组件库</dd>
        
        <dt>网站导航</dt>
        <dd>mrliujava.com</dd>
        <dd>mrliuweb.com</dd>
    </dl>

10、表格

表格在网页开发中使用频率非常高，尤其是数据展示的时候。

10.1 基本使用

标签描述 table 代表表格标签 caption 表格标题 thead 表头部分 tbody 表格主体部分 tfoot 表格尾部

属性描述 border 表格边框 cellspacing 单元格与单元格间距 width 宽度 height 高度 bgcolor 设置背景颜色 background 设置背景图片 align 对齐方式

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>员工薪资统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职位</th>
                <th>薪资</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程师</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程师</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>测试工程师</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>当前页：1 页</td>
                <td>上一页</td>
                <td>下一页</td>
                <td>尾页</td>
                <td>共 3 页</td>
            </tr>
        </tfoot>
    </table>

10.2 单元格合并

属性说明 rowspan 行合并 colspan 列合并

下面是行合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>员工薪资统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职位</th>
                <th>薪资</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td rowspan="2">JavaEe工程师</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>测试工程师</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>当前页：1 页</td>
                <td>上一页</td>
                <td>下一页</td>
                <td>尾页</td>
                <td>共 3 页</td>
            </tr>
        </tfoot>
    </table>

下面是列合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>员工薪资统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职位</th>
                <th>薪资</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程师</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程师</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td colspan="2">傻蛋</td>
                <td>测试工程师</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>当前页：1 页</td>
                <td>上一页</td>
                <td>下一页</td>
                <td>尾页</td>
                <td>共 3 页</td>
            </tr>
        </tfoot>
    </table>

11、表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表(select)、单选框(radio)、复选框(checkbox)等等。

11.1 基本使用

表单需要使用表单标签来设置：

<form>
input元素
</form>

11.2 GET&POST

属性说明 action 后台地址 method 提交方式GET或POST

GET和POST区别：

1.GET

数据会显示在地址栏中，数据不安全
数据大小有限制
数据通过请求头传递

2.POST

数据不会显示在地址栏中，数据安全
数据对大小无限制
数据通过实体内容传递

<form action="后端接口" method="POST">
        <input type="text">
        <input type="password">
</form>

11.3 LABEL

使用label用于描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的ID在页面中是唯一的。

<form action="后端接口" method="POST">
        <label for="username">用户名</label>
        <input type="text" id="username">

        <label for="password">密码</label>
        <input type="password" id="password">
</form>

也可以将文本框放在label标签内部，这样就不需要设置id与for属性了。

11.4 INPUT

文本框用于输入单行文本使用，下面是常用属性与示例。

属性说明 type 表单类型,默认为text name 后端接收字段名 required 必须输入 placeholder 提示文本内容 value 默认指 maxlength 允许最大输入字符数 size 表单长度,一般用css来控制 disabled 禁用,不可提交后端 readonly 只读,可提交后端 accept 设置选中类型比如:.jpg capture 使用麦克风\视频或摄像头哪种方式获取手机上传文件,支持的值有microphone , video , camera

11.4.1 基本示例

<form action="后端接口" method="POST">
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" placeholder="请输入用户名" maxlength="5" size="50" required>
</form>

11.4.2 调用摄像头

当input类型为file时手机会让用户选择图片或者拍照,如果想直接调取摄像头使用以下代码.

<form action="后端接口" method="POST">
        <label for="file">上传文件</label>
        <input type="file" name="file" id="file" accept="*.jpg" capture="camera">
</form>

11.4.3 其他类型

通过设置表单的type字段可以指定不同的输入内容.

类型说明 email 输入内容为邮箱 url 输入内容为URL地址 password 输入内容为密码项 tel 电话号,移动端会调出数字键盘 search 搜索框 hidden 隐藏表单 submit 提交表单 reset 重置表单 button 自定义按钮

11.4.4 HIDDEN

隐藏表单用于提交后台数据,但在前台内容不显示所以在其上做用样式定义也没有意义.

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

11.4.5 SUBMIT

创建提交按钮可以将表单数据提交到后台,有多种方式可以提交数据,比如:AJAX,或者Html的表单按钮.

a.使用input构建提交按钮,如果设置了name值,那么按钮数据也会提交到后台,如果有多个表单项可以通过这些进行判断是哪个表单提交的.

<input type="submit" name="submit" value="提交表单">

b.使用button也可以提交,设置type属性为submit或不设置都可以提交表单.

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

11.4.6 禁用表单

通过为表单设置disabled或readonly都可以禁止表单,单readonly表单的数据可以提交到后端

<input type="text" value="数据" readonly>

11.4.7 PATTERN

表单可以通过设置pattern属性指定正则验证.

属性说明 pattern 正则表达式验证规则 oninvalid 输入错误时触发的事件

<form action="">
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('请输入5~20位字母的用户名')">
        <button>提交表单</button>
    </form>

    <script>
        function validate(message){
            alert(message);
        }
    </script>

11.4.8 TEXTAREA

文本域指可以输入多行文本的表单,当然更复杂的情况可以使用编辑器如ueditor , ckeditor等.

属性说明 cols 列字符数(一般使用css控制更好) rows 行数(一般使用css控制更好)

<textarea cols="30" rows="3">请踩踩我......</textarea>

11.4.9 SELECT

下拉列表项可用于多个值中的选择.

属性说明 multiple 支持多选 size 列表框高度 optgroup 选项组 selected 选中状态 option 选项值

<form action="">
        <select multiple size="10">
            <option value="">选择课程</option>
            <optgroup label="后端">
                <option value="">JAVA</option>
                <option value="">PHP</option>
                <option value="">LINUX</option>
            </optgroup>

            <optgroup label="前端">
                <option value="">HTML</option>
                <option value="">CSS</option>
                <option value="">JAVASCRIPT</option>
            </optgroup>
        </select>
    </form>

11.4.10 RADIO

单选框指只能选择一个选项的表单,如性别的选择:男 , 女 , 保密只能选择一个.

属性说明 checked 选中状态

<form action="">
        <input type="radio" name="" id="boy" checked>
        <label for="boy">男</label>

        <input type="radio" name="" id="girl">
        <label for="girl">女</label>
    </form>

11.4.11 CHECKBOX

复选框指允许选择多个值的表单

属性说明 checked 选中状态

<form action="">
        <input type="checkbox" name="JAVA" id="java">
        <label for="java">JAVA</label>

        <input type="checkbox" name="WEB" id="web">
        <label for="web">WEB</label>
    </form>

11.4.12 FILE

文件上传有很多方式,可以使用插件或者JS拖放上传处理.Html本身也提供了默认的上传功能,只是上传效果并不是很美观.

属性说明 multiple 支持多选 accept 允许上传类型.png , .psd 或者 image/png , image/gif

<form action="" enctype="multipart/form-data">
        <input type="file">
        <input type="submit" value="上传">
    </form>

11.4.13 日期时间

属性说明 min 最小时间 max 最大时间 step 间隔: date缺省是1天 week缺省是1周 month缺省是1月

a.日期选择

<h1>日期选择</h1>
    <form action="">
        <input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
    </form>

b.周选择

<h1>周选择</h1>
    <input type="week" name="" id="">

c.月份选择

<h1>月选择</h1>
    <input type="month" name="" id="">

d.日期与时间

<h1>日期与时间</h1>
    <input type="datetime-local" name="" id="">

11.4.14 DATALIST

input表单的输入值选项列表

<form action="">
        <label for="username">用户名</label>
        <input type="text" name="" id="usernmae" list="less">
        <datalist id="less">
            <option value="JAVA">后台管理语言</option>
            <option value="CSS">美化网站页面</option>
            <option value="MYSQL">掌握数据库使用</option>
        </datalist>
    </form>

12、框架集

frameset元素可定义一个框架集。它被用来组织多个窗口（框架），每个框架存有独立的文档，在其最简单的应用中，frameset元素仅仅会规定在框架集中存在多少列或多少行，您必须使用cols或rows属性。

注意事项：由于是分割原网页，所以我们不能在body中进行编写，在head中进行分割。

标签说明 frameset 框架集 frame 框架

属性说明 cols 定义框架集中列的数目和尺寸 rows 定义框架集中行的数目和尺寸 frame border 去除框架边框 scrolling 去除滚动条

12.1 垂直框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset cols="50%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0"  scrolling="no"></frame>
    </frameset>
</head>
<body>
    
</body>
</html>

12.2 水平框架

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Html水平框架</title>
		<frameset rows="50%,*" >
				<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
		</frameset>
	</head>
<body>
</body>
</html>

12.3 混合框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html混合框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

12.4 导航框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html美女</title>
</head>
<body>
    
    <img src="../images/10.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html野兽</title>
</head>
<body>
    

    <img src="../images/timg.gif" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html动物</title>
</head>
<body>
    
    <img src="../images/4.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html链接</title>
</head>
<body>

    <a href="Html美女.html" target="view">美女图片</a>
    <a href="Html野兽.html" target="view">野兽图片</a>
    <a href="Html动物.html" target="view">动物图片</a>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="Html链接.html" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no" name="view"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

13、内联框架

iframe元素会创建包含另外一个文档的内联框架。

属性说明 align 对齐方式，后期采用css的方式进行设置 width 设置宽度 height 设置高度 src 设置iframe中显示的文档的URL name iframe的名称 scrolling 是否显示滚动条 frameborder 设置iframe的边框

安电子科技大学出版社。

在CSS中可以有各种各样的选择符，比如可以看到在文本中设定了有类的选择符，比如像是body就是一个类，它的作为类的选择符要求颜色为red、h1，这也是类，h2、h3这些都是类，而p当然是类，但是ex是子类，相当于这就是一个子类的选择符。

同样的在段落的元素下有多种子类，有用YouYuan的KaiTi的多种子类，这种多种子类的选择符就规定了不同的样式，包括span规定了一个子类叫做highlight，它就是一个子类的选择符，要求背景颜色是要黄色，下面就会去用到这些比如类的选择符，包括h1到h4也会用到子类的选择符。

比如同样都是段落p，但是如果class等于ex或者class等于YouYuan KaiTi或者是对于Spen这种类型，它的子类是highlight，就会以不同的形式来呈现。

来看一下显示效果，在显示效果中可以看到h1被规定了颜色是绿色，h2会规定了中间是有删除符号的，就是文本的装饰是有一条线贯穿这样一个方式。h4以什么样的方式来呈现？比如以字符间距为20个px的方式来呈现。

其它的地方，比如像是普通的段落就会在body里边去获得默认的颜色是红色，而这个特殊的段落，因为用了class，等于ex，也就说属于这个段落的子类。它所呈现的颜色作为RGB就是蓝色，它以蓝色的方式来呈现。其它的像刚才看到的YouYuan KaiTi，就是由于它们采用了不同的子类所呈现的。

而这个地方span定义了一个加亮，它的背景颜色是黄色，它就加亮了这部分的背景颜色，在span的里边加亮了背景颜色。这些都是选择符，CSS的选择符的呈现。

接下来看还有一类的选择符，实际上是属于这种伪类，这种伪类的选择器，伪类其实主要是用在超链接上。直接来看显示效果，这个其实也是经常看到的一种显示效果，就是当鼠标移上去的时候，超链接会有一些反应。当鼠标点击过后，其实不管它有没有这个页面，点击过后，超链接的方式就会变化，它是被点击过后的这种方式，而这些都可以被定义。

鼠标过去的时候，鼠标点击的时候，包括这有输入框，输入框放上去的时候，希望它呈现黄色，但是注意不是输入框的颜色是黄色，而是它的特殊的某一个状态，把它的颜色呈现黄色，这样的一些东西都可以以伪类的方式来呈现。

来看源代码，源代码这个地方可以看到，它实际上并没有规定它的<a>应该怎么呈现，它只是说明了它的cass等于one，class等于two，所以这两个超链接会呈现不同的样式。

而它的class其实在哪儿定义的？当然是在CSS里边定义，但是CSS跟刚才的CSS不太一样的地方在于，刚才的CSS是放到了<style>这样一个标签里边的，而CSS是放到了link>里边，把它作为一个CSS文件链接进来的。

来看一下，它链接进来的这个文件在哪儿？在当前的路径下的CSS子目录下的这个文件，也就是当前路径下CSS子目录下的这个文件。

打开看，实际上它就规定了可以看到这个<a这种标签，如果它的子类是one的这种情况就是子类如果是one这种情况，它的几个不同的呈现方式，就是它的几个状态。link的时候应该是以什么样的颜色呈现？visited以后应该是以什么样的方式呈现？这个hover就相对于鼠标移上去的时候，当它的是热点的时候以什么样的方式呈现？同样的two。

·第二个类也是这样的，它也规定了input的伪类就是focus，就是当它成为焦点的时候，它希望它的背景颜色是黄色，最终就达到了展示效果，包括背景颜色变成黄色的这种展示效果，这些就是伪类。

在线咨询

上一篇：JAVASCRIPT WEBUPLOADER 分块上
下一篇：CSS设置背景模糊

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商