整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
明：SVG 虽然也是标签，但它不是 HTML5，标题加了 HTML5 只是为了与 canvas 放到一起。
SVG 意为可缩放矢量图形（Scalable Vector Graphics），使用 XML 格式定义矢量图形。其他的图像格式都是基于像素的，但是 SVG 没有单位的概念，它的20只是表示1的20倍，所以 SVG 绘制的图形放大或缩小都不会失真。
与其他图像比较，SVG 的优势有以下几点：
2.1、svg 标签
SVG 的代码都放到 svg 标签呢，SVG 中的标签都是闭合标签，与html中标签用法一致。svg的属性有：
eg：画一条直线，完整代码如下：
<!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 style="height:600px;">
<svg width="300" height="300">
<line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>
</svg>
</body>
</html>上述 svg 设置的宽高没有带单位，此时默认是像素值，如果需要添加单位时，除了绝对单位，也可以设置相对单位。
使用语法：<svg viewBox=" x1,y1,width,height "></svg>
四个参数分别是左上角的横纵坐标、视口的宽高。表示只看SVG的某一部分，由上述四个参数决定。
使用 viewBox 之后，相当于svg整体大小不变，只能看到 viewBox 设置部分，视觉上被放大。
2.2、SVG 如何嵌入 HTML
SVG 的代码可以直接嵌入到 html 页面中，也可以通过 html 的embed、object、iframe嵌入到html中。嵌入的时候嵌入的是 SVG 文件，SVG 文件必须使用 .svg 后缀。分别介绍各种方法如何使用？
2.2.1、embed 嵌入：
使用语法：<embed src="line.svg" type="image/svg+xml"></embed>
src是SVG文件路径，type 表示 embed 引入文件类型。
优点：所有浏览器都支持，并允许使用脚本。
缺点：不推荐 html4 和 html 中使用，但 html5 支持。
2.2.2、object 嵌入：
使用语法：<object data="line.svg" type="image/svg+xml"></object>
data 是 SVG 文件路径，type 表示 object 引入文件类型。
优点：所有浏览器都支持，支持 html、html4 和 html5。
缺点：不允许使用脚本。
2.2.3、iframe 嵌入：
使用语法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>
src是 SVG 文件路径，width、height、frameborder 设置的大小和边框。
优点：所有浏览器都支持，并允许使用脚本。
缺点：不推荐 html4 和 html 中使用，但 html5 支持。
2.2.4、html中嵌入：
svg 标签直接插入 html 内容内，与其他标签用法一致。
2.2.5、连接到svg文件：
使用 a 标签，直接链接到 SVG 文件。
使用语法：<a href="line.svg">查看SVG</a>
3.1、线 - line
使用语法：
<svg width="300" height="300" >
<line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>使用line标签创建线条，(x1,y1)是起点，(x2,y2)是终点，stroke绘制黑线，stroke-width是线宽。
3.2、矩形 - rect
//使用语法：
<svg width="300" height="300" >
<rect
width="100" height="100" //大小设置
x="50" y="50" //可选 左上角位置，svg的左上角默认(0,0)
rx="20" ry="50" //可选 设置圆角
stroke-width="3" stroke="red" fill="pink" //绘制样式控制
></rect>
</svg>上述参数 width、height是必填参数，x、y是可选参数，如不设置的时候，默认为(0,0)，也就是svg的左上角开始绘制。rx、ry是可选参数，不设置是矩形没有圆角。fill定义填充颜色。
3.3、圆形 - circle
// 使用语法
<svg width="300" height="300" >
<circle
cx="100" cy="50" // 定义圆心 ，可选
r="40" // 圆的半径
stroke="black" stroke-width="2" fill="red"/> //绘制黑框填充红色
</svg>上述(cx,xy)定义圆心的位置，是可选参数，如果不设置默认圆心是（0,0）。r是必需参数，设置圆的半径。
3.4、椭圆 - ellipse
椭圆与圆相似，不同之处在于椭圆有不同的x和y半径，而圆两个半径是相同的。
// 使用语法
<svg width="300" height="300" >
<ellipse
rx="20" ry="100" //设置椭圆的x、y方向的半径
fill="purple" // 椭圆填充色
cx="150" cy="150" //设置椭圆的圆心 ，可选参数
></ellipse>
</svg>上述椭圆的两个rx、ry两个方向半径是必须参数，如果rx=ry就表示是圆形，（cx,cy）是椭圆的圆心，是可选参数，如果不设置，则默认圆心为（0,0）。
3.5、折线 - polyline
// 使用语法
<svg width="300" height="300" style="border:solid 1px red;">
<!-- 绘制出一个默认填充黑色的三角形 -->
<polyline
points=" //点的集合
0 ,0, // 第一个点坐标
100,100, // 第二个点坐标
100,200 // 第三个点坐标
"
stroke="green"
></polyline>
<!-- 绘制一个台阶式的一条折线 -->
<polyline
points="0,0,50,0,50,50,100,50,100,100,150,100,150,150"
stroke="#4b27ff" fill="none"
></polyline>
</svg>上述代码执行结果如图所示：
需要注意的是 points 中包含了多个点的坐标，但不是一个数组。
3.6、多边形 - polygon
polygon 标签用来创建不少于3个边的图形，多边形是闭合的，即所有线条连接起来。
// 使用语法
<svg width="300" height="300" style="border:solid 1px red;">
<polygon
points="
0,0, //多边形的第一点
100,100, //多边形的第二点
0,100 //多边形的第三点
"
stroke="purple"
stroke-width="1"
fill="none"
></polygon>
</svg>polygon绘制的时候与折线有些类似，但是polygon会自动闭合，折线不会。
3.7、路径 - path
path 是SVG基本形状中最强大的一个，不仅能创建其他基本形状，还能创建更多其他形状，如贝塞尔曲线、2次曲线等。
点个关注，下篇更精彩！
能源人都在看，点击右上角加'关注'】
近几年来，随着新能源汽车行业的蓬勃发展，新能源汽车市场和国家补贴政策对锂离子动力电池的能量密度、循环寿命、安全性能和电池成本不断提出更高的要求。因此，电池厂商高度重视生产过程中的品质管控，努力提高产品的质量和一致性，并尽可能降低电池生产成本。
在锂离子电池工艺开发和品质管控过程中，极片制造属于前段工序，在整个过程中占据着重要位置。日本电池界普遍认为，电池的质量有70%与极片品质有关。究其原因，在于极片品质好坏不仅影响电池中段组装工序，而且会对后段工序、电池的电化学性能和安全性能产生关键性的影响。美国橡树岭国家实验室的研究[1]表明，在制造成本为502.8 $/kWh的电池中，采用先进的极片制造技术可减少111 $/kWh的成本支出，因此极片制造技术在降低电池制造成本中发挥着重要作用。
锂离子电池极片制造包括合浆、极片涂布和干燥、极片的辊压和裁切等工序。在之前的文章[2]中已详细讲述了锂离子电池合浆工艺的方法和技巧。除合浆工序外，极片涂布和干燥也是制备高品质极片的重要环节。在实际的极片涂布和干燥过程中可能出现各种涂布和干燥缺陷，不利于制备具有均一厚度和面密度的极片，严重影响极片性能和良品率。本文主要从各类极片缺陷的形成机制、防治措施和检测方法等三个方面进行了概括和介绍，并对极片制造技术的发展趋势进行了展望。
极片缺陷的种类、形成机制和防治措施
在极片涂布和干燥过程中，可能出现的缺陷主要分为三类：点状缺陷、线状缺陷和边缘缺陷。点状缺陷包括团聚体颗粒、针孔缺陷和缩孔缺陷等；线状缺陷主要包括划痕、竖条纹和横条纹缺陷等；边缘缺陷主要包括厚边和拖尾现象等。下面就各种缺陷的形成机制和防治措施进行介绍。
1.1 点状缺陷
1.1.1 团聚体颗粒
如图1所示，如果浆料搅拌不均匀，导电剂和粘结剂没有形成良好的分散效果，极片表面会出现大面积的凸起，即导电剂的团聚体[3]。此外，浆料、涂布设备或涂布基材中引入Fe、Cu、Zn、Al等金属粉末，极片表面会形成以金属粉末为核心、浆料物质为表层的团聚体。搅拌过程中，环境湿度太高，导致正极浆料成果冻状态，极片辊压后也会出现团聚体颗粒[4-5]。
(A)极片表面光滑，(B)极片表面存在团聚体颗粒；(a，b)为(B)的细节放大图，其中导电剂的团聚体没有完全分散；(c，d)为(A)的细节放大图，其中导电剂充分分散、均匀分布
图1 由球形石墨+SUPERC65+CMC+蒸馏水制备的极片[3]
极片出现团聚体缺陷后，在辊压极片时较软的颗粒可被碾成粉末、从极片表面脱落，较硬的颗粒则会凸显出来、形成尖点，存在刺破隔膜、短路的安全隐患[6-7]。研究[8-9]表明，极片表面出现团聚体颗粒会对电池的电压、电压衰减和循环寿命等造成不利影响。此外，以Fe、Cu、Zn、Al等金属粉末为核心的团聚体也会对电池造成巨大的危害[5]。尺寸较大的金属颗粒可刺穿隔膜，导致正负极之间短路，即物理短路；当金属异物混入正极后，充电之后正极电位升高，金属发生溶解、通过电解液扩散，然后在负极表面析出，也可刺穿隔膜、造成短路，这种称为化学溶解短路。
针对团聚体缺陷的形成机制，团聚体缺陷主要通过优化合浆工艺和环境清洁除尘来消除。
1.1.2 缩孔缺陷
如图2所示，在涂布过程中，涂布基材受到较低表面张力物体(如油滴、灰尘等)的污染后，污染物周围的涂布溶液会流向具有较高表面张力的方向，形成像火山口或酒窝状的缩孔缺陷[10-13]。材料之间表面张力不匹配，是产生缩孔缺陷的主要诱因，但浆料的粘度、流动性以及干燥风速和温度等都可能改变表面张力及其作用过程，从而诱发形成缩孔缺陷。例如，过低粘度(~1 500 mPa·s)的水性浆料在涂布后，溶液因表面张力不同会脱离疏水的石墨、积聚到表面张力较高的位置，形成缩孔缺陷[13]。
图2 缩孔缺陷的(a)形成机制示意图[13]，(b)极片微观形貌图[13]和(c)含火山口状缺陷的极片外观图
针对缩孔缺陷的形成原因，相应的防治措施[10,12]有：(a)控制环境粉尘；(b)浆料过滤除铁、基材表面清洁；(c)选用相容性好的分散剂或分散介质；(d)提高浆料粘度和缩短干燥时间等。
1.1.3 针孔缺陷
湿膜中的气泡从内层向表面迁移，在膜表面破裂会形成针孔缺陷[11-12](图3)。气泡主要来自搅拌、涂液输运以及涂布过程[12]。针孔缺陷处活性物质涂层较薄，在电池充放电过程中最易造成微短路；正极涂层出现针孔缺陷会降低材料的库仑效率、倍率性能和循环性能。因此涂布前的浆料需做好脱泡处理。
图3 针孔缺陷的(a)极片外观图和(b)极片微观形貌图[14]
1.1.4橘皮缺陷
在涂布过程中，由于溶剂挥发，不同的区域产生温度差，浆料上层和底层形成浓度差，形成表面张力的梯度及自然对流的现象，涂布溶液就会发生迁移，最终造成涂布表面不平整、形成橘皮缺陷(图4)。烘箱的干燥速率过快或热风风速过快，溶液在流平前就提早固化，也形成橘皮缺陷[11]。
图4 (a)真的橘皮和(b)具有橘皮缺陷的极片
抑制橘皮缺陷的形成，可采取以下措施[11]：(a)降低干燥速率，让溶液可以有足够的时间流平；(b)在溶液里添加一些低挥发的溶剂、表面活性剂等，减小温度差和浓度差。
1.2 线状缺陷
1.2.1 划痕
涂布过程中，大颗粒聚集在出料狭缝，所制备涂层会出现与涂布方向平行的线状薄区或漏箔线条[15]。这导致涂层不均匀，会影响电池容量的一致性。除此之外，基材质量不佳，有异物挡在涂布间隙上或模具模唇损伤也会造成划痕(图5)，要注意排查原因。
图5 涂布过程中的划痕缺陷[14]
1.2.2 规律竖条纹缺陷
如图6所示，规律竖条纹缺陷是沿涂布方向出现的平行条纹，并且覆盖整个涂布幅面，就像拿个梳子或者锄地的耙子沿机器方向抓，人为地抓出了外观一样的缺陷。从流体动力学的角度来讲，涂布浆料受到本身粘弹力、惯性力和表面张力等作用力，在不同方向叠加产生的受力差异会造成涂布厚度的不均匀分布，即形成规律竖条纹。涂布后肉眼很容易观察到这种缺陷，在烘干过程中也很难通过流平消除[16]。如果极片出现团聚体、针孔和划痕等缺陷，可切割去除；但一旦发生竖条纹缺陷，极片几乎找不到一块能用的部分，产品得率就降到0%。
图6 规律竖条纹的(a)极片外观图和(b)示意图[16]
防治措施[16]主要有：(a)确定工艺是否在合理的工艺窗口内，调整涂布工艺参数，降低涂布速度；(b)降低涂辊与背辊之间的涂布间隙；(c)添加溶剂或表面活性剂，稀释浆料，降低浆料粘度；(d)减小辊子的直径。
1.2.3 横条纹缺陷
横条纹缺陷是垂直于涂布方向，固定间隔所产生的波纹或线条，主要是由于泵输送的浆料流量不稳定和涂布设备振动造成的[17]。所以避免横条纹的出现可更换泵和涂布设备，涂布头增加真空盒等来改善。
1.3 边缘缺陷
1.3.1 厚边现象
由于浆料流体特性，在涂层起始点、终止点以及两侧边缘容易形成半月形，极片边缘出现厚度突增的现象称为厚边现象[18](图7)。厚边现象形成本质是在表面张力驱动下物质发生迁移。极片干燥时，涂布边缘比内部区域溶剂挥发快，涂布浆料流向高表面张力的边缘区堆积，使得边缘过厚[10,12]。
图7 厚边缺陷示意图[12]
厚边的危害比较大：(a)影响极片的辊压、分切和卷绕工艺，极片受力不均会造成极片翘曲度过大，增大后续分切、卷绕难度；(b)在充放电过程中，电流分布不均匀，容易产生极化；(c)在充放电膨胀/收缩过程中因极片受力不一致，厚边缘更易失效，影响电池性能。一般地，3C电池工艺设计时，可切除极片边缘来消除这种厚边的不利影响。动力电池要求高功率和高能量，电池设计往往需要保留涂层边缘[19]，因此厚边现象需高度重视。
针对厚边缺陷，可采取以下措施[10,12,19]进行解决：(a)添加界面活性剂，降低浆料的表面张力，抑制干燥过程中浆料向边缘的流延；(b)优化狭缝垫片出口形状，改变浆料流动速度，降低边缘浆料的应力状态，减弱浆料边缘膨胀效应；(c)减小涂布间隙。以上措施效果比较有限，最重要的还是需要依靠高精度的涂布设备来改善。
1.3.2 拖尾现象
浆料粘度太低或固含量过低时，浆料发生固液分层，因液体的流动性比固体好，当固体停止流动时液体部分或者固含量低的部分还会向外流动，就会形成拖尾现象(图8)。拖尾现象又分为水印式拖尾和锯齿状拖尾。水印区域无活性物质和导电剂存在，造成面密度不均的概率较低，因此水印式拖尾危害较小。发生锯齿状拖尾现象时，极片面密度不均匀现象严重，危害较大。另外，浆料发生沉降或者正极浆料出现“果冻”现象也会出现拖尾现象。
图8 有拖尾现象的极片外观图
除浆料固含量和粘度外，基材和浆料的表面张力差异性也会引起拖尾现象。浆料在基材上润湿要求浆料的表面张力低，基材的表面能高；否则在涂布后涂层会很快脱润湿，即涂层从已涂布的地方缩回。因此，除制备固含量和粘度适宜的浆料外，还应从这两方面注意抑制拖尾或回缩现象的产生[10]：(a)基材的表面能与浆料的表面张力要匹配，基材的表面能要高，涂料液体的表面张力要低；(b)防止基材表面干燥点的出现。
极片缺陷的检测技术
前文提到的团聚体、划痕、厚边、条纹、拖尾和橘皮等极片缺陷，会严重影响电池的一致性、使用寿命和安全性能，有效地鉴别和剔除存在缺陷和瑕疵的极片，提高极片品质和一致性势在必行。传统的人工检测方法效率低、误差大，且无法保证检测质量，难以满足锂离子电池大规模生产的需求。近年来，具有精度高、速度快和非接触等优点的现代科学技术不断发展和完善起来。目前，针对极片品质的检测技术主要有：射线法测厚技术、激光测厚技术、机器视觉检测和红外热成像技术。
2.1 射线法测厚技术——采用X射线或β射线测量涂层的厚度和面密度
X射线或β射线穿透物质时，被物质反射、散射、吸收，导致穿透的射线强度相对于入射射线强度有一定衰减。衰减比例与被穿透物体的厚度/密度呈负指数关系。通过测量穿透前后的射线强度，即可推断出物质的厚度/面密度[20]。该方法可直接获得涂布极片的厚度和面密度值，测量精度高；但设备昂贵、辐射源的维护管理成本也较高，且使用不当会对人体造成伤害。
2.2 激光测厚技术——检测极片面密度和缺陷
激光测厚仪一般是由两个激光位移传感器上下对射的方式组成的，上下的两个传感器分别测量被测体上表面位置和下表面位置，通过计算得到被测体的厚度。激光在线测厚技术应用于测量极片的厚度，测量精度可达±1.0μm，还能实时显示测量厚度及厚度变化趋势，便于数据追溯和分析[20]。利用激光测厚仪[21-22]可剔除存在厚边、针孔和团聚体等缺陷的极片。
2.3 机器视觉检测技术——检测极片缺陷
所谓“机器视觉”，就是利用机器代替人眼来做测量和判断，主要是通过采用图像控制器(CCD)扫描被测物，图像实时处理及分析缺陷类别，实现对极片表面缺陷的无损在线检测。完整的机器视觉系统综合了光学、机械、电子和计算机软硬件等技术，可检测出0.2mm×0.2 mm及以上的缺陷，检测速度达60个/min，具有检查精度高、处理速度快、抗干扰能力强和运转时安稳可靠等优势，在大规模批量生产模式下可替代流水线员工进行锂离子电池极片进行全面检测。
机器视觉检测在锂离子电池制造安全检测中具有明显优势，但离大规模的普及应用还存在一定距离，主要是由于部分电池企业生产工艺、产线自动化程度和进口视觉检测设备兼容性不高，对机器视觉检测系统的功效存在疑惑。因此除少数大型电池厂商和先进企业率先开始应用之外，大多数企业仍持观望态度。
2.4 红外线热成像技术——检测极片缺陷
红外线热成像技术也可用来检测极片缺陷。红外线热成像技术将物体热辐射的红外线特定波段信号转换成人眼可见的图像，并以不同颜色显示物体表面温度分布。当物体表面存在缺陷时，该区域会出现温度偏移；在热成像技术获取的极片温度分布曲线中，具体表现为缺陷点位置出现温度尖峰，其中温度升高的尖峰对应团聚体，温度降低的尖峰对应针孔或者掉料[5,23] 。红外线热成像技术可有效鉴别一些光学探测手段无法分辨的缺陷，是一种高效的极片表面缺陷探测手段。目前，红外线热成像技术仅用于科学基础研究，距离工业化应用还存在较大距离。
展 望
极片涂布和干燥过程中可能会出现团聚体、针孔、划痕、厚边和拖尾等缺陷，抑制极片缺陷的形成和及时剔除存在缺陷的极片，对于提高锂离子电池的电化学性能、安全性能、一致性意义和降低电池制造成本意义重大。随着各种高精度、高效率在线检测技术的普及和广泛应用，极片缺陷被及时检测和剔除，涂布和干燥工况条件得到及时反馈和调整，锂离子电池在能量密度、高安全性和一致性方面将迈上新台阶。
参考文献：
[1]WOOD D L, LI J L, DANIEL C, et al. Prospectsfor reducing the processing cost of lithium ion batteries[J].Journal of Power Sources, 2015, 275: 234-242.
[2] 杨时峰，薛孟尧，曹新龙，等. 锂离子电池浆料合浆工艺研究综述[J]. 电源技术，2020，44(2)：291-294.
[3] BITSCH B,WILLENBACHER N, WENZEL V, et al. Impact of mechanical process engineering onthe fabrication process of electrodes for lithium ion batteries[J]. ChemieIngenieur Technik, 2015, 87(4): 466-474.
[4] DAVIDA L,RUTHERA R E, MOHANTY D, et al. Identifying degradation mechanisms inlithium-ion batteries with coating defects at the cathode[J]. Applied Energy,2018, 231: 446-455.
[5] MOHANTY D,HOCKADAY E, LI J, et al. Effect of electrode manufacturing defects onelectrochemical performance of lithium-ion batteries: Cognizance of the batteryfailure sources[J]. Journal of Power Sources, 2016, 312: 70-79.
[6]裴敬龙. 锂离子电池正极片辊涂存在的问题及解决措施[J]. 新疆有色金属，2012(增刊2)：112-113.
[7] 覃晓捷，韦京汝，王姜婷，等. 正极极片表面颗粒对电池性能影响的研究[J]. 电源技术，2017，41(10)：1399-1401.
[8] 王双双，武行兵，张沿江，等. 锂离子电池循环寿命影响因素的研究[J]. 电源技术，2015，39(6)：1211-1213.
[9] 宋晓娜. 锂离子电池自放电研究[J]. 电池工业，2013(1)：47-50.
[10] 龚海青，郭洪猷，王平. 表面张力引起的涂层弊病(II)[J]. 现代涂料与涂装，2000(4)：1-2.
[11] 李群英. 涂装工常用技术手册[M]. 上海：上海科学技术出版社，2008：293-296.
[12] 迟彩霞，张双虎，乔秀丽，等. 狭缝式涂布技术的研究进展[J]. 应用化工，2016，45(2)：360-364.
[13] 成都茵地乐电源科技有限公司. 极片涂覆与干燥中的缩孔现象[EB/OL].[2013-07-03]. http://www.cd-ydl.com/index.php?go=article-26.html.
[14] KRAYTSBERG A,EIN E Y. Conveying advanced Li-ion battery materials into practice: The impactof electrode slurry preparation skills[J]. Advanced Energy Materials, 2016,6(21): 1600655
[15] SCHMITT M,BAUNACH M, WENGELER L, et al．Slot-die processing of lithium-ion battery electrodes—Coatingwindow characterization[J]．Chemical Engineering and Processing: ProcessIntensification, 2013, 68: 32-37．
[16] COHEN E D. Howcan the ribbing defect be eliminated in web coating?[J]. Converting Quarterly,2015, 5(1): 16-17.
[17] 燃化部第一胶片厂. 挤压涂布弊病的防止与消除[J]. 感光材料，1973(2)：9-13.
[18] SCHMITT M, SCHARFER P, SCHABEL W．Slot die coming of lithium-ionbattery electrodes: Investigations on edge effectissues for stripe and pattern coatings[J]. Journal of Coatings Technology and Research, 2014，11(1): 57-63.
[19] 新能源Leander.锂电池极片挤压涂布厚边现象及解决措施[EB/OL]. [2017-07-18]. http://www.china-nengyuan.com/tech/111508.html.
[20] 庞可可. 激光测厚仪在锂电池极片涂布生产中的应用性研究[J]. 河南科技，2016(3)：144-145.
[21] 陈功，许清泉，朱锡芳. 锂电池极片质量监控系统的设计和实现[J]. 仪表技术与传感器，2013(12)：87-89.
[22] 王莹. 激光测厚仪在锂电池极片生产中的应用[J]. 电源技术，2012，36(2)：186-187.
[23] 王云辉，孙青山，李松鞠. β射线在锂离子电池生产中的应用[J]. 电池，2018(5)：347-349.
作者：杨时峰，胥 鑫，曹新龙，邵 乐，田占元
单位：陕西煤业化工技术研究院有限责任公司
免责声明：以上内容转载自电池中国，所发内容不代表本平台立场。
全国能源信息平台联系电话：010-65367702，邮箱：hz@people-energy.com.cn，地址：北京市朝阳区金台西路2号人民日报社
一篇：Java 0基础入门 （Html标签的使用）
表单在网页中主要负责数据采集功能。
一.表单实际应用场景
百度搜索
5173注册
如上两张图，图中的黑色线条是我画上去的，如果按照黑线，在Excle中画出这两张表单，相信大家都可以也不是很难，那在Html中，我们同样也是画出这样的表单，最后将黑线隐藏即可。
二.表单包含的控件
具体写法：（插一句，Html代码中<!--xxxx-->,这样的内容，是注释内容，也就是代码执行的时候并不执行，只是类似看文言文时，旁边的注解一样）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
action:指定服务器端处理程序的路径（Java、.Net、PHP、Python、NodeJs……）
method:提交方式,有get和post两种
get：会将表单中的值直接带在地址栏中 不安全 数据量有限制
post：不会将表单中的值带在地址栏中 更安全 数据量没有限制
-->
<form action="http://www.baidu.com" method="get">
<!--
对于不同控件中的value属性值，一般就是服务器端要拿到的具体的值
-->
<!--
单行文本框：
type属性：因为密码框、单选按钮、复选框也都是input
通过type属性来区分当前的input到底是什么
(如果input不指定type属性值，默认取值为text)
value：指定单行文本框的初始值
-->
<p>
单行文本框：<input type="text" value="初始值"/>
</p>
<p>
<!--
placeholder:当没有内容时默认显示的内容，随着用户的输入，会消失
如果清空输入吗，会再次出现
plcaceholder和value的区别在于：
placeholder不能通过用户输入直接改变内容
value提供的值用户是可以改变的
maxlength：限制输入字符的最大长度
*name:相当于给控件起个名字，服务器端可以根据这个名字，来区分每一项数据代表什么含义
-->
单行文本框：<input type="text" placeholder="初始值" maxlength="5" name="txt"/>
</p>
<!--
密码框
type:password密码框
单行文本框中能用的属性，密码框也都能用
-->
<p>
密码框：<input type="password" placeholder="请输入密码" name="pwd" maxlength="6"/>
</p>
<!--
单选按钮
type:radio 单选按钮
checked="checked"默认选中当前项
name在radio中的作用：
(1)服务器端用来识别数据
(2)用来描述同一组信息的内容只选中其中一个，用来分组，产生互斥
-->
<p>
<!--
<label>:如果要点击单选按钮后面的字也能够选中单选按钮，就使用
该标签将单选按钮以及文字都包裹在一起
-->
<label>
<input type="radio" checked="checked" name="sex" value="0"/>男
</label>
<label>
<input type="radio" name="sex" value="1"/>女
</label>
</p>
<!--
复选框
type：checkbox
name：用来对同一组相同含义的checkbox分组，就算给了name，也能够一次性选中多个
-->
<p>
<input type="checkbox" name="hobby" value="0"/>跑步
<input type="checkbox" name="hobby" value="1"/>打球
</p>
<!--
按钮 input
-->
<p>
<!--
重置按钮 type="reset"
value:按钮中要显示的文本，一般不需要传递给服务器端
重置不是简单的清空，而是回到页面最原始的状态
-->
<input type="reset" value="重置"/>
<!--
提交按钮 type="submit"
value:按钮中要显示的文本，一般不需要传递给服务器端
-->
<input type="submit" value="提交" />
<!--
普通按钮：type="button"
普通按钮本身不具有任何的特殊行为，其行为一般需要通过js脚本来绑定
-->
<input type="button" value="普通按钮" onclick="alert('这是一个普通按钮');"/>
<!--
图片按钮：type="image"
通过图片来制作按钮，相当于提交按钮
-->
<input type="image" src="001.jpg" />
<!--
注意：对于提交按钮和重置按钮，如果放在form元素以外的地方，
是无法对表单进行重置或提交操作的
-->
</p>
<!--
多行文本框 textarea (文本域)
cols：列数
rows：行数
name:用于在服务端获取数据时使用
注意：文本域中的默认内容应该写在标签之间，而不是value属性中
这一点和当行文本框是有区别的
placeholder:文本域为空时的默认内容
-->
<p>
<textarea cols="10" rows="20" placeholder="默认值">dsadasdas</textarea>
</p>
<!--
文件域 input type="file"
-->
<p>
<input type="file" />
</p>
<!--
隐藏域 input type="hidden"
不希望用户看到，但是程序处理时需要的数据，可以放在隐藏域中
-->
<p>
隐藏域：<input type="hidden" />
</p>
<!--
下拉列表框<select>
下拉列表中的每一个子选项
-->
<p>
<select>
<option>====请选择====</option>
<option>江苏</option>
<option>浙江</option>
<option>上海</option>
</select>
</p>
<!--
select标签的multiple="multiple"属性
将原本通过箭头点击的方式显示改为一次性就显示若干个
并且可以一次性选中多项
-->
<p>
<select multiple="multiple">
<option>====请选择====</option>
<option>江苏</option>
<option>浙江</option>
<option>上海</option>
<option>山东</option>
<option>安徽</option>
<option>福建</option>
</select>
</p>
<!--
按钮 button HTML5新特性
1、和input按钮的第一个区别：
input要显示的文本在value属性中
button要显示的文本在标签之间
button如果没有指定类型，默认就是一个提交按钮
2、和input按钮的第二个区别：
input按钮中的文本只能是普通文本
button标签之间写的任何html内容都能作为按钮的外观
-->
<p>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button" onclick="alert('普通button按钮');">普通按钮</button>
<button>
<h1>标题按钮</h1>
</button>
</p>
<!--
表单元素中的两个常用属性
(1)前端：都只能看不能改
(2)后端：readonly的控件值可以获取到，但是disabled不行
-->
<input disabled="disabled" value="默认值"/>
<input readonly="readonly" value="默认值"/>
</form>
</body>
</html>
三.表单的基本结构
<form action="http://www.sohu.com" method="post">
……
</form>
action：指定提交后，由服务器上哪个处理程序处理，是一个路径，绝对路径，相对路径都可以。
method：指定向服务器提交的方法，一般为post或get方法, post方法比较安全，且能传输的数据量更大
四.表单的基本语法
<form action="login.aspx" method="post">
<p>用户名：
<input name="username" type="text"/>
</p>
<p>密 码：
<input name="pwd" type="password" />
</p>
<p>
<input type="submit" name="btn" value="提交" />
</p>
</form>
表单输入元素：input，当然也有其它的。
五.表单的执行原理（了解即可）
客户端（比如：我们打开的网页）请求登陆，填写表单信息，点击某按钮提交→数据传输到服务器，服务器会执行后端代码（后续会讲到），验证发来的信息，给出反馈（比如：通过；不通过）→客户端接收服务器的反馈，在页面上显示出来。
举个例子：
一个客户去某店买东西，客户（客户端）说我是你们会员，提供了姓名，手机号（这就类似填写表单的一个过程），然后店员（服务器）根据你提供的姓名和手机号，查到了你的会员信息，然后告诉你（反馈）已经查到，确实是本店会员。
通过举例，希望大家能通俗的了解表单的执行原理。
六.表单的元素
1.文本框
<input name= "userName" type= "text" value= "123456" maxlength="5">
type：指定input的类型，如果为text表示普通文本框
value：文本框中的初始值
maxlength：最大能够输入的字数
name：name属性对于表单元素的作用，在于让服务器能够得到表单元素中输入的值，例如request.getParameter(“userName”)，之后的文章中会讲。
还有一个有用的placeholder属性，同样为初始值，区别于value，以灰色显示，且在输入内容时会自动被所输入的内容覆盖，清空输入内容后，又会显示出来，类似于一个提醒的作用。可自行尝试下。
2.密码框
<input name= "userPwd" type="password" value="" maxlength="4">
type：指定input的类型，如果为password表示密码框
value：密码框中的初始值
maxlength：最大能够输入的字数
name：name属性对于表单元素的作用，在于让服务器能够得到表单元素中输入的值，例如request.getParameter(“userPwd”)，之后的文章中会讲。
3.按钮
<input type="reset" value="重填"/>
<input type="submit" value="提交" />
<input type="button" value="普通按钮" />
<input type="image" src="images/login.gif" value="图片按钮" />
type的取值不同代表不同类型的按钮，对于提交按钮会提交表单，重置按钮可以清空表单内容，但是其它类型的按钮，具体实现什么功能，只能通过后面学习脚本以后才能进行处理，value属性表示按钮上显示的文本，name属性的主要作用体现在后期脚本的绑定上
4.button按钮
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
写法：<button type = "button">开</button>
5.单选按钮
<input name="gen" type="radio" value="男" checked="checked">
<input name="gen" type="radio" value="女" >
input的type取值为radio时，表示单选按钮
name属性除了能够让服务器获取选中的单选按钮信息外，还能将单选按钮进行分组
checked=”checked”表示选中状态，同一组单选按钮，其中选中状态的按钮最多只有一个
value表示最后服务端真正能获取到的值。并不是显示在单选按钮外边的内容。
还可以在外边嵌套<label></label>标签提升用户体验
6.复选框
<input type="checkbox" name="hobby1" value="sports" />
<input type="checkbox" name="hobby2" value="talk" checked="checked" />
<input type="checkbox" name="hobby3" value="play" />
input的type取值为checkbox时，表示复选框
name属性除了能够让服务器获取选中的复选框信息外，还能将复选框进行分组
checked=”checked”表示选中状态，同一组复选框，其中，选中状态的可以任意多个
value表示最后服务端真正能获取到的值。并不是显示在复选框外边的内容。
还可以在外边嵌套<label></label>标签提升用户体验
7.文本域
用来输入多行文本
写法：<textarea name="" cols="10" rows="20">12345</textarea>
name:用于在服务端获取数据时使用
cols：列数
rows：行数
值得注意的是：textarea中的内容应该写在标签之间，而不是value属性中！！！如上述写法中，“12345”即为多行文本框的内容。
8.文件域
<input type="file" name= "uploadFile">
<input type="submit" name="upload" value="上传" />
当input的type为file时，表示文件上传按钮，一般会和提交按钮一起使用，此处不做太多说明，文件具体上传时需要学习服务端编程后方可掌握。
9.列表框
<select name="bmon">
<option value="" selected="selected">
[选择月份]
</option>
<option value="0">一月</option>
<option value="1">二月</option>
<option value="2">三月</option>
<option value="3">四月</option>
</select>
select：name属性，列表名称，用于服务器获取选中项
option是列表下面的每一个小项，value属性是服务器能获取到的具体的值，<option>标签之间是呈现给用户的选项信息，selected="selected"表示该项选中。
10.隐藏域
方便“记住”一些供服务端使用的信息、但又不希望客户看到的数据
<input type="hidden" name="…." value="…" />
主要就是type属性为hidden，其他属性与input框的属性填写相同。
七.表单中的一些属性
只读和禁用属性
readonly：希望某个框内的内容只允许用户看，不能修改
disabled：因没达到使用的条件，限制用户使用
<textarea readonly="readonly"></textarea>
<input type="text" readonly="readonly" />
<input type="text" disabled="disabled" />
上面的属性也可用于其它表单元素，达到只读或禁用的效果。
form 表单中disabled属性的元素不参与表单提交，也就是表单submit后，后台无法获取有disabled属性元素的值。
八.HTML5 新的 input 类型及支持的浏览器
HTML5 新的 input 类型及支持的浏览器
九.音频标签
写法：
<audio src="Nightwish-She Is My Sin.mp3" controls="controls" autoplay="autoplay" loop="loop">
暂不支持此标签
</audio>
src：要播放的音频的 URL。
autoplay：如果出现该属性，则音频在就绪后马上播放。
loop：如果出现该属性，则每当音频结束时重新开始播放。
controls：若出现该属性，则向用户显示控件，比如播放按钮。
暂不支持此标签，是在你使用的浏览器，不支持的情况下显示。
具体浏览器的兼容性，见下图
audio标签各浏览器兼容情况
十.视频标签
写法：
<video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls" autoplay="autoplay" loop="loop" width="1000px">
您的浏览器不支持video标签
</video>
src：要播放的视频的 URL。
controls="controls" 若出现该属性，则向用户显示控件，比如播放按钮。
loop="loop" 循环播放
autoplay="autoplay" 自动播放
width、height:指定视频窗口的大小
相比音频标签，可以添加width和height指定视频窗口大小
*请认真填写需求信息，我们会在24小时内与您取得联系。
