vue框架-安装和使用

2018-05-11

一、Vue框架简介

more >>

iOS逆向-工具

2018-05-10

一、Mac工具集
1.class-dump
1.1作用:

用来dump目标对象的class信息的工具；

1.2原理：

利用oc语言runtime特性，将存储在Mach-O文件中的@interface 和 @protocol信息提取出来，并生成对应的.h文件；

1.3安装：

将class-dump.dmg文件中的class-dump文件复制到/usr/bin目录(如果OS X 10.11以上，没有/usr/bin文件夹写权限，将class-dump复制搭配/usr/local/bin目录即可)；
 在终端执行 sudo chmod 777 /usr/bin/class-dump命令赋予其执行权限；
 运行class-dump；

1.4使用：

接上步骤，运行class-dump；
将ipa包改后缀名为zip，解压获取.app文件;
终端执行命令:    class-dump -H xxx/xxx/xx.app -o xx/xx/存放生成的h文件的文件夹；
      eg: 1.sudo chmod 777 /usr/local/bin/class-dump
           2.class-dump
           3.class-dump -H /Users/jingxiankeji_tao/Desktop/Payload/Gold.app -o /Users/jingxiankeji_tao/Desktop/hh

1.5补充：

class-dump执行失败(无法得到想要的.h文件或.h文件内容是加密的密文)
    由于class-dump对象必须是未经加密的可执行文件，从appstore上下载的App都是经过签名加密的，可执行文件被加上了一层“壳”，因此需要砸壳(工具AppCrackr)

2.Theos
2.1简介

Theos是一个越狱开发工具包，特点：下载安装简单、Logos语法简单、编译发布简单。

2.2安装和编译

配置MobileSubstrate环境未完成

iOS SDK
    模拟器SDK
配置环境变量：
    export THEOS=/opt/theos        
    通过此命令设置安装路径，/opt/theos是推荐路径
获取Theos：
    sudo git clone git://github.com/DHowett/theos.git $THEOS
    或者https://github.com/DHowett/theos 直接下载至$THEOS
安装ldid             
    ldid是专门用来签名iOS文件的工具，用以取代Xcode自带的codesign.
    下载地址:https://github.com/downloads/rpetrich/ldid/ldid.zip 并将解压缩得到的“ldid”文件放在/opt/theos/bin($THEOS/bin)下
配置MobileSubstrate环境
    终端:sudo $THEOS/bin/bootstrap.sh substrate
    此时命令无效可用以下解决方案:
        用iFunBox或iTools等软件将iOS设备上的/Library/Frameworks/CydiaSubrate.framework/CydiaSubstrate;
        文件复制到Mac中;
        运行命令：sudo mv -f /path/to/CydiaSubstrate $THEOS/lib/libsubstrate.dylib   替换无效的libsubstrate.dylib
安装dpkg
    dpkg是专门制作deb(Debian package)的工具，用theos开发出来的插件都将以deb格式发布。
    下载地址:http://www.macports.org/install.php
    安装完成，终端命令：sudo port selfupdate
    确保MacPorts升级搭配最新版本，终端命令：sudo port install dpkg
    在iOS的命令行中执行 "dpkg -i xxxdeb" 来安装某个deb文件
        eg：dpkg -i com.hangcom.monitor_0.0.1-40_iphoneos-arm.deb
安装Theos NIC templates
    下载地址(获取额外5中模版)：https://github.com/DHowett/theos-nic-templates/archive/master.zip
    将解压的5个.tar文件复制搭配 $THEOS/templates/iphone下即可

2.3使用
创建工程：

cd 到指定目录；
启动NIC，终端命令: /Users/jingxiankeji_tao/Desktop/逆向/工具/Theos-master/bin/nic.pl 
选择模版(choose a Template) - 必填：可见10+种模版，在逆向工程最初阶段所开发程序的类型是tweak，选择对应的数字
输入工程名(Project Name) - 必填：first-theos
输入包名(输入deb包的名字，类似于bundle identifier): com.tao1010.firstdeb
输入tweak作者名字：tao1010
输入MobileSubstrate Bundle filter(tweak作用对象的bundle identifier)
输入bundle filter(指定tweak安装完成后需要重启的应用，仍以bundle filter表示)

完成上述步骤后，在指定的文件夹下可见一个firsttheos的工程文件夹（可移动到任意地方）

定制工程文件

上述生成的工程文件如下：
    control
    firsttheos.plist
    Makefile
    Tweak.xm
control
    记录了deb包管理系统所需的基本信息，会被打包进deb中，更多解析见文尾；
firsttheos.plist
    作用和app中的info.plist类似，记录一些配置信息，描述tweak的作用范围；
    plist文件支持3中格式：XML、二进制文件、OpenStep(常见property list格式)；
    plist文件最外层是一个字典，只有一个‘Filter’键，其值为一个数组：
        Bundles: 指定若干bundle identifier为tweak的作用对象；
        Classes: 指定若干class为tweak的作用对象；
        Executables: 指定若干可执行文件为tweak的作用对象；
Makefile
    指定编译和链接所涉及的文件、框架、库等信息，将整个过程自动化。
    在逆向的初始阶段，开发一般是application、Tweak、Tool三种类型的app，对应的文件分别为：application.mk、tweak.mk、tool.mk;
    指定SDK版本：在Makefile中加入：
        ARCHS = armv7 //指定开发框架为armv7
        TARGET = iphone:6.1:4.3 //采用6.1版本SDK，且对发布对象为iOS4.3及以上版本
    导入framework:
        firsttheos_FRAMEWORKS = framework名称
        eg：firsttheos_FRAMEWORKS = UIKit CoreTelephony CoreAudio
        firsttheos_PRIVATE_FRAMEWORKS = AppSupport ChatKit IMCore//导入私有framework
    链接lib:
        firsttheos_LDFLAGS = -lx
        在终端中输入: man ld 定位到-lx部分
        -lx代表链接libx.a 或者libx.dylib,若x是‘y.o’的形式，则直接使用如：libsqlite3.0.dylib、libz.dylib、dylizl.o
Tweak.xm
    用Theos创建的tweak工程,默认生存的模版源文件是tweak.xm;
    xm中的‘x’代表这个文件支持Logos语法，后缀名是单独的一个x，表示源文件支持Logos和C语法，后缀名是xm，表示源文件支持Logos和C/C++语法
    基本的Logos语法包含:%hook、%log 、%orig这3个预处理指令；
        %hook 指定需要hook的class,必须以 %end结尾
        eg:
            %hook SpringBoard
            - (void)menuButtonDown:(id)down{
                NSLog(@"你按下了home键");
                %orig; //调用menuButtonDown的原始函数
            }
            %end
            解析：hook住SpringBoard类中的menuButtonDown：函数，先将“你按下了home键”写入syslog，再执行函数的原始操作。
        %log 在%hook内部使用，将函数的类名、参数等信息写入syslog，可以按%log([(<type>)<expr>,...])的格式追加其他打印信息
        eg:
            %hook SpringBoard
            - (void)menuButtonDown:(id)down{
                %log((NSString *)@"iOSRE",(NSString *)@"Debug");
                %orig; //调用menuButtonDown:的原始函数
            }
            %end
        %orig 在%hook内部使用,执行被hook的函数的原始代码
            %hook SpringBoard
            - (BOOL)launchApplicationWithIdentifier:(id)identifier suspended:(BOOL)suspended{
                NSLog(@"启动%@",identifier);
                return %orig; 
            }
            %end
            如果去掉%orig，原始函数不会得到执行：
            %hook SpringBoard
            - (void)menuButtonDown:(id)down{
                //按下home键没反应
            }
            %end
            利用%orig修改原始函数的参数
            %hook SpringBoard
            - (BOOL)launchApplicationWithIdentifier:(id)identifier suspended:(BOOL)suspended{
                NSLog(@"启动MobilePhone");
                return %orig(@"com.apple.mobilephone",suspended); 
            }
            %end
        %group用于将%hook分组，必须以%end结尾，一个%group可以包含多个%hook，所以不属于某个自定义组的%hook被隐式归类到%group_ungrouped中；
            %group必须配合%init使用才能生效；
        %init 用于初始化某个%group，必须在%hook或%ctor内调用；
        %ctor tweak的构造函数完成初始化工作
        %new 在%hook内部使用，为一个现有的class添加新函数，功能与class_addMethod相同；
        %c作用等同于objec_getClass(),即获取一个类的定义；

编译+打包+安装

编译
    Theos采用与debian相同的make命令来编译tweak工程，若Terminal提示“command not found”表示没有安装CLT(command line tools)
    终端命令：make 
打包
    终端命令：make package
    最终格式为：.deb的后缀文件
安装
    方法一：图形界面安装法
        1.通过iFunBox、iTools等软件把deb拖到iOS中去；
        2.然后通iFile安装；
        3.最后用SBSetting来respring一下；

    方法二：命令行安装法    
        前提：越狱iOS安装OpenSSH
        1.在MakeFile的最上行加上"THEOS_DEVICE_IP=本机IP"；
        2.调用“make package install” 完成编译、打包、安装；
        通过设置iOS的authorized_keys省略SSH输入密码的步骤：
        1.删除
        2.生成authorized_keys
        3.配置iOS
清理
    命令：make clean

2.4tweak示例
编辑control

编辑xx.plist

编辑MakeFile

编辑Tweak.xm

3.Reveal

3.1简介

Reveal一个UI分析工具，和其他工具(PonyDebugger)比起来更直观。
界面元素全部以树的形式展现 ，能快速定位到各个UI元素；
官方的Reveal只能调试自己的APP，对第三方App需要对其做进一步扩展；

3.2安装

下载地址:http://revealapp.com/;

3.3功能扩展

使用方法：
    方法一 Static Library Intergration
    方法二 Dynamic Library Intergration

官网方法：在代码中注入dylib，对逆向工程无用；
    - (void)startReveal{

        NSString *revealLibName = @"libReveal.dylib";
        NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUerDomainMask,YES);
        NSString *documentsDirectory = [paths objectAtIndex:0];
        NSString *dyLibPath = [NSString stringWithFormat:@"%@%@", documentsDirectory, revealLibName];
        _revealLib = NULL;
        _revealLib = dlopen([dyLibPath cStringUsingEncoding:NSUTF8StringEncoding],RTLD_NOW);
        if(_revealLib == NULL){

            char *error = dlerror();
            NSLog(@"dlopen error: %s",error);
        }else{

            [[NSNotificationCenter defaultCenter] postNoticficationName:@"IBARevealRequestStart" object:self];
        }
    }
由于Reveal标准模式不支持查看没有源码的App，因此需要扩展：
    获取libReveal.dylib
        在Reveal中，点击菜单Help-->Show Reveal Library in Finder,获取libReveal.dylib文件；
    将libReveal.dylib导入目标App的目录
        方法一：通过SSH的方式将文件上传；
        方法二：使用iTools工具；
        将libReveal.dylib放在Documents目录下；
    创建RevealUtil
        ...
        ...
    使用Theos
        ...
        ...
    安装monitor插件
        ...
        ...

4.IDA
4.1简介

IDA是一个支持Windows、Linux、Mac OS X的多平台反汇编/调试器
下载地址:https://www.hex-rays.com/products/ida/index.shtml

4.2使用

4.3分析

5.其他工具

5.1iTools

主要用于逆向时的文件传输，常用目录:/var/mobile/Application 和 /var/root

5.2dyld_decache

5.3MesaSQLite

二、iOS工具集
1.SBSettings

2.MobileSubstrate

3.OpenSSH

4.GDB
4.1简介

4.2使用

5.Cycript

6.其他常用工具
6.1BigBoss Recommended和Tools

6.2AppCrackr

6.3iFile

6.4MobileTerminal

6.5Vi IMproved

6.6SQLite

6.7top

6.8syslogd

参考资料：

1.iOS逆向工程-沙梓社(书籍)
2.工具下载:class-dump
3.class-dump安装和使用
4.class-dump使用
5.工具下载:Theos
6.下载地址:ldid
7.ldid-Saurik
8.下载地址:dpkg
9.下载地址:Reveal
10.下载地址:IDA
11.工具:PonyDebugger
12.control更多信息查阅
13.Logos预处理指令
14.DEBIAN官方文档

展开全文 >>

iOS第三方库-SDWebImage

2018-05-07

一、内存缓存和磁盘缓存区别
1.缓存

分类：内存缓存和磁盘(硬盘)缓存；
内存：
    指当前程序的运行空间，缓存速度快容量小，是临时存储文件用的，供CPU直接读取，比如说打开一个程序,他是在内存中存储,关闭程序后内存就又回到原来的空闲空间；
磁盘：
    程序的存储空间，缓存容量大速度慢可持久化与内存不同的是磁盘是永久存储东西的，只要里面存放东西,不管运行不运行 ，他都占用空间！磁盘缓存是存在Library/Caches；

2.内存
sdw1

iOS内存分5个区：栈区、堆区、全局区、常量区、代码区；
栈区(stack)：这一块区域系统会自己管理，我们不用干预，主要存一些局部变量，以及函数跳转时的现场保护。因此大量的局部变量,深递归，函数循环调用都可能导致内存耗尽而运行崩溃;
堆区(heap)：与栈区相对，这一块一般由我们自己管理，比如alloc，free的操作，存储一些自己创建的对象;
全局区(静态区static)：全局变量和静态变量都存储在这里，已经初始化的和没有初始化的会分开存储在相邻的区域，程序结束后系统会释放;
常量区：存储常量字符串和const常量;
代码区：存储代码;

3.磁盘(硬盘)
sdw2

iOS沙盒机制：
    iOS应用程序只能在该程序创建的文件系统中读取文件，不可以去其它地方访问，此区域被成为沙盒，所以所有的非代码文件都要保存在此，例如图像，图标，声音，映像，属性列表，文本文件等;
沙盒：默认情况下，每个沙盒含有3个文件夹：Documents, Library 和 tmp;
    Documents：苹果建议将程序中建立的或在程序中浏览到的文件数据保存在该目录下，iTunes备份和恢复的时候会包括此目录;
    Library：存储程序的默认设置或其它状态信息；
            Library/Caches：存放缓存文件，iTunes不会备份此目录，此目录下文件不会在应用退出删除.
           Library/preferences: 存放的是 user default 存储的信息，iTunes会备份此目录， 应用程序重新启动不会丢弃数据，我们使用 NSUserDefaults写的设置数据都会保存到该目录下的一个plist文件中，这就是所谓的写到plist中！
    tmp：提供一个即时创建临时文件的地方， iTunes不会备份此目录;

用户生成的文件放在documents，自己的文件放在library/cache里面，简单的说明：
如果你做个记事本的app，那么用户写了东西，总要把东西存起来。那么这个文件则是用户自行生成的，就放在documents文件夹里面。
如果你有一个app，需要和服务器配合，经常从服务器下载东西，展示给用户看。那么这些下载下来的东西就放在library/cache。
apple对这个很严格，放错了就会被拒。主要原因是ios的icloud的同步问题。

二、SDWebImage基础
1.版本信息:pod ‘SDWebImage’,’~>4.3’
2.结构图:
sdw3
3.功能描述:异步图像下载并且带有缓存机制,是UIImageView的一个分类;
4.框架特征:

类别UIImageView，UIButton，MKAnnotationView- - 添加Web图像和高速缓存管理;
异步图像下载器;
具有自动缓存、到期处理的异步内存+磁盘映像缓存;
背景图像解压缩;
保证相同的URL不会被下载多次;
保证虚假网址不会重复重试;
保证主线程永远不会被阻止;
使用GCD和ARC;

5.支持的图像格式

UIImage（JPEG，PNG，...）支持的图像格式，包括gif;
WebP格式，包括动画WebP（使用WebPsuspec）;

6.使用方法:
Objective-C:

#import <SDWebImage/UIImageView+WebCache.h>
...
[imageView sd_setImageWithURL:[NSURL URLWithString:@"http://www.domain.com/path/to/image.jpg"] placeholderImage:[UIImage imageNamed:@"placeholder.png"]];

Swift:

import SDWebImage

imageView.sd_setImage(with: URL(string: "http://www.domain.com/path/to/image.jpg"), placeholderImage: UIImage(named: "placeholder.png"));

三、SDWebImage原理
1.导入类：import “UIImageView+WebCache.h”
2.基本方法：

1）- (void)sd_setImageWithURL:(nullable NSURL *)url；
2）- (void)sd_setImageWithURL:(nullable NSURL *)url  placeholderImage:(nullable UIImage *)placeholder；
3）- (void)sd_setImageWithURL:(nullable NSURL *)url  placeholderImage:(nullable UIImage *)placeholder    options:(SDWebImageOptions)options；
...
...

3.下载流程:
SDW

1.入口：setImageWithURL:placeholderImage:options:会先把 placeholderImage 显示，然后 SDWebImageManager 根据 URL 开始处理图片;
2.进入：SDWebImageManagerdownloadWithURL:delegate:options:userInfo:，交给 SDImageCache 从缓存查找图片是否已经下载queryDiskCacheForKey:delegate:userInfo:  ；
3.先从内存图片缓存查找是否有图片，如果内存中已经有图片缓存，SDImageCacheDelegate 回调imageCache:didFindImage:forKey:userInfo: 到 SDWebImageManager；
4.SDWebImageManagerDelegate 回调webImageManager:didFinishWithImage:到 UIImageView+WebCache 等前端展示图片；
5.如果内存缓存中没有，生成 NSInvocationOperation添加到队列开始从硬盘查找图片是否已经缓存；
6.根据 URLKey 在硬盘缓存目录下尝试读取图片文件。这一步是在 NSOperation 进行的操作，所以回主线程进行结果回调 notifyDelegate: ；
7.如果上一操作从硬盘读取到了图片，将图片添加到内存缓存中（如果空闲内存过小，会先清空内存缓存）。 SDImageCacheDelegate 回调 imageCache:didFindImage:forKey:userInfo:。进而回调展示图片；
8.如果从硬盘缓存目录读取不到图片，说明所有缓存都不存在该图片，需要下载图片，回调imageCache:didNotFindImageForKey:userInfo: ；
9.共享或重新生成一个下载器 SDWebImageDownloader 开始下载图片；
10.图片下载由NSURLSession(NSURLConnection已经被剔除了) 来做，实现相关 delegate 来判断图片下载中、下载完成和下载失败；
    session:didReceiveData: 中利用 ImageIO做了按图片下载进度加载效果；
    sessionDidFinishLoading:数据下载完成后交给SDWebImageDecoder 做图片解码处理；
11图片解码处理在一个NSOperationQueue完成，不会拖慢主线程 UI。如果有需要对下载的图片进行二次处理，最好也在这里完成，效率会好很多。
12在主线程 notifyDelegateOnMainThreadWithInfo: 宣告解码完成，        imageDecoder:didFinishDecodingImage:userInfo:回调给 SDWebImageDownloader;
    imageDownloader:didFinishWithImage:回调给 SDWebImageManager 告知图片下载完成;
13通知所有的 downloadDelegates下载完成，回调给需要的地方展示图片;
14将图片保存到 SDImageCache 中，内存缓存和硬盘缓存同时保存;
15写文件到硬盘也在以单独 NSInvocationOperation 完成，避免拖慢主线程;
16SDImageCache 在初始化的时候会注册一些消息通知，在内存警告或退到后台的时候清理内存图片缓存，应用结束的时候清理过期图片。
17SDWI 也提供了 UIButton+WebCache 和 MKAnnotationView+WebCache，方便使用；
18SDWebImagePrefetcher 可以预先下载图片，方便后续使用；

四、SDWebImage图片格式
1.格式及代码

JPEG 0xFF
PNG 0x89
GIF   0x47
TIFF 0x49或0x4D
R as RIFF for WEBP 0x52

2.格式枚举SDImageFormat

SDImageFormatUndefined = -1,
SDImageFormatJPEG = 0,
SDImageFormatPNG,
SDImageFormatGIF,
SDImageFormatTIFF,
SDImageFormatWebP,
SDImageFormatHEIC

3.格式方法:

+ (SDImageFormat)sd_imageFormatForImageData:(nullable NSData *)data {
    if (!data) {
        return SDImageFormatUndefined;
    }

    // File signatures table: http://www.garykessler.net/library/file_sigs.html
    uint8_t c;
    [data getBytes:&c length:1];
    switch (c) {
        case 0xFF:
            return SDImageFormatJPEG;
        case 0x89:
            return SDImageFormatPNG;
        case 0x47:
            return SDImageFormatGIF;
        case 0x49:
        case 0x4D:
            return SDImageFormatTIFF;
        case 0x52: {
            if (data.length >= 12) {
                //RIFF....WEBP
                NSString *testString = [[NSString alloc] initWithData:[data subdataWithRange:NSMakeRange(0, 12)] encoding:NSASCIIStringEncoding];
                if ([testString hasPrefix:@"RIFF"] && [testString hasSuffix:@"WEBP"]) {
                    return SDImageFormatWebP;
                }
            }
            break;
        }
        case 0x00: {
            if (data.length >= 12) {
                //....ftypheic ....ftypheix ....ftyphevc ....ftyphevx
                NSString *testString = [[NSString alloc] initWithData:[data subdataWithRange:NSMakeRange(4, 8)] encoding:NSASCIIStringEncoding];
                if ([testString isEqualToString:@"ftypheic"]
                    || [testString isEqualToString:@"ftypheix"]
                    || [testString isEqualToString:@"ftyphevc"]
                    || [testString isEqualToString:@"ftyphevx"]) {
                    return SDImageFormatHEIC;
                }
            }
            break;
        }
    }
    return SDImageFormatUndefined;
}

五、SDWebImage枚举
1.SDWebImageOptions

 //默认的情况下，当一个URL下载失败了，那么这个URL会被放在黑名单里面，不会继续尝试，这个标志位就是使黑名单效果失效，保证失败后可以重新尝试。
SDWebImageRetryFailed = 1 << 0,

//默认情况下，在UI交互的情况下就开始图像下载，该标志位使该特性失效，例如在UIScrollView减速时延迟下载。
SDWebImageLowPriority = 1 << 1,

//该标志位使磁盘缓存失效，只是内存缓存。
SDWebImageCacheMemoryOnly = 1 << 2,

//该标志位可以确保下载的回调，图像可以边下载边显示
SDWebImageProgressiveDownload = 1 << 3,

//刷新缓存
SDWebImageRefreshCached = 1 << 4,

//后台下载
SDWebImageContinueInBackground = 1 << 5,

//处理NSHTTPCookieStore中存储的cookie
SDWebImageHandleCookies = 1 << 6,

//允许使用无效的SSL整数，但是仅用于测试，生产环境要小心
SDWebImageAllowInvalidSSLCertificates = 1 << 7,

//默认的情况，图像下载都是按照队列内部的顺序进行的，这个标志位就是提高优先级，让其移动到队列的首位。
SDWebImageHighPriority = 1 << 8,

//默认的情况下是占位图在下载图像的时候加载，这个标志位延迟占位图的加载，直到图像下载完成。
SDWebImageDelayPlaceholder = 1 << 9,

//我们一般不调用transformDownloadedImage代理方法处理动画图片，因为大多数的转换代码会损坏它，使用这个标志位可以转换它们。
SDWebImageTransformAnimatedImage = 1 << 10,

//默认情况下，图像在下载完成后都是加载到UIImageview上，但是在一些情况下，我们想要在设置图像之前处理它，比如说加一个滤镜或者褪色的动画效果等等，使用这个标志位，如果你想要手动的在成功完成回调后设置这个图片。
SDWebImageAvoidAutoSetImage = 1 << 11,

//默认情况下，图像都是根据他们原始尺寸进行解码，在ios中，这个标志位会缩小图片，以便能够兼容器件内存的限制，如果SDWebImageProgressiveDownload被设置了，那么这个位就失效了。
SDWebImageScaleDownLargeImages = 1 << 12，

SDWebImageQueryDataWhenInMemory = 1 << 13,

/**
 * By default, we query the memory cache synchronously, disk cache asynchronously. This mask can force to query disk cache synchronously to ensure that image is loaded in the same runloop.
 * This flag can avoid flashing during cell reuse if you disable memory cache or in some other cases.
 */
SDWebImageQueryDiskSync = 1 << 14,

/**
 * By default, when the cache missed, the image is download from the network. This flag can prevent network to load from cache only.
 */
SDWebImageFromCacheOnly = 1 << 15,
/**
 * By default, when you use `SDWebImageTransition` to do some view transition after the image load finished, this transition is only applied for image download from the network. This mask can force to apply view transition for memory and disk cache as well.
 */
SDWebImageForceTransition = 1 << 16

2.SDWebImageDownloaderExecutionOrder - 设置操作的执行顺序

//队列模式 先进先出，这个是默认值 
SDWebImageDownloaderFIFOExecutionOrder, 

//堆栈模式，后进先出 
SDWebImageDownloaderLIFOExecutionOrder

3.填充模式UIViewContentMode

 UIViewContentModeScaleToFill,
UIViewContentModeScaleAspectFit,      // contents scaled to fit with fixed aspect. remainder is transparent
UIViewContentModeScaleAspectFill,     // contents scaled to fill with fixed aspect. some portion of content may be clipped.
UIViewContentModeRedraw,              // redraw on bounds change (calls -setNeedsDisplay)
UIViewContentModeCenter,              // contents remain same size. positioned adjusted.
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,
解析:
    填充模式的枚举，每次使用的时候我们都只能使用其中的一个元素，比如使用UIViewContentModeScaleToFill，而且在定义枚举值的时候我们可以指定从一个整数值开始，后面的值依次比前一个值加1；如果不指定值，那么第一个成员的值默认为0，后面的值还是依次递增为1， 2......，这个使用起来很简单了，也不用多说;

4.位移枚举
eg:UIViewAnimationOptions

UIViewAnimationOptionLayoutSubviews            = 1 <<  0,
UIViewAnimationOptionAllowUserInteraction      = 1 <<  1, // turn on user interaction while animating
UIViewAnimationOptionBeginFromCurrentState     = 1 <<  2, // start all views from current value, not initial value
UIViewAnimationOptionRepeat                    = 1 <<  3, // repeat animation indefinitely
UIViewAnimationOptionAutoreverse               = 1 <<  4, // if repeat, run animation back and forth
UIViewAnimationOptionOverrideInheritedDuration = 1 <<  5, // ignore nested duration
UIViewAnimationOptionOverrideInheritedCurve    = 1 <<  6, // ignore nested curve
UIViewAnimationOptionAllowAnimatedContent      = 1 <<  7, // animate contents (applies to transitions only)
UIViewAnimationOptionShowHideTransitionViews   = 1 <<  8, // flip to/from hidden state instead of adding/removing
UIViewAnimationOptionOverrideInheritedOptions  = 1 <<  9, // do not inherit any options or animation type

UIViewAnimationOptionCurveEaseInOut            = 0 << 16, // default
UIViewAnimationOptionCurveEaseIn               = 1 << 16,
UIViewAnimationOptionCurveEaseOut              = 2 << 16,
UIViewAnimationOptionCurveLinear               = 3 << 16,

UIViewAnimationOptionTransitionNone            = 0 << 20, // default
UIViewAnimationOptionTransitionFlipFromLeft    = 1 << 20,
UIViewAnimationOptionTransitionFlipFromRight   = 2 << 20,
UIViewAnimationOptionTransitionCurlUp          = 3 << 20,
UIViewAnimationOptionTransitionCurlDown        = 4 << 20,
UIViewAnimationOptionTransitionCrossDissolve   = 5 << 20,
UIViewAnimationOptionTransitionFlipFromTop     = 6 << 20,
UIViewAnimationOptionTransitionFlipFromBottom  = 7 << 20,

UIViewAnimationOptionPreferredFramesPerSecondDefault     = 0 << 24,
UIViewAnimationOptionPreferredFramesPerSecond60          = 3 << 24,
UIViewAnimationOptionPreferredFramesPerSecond30          = 7 << 24,
解析:
    这种枚举我们就可以一次选择多个值，比如说我们可以使用UIViewAnimationOptionLayoutSubviews | UIViewAnimationOptionAllowUserInteraction，这么写我们就是使用该枚举的前两个成员。这样写的作用就是既可以布局子视图，还可以允许用户交互。
位移枚举的原理:
    其实给一个枚举变量赋予多个枚举值的时候，原理只是把各个枚举值加起来罢了。当加起来以后，就获取了一个新的值，那么为了保证这个值的唯一性，这个时候就体现了位运算的重要作用。位运算可以确保枚举值组合的唯一性。其实|这个按位或的符号就是将多个枚举值加起来的意思。
  ● 两个不同的枚举值按位与&其实就是0，相同的按位&就是其本身;
  ● 两个不同的枚举值按位或|其实就是两个枚举值的相加，相同的按位或|就是其本身;

参考资料：
1.内存缓存和磁盘缓存区别
2.内存缓存和磁盘缓存
3.SDWebImage
4.SDWebImage — 图片类型判断深入研究
5.位移枚举

展开全文 >>

微信小程序-API-

2018-05-04

说明：

wx.on 开头的 API 是监听某个事件发生的API接口，接受一个 CALLBACK 函数作为参数。当该事件触发时，会调用 CALLBACK 函数。
如未特殊约定，其他 API 接口都接受一个OBJECT作为参数。
OBJECT中可以指定success, fail, complete（成功、失败都会执行）来接收接口调用结果。

一、网络

API	说明	兼容
发起请求
wx.request	发起网络请求
上传、下载
wx.uploadFile	上传文件
wx.downloadFile	下载文件
WebSocket
wx.connectSocket	创建WebSocket连接
wx.onSocketOpen	监听WebSocket打开
wx.onSocketError	监听WebSocket错误
wx.sendSocketMessage	发送WebSocket消息
wx.onSocketMessage	接受WebSocket消息
wx.closeSocket	关闭WebSocket连接
wx.onSocketClose	监听WebSocket关闭
SocketTask	发送数据、关闭连接、监听打开/关闭/错误/消息

二、媒体

API	说明	兼容
图片
wx.chooseImage	从相册选择图片或者拍照
wx.priviewImage	预览图片
wx.getImageInfo	获取图片信息
wx.saveImageToPhotoAlbum	保存图片到系统相册	基础库 1.2.0 开始支持，低版本需做兼容处理
录音
wx.startRecord	开始录音	1.6.0 版本开始，本接口不再维护。建议使用能力更强的 wx.getRecorderManager 接口
wx.stopRecord	结束录音
录音管理
wx.getRecorderManager	获取全局唯一的录音管理器 recorderManager	基础库 1.6.0 开始支持，低版本需做兼容处理
音频播放控制
wx.playVoice	播放语音	1.6.0 版本开始，本接口不再维护。建议使用能力更强的 wx.createInnerAudioContext
wx.pauseVoice	暂停播放语音
wx.stopVoice	结束播放语音
音乐播放控制
wx.getBackgroudAudioPlayerState	获取音乐播放状态	v1.2.0后，API不在维护，建议使用wx.getBackgroundAudioManager
wx.playBackgroundAudio	播放音乐
wx.pauseBackgroundAudio	暂停播放音乐
wx.seekBackgroundAudio	控制音乐播放进度
wx.stopBackgroundAudio	停止播放音乐
wx.onBackgroundAudioPlay	监听音乐开始播放
wx.onBackgroundAudioPause	监听音乐暂停
wx.onBackgroundAudioStop	监听音乐结束
背景音频播放管理
wx.getBackgroundAudioManager	获取全局唯一的背景音频管理器 backgroundAudioManager	v1.2.0,低版本兼容处理
音频组件控制
wx.createAudioContext	创建并返回 audio 上下文 audioContext 对象	v1.6.0后该API不在维护
wx.createInnerAudioContext	创建并返回内部 audio 上下文 innerAudioContext 对象	基础库 1.6.0 开始支持，低版本需做兼容处理
视频
wx.chooseVideo	从相册选择视频或拍摄
wx.saveVideoToPhotosAlbum	保存视频到系统相册	v1.2.0,低版本兼容处理
视频组件控制
wx.createVideoContext	创建并返回 video 上下文 videoContext 对象
相机组件控制
wx.createCameraContext	创建并返回 camera 上下文 cameraContext 对象	v1.6.0,低版本兼容处理
实时音视频
wx.createLivePlayerContext	操作对应的 <live-player/> 组件	v1.7.0,低版本兼容处理
wx.createLivePusherContext	创建并返回 live-pusher 上下文 LivePusherContext 对象	v1.7.0,低版本兼容处理

三、文件

API	说明	兼容
wx.saveFile	保存文件
wx.getFileInfo	获取文件信息	基础库 1.4.0 开始支持，低版本需做兼容处理
wx.getSavedFileList	获取已保存文件列表
wx.getSavedFileInfo	获取已保存文件信息
wx.removeSaveFile	删除已保存文件
wx.openDocument	打开文件

四、数据缓存

API	异步或同步	说明
wx.getStorage	异步	获取本地数据缓存
wx.getStorageSync	异步	获取本地数据缓存
wx.setStorage	异步	设置本地数据缓存
wx.setStorageSync	同步	设置本地数据缓存
wx.getStorageInfo	异步	获取本地缓存信息
wx.getStorageInfoSync	同步	获取本地缓存信息
wx.removeStorage	异步	删除本地缓存内容
wx.removeStorageSync	同步	删除本地缓存内容
wx.clearStorage	异步	清理本地数据缓存
wx.clearStorageSync	同步	清理本地数据缓存

五、位置

API	说明
获取位置
wx.getLocation	获取当前位置
wx.chooseLocation	打开地图选择位置
查看位置
wx.openLocation	打开内置地图
地图组件控制
wx.createMapContext	地图组件控制

六、设备

API	说明	备注
系统信息
wx.getSystemInfo	获取系统信息	异步
wx.getSystemInfoSync	获取系统信息	同步
wx.canIUse	判断小程序的API，回调，参数，组件等是否在当前版本可用	此接口从基础库 1.1.1 版本开始支持
网络状态
wx.getNetworkType	获取网络类型
wx.onNetworkStatusChange	监听网络状态变化	基础库 1.1.0 开始支持，低版本需做兼容处理
加速度计
wx.onAccelerometerChange	监听加速度数据
wx.startAccelerometer	开始加速度数据	基础库 1.1.0 开始支持，低版本需做兼容处理
wx.stopAccelerometer	停止加速度数据	基础库 1.1.0 开始支持，低版本需做兼容处理
罗盘
wx.onCompassChange	监听罗盘数据
wx.startCompass	开启罗盘	基础库 1.1.0 开始支持，低版本需做兼容处理
wx.stopCompass	停止罗盘	基础库 1.1.0 开始支持，低版本需做兼容处理
拨打电话
wx.makePhoneCall	拨打电话
扫码
wx.scanCode	扫码
剪贴板
wx.setClipboardData	设置剪贴板内容	基础库 1.1.0 开始支持，低版本需做兼容处理
wx.getClipboardData	获取剪贴板内容	基础库 1.1.0 开始支持，低版本需做兼容处理
蓝牙	基础库版本 1.1.0 开始支持，低版本需做兼容处理	iOS 微信客户端 6.5.6 版本开始支持，Android 6.5.7 版本开始支持
wx.openBluetoothAdapter	初始化小程序蓝牙模块（生命周期：从open-close或小程序销毁）
wx.closeBluetoothAdapter	关闭蓝牙模块，使其进入未初始化状态
wx.getBluetoothAdapterState	获取本机蓝牙适配器状态
wx.onBluetoothAdapterStateChange	监听蓝牙适配器状态变化事件
wx.startBluetoothDevicesDiscovery	开始搜寻附近的蓝牙外围设备
wx.stopBluetoothDevicesDiscovery	停止搜寻附近的蓝牙外围设备
wx.getBluetoothDevices	获取在小程序蓝牙模块生效期间所有已发现的蓝牙设备，包括已经和本机处于连接状态的设备
wx.getConnectedBluetoothDevices	根据 uuid 获取处于已连接状态的设备
wx.onBluetoothDeviceFound	监听寻找到新设备的事件
wx.createBLEConnection	连接低功耗蓝牙设备
wx.closeBLEConnection	断开与低功耗蓝牙设备的连接
wx.getBLEDeviceServices	获取蓝牙设备所有 service（服务）
wx.getBLEDeviceCharacteristics	获取蓝牙设备某个服务中的所有 characteristic（特征值）
wx.readBLECharacteristicValue	读取低功耗蓝牙设备的特征值的二进制数据值
wx.writeBLECharacteristicValue	向低功耗蓝牙设备特征值中写入二进制数据
wx.notifyBLECharacteristicValueChange	启用低功耗蓝牙设备特征值变化时的 notify 功能，订阅特征值
wx.onBLEConnectionStateChange	监听低功耗蓝牙连接状态的改变事件，包括开发者主动连接或断开连接，设备丢失，连接异常断开等等
wx.onBLECharacteristicValueChange	监听低功耗蓝牙设备的特征值变化。必须先启用notify接口才能接收到设备推送的notification
错误码	蓝牙错误码列表
iBeacon
wx.startBeaconDiscovery	开始搜索附近的iBeacon设备	基础库 1.2.0 开始支持，低版本需做兼容处理
wx.stopBeaconDiscovery	停止搜索附近的iBeacon设备
wx.getBeacons	获取所有已搜索到的iBeacon设备
wx.onBeaconUpdate	监听 iBeacon 设备的更新事件
wx.onBeaconServiceChange	监听 iBeacon 服务的状态变化
屏幕亮度
wx.setScreenBrightness	设置屏幕亮度	基础库 1.2.0 开始支持，低版本需做兼容处理
wx.getScreenBrightness	获取屏幕亮度
wx.setKeepScreenOn	设置是否保持常亮状态
用户截屏事件
wx.onUserCaptureScreen	监听用户主动截屏事件，用户使用系统截屏按键截屏时触发此事件
振动
wx.vibrateLong	使手机发生较长时间的振动（400ms）	基础库 1.2.0 开始支持，低版本需做兼容处理
wx.vibrateShort	使手机发生较短时间的振动（15ms）
手机联系人
wx.addPhoneContact	调用后，用户可以选择将该表单以“新增联系人”或“添加到已有联系人”的方式，写入手机系统通讯录，完成手机通讯录联系人和联系方式的增加
NFC
wx.getHCEState	判断当前设备是否支持 HCE 能力	基础库 1.7.0 开始支持，低版本需做兼容处理
wx.startHCE	初始化 NFC 模块
wx.stopHCE	关闭 NFC 模块。仅在安卓系统下有效
wx.onHCEMessag	监听 NFC 设备的消息回调，并在回调中处理
wx.sendHCEMessage	发送 NFC 消息。仅在安卓系统下有效
WiFi
wx.startWifi	初始化 Wi-Fi 模块	基础库 1.6.0 开始支持，低版本需做兼容处理
wx.stopWifi	关闭 Wi-Fi 模块
wx.connectWifi	连接 Wi-Fi。若已知 Wi-Fi 信息，可以直接利用该接口连接。	仅 Android 与 iOS 11 以上版本支持
wx.getWifiList	请求获取 Wi-Fi 列表，在 onGetWifiList 注册的回调中返回 wifiList 数据
wx.onGetWifiList	监听在获取到 Wi-Fi 列表数据时的事件，在回调中将返回 wifiList
wx.setWifiList	iOS特有接口在 onGetWifiList 回调后，利用接口设置 wifiList 中 AP 的相关信息
wx.onWifiConnected	监听连接上 Wi-Fi 的事件
wx.getConnectedWifi	获取已连接中的 Wi-Fi 信息

七、界面

API	说明	备注
交互反馈
wx.showToast	显示提示框
wx.showLoading	显示加载提示框
wx.hideToast	隐藏提示框
wx.hideLoading	隐藏加载提示框
wx.showModal	显示模态弹窗
wx.showActionSheet	显示菜单列表
设置导航条
wx.setNavigationBarTitle	设置当前页面标题
wx.showNavigationBarLoading	显示导航条加载动画
wx.hideNavigationBarLoading	隐藏导航条加载动画
wx.setNavigationBarColor	设置导航条颜色
设置tabBar	基础库 1.9.0 开始支持，低版本需做兼容处理
wx.setTabBarBadge	为 tabBar 某一项的右上角添加文本
wx.removeTabBarBadge	移除 tabBar 某一项右上角的文本
wx.showTabBarRedDot	显示 tabBar 某一项的右上角的红点
wx.hideTabBarRedDot	隐藏 tabBar 某一项的右上角的红点
wx.setTabBarStyle	动态设置 tabBar 的整体样式
wx.setTabBarItem	动态设置 tabBar 某一项的内容
wx.showTabBar	显示 tabBar
wx.hideTabBar	隐藏 tabBar
设置置顶信息
wx.setTopBarText	动态设置置顶栏文字内容，只有当前小程序被置顶时能生效，如果当前小程序没有被置顶，也能调用成功，但是不会立即生效，只有在用户将这个小程序置顶后才换上设置的文字内容	调用成功后，需间隔 5s 才能再次调用此接口，如果在 5s 内再次调用此接口，会回调 fail
导航
wx.navigateTo	新窗口打开页面
wx.redirectTo	原窗口打开页面
wx.switchTab	切换到tabbar页面
wx.navigateBack	退回上一个页面
wx.reLaunch	关闭所有页面，打开到应用内的某个页面
动画
wx.createAnimation	动画
位置
wx.pageScrollTo	将页面滚动到目标位置
绘图
intro	在Canvas上画图
coordinates	Canvas坐标系
gradient	渐变
Reference	API
color	颜色的使用
wx.createCanvasContext	创建 canvas 绘图上下文（指定 canvasId)
wx.createContext	创建绘图上下文
wx.drawCanvas	绘图
wx.canvasToTempFilePath	把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
wx.canvasGetImageData	返回一个数组，用来描述 canvas 区域隐含的像素数据
wx.canvasPutImageData	将像素数据绘制到画布的方法
canvasContext.setFillStyle	设置填充色(默认black)
canvasContext.setStrokeStyle	设置边框颜色(默认black)
canvasContext.setShadow	设置阴影样式(offsetX 默认值为0， offsetY 默认值为0， blur 默认值为0，color 默认值为 black)
canvasContext.createLinearGradient	创建一个线性的渐变颜色(需要使用 addColorStop() 来指定渐变点，至少要两个)
canvasContext.createCircularGradient	创建一个圆形的渐变颜色(起点在圆心，终点在圆环, 需要使用 addColorStop() 来指定渐变点，至少要两个)
canvasContext.addColorStop	创建一个颜色的渐变点
…	…
下拉刷新		基础库 1.5.0 开始支持，低版本需做兼容处理
Page.onPullDownRefresh	在 Page 中定义 onPullDownRefresh 处理函数，监听该页面用户下拉刷新事件
wx.startPullDownRefresh	开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致
wx.stopPullDownRefresh	停止下拉刷新动画
WXML节点信息
wx.createSelectorQuery	返回一个SelectorQuery对象实例
selectorQuery.in	将选择器的选取范围更改为自定义组件component内
selectorQuery.select	返回一个NodesRef对象实例，可以用于获取节点信息
selectorQuery.selectAll	在当前页面下选择匹配选择器selector的节点，返回一个NodesRef对象实例
selectorQuery.selectViewport	选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息，返回一个NodesRef对象实例
nodesRef.boundingClientRect	添加节点的布局位置的查询请求，相对于显示区域，以像素为单位
nodesRef.scrollOffset	添加节点的滚动位置查询请求，以像素为单位
nodesRef.fields	获取节点的相关信息，需要获取的字段在fields中指定
selectorQuery.exec	执行所有的请求，请求结果按请求次序构成数组，在callback的第一个参数中返回
WXML节点布局相交状态
wx.createIntersectionObserver	创建并返回一个 IntersectionObserver 对象实例
intersectionObserver.relativeTo	使用选择器指定一个节点，作为参照区域之一
intersectionObserver.relativeToViewport	指定页面显示区域作为参照区域之一
intersectionObserver.observe	指定目标节点并开始监听相交状态变化情况
intersectionObserver.disconnect	停止监听。回调函数将不再触发

八、第三方平台

API	说明
wx.getExtConfig	获取第三方平台自定义的数据字段
wx.getExtConfigSync	获取第三方平台自定义的数据字段的同步接口

九、开放接口

API	说明
登录
wx.login	登录
wx.checkSession	校验用户当前session_key是否有效
签名加密
授权
wx.authorize	提前向用户发起授权请求
用户信息
wx.getUserInfo	获取用户信息
getPhoneNumber	获取微信用户绑定的手机号，需先调用login接口
UnionID机制说明
微信支付
wx.requestPayment	发起微信支付
模板消息
使用说明	eg:购买成功通知，续费成功通知，预定成功通知，等模板
模版消息管理
发送模板消息
客服消息
接受消息和事件
发送客服消息
转发消息
临时素材接口
客服输入状态
接入指引
转发
Page.onShareAppMessage	在 Page 中定义 onShareAppMessage 函数，设置该页面的转发信息
wx.showShareMenu	显示当前页面的转发按钮
wx.hideShareMenu	隐藏转发按钮
wx.updateShareMenu	更新转发属性
wx.getShareInfo	获取转发详细信息
获取更多转发信息
页面内发起转发
获取二维码
获取二维码
收货地址
wx.chooseAddress	获取用户收货地址
卡券
wx.addCard	添加卡券
wx.openCard	打开卡券
会员卡组件
设置
wx.openSetting	调起客户端小程序设置界面，返回用户设置的操作结果
wx.getSetting	获取用户的当前设置
微信运动
wx.getWeRunData	获取用户过去三十天微信运动步数，需要先调用 wx.login 接口
打开小程序
wx.navigateToMiniProgram	打开同一公众号下关联的另一个小程序
wx.navigateBackMiniProgram	返回到上一个小程序，只有在当前小程序是被其他小程序打开时可以调用成功
打开APP
launchApp	因为需要用户主动触发才能打开 APP，所以该功能不由 API 来调用
获取发票抬头
wx.chooseInvoiceTitle	选择用户的发票抬头
生物认证
wx.checkIsSupportSoterAuthentication	获取本机支持的 SOTER 生物认证方式
wx.startSoterAuthentication	开始 SOTER 生物认证
wx.checkIsSoterEnrolledInDevice	获取设备内是否录入如指纹等生物信息的接口
附近
添加地点
查看地点列表
删除地点
展示/取消展示附近小程序
插件管理
插件管理

十、数据

API	说明
常规分析
概括趋势
访问趋势
访问分布
访问留存
访问页面
自定义分析
wx.reportAnalytics	自定义分析数据上报接口

十一、更新

API	说明
wx.getUpdateManager	获取全局唯一的版本更新管理器

十二、多线程

API	说明
wx.createWorker	多线程worker

十三、调试接口

API	说明
wx.setEnableDebug	设置是否打开调试开关，此开关对正式版也能生效

参考资料：
1.微信小程序API文档

展开全文 >>

HTML5-黑马视频-入门基础2

2018-05-03

一、表格
1.创建表格

<table>
	<tr>
		<td>单元格内的文字</td>
		...
	</tr>
	...
</table>
解析:
	table用于定义一个表格；
	tr用于定义表格中的一行，必须嵌套在table标签中，table中包含几对tr，就表示几行表格；
	td用于定义表格中的单元格，必须嵌套在tr标签中，tr中包含几对td，就表示该行中有多少列，其中可以放任何标签；

2.表格属性

属性名	含义	常用属性值
border	设置表格的边框(默认border=0，无边框)	像素值
cellspacing	设置单元格与单元格之间的空白间距	像素值，默认2
cellpadding	设置单元格与单元格边框之间的空白间距	像素值，默认1
width	设置表格的宽度	像素值
height	设置表格高度	像素值
align	设置表格在网页中的水平对齐方式	left、center、right

3.表头标签 th

将第一列的td-->th即可

4.表格结构

<table>
	<thead>
		...
	</thead>
	<tbody>
		...
	</tbody>
</table>

5.表格标题

<table>
	<caption>这是一个标题</caption>
	<thead>
		...
	</thead>
	<tbody>
		...
	</tbody>
</table>

6.合并单元格
跨行rowspan,跨列colspan

<table border="1" align="center">
   <caption>这是一个标题</caption>
   <thead>
       <tr>
           <th colspan="2">第一行，第一列</th>
           <th>第一行，第三列</th>
         </tr>
   </thead>
   <tbody>
       <tr>
           <td>第二行，第一列</td>
           <td>第二行，第二列</td>
           <td rowspan="2">第二行，第三列</td>
        </tr>
        <tr>
           <td>第三行，第一列</td>
           <td>第三行，第二列</td>
           <!-- <td>第三行，第三列</td> -->
        </tr>
   </tbody>
</table>
 解析:
 	将多个内容合并的时候，把多余的东西删除；
 	删除个数 = 合并个数 - 1；
 	合并顺序：先上 先左；

二、表单
1.作用：收集用户信息
2.构成:表单控件(表单元素)、提示信息、表单域

表单控件：按钮(单选按钮|复选按钮)、文本框|密码框、
提示信息：
表单域：

3.input控件

属性	属性值	描述
type	text	单行文本输入框
-	password	密码输入框
-	radio	单选按钮
-	checkbox	复选框
-	button	普通按钮
-	submit	提交按钮
-	reset	重置按钮
-	image	图像形式的提交按钮
type	file	文件域
name	由用户自定义	控件的名称
value	由用户自定义	input控件中默认的文本值
size	正整数	input控件在页面中显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符数

解析：

单选框，如果是一组，可以通过name值来实现：
   <label for="sex">性别:</label>
   <input type="radio" name="sex" id="sex"> 男
     <input type="radio" name="sex" id="sex"> 女

6.label标签
作用：

用于绑定一个表单元素

使用方法：

1）用label直接使用包裹；
    <label> 测试一下: <input type="text"> </label>
2)label中有多个标签时，通过for 和 id 绑定
    <label for="name" >用户名:</label>
      <input type="text" id="name" placeholder="请输入您的用户名">

7.文本域textarea

<label for="leave">留言:</label>
<textarea name="leave" id="leave" cols="30" rows="10"></textarea>

8.下拉菜单select

select中至少包含一对option;
默认选中时,在option中设置selected即可;

<select name="city" id="city">
    <option selected>北京</option>
    <option>重庆</option>
    <option>深圳</option>
  </select>

9.表单域form

属性	属性值	描述
action		提交的目的地
method	post/get	提交方式
name	字符

三、HTML5新标签和特性
1.常用新标签

header：定义页面的头部，页眉；
nav：定义导航栏；
footer：定义页面底部，页脚；
article：定义文章；
section：定义文档中的节；
aside：定义侧边；
datalist:定义选项列表；
fieldset:将表单内的相关元素分组和打包，一般和legend搭配使用；

2.input新特性

属性	属性值	描述
type-H5	email	输入邮件格式
type-H5	tel	手机号格式
type-H5	url	url格式
type-H5	number	输入数字格式
type-H5	search	搜索框
type-H5	range	自由拖动滑块
type-H5	time	小时分钟
type-H5	date	年月日
type-H5	datetime	时间
type-H5	month	月年
type-H5	week	星期年

3.常用input新属性

属性	属性值	描述
type-H5	placeholder	占位符
type-H5	autofocus	自动获得焦点
type-H5	multiple	多文件上传
type-H5	autocomplete	是否启用自动完成功能,on/off，on表示记录已经输入的值
type-H5	required	必填项，内容不能为空
type-H5	accesskey	激活(使元素获得焦点)元素的快捷键采用alt+s

使用自动记录，需要提交按钮；需要name值；
<input type="text" autocomplete name="username" placeholder="请输入名字">
<input type="text" autocomplete=“off” name="username" placeholder="请输入名字">

四、多媒体标签

embed:标签定义嵌入的内容 - 不推荐 需要考虑兼容问题
audio：播放音频
video：播放视频

1.引入视频方式

本地网页一般不存放视频，可以将其上传到优酷，然后在从优酷获取视频链接。

2.声音
属性：

autoplay自动播放
controls是否显示控件(播放、暂停、进度条、音量)
loop循环播放 eg:loop="-1"无效循环，loop=“2”循环2次

兼容处理:

一般提供三种格式: ogg mp3 wav做兼容处理，ogg+mp3能包含大部分浏览器。
<audio controls autoplay>
    <source src="11.mp3" />
    <source src="11.ogg" />
</audio>

3.视频
支持格式：ogg mp4 webm

<video src="11.mp4" autoplay controls width="200"></video>

兼容处理:

<video controls autoplay>
    <source src="11.mp4" />
    <source src="11.ogg" />
    您的浏览器不支持视频播放
</video>

参考资料:
1.W3C手册

展开全文 >>

HTML5-入门基础-黑马视频

2018-05-02

一、浏览器内核

Webkit
Blink
Trident
Gecko

二、Web标准

结构标准 XML+ XHTML
样式标准 CSS
行为标准 JS(DOM + ECMAScript)

三、HTML(Hyper Text Markup Language - 超文本标签语言)
1.标签符号: <…> </…>
2.html骨架格式
demo1

<html lang="en">
	<head>
	  <meta charset="UTF-8">
  	  <title>黑马视频 - Demo1</title>
     <link rel="stylesheet" href="html5-demo1.css">
	</head>
	<body>
	  ...
	  <script src="html5-demo1.js"></script>
	</body>
</html>

解析：	
	1.html标签 - 作用:所有html中标签的一个根标签;
	2.head标签 - 作用:用于存放title,meta,base,style,script,link注意再head标签中必须要设置的标签时title。
	3.title标签 - 作用:让页面拥有一个属于自己的标题;
	4.body标签 - 作用：页面的主体部分，用与存放所有的html标签(p、h、a、b、u、i、s、em、del、ins、strong、img)。

3.标签分类
在HTML页面中,带有“<>”符号的元素被称为HTML标签

双标签： <标签名>标签内容</标签名>
    eg:<body>这是主体标签</body>
单标签： <标签名/>
    eg:<br />   <!--换行-->

4.标签关系

嵌套关系(父子关系) - 缩进一个tab位置
    <head>
        <title>title标签</title>
    </head>
并列关系    
    <head>...</head>
    <body>...</body>

5.开发工具

DW  - dreamweaver
S - Sublime  
WebStorm     
HBuilder
Visual Studio code

6.doctype文档类型

<!DOCTYPE html>在html文档最前面，用于向用户和浏览器说明html的版本

7.字符集
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312.

utf-8包含全世界所有国家需要用到的字符.

8.标签语义化

先确定语义的HTML，在选合适的CSS

9.HTML标签

标题标签:  h1 - h7         
段落标签:  p 段落(paragraph) 默认情况下会根据窗口大小自动换行
水平标签:    hr 横线(horizontal)
换行标签:  br 打断、换行(break)
** div span标签: 没有语义，网页布局用的盒子 division 分割。span跨度，范围
文本格式化标签: (XHTML-HTML5推荐使用前者，语义更强烈,后者只有使用，没有强调的意思)
    <strong>...</strong>或<b>...</b> 粗体
    <em>...</em>或<i>...</i>斜体
    <del>...</del>或<s>...</s>加删除线
    <ins>...</ins>或<u>...</u>加下划线

10.标签属性
语法格式: <标签名属性1=“属性值1” 属性2=“属性值2”>内容</标签名>

可以有多个属性，写在开始标签中，标签名后面；
属性之间不分前后顺序，标签名语属性、属性语属性用空格分开；
任何标签属性都有默认值，省略该属性则取默认值.

11.图像标签
语法格式:<img src=”图像的URL”>

属性	属性值	描述
src	URL	图像路径
alt	文本	图像不能显示时替换文本
title	文本	鼠标悬停时显示文本
width	像素，XHTML不支持页面百分比	设置图像宽度
height	像素，XHTML不支持页面百分比	设置图像高度
border	数字	设置图像边框的宽度

指定宽高的其中一个就行，另一个会根据图片尺寸等比例缩放。

12.链接标签anchor
语法格式: <a href=”跳转目标” target=”目标窗口弹出方式”>文本或图像</a>

href：
    可以是外部链接，需添加http://www.baidu.com；
    可以是内部链接，<a href="index.html">首页</a>；
    如果未确定链接目标，通常将属性标签href属性值定义为"#",表示该链接暂时为一个空链接；
    网页中的各种网页元素(文本、图像、表格、音频、视频等)都可以添加超链接；
target：用于指定链接页面的打开方式，默认self表示在本页面打开新的链接页面，blank值表示在新窗口中打开。

eg：

<a href="http://www.baidu.com" target="blank">百度</a>
target = "_blank"或“target”均可

13.锚点定位
通过定位的方式，可以快速的去向指定地方。
eg：

...
早年经历<br />
<a href="#movie">演绎经历</a><br />
...

<h3 id="movie">演绎经历</h3>

14.base标签 - 单标签
语法格式: 在<head> <base target=”_blank”> </> 可以设置整体链接的打开状态。


<head>
  <meta charset="UTF-8">
  <title>黑马视频 - Demo1</title>
  <link rel="stylesheet" href="html5-demo1.css">
  <base target="_blank">
</head>
<body>

  <a href="http://www.baidu.com" >百度</a>
  <a href="http://www.sina.com" >新浪</a>
  <a href="http://www.163.com" >网易</a>
  
  <script src="html5-demo1.js"></script>
</body>

15.特殊字符
demo2
16.注释标签
语法格式:

<!---这是一个注释--->

17.相对路径
eg:图像文件(logo.gif)和html文件

位于同一文件夹：如<img src=“logo.gif” />;
图像位于html文件的下一级文件夹：如<img src=“img/img01/logo.gif” />;
图像位于html文件的上一级文件夹：如<img src=“../logo.gif” />;
    如果是上两级，则需要使用"../../",一次类推。

18.列表
demo3

无序列表    
    eg:
    <ul>
        <li>香蕉</li>
        <li>苹果</li>
        <li>荔枝</li>
    </ul>
有序列表
    eg:
    <ol>
        <li>打开safari浏览器</li>
        <li>网页地址输入：百度</li>
        <li>键盘键入enter</li>
    </ol>
自定义列表
    eg:
    <dl>
        <dt>名词1</dt>
        <dd>名词1解释1</dd>
        <dd>名词1解释2</dd>
        <dd>名词1解释3</dd>
        <dt>名词2</dt>
        <dd>名词2解释1</dd>
        <dd>名词2解释2</dd>
        <dt>名词3</dt>
        <dd>名词3解释1</dd>
        <dd>名词3解释2</dd>
        <dd>名词3解释3</dd>
    </dl>

参考资料:
1.黑马视频 - 入门基础

展开全文 >>

HTML-表单-自定义表单小组件

2018-04-28

一、设计、结构、语义
1.控件的三个主要状态：正常状态（左侧）; 活动状态（中间）和打开状态（右侧）
custom-select

状态	描述
正常	1.页面加载； 2.控件处于活动状态，但用户点击控件以外的任何位置； 3.控件是活动状态，但用户使用键盘将焦点移动到另一个小部件； ps:在页面上移动焦点通常是按Tab键来完成，但这并不是标准(safari中是Option+Tab)
活动	1.用户点击; 2.用户按下tab让控件重新获得焦点; 3.控件呈现打开状态然后用户点击控件
打开	控件在非打开状态时被用户点击
值改变	1.控件在打开状态下用户点击一个选项； 2.控件在打开状态下用户按下键盘上方向键或者下方向键.

2.自定义控件的选项变化

当控件在打开状态时，选项将被突出显示;
当鼠标悬停在某个选项上时，该选项将被突出显示，并且之前突出显示的选项将返回正常的状态;

3.定义语义话的HTML结构

…

参考资料：
1.HTML表单
2.自定义表单小部件
3.用户可行性测试

展开全文 >>

HTML-表单-表单数据校验

2018-04-27

一、数据校验

显示明确的错误消息。
放宽输入格式。
指出错误发生的位置（特别是在大型表单中）。

1.校验原因

希望以正确的格式获取正确的数据(手机号、邮箱等)；
希望保护用户安全(密码设置规则等)；
希望保护自己(确保不正确、不安全的数据不影响应用)；

2.不同类型的表单数据校验
客户端验证：(用户体验更佳)

表单数据被提交之前，浏览器端验证数据信息是否符合规则：
    JavaScript校验，完全自定义的实现方式；
    HTML5内置的校验，不需要JS，性能更好，但是无法自定义校验过程；

服务器端验证：

浏览器提交数据并被服务器端程序接受之后，将数据写入数据库之前的阶段校验数据；
    如果数据有误，服务器端返回错误信息(发送错误的位置和原因)；
    如果数据正确，将数据持久化至数据库；

二、内置表单数据验证
HTML5新功能：通过表单元素的校验属性实现：

当元素通过校验时：
    该元素将可以通过CSS伪类:valid进行特殊的样式化；
    用户尝试提交表单，没有其他控制来阻止该操作；
当元素未通过校验:
    该元素将可以通过 CSS 伪类 :invalid 进行列表的样式化；
    如果用户尝试提交表单，浏览器会展示出错误消息，并停止表单的提交;

1.input元素的验证约束 - required属性

<div>
	<form >
	    <label for="name">Would you prefer a banana or cherry？</label>
	    <!--required属性，必须填写否则显示错误信息-->
	    <input type="text" id="name" placeholder="请选择你喜欢的水果" required>
	    <button type="submit">Submit</button>
	</form>
</div>

<!--无效的样式-->
input:invalid {
  border: 2px dashed red;
}
<!--有效的样式-->
input:valid {
  border: 2px solid black;
}

required1 required2
2.input元素的验证约束 - pattern属性（正则表达式）
正则表达式的工作原理:

a — 匹配一个字符a(不能匹配 b,  aa等等.)
abc — 匹配 a, 其次 b, 最后 by c.
a* — 匹配字符 a, 0个或者多个 (+ 代表至少匹配一个或者多个).
[^a] — 匹配一个字符，但它不能是a.
a|b — 匹配一个字符 a 或者 b.
[abc] — 匹配一个字符，它可以是a,b或c.
[^abc] — 匹配一个字符，但它不可以是a,b或c.
[a-z] — 匹配字符范围 a-z且全部小写  (你可以使用 [A-z] 涵盖大小写, 或 [A-Z] 来限制必须大写).
a.c — 匹配字符 a,中间匹配任意一个字符,最后匹配字符 c.
a{5} — 匹配字符 a五次.
a{5,7} — 匹配字符 a五到七次,不能多或者少.

表达式中使用数字和其他字符:
[ |-] — 匹配一个空格或者虚线.
[0-9] — 匹配数字范围0~9.

任意指定不同部分:
[Ll].*k — 匹配一个大写L或者小写的l, 之后匹配一个或多个任意类型的字符, 最后匹配一个小写字母 k.
[A-Z][A-z|-|']+ — 一个大写字母后面跟着匹配一个大小写字母或者中划线或者撇号. 这个可以用于校验英语会话中城市或城镇名, 但这需要首字母以大写开头,不包括其他字符(你可以添加额外的表达式来做到).
[0-9]{3}[ |-][0-9]{3}[ |-][0-9]{4} — 简单的匹配一个美国内的电话号码 — 三个数字 0-9, 后面跟着一个空格或者中划线, 之后匹配三个数字 0-9, 再跟着一个空格或者中划线, 最后跟着四个数字 0-9. 但实际情况可能更加复杂,因为有些人会给号码加上括号什么的,这里的表达式只是用来做一个简单的演示.

<form >
    <label for="name">Would you prefer a banana or cherry？</label>
    <input type="text" id="name" placeholder="请选择你喜欢的水果" required pattern="banana|cherry">
    <button type="submit">Submit</button>
</form>

有些input元素不需要pattern属性进行验证，如：

指定input的type=email就在使用匹配邮件格式的正则表达式去验证；
指定input的type=url
指定input的type=email multiple 验证输入中是否有“,”

textarea元素不支持pattern属性。

3.input元素的验证约束 - 强制条目长度
所有文本框 (<input> 或 <textarea>) 可以强制使用minlength 和 maxlength 属性. 如果值小于该字段 minlength 的值或大于 maxlength 值则无效. 浏览器通常不会组织用户在文本字段中输入比预期更长的值，但是可以使用这种细粒度的控件来强制。

在数字条目中 (i.e. <input type=”number”>), 该 min 和 max 属性也能强制验证长度. 如何条目中的长度小于min 属性提供的值或大于 max 属性的值,该条目则无效.

<div>
    <form >
      <div>
        <label for="name">Would you prefer a banana or cherry？</label>
        <!-- pattern="banana|cherry" -->
        <input type="text" id="name" placeholder="请选择你喜欢的水果" required minlength="1" maxlength="6">
       </div>
       <div>
         <label for="name">How many would you like?</label>
         <!-- 也可以设置step属性 -->
         <input type="number" id="number" name="amount" value="1" min="1" max="10">
       </div>
       <button type="submit">Submit</button>
    </form>
</div>

4.自定义错误信息

<div>
  <span>完整例子</span>
  <form >
    <p>
      <fieldset>
        <legend>Title <abbr title="This field is mandatory">*</abbr></legend>
        <input type="radio" name="title" id="r1" value="Mr" required><label for="r1">Mr.</label>
        <input type="radio" name="title" id="r2" value="Ms" required><label for="r2">Ms.</label>
      </fieldset>
    </p>
    <p>
      <label for="n1">How old are you?</label>
      <input type="number" name="age" id="n1" max="120" min="12" step="1" pattern="\d+">
    </p>
    <p>
      <label for="t1">What's your favite fruit? <abbr title="This field is mandatory">*</abbr></label>
      <input type="text" id="t1" name="fruit" list="l1" required pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
      <datalist id="l1">
        <option >Banana</option>
        <option >Cherry</option>
        <option >Apple</option>
        <option >Strawberry</option>
        <option >Lemon</option>
        <option >Orange</option>
      </datalist>
    </p>
    <p>
      <label for="t2">What's your email?</label>
      <input type="email" name="email" id="t2">
    </p>
    <p>
      <label for="t3">Leave a short message</label>
      <textarea name="msg" id="t3" maxlength="140" rows="5"></textarea>
    </p>
    <p>
      <button>Submit</button>
    </p>
  </form>
</div>

body {
  font: 1em sans-serif;
  padding: 0;
  margin : 0;
}

form {
  max-width: 200px;
  margin: 0;
  padding: 0 5px;
}

p > label {
  display: block;
}

input[type=text],
input[type=email],
input[type=number],
textarea,
fieldset {
/* required to properly style form 
   elements on WebKit based browsers */
  -webkit-appearance: none;
  
  width : 100%;
  border: 1px solid #333;
  margin: 0;
  
  font-family: inherit;
  font-size: 90%;
  
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
<!--无效的输入-->
input:invalid {
  box-shadow: 0 0 5px 1px red;
}
<!--有效的输入-->
input:focus:invalid {
  outline: none;
}

三、JS校验表单
想控制原生错误信息的外观和感觉，或不想处理不支持HTML内置表单验证的浏览器，必须使用JS。
1.HTML5用于校验约束的API
用于校验的API及属性

属性	描述
validationMessage	一个本地化消息，描述元素不满足验证条件时（如果有的话）的文本信息。如果元素无需验证（willValidate 为 false），或元素的值满足验证条件时，为空字符串。
validity	一个 ValidityState 对象，描述元素的验证状态。
validity.customError	如果元素设置了自定义错误，返回 true ；否则返回false。
validity.patternMismatch	如果元素的值不匹配所设置的正则表达式，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.rangeOverflow	如果元素的值高于所设置的最大值，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.rangeUnderflow	如果元素的值低于所设置的最小值，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.stepMismatch	如果元素的值不符合 step 属性的规则，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.tooLong	如果元素的值超过所设置的最大长度，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.typeMismatch	如果元素的值出现语法错误，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.valid	如果元素的值不存在验证问题，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :valid CSS 伪类，否则命中 :invalid CSS 伪类。
validity.valueMissing	如果元素设置了 required 属性且值为空，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
willValidate	如果元素在表单提交时将被验证，返回 true，否则返回 false。

校验约束API的方法

方法	描述
checkValidity()	如果元素的值不存在验证问题，返回 true，否则返回 false。如果元素验证失败，此方法会触发invalid 事件。
setCustomValidity(message)	为元素添加一个自定义的错误消息；如果设置了自定义错误消息，则该元素被认为是无效的，并显示指定的错误。这允许你使用 JavaScript 代码来建立验证失败，而不是用标准约束验证 API 所提供的。在报告问题时，将向用户显示自定义消息。如果参数为空，则清空自定义错误

2.例子

<div>
  <span>使用校验约束API例子</span>
  <!--使用 novalidate 属性关闭浏览器的自动验证；这允许我们使用脚本控制表单验证。这并不禁止支持约束验证 API 的应用和以下 CSS 伪类：:valid、:invalid、:in-range 、:out-of-range 。这意味着，即使浏览器在发送数据之前没有自动检查表单的有效性，您仍然可以自己做，并相应地设置表单的样式。-->
  <form novalidate>
    <p>
      <label for="mail">
        <span>Please enter an email address:</span>
        <input type="email" name="mail" id="mail">
        <!--aria-live 属性确保我们的自定义错误信息将呈现给所有人，包括使用屏幕阅读器等辅助技术的人。-->
        <span class="error" aria-live="polite"></span>
      </label>
    </p>
    <button type="submit">Submit</button>
  </form>
</div>

/* 仅为了使示例更好看 */
body {
  font: 1em sans-serif;
  padding: 0;
  margin : 0;
}

form {
  max-width: 200px;
}

p * {
  display: block;
}

input[type=email]{
  -webkit-appearance: none;

  width: 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* 验证失败的元素样式 */
input:invalid{
  border-color: #900;
  background-color: #FDD;
}

input:focus:invalid {
  outline: none;
}

/* 错误消息的样式 */
.error {
  width  : 100%;
  padding: 0;
 
  font-size: 80%;
  color: white;
  background-color: #900;
  border-radius: 0 0 5px 5px;
 
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.error.active {
  padding: 0.3em;
}

// 有许多方式可以获取 DOM 节点；在此我们获取表单本身和
// email 输入框，以及我们将放置错误信息的 span 元素。

var form  = document.getElementsByTagName('form')[0];
var email = document.getElementById('mail');
var error = document.querySelector('.error');

email.addEventListener("input", function (event) {
  // 当用户输入信息时，验证 email 字段
  if (email.validity.valid) {
    // 如果验证通过，清除已显示的错误消息
    error.innerHTML = ""; // 重置消息的内容
    error.className = "error"; // 重置消息的显示状态
  }
}, false);
form.addEventListener("submit", function (event) {
  // 当用户提交表单时，验证 email 字段
  if (!email.validity.valid) {
    
    // 如果验证失败，显示一个自定义错误
    error.innerHTML = "I expect an e-mail, darling!";
    error.className = "error active";
    // 还需要阻止表单提交事件，以取消数据传送
    event.preventDefault();
  }
}, false);

3.不使用内建API时的表单验证

怎样验证表单？
验证失败怎么处理？
如何帮助用户纠正无效数据？

eg:

<form>
  <p>
    <label for="mail">
        <span>Please enter an email address:</span>
        <input type="text" class="mail" id="mail" name="mail">
        <span class="error" aria-live="polite"></span>
    </label>
  <p>
  <!-- Some legacy browsers need to have the `type` attribute
       explicitly set to `submit` on the `button`element -->
  <button type="submit">Submit</button>
</form>

//将 :invalid 伪类变成真实的类，并避免使用不适用于 Internet Explorer 6 的属性选择器
/* 仅为了使示例更好看 */
body {
  font: 1em sans-serif;
  padding: 0;
  margin : 0;
}

form {
  max-width: 200px;
}

p * {
  display: block;
}

input.mail {
  -webkit-appearance: none;

  width: 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* 验证失败的元素样式 */
input.invalid{
  border-color: #900;
  background-color: #FDD;
}

input:focus.invalid {
  outline: none;
}

/* 错误消息的样式 */
.error {
  width  : 100%;
  padding: 0;
 
  font-size: 80%;
  color: white;
  background-color: #900;
  border-radius: 0 0 5px 5px;
 
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.error.active {
  padding: 0.3em;
}

// 使用旧版浏览器选择 DOM 节点的方法较少
var form  = document.getElementsByTagName('form')[0];
var email = document.getElementById('mail');

// 以下是在 DOM 中访问下一个兄弟元素的技巧
// 这比较危险，很容易引起无限循环
// 在现代浏览器中，应该使用 element.nextElementSibling
var error = email;
while ((error = error.nextSibling).nodeType != 1);

// 按照 HTML5 规范
var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

// 许多旧版浏览器不支持 addEventListener 方法
// 这只是其中一种简单的处理方法
function addEvent(element, event, callback) {
  var previousEventCallBack = element["on"+event];
  element["on"+event] = function (e) {
    var output = callback(e);
    
    // 返回 `false` 来停止回调链，并中断事件的执行
    if (output === false) return false;

    if (typeof previousEventCallBack === 'function') {
      output = previousEventCallBack(e);
      if(output === false) return false;
    }
  }
};

// 现在我们可以重构字段的验证约束了
// 由于不使用 CSS 伪类, 我们必须明确地设置 valid 或 invalid 类到 email 字段上
addEvent(window, "load", function () {
  // 在这里验证字段是否为空（请记住，该字段不是必需的）
  // 如果非空，检查它的内容格式是不是合格的 e-mail 地址
  var test = email.value.length === 0 || emailRegExp.test(email.value);
 
  email.className = test ? "valid" : "invalid";
});

// 处理用户输入事件
addEvent(email, "input", function () {
  var test = email.value.length === 0 || emailRegExp.test(email.value);
  if (test) {
    email.className = "valid";
    error.innerHTML = "";
    error.className = "error";
  } else {
    email.className = "invalid";
  }
});

// 处理表单提交事件
addEvent(form, "submit", function () {
  var test = email.value.length === 0 || emailRegExp.test(email.value);
 
  if (!test) {
    email.className = "invalid";
    error.innerHTML = "I expect an e-mail, darling!";
    error.className = "error active";

    // 某些旧版浏览器不支持 event.preventDefault() 方法
    return false;
  } else {
    email.className = "valid";
    error.innerHTML = "";
    error.className = "error";
  }
});

许多库可用于执行表单验证:

独立的库（原生JS实现）Validate.js
jQuery插件（Validation、Valid8）

4.远程校验
当用户输入的数据与存储在应用程序服务器端的附加数据绑定时，这种验证是必要的。

eg:

一个用例就是注册表单，在这里你需要一个用户名。 为了避免重复，执行一个 AJAX 请求来检查用户名的可用性，而不是要求用户发送数据，然后发送带有错误的表单。

执行这样的验证需要采取一些预防措施：

它要求公开 API 和一些数据；您需要确保它不是敏感数据。
网络滞后需要执行异步验证。这需要一些用户界面的工作，以确保如果验证不正确执行，用户不会被阻止。

参考资料：
1.表单数据校验
2.表单

展开全文 >>

HTML-表单-表单数据发送

2018-04-27

一、数据去向
1.客户端和服务端体系结构
client-server
客户端(通常是web浏览器)向服务器(大多数情况下事Apache、Nginx、IIS、Tomcat等web服务器)发送请求,使用HTTP协议,服务器使用相同的协议来回答请求。
在客户端，HTML表单是一种方便的用户友好方式,可以配置HTTP请求将数据发送到服务器，使用户能够在HTTP请求中传递信息。
2.在客户端定义如何发送数据
<form>元素定义了如何发送数据,它所有属性都是为了配置当用户点击提交按钮时发送的请求:

2.1属性action:定义发送数据位置,它必须是一个有效的URL。如果没有提供此属性，数据将被发送到包含表单的页面的URL。

eg1:数据被发送到一个绝对的URL：http://foo.com
    <form action = 'http://foo.com'>
eg2:数据被发送到服务器上不同的URL
    <form action = '/somewhere_else'>
eg3:没有属性，数据被发送到表单出现的相同页面上
    <form >
eg4:较老的页面，数据被发送到包含表单的相同页面
    <form action = '#'>

可以指定HTTPS协议的URL，数据将与请求的其余部分一起加密(即使表单本身是托管在使用HTTP访问的不安全页面上)，如果表单托管在安全页面上，但指定了一个不安全的HTTP URL,带有action属性，所有浏览器都会在每次尝试发送数据时向用户显示一个安全警告,因为数据不会被加密。

2.2属性method:定义发送数据的方式，常用的GET和POST

HTTP工作原理:每当访问Web上资源时，浏览器都会向URL发送一个请求。HTTP请求包含2部分：一个包含关于浏览器功能的全局数据集的数据头，一个包含服务器处理特定请求所需信息的主体。

GET方法：请求服务器返回给定的资源。浏览器发送一个空的主体，如果使用GET方法发送一个表单，那么发送到服务器的数据将被追加到URL。

//HTML
<form action="http://foo.com" method="get">
    <div>
      <label for="say">What greeting do you want to say?</label>
      <input name="say" id="say" value="Hi">
    </div>
    <div>
      <label for="to">Who do you want to say it to?</label>
      <input name="to" value="Mom">
    </div>
    <div>
      <button>Send my greetings</button>
    </div>
</form>
解析:	
	点击按钮提交表单时，在浏览器地址栏中，地址为:www.foo.com/?say=Hi&to=Mom;
	数据被附加到URL作为一系列的名称/值对(name/value);
	URL Web地址结束之后： /?name1=value1&name2=value2 的方式组合
		GET	:/?say=Hi&to=Mon  HTTP/1.1
		Host: foo.com
```		
POST方法：浏览器在请求响应时，需要考虑到HTTP请求体中提供的数据，使用POST方法发送表单，则将数据追加到HTTP请求的主体中。

```html
<span>POST方法
	<form action="http://foo.com" method="post">
		<div>
  			<label for="say">What greeting do you want to say?</label>
  			<input name="say" id="say" value="Hi">
		</div>
		<div>
			 <label for="to">Who do you want to say it to?</label>
			 <input name="to" value="Mom">
		</div>
		<div>
 			 <button>Send my greetings</button>
		</div>
	</form>
</span>
解析:	
	当使用POST方法提交表单时，将没有附加到URL的数据，请求主体中包含的数据：
		POST / HTTP/1.1
		Host: foo.com
		Content-Type:application/x-www-form-urlencoded
		Content-Length:13
		say=Hi&to=Mon
	Content-Length数据头表示主体的大小，Content-Type数据头表示发送到服务器的资源类型。

getpost

使用GET请求用户将在它们的URL栏中看到数据，使用POST请求用户将不会看到：

如果需要发送一个密码(或其他敏感数据),永远不要使用GET方法否则数据会在URL栏中显示，非常不安全;
如果需要发送大量的数据，POST方法是首选，因为一些浏览器限制了URL的大小，许多服务器限制了接受的URL长度.

3.在服务器端：检索数据
无论选择哪种HTTP方法，服务器都会接收一个字符串并解析它以获取作为键/值对序列的数据。您访问这个序列的方式取决于您使用的开发平台以及您可能使用的任何特定框架。您使用的技术也决定了如何处理密钥副本；通常，最近收到的密钥的值是优先的。

eg1:原始PHP

eg2:Python

eg3:其他语言和框架
其他语言:

Perl
Java
.Net
Ruby

框架：

PHP的Symfony
Python的Django（比Flask要重一些，但是有更多的工具和选项。）
Node.js的Express
Ruby的Ruby On Rails
Java的Grails
...

二、特殊案例:发送文件
用HTML发送文件是一个特殊的例子。文件是二进制数据(或者被认为是这样)，而所有其他数据都是文本数据。由于HTTP是一种文本协议，所以处理二进制数据由特殊的要求。

enctype属性：允许指定在提交表单时所生成的请求在Content-Type的HTTP数据头的值(非常重要)，这个数据告诉服务器正在发送什么数据,默认情况下，值为:application/x-www-form-urlencoded(意思是:这是已编码为URL参数的表单数据)。

发送文件的三个额外步骤:

将method属性设置为POST，因为文件内容不能放入URL参数中。
将enctype的值设置为multipart/form-data，因为数据将被分成多个部分，每个文件分别对应一个文件以及表单正文中包含的文本数据(如果文本也输入到表单中)。
包含一个或多个File picker小部件，允许用户选择将要上传的文件。

<span>上传文件
    <form method="post" enctype="multipart/form-data">
      <div>
        <label for="file">Choose a file</label>
        <input type="file" id="file" name="myFile">
      </div>
      <div>
        <button>Send the file</button>
      </div>
    </form>
</span>

许多服务器配置了文件和HTTP请求的大小限制，发送文件之前，请检查服务器管理员权限。
三、常见的安全问题

HTML表单是最常见的攻击媒介，因此每次向服务器发送数据时，都需要考虑安全性。
1.脚本注入攻击：当你将用户发送的数据显示给用户或另一个用户时，攻击可能在此时发生.

XSS:跨站脚本,将客户端脚本注入到其他用户查看的Web页面中。攻击者可以使用跨站点脚本攻击的漏洞来绕过诸如同源策略之类的访问控制;
    利用用户对web站点的信任;
CSRF:跨站点请求伪造,试图将特权升级到特权用户(比如站点管理员)的权限，以执行他们不应该执行的操作(例如，将数据发送给一个不受信任的用户);
    利用网站为其用户提供的信任;

防范：始终检查用户发送给服务器的数据(如果需要显示)，尽量不要显示用户提供的HTML内容。
      应该处理用户提供的数据，不要逐字地显示它。
      当今市场上几乎所有的框架都实现了一个最小的过滤器，它可以从任何用户发送的数据中删除HTML<script>、<iframe> 和<object> 元素。
      这有助于降低风险，但并不一定会消除风险。

2.SQL注入

一种试图在目标web站点使用的数据库上执行操作的攻击类型；
当服务器存储由用户发送数据时,发生攻击，它可以导致数据丢失，甚至使用特权升级控制整个网络基础设施的攻击;
防范：永远不应该存储用户发送的数据而不执行一些清理工作(PHP/mysql基础设施上使用mysql_real_escape_string()).

3.HTTP数据头注入和电子邮件注入

一种在应用程序基于表单上用户数据的输入构建HTTP头部或电子邮件时出现此类攻击；
会话劫持或者网络钓鱼攻击；

4.偏执：永远不要相信你的用户
所有到达服务器的数据都必须经过检查和消毒：

有潜在危险的字符转义。应该如何谨慎使用的特定字符取决于所使用的数据的上下文和所使用的服务器平台，但是所有的服务器端语言都有相应的功能。
限制输入的数据量，只允许有必要的数据。
沙箱上传文件(将它们存储在不同的服务器上，只允许通过不同的子域访问文件，或者通过完全不同的域名访问文件更好)。

参考资料：
1.表单
2.发送表单数据
3.服务器端网站编程的第一个步骤
服务器框架
4.PHP的Symfony
5.Python的Django
6.Flask
7.Node.js的Express
8.Ruby的Ruby On Rails
9.Java的Grails
10.File_picker
11.服务器端安全

展开全文 >>

HTML-表单-原生表单小部件

2018-04-26

原生表单部件(组件) - 浏览器内置表单
一、通用属性

属性名称	默认值	描述
autofocus	false	允许您指定当页面加载时元素应该自动具有输入焦点，除非用户覆盖它，例如通过键入不同的控件。文档中只有一个与表单相关的元素可以指定这个属性
disabled	false	默认表示用户不能与元素交互。如果没有指定这个属性，元素将从包含的元素继承它的设置，例如<fieldset>;如果没有包含disabled属性集的元素，那么就启用了元素
form		小部件与之相关联的表单元素。属性值必需是同个文档中的<form> 属性的 id属性。理论上，它允许您在<form>元素之外设置一个表单小部件。然而，在实践中，没有任何支持该特性的浏览器。
name		元素的名称,用于表单数据提交的
value		元素的初始值

二、文本输入域 - <input>
1.HTML表单文本字段是简单的纯文本输入控件。不能使用它们执行富文本编辑(粗体、斜体等)。将遇到的所有富文本编辑器（rich text editors）都有使用HTML、CSS和JavaScript创建的自定义小部件。
2.通用规范：

可以被标记为readonly,甚至disabled(输入值永远不会与表单数据的其余部分一起发送);
可以有一个placeholder,用来简述输入框的目的;
可以被限制在size(框的物理尺寸)和长度(输入的最大字符数)；
可以从拼写检查中获益(浏览器支持才行)。

3.单行文本域 - <input>
元素可以是任何东西，通过简单的设置type属性，可以用于创建大多数类型的表单小部件(单行文本字段、没有文本输入的控件、时间和日期控件、按钮),多行输入时用<textarea>元素.

//HTML
<h1>原生小部件</h1>
<div>
  <!-- 单行文本域： 设置type = text即可默认也是text -->
  <label for="name">姓名:</label>
  <input type="text" id="name" placeholder="请输入姓名">
</div>
<div>
  <!-- 地址域：用户必须在域中输入有效的邮箱地址，否则浏览器提交表单会报错, multiple属性可以让用户输入多个邮箱，以“,”分开 -->
  <label for="email">邮箱:</label>
  <input type="email" id="email" placeholder="请输入邮箱">
    
  <label for="emails">多个邮箱:</label>
  <input type="email" id="emails" placeholder="请输入邮箱(支持多个)" multiple>
</div>
<div>
  <!-- 密码域：用户看到的是密文，但是提交表单数据的仍是以明文发送的，为了安全需要加密之类的处理提交数据 -->
  <label for="password">密码:</label>
  <input type="password" name="pwd" id="password" placeholder="请输入密码">
</div>
<div>
  <!-- 搜索域：文本域和搜索域主要区别是浏览器的样式，搜索字段以圆角和/或给定的一个“x”来清除输入的值，其值可以自动保存到同一站点的多个页面上自动完成 -->
  <label for="search">搜索:</label>
  <input type="search" name="sea" id="search">
</div>
<div>
  <!-- 电话号码域:不会限制用户输入的内容(字母等都可以) -->
  <label for="tel">电话:</label>
  <input type="tel" name="telphone" id="tel">
</div>
<div>
  <!-- URL域：为输入的字段添加了特殊的验证约束，若输入无效的url，浏览器会报错 -->
  <label for="url">URL:</label>
  <input type="url" name="urlname" id="url">
</div>
<div>
  <!--日期域： 浏览器不支持原生日期选择器 -->
  <label for="today">日期:</label>
  <input type="date" name="date" id="today">
</div>

<div>
  <!-- 按钮域 -->
  <label for="button"></label>
  <input type="button" value="input的按钮">
</div>
<div>
  <!-- 多行文本域：见下文->
  <label for="morerow">多行输入:</label>
  <textarea name="text" id="morerow" cols="30" rows="10"></textarea>
</div>

element
4.多行文本域 - <textarea>
和单行的区别:

<input>    :元素是一个空元素，不能包含任何子元素；
              定义一个默认值时，必须用value属性；

<textarea> :元素是一个常规元素，可以包含文本内容的子元素；
                 允许用户输入包含硬换行符(即按回车)的文本；
                 定义一个默认值，只需将默认文本放在 <textarea ...>默认文本</textarea>；
                 只接受文本内容，即是任何HTML内容放入<textarea>中都将以纯文本内容呈现。

属性：

cols：文本控件的可见宽度，平均字符宽度 默认20
rows：控制的可见文本行数
wrap：表示控件是如何包装文本的 默认soft  可切换 hard | soft

tips:右下角有个调整大小的区域，需要在CSS中设置resize = none来关闭(chorme的浏览器不需要设置)
三、下拉窗口小部件
1.HTML有两类下拉内容:select box和autocomplete box，它们交互是相同的，一旦控件被激活，浏览器会显示用户可以选择的值列表。
2.选择框

<h2>下拉窗口小部件</h2>

<!-- 如果在option中设置了value属性，当提交表单的时候，该属性的值就会被发送，若忽略value值，则使用option元素的内容作为选择框的值 -->
<div>
  <label for="simple">单项选择框:</label>
  <!-- 选择框：通过select元素创建，包含一个或多个option子元素，设置子元素的selected 可以将其设置为默认选项 -->
  <select name="simple" id="simple">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option value="hello">Lemon</option>
  </select>
</div>

<div>
    <label for="groups">分组单选框:</label>
    <!-- 分组:将option元素嵌套在optgroup元素中，嵌套在select元素中; optgroup的label属性显示在值前，它不可选-->
    <select name="groups" id="groups">
      <optgroup label="Fruits">
        <option>Banana</option>
        <option value="2" selected>Cherry</option>
        <option value="3">Lemon</option>
      </optgroup>
      <optgroup label="Vegetables">
        <option value="1">Carrot</option>
        <option value="2">Egglant</option>
        <option value="3">Potato</option>
      </optgroup>

    </select>
</div>

<div>
  <label for="mutiple">多选选择框:</label>
  <!-- 多选选择框:在select元素上加上multiple属性即可，允许设置多个默认值，cmd|ctrl +鼠标 选择多个值 -->
  <select name="multi" id="muti" multiple>
    <option value="1" selected>Banana</option>
    <option value="2" selected>Cherry</option>
    <option value="3">Lemon</option>

  </select>
</div>

selected1 selected2
3.自动补全输入框

<div>
  <label for="name">自动补全输入框:</label>
  <!-- 自动补全输入框:使用datalist元素来为表达小部件提供建议、自动完成的值，并使用option子元素来指定要显示的值，
  使用list属性将数据列表绑定到一个文本域-input，绑定完成，选项用于自动完成用户输入的文本，并以下拉向用户展示，在输入框输入可匹配的内容。 -->
  <label for="myFruit">What's your faavorite fruit?</label>
  <input type="text" name="myFruit" id="myFruit" list="mySuggestion">
  <datalist id="mySuggestion">
    <option value="1">Apple</option>
    <option >Banana</option>
    <option >BlackBerry</option>
    <option value="2">Lemon</option>
    <option value="3">Lychee</option>
    <option value="4">Peach</option>
    <option value="5">Pear</option>
    
  </datalist>
</div>

auto1
tips:

根据HTML规范，list 属性和<datalist>元素元素可以用于任何需要用户输入的小部件;
但是，除了文本(例如颜色或日期)，它应该如何工作还不清楚，不同的浏览器在不同的情况下会有不同的表现。正因为如此，除了文本字段以外，要小心使用这个特性。

数据列表支持和兼容

<datalist>元素是HTML表单的最新补充，它在10以下的IE版本中不受支持，Safari在写作时仍然不支持它。

兼容

支持<datalist>元素的浏览器将忽略所有不是<option>元素的元素，并按照预期工作。
不支持<datalist>元素的浏览器将显示标签和选择框。
还有其他方法可以处理<datalist> 元素的不足，但这是最简单的(其他方法往往需要JavaScript)

<div>
  <label for="all">数据列表浏览器版本兼容:</label>
  <label for="mtFruit">What's is your favorite fruit?(With fallback)</label>
  <input type="text" name="fruit" id="myFruit" list="fruitlist">
  <datalist id="fruitlist">
    <label for="suggestion">or pick a fruit</label>
    <select name="altFruit" id="suggestion">
        <option >Apple</option>
        <option >Banana</option>
        <option >BlackBerry</option>
        <option >Lemon</option>
        <option >Lychee</option>
        <option >Peach</option>
        <option >Pear</option>
    </select>
  </datalist>
</div>

四、可选中项
可选中项是状态可以通过单击它们来改变小部件，包含:复选框和单选按钮，使用checked属性，表示是否在默认情况下进行检查。在发送表单数据时，只有勾选的内容的值才被发送。
1.复选框

<div>
  <label for="checkbox">复选框</label>
  <input type="checkbox" name="carrots" id="carrots" checked value="carrots">
</div>

2.单选按钮

<div>
  <label for="radio">单选按钮</label>
  <input type="radio" name="meal" id="soup" checked>
</div>

3.eg:

<div>
  <label for="name">复选框和单选框</label>
  <fieldset>
    <legend>What is your favorite meal?</legend>
    <ul>
      <li>
        <label for="soup">Soup</label>
        <input type="radio" checked id="soup" name="meal" value="soup">;
      </li>
      <li>
        <label for="curry">Curry</label>
        <input type="radio" id="curry" name="meal" value="curry">
      </li>
      <li>
        <label for="pizza">Pizza</label>
        <input type="radio" name="meal" id="pizza" value="pizza">
      </li>
    </ul>
  </fieldset>
</div>

radio
五、按钮
1.在HTML表单中，有三种按钮:

Submit:将表单数据发送到服务器;
Reset:将所有表单小部件重新设置为它们的默认值;
Anonymous:没有自动生效的按钮，但是可以使用JS代码定制，如果省略type属性，那么就是默认值;

2.使用<button>元素或者<input>元素创建一个按钮，type属性的值指定显示什么类型的按钮。

<h2>按钮</h2>
<div>
  <button type="submit">This a <br><strong>submit button</strong></button>
  <input type="submit" value="This is input creat button">
</div>

<div>
  <button type="reset">This a <br> <strong>reset button</strong></button>
  <input type="reset" value="This is input creat button">
</div>

<div>

  <button type="button">This an <br><strong>anonymous button</strong></button>
  <input type="button" value="This is input creat button">
</div>
```	
![button](button.png)		
button和input的区别:
	
	<button>元素允许您在它们的标签中使用HTML内容，这些内容被插入到打开和关闭<button> 标签中。另一方面，<input>元素是空元素;它们的标签被插入到value属性中，因此只接受纯文本内容;
	使用<button>元素，可以有一个不同于按钮标签的值(通过将其设置为value属性)。这在IE 8之前的版本中是不可靠的;
	从技术上讲，使用<button>元素或<input>元素定义的按钮几乎没有区别。唯一值得注意的区别是按钮本身的标签。在<input>元素中，标签只能是字符数据，而在<button>元素中，标签可以是HTML，因此可以相应地进行样式化.
六、高级表单部件		
1.数字		
	
	input type = number 这是一个只允许浮点数的输入框，
	并通过提供一些按钮来增加或减小小部件的值
    设置min和max 属性来约束值，设置step属性来指定增加和减少按钮更改小部件的值的数量。
	IE10一下不支持number输入.
	  
```html
<div>
    <label for="name">数字:</label>
    <input type="number" name="age" id="age" min="1" max="100" step="2">
</div>

2.滑块

使用滑块。从视觉上讲，滑块比文本字段更不准确，因此它们被用来选择一个确切值并不重要的数字;
input type = range 正确配置滑块是很重要的；强烈建议您设置min、max和step属性;
不提供任何形式的视觉反馈，以了解当前的值是什么。需要使用JavaScript来添加这一点

<div>
  <label for="name">滑块:</label>
  <input type="range" name="beans" id="beans" min="0" max="50" step="10">
  <span class="beancount"></span>
</div>

var beans = document.querySelector('#beans');
var count = document.querySelector('.beancount');
count.textContent = beans.value;

beans.oninput = function() {
  count.textContent = beans.value;
}

3.日期时间选择器

所有日期和时间控制都可以使用min和max属性来约束；
警告——日期和时间窗口小部件仍然很不受支持。目前，Chrome、Edge和Opera都支持它们，但IE浏览器没有支持，Firefox和Safari对这些都没有太大的支持。

<div>
  <label for="name">日期 - 本地时间:</label>
  <input type="datetime-local" name="datetime" id="datetime">

</div>

<div>
    <label for="name">日期 - 月:</label>
    <input type="month" name="month" id="month">
</div>
<div>
    <label for="name">日期 - 时间:</label>
    <input type="time" name="time" id="time">
  
</div>

<div>
    <label for="name">日期 - 星期:</label>
    <input type="week" name="week" id="week">

</div>
<div>
    <label for="myDate">When are you available this summer?</label>
    <input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">
</div>
```	
![date](date.png)		
4.拾色器		
input type = color RGB值(十进制或十六进制)、HSL值、关键字等等, 颜色小部件允许用户在文本和可视的方式中选择颜色.

```html
<div>
  <label for="name">拾色器:</label>
  <input type="color" name="color" id="color">
</div>

颜色小部件支持它目前不是很好。IE中没有支持，Safari目前也不支持它。其他主要的浏览器都支持它.
七、其他小部件
1.文件选择器
input type = file accept属性约束被接受文件类型，添加multiple属性来实现选择多文件.

<div>
  <label for="file">文件选择器:</label>
  <input type="file" name="file" id="file" accept="pdf" multiple>
</div>
```	
2.隐藏内容		
input type = hidden用户不可见表单数据

```html
<div>
  <label for="name">隐藏内容:</label>
  <input type="hidden" name="timestamp" id="timestamp" value="1231941431123">
</div>

4.图像按钮
input type = image 图像按钮控件是一个与<img>元素完全相同的元素，除了当用户点击它时，它的行为就像一个提交按钮.

如果使用图像按钮来提交表单，这个小部件不会提交它的值；相反，在图像上单击的X和Y坐标是被提交的(坐标是相对于图像的，这意味着图像的左上角表示坐标0，0)，坐标被发送为两个键/值对：
    X值键是name属性的值，后面是字符串“.x”。
    Y值键是name属性的值，后面是字符串“.y”。

<div>
  <label for="name">图像按钮:</label>
  <input type="image" src="111.png" alt="Click me!" width="80" height="30">
</div>

5.仪表和进度条
仪表和进度条是数值的可视化表示。

仪表：meter(不支持元素的浏览器回退，辅助技术对其发声)元素创建，表示一个固定值，值由min和max决定，并以条形的方式显示。
     low 和 high 值范围划分为三个部分：
        该范围的较低部分是在min和low值(包括那些值)之间。
        该范围的中间部分是在low和high值之间(不包括那些值)。
        该范围的较高部分是在high和max值(包括那些值)之间。
    optimum值定义了<meter>元素的最优值。在与optimum和high值的联合中，它定义了该范围的哪个部分是优先的：
        如果optimum)值在较低的范围内，则较低的范围被认为是首选项，中等范围被认为是平均值，而较高的范围被认为是最坏的部分。
        如果optimum值在该范围的中等部分，则较低的范围被认为是一个平均值，中等范围被认为是优先的部分，而较高的范围也被认为是平均值。
        如果optimum值在较高的范围内，则较低的范围被认为是最坏的部分，中等范围被认为是一般的部分，较高的范围被认为是优先的部分。
所有实现<meter>元素的浏览器都使用这些值来改变米尺的颜色。

    如果当前值位于该范围的优先部分，则该条是绿色的。
    如果当前值位于该范围的平均部分，则该条是黄色的。
    如果当前值处于最糟糕的范围，则该条是红色的。

进度条： progress(不支持元素的浏览器回退，辅助技术对其发声)元素创建，一个进度条表示一个值(它会随时间的变化而变化到最大的值，由max属性指定)。

<h1>自定义小部件</h1>

<div>
  <label for="file">文件选择器:</label>
  <input type="file" name="file" id="file" accept="pdf" multiple>
</div>

<div>
  <label for="name">隐藏内容:</label>
  <input type="hidden" name="timestamp" id="timestamp" value="1231941431123">
</div>

<div>
  <label for="name">图像按钮:</label>
  <input type="image" src="111.png" alt="Click me!" width="80" height="30">
</div>

<div>
  <label for="name">进度条:</label>
  <progress max="100" value="75">75/100</progress>
</div>

 <div>
   <label for="name">仪表:</label>
   <!-- 当它开始满时，它会变成红色 -->
   <meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
 </div>

other

参考资料：
1.HTML表单
2.表单小组件
3.发送和检索表单数据

展开全文 >>