html样式属性明细

1、Html语义化标记元素：Header:标记头部区域的内容（用于整个页面或页面中的一块区域）Footer:标记脚部区域的内容（用于整个页面或者页面中的一块区域）Section:web页面中的一块区域Article:独立的文章内容。Aside:相关内容或者引文。Nav:导航类辅助内容。Html5新功能元素：Hgroup ：用于对整个页面或页面中一个内容区块的标题进行组合。=divFigure :表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption可为figure添加标题。=dlVideo ：定义视频。Audio:定义音频。Embed:插入各种多媒体，midi/wa

2、v/aiff/au/mp3。Mark:主要用来在视觉上向用户呈现那些需要突出显示或者高亮显示的文字。在搜索结果中向用户高亮显示搜索关键词。Time:表示日期或时间，也可以同时表示两者。Canvas:表示图形，如图表和其他图像。这个元素本身没有行为，仅提供一块画笔，但它把一个绘图api展现给客户端javascript,一时脚本能够把想绘制的东西绘制在这块画布上。Output:不同类型的输出。Source:定义媒介资源。Menu:菜单列表。Ruby:注释。Rt:字符解释或发音。Rp:ruby中使用，定义ruby不显示内容。Wbr:自动换行。Commmand:命令按钮。Details：细节信息。与s

3、ummary配合。Datalist：可选数据下拉列表，与input配合。Datagrid:可选数据树状列表。Keygen:生成密匙。Progress：显示运行进程中耗费时间的函数进程。Email:Url:url地址的文本输入框Number:输入数值的文本框Range:范围文本框Date pickers:date,month,week,time,datetime,datetime-localHtml5全局属性：Contenteditable:允许在线编辑元素中的内容。True or false.可继承。Designmode:指定整个页面是否可编辑。On or off.Hidden:隐藏元素。Tr

4、ue or false.Spellcheck:针对input (type=text) 和textarea提供。True or false.Tabindex:表示控件是第几个被访问的。Html5其他功能：Queryselector( ， ，)/queryselectorall( ，) :查找返回匹配的第一个元素/所有匹配的元素。一、Html5元素分类：新增27，废弃161、结构性元素：上下文结构定义，确保html的完整性Section:区域章节Header:页面主体的头部Footer:页面的页脚Nav:菜单导航，连接导航 navigatorArticle:文章主体内容，集中显示区域。2、块级元素

5、：web页面区域的划分Aside:表达注记、贴士、侧栏、摘要、插入的引用。Figure:对多个元素组合并展示，常与figcaption连用。Code:一段代码块Dialog:表达人与人之间的对话。Dt,dd dt:说话者，dd:说话者内容。3、行内语义性元素： web页面具体内容的引用和表述Meter:特定范围的数值：工资，数量，百分比Time:时间值Progress:进度条Video:视频元素Audio:音频元素4、 交互性元素：功能性内容和数据的关联Details:表示具体内容，通过与legend交互才会显示Datagrid:控制客户端数据与显示，由动态脚本更新。Menu:交互菜单Comm

6、and:处理命令按钮2、 构建主体内容Article:标识文章，可嵌套，或插入插件。强调独立性、完整性。Section:给内容分段（div注重结构的独立性，布局大块，section注重内容的独立性，必须有标题）强调相关性。Nav:传统导航条，侧边导航条，页内导航，翻页操作。Aside: 当前页面的附属信息。包含在article中。Time:datetime属性中日期与时间爱你用T分隔，z表示向机器编码另一地区的时间，时差。<time datetime="2012-11-13T20:00+09:00">我生日的晚上8点的美国时间</time>Head:

7、可包含hgroup/table/form/nav。Hgroup：给标题分组.Footer:添加脚本，可以嵌入应用。Address:定义联系信息。3、 设计大纲1、 显示编排：是指明确使用构建主体元素。2、 隐式编排：如用div4、 实战html5表单1、 input类型：Email：Url：number（max,min,step,value）,range(max,min,step,value)：Date、month、week、time（max,min,step,value）,datetime,datetime_local：Search：Tel:Color：新增：Autocomplete:帮助自

8、动完成内容输入。（text,search,url,telephone,email,password,datepickers,range,color）,值：on,off,空值。Autofocus:自动获得焦点。Form：引用表单id，外联。Eg:<input .form=”form1”> Form属性引用2个或多个表单，空格间隔：eg:<input .form=”form1 form2 form3”>新增表单重写属性：（只适用于input输入类型中submit和image） Formaction:重写actionFormenctype:重写enctypeFormmetho

9、d:重写methodFormnovalidate:重写novalidateFormtarget:重写target新增height好听width属性只适用于img新增list属性：指定输入框所绑定的datelist元素新增min.max.step:step为间隔。.multiple:一次性选择多个文件上传。.pattern:检查输入格式与指定格式的匹配。正则表达式插入知识：正则表达式b.b:精确查找eg:/bhi/b;匹配前一个字符和后一个字符不全是。bhib.*blucyb:先是一个单词hi，然后是任意个任意字符但不能是换行，最后是lucy。0dd-dddddddd:以0开头，后是两个数字-后

10、8为数字。（电话号码）=0d2-d8baw*b：a开头，某个单词的开始处，后字母a，任意长度的字符或数字，单词结束处。d+：匹配1个或更多连续数字。bw6b:6个字符的单词；常用元字符：d5,12$:填写5到12位数字。连续。s:匹配任意的空白字符（空格、tab、换行符、中文全角空格）w:匹配字母/数字/下划线/汉字。b:匹配单词的开始/结束。d:匹配数字。:匹配字符串的开始。$:匹配字符串的结束。.: 除了换行符以外的任意字符。*：元字符，代表任意数量不包含换行字符。字符转义：.:=.*:=*:= = c:windows=c:windows.常用限定符：重复*：0或

11、n次；+：1或n次；？：0或1次；n:n次；n,:n或更多次。n,m:n到m次。Eg:windowsd+:匹配1个或n个数字。w+:匹配一行第一个单词字符匹配：aeiou:匹配任何一个元音字母。.?!:匹配标点符号：.?!。0-9=da-z0-9A-Z=w(?0d2) -?d8:(010)88./022-23./02912./010)88./(022888.分支条件：几种规则，满足其中任意一种都匹配。 .|.0d2-d8|0d3-d7:电话号码(0d2)- ?d8|0d2- ?d8:电话号码。d5-d4|d5:邮政编码（注意方向表达的意思不一样）分组：（）子表达式(d1,3.)3d1,3:简单

12、ip地址表达(20-4d|250-5|01?dd?).3(20-4d|250-5|01?dd?)反义：W:匹配任意不是字母，数字，下划线，汉字的字符。S:匹配任意不是空白符的字符。D:匹配任意非数字的字符。B:匹配 不是单词开头或结束的位置。x:匹配除了x以外的任意字符aeiou:匹配除了aeiou这几个字母以外的任意字符S+:匹配不包含空白符的字符串。<a>+>:匹配用尖括号括起来的以A 开头的字符串。后向引用：用于搜索前面某个分组匹配的文本1:代表分组1匹配的文本b(w+)bs+1b: 1=w+)可表达为：b(?<word>w+)bs+k<word>

13、;b指定子表达式的组名：(?<word>w+)/(?wordw+)名为word;反向引用：k<word>常用分组语法：捕获：(exp):匹配exp，并捕获文本到自动命名的组里。(?:匹配exp,并捕获文本到名称为name的组里，也可以写成。<name>exp):(?nameexp)(?:exp):匹配exp,不捕获匹配的文本，也不给此分组分配组号。零宽断言：(?=exp):匹配exp前面的位置 (?<=exp):匹配exp后面的位置(?!exp):匹配后面跟的不是exp的位置(?<!exp):匹配前面不是Exp的位置注释：(?#comment):

14、用于提供注释让人阅读。零宽断言：查找内容不包括这些内容之前后之后的东西。bw+(?=ingb):匹配ing之前的单词(?<=bre)w+b:匹配re开头后的单词(?<=d)d3+b：查找123456789的结果：23456789(?<=s)d+(?=s):空白符之间的数字。负向零宽断言：确保某个字符没有出现，但并不匹配。bw*quw*b:匹配后面不是u的q.单词。Iraq fightingbw*q(?!u)w*bd3(?!d):匹配3为数字后面不能是数字b(?!abc)w+b:不包含连续字符串abc的单词(?<!a-z)d7:匹配前面不是小写字母的7位数字。(?<

15、=<(w+)>).*(?=</1>):不包含属性的简单html标签内的内容。注释：20-4d(?#200-249)|250-5(?#250-255)|01?dd?(?#0-199)(?<= # 断言要匹配的文本的前缀<(w+)> # 查找尖括号括起来的字母或数字（即html标签）( #：前缀结束.* # :匹配任意文本(?= #:断言要匹配的文本后缀</1> #:查找尖括号括起来的内容：前面一个“/”，后面一个是先前捕获的标签) #:后缀结束贪婪与懒惰：A. *b:匹配最长的以a开始b结束的字符串（尽可能多=贪婪）.*?:匹配任意数量的重复

16、，但使用最少的重复(尽可能少=懒惰)A. *?b:匹配最短的以a开始b结束的字符串。Aabab:匹配到aab和ab懒惰限定符：*?:重复任意次，但尽可能少重复+?:重复1次或更多次，但尽可能少重复?:重复0次或1次，.n,m?:重复n到m次.n,?:重复n次以上.处理选项：.net中常用的正则表达式选项Ignorecase:匹配是不区分大小写Multiline(多行模式):更改和$的含义，分别任意一行在行首和行尾匹配，此模式下$含义：匹配n之前的位置以及字符串结束前的位置Singleline（单行模式）：更改.的含义，让它与每一个字符匹配(宝货换行符n)Ignorepatternwhitesp

17、ace(忽略空白)忽略表达式中的非转义空白并启用由#标记的注释Explicitcapture（显示捕获）：仅捕获已被显示命名的组。平衡组/递归匹配：嵌套匹配语法构造：(?group)：把捕获的内容命名为group，并压入堆栈(stack)（?-group）:从堆栈上弹出最后压入堆栈的名为group的捕获内容，如果堆栈本来为空则本分组匹配失败。(?(group)yes|no):如果堆栈上存在以名为group的捕获内容的或，继续匹配yes部分的表达式，否则继续匹配no部分(?!):零宽负向先行断言，由于没有后缀表达式，试图匹配失败<div>*><>*(?open<

18、;div>*>)<>*)+ (?open</div>)<>*)+)*(?(open)(?!)</div>:匹配嵌套的<div>标签其他标签：a:报警字符（打印它效果是电脑有嘀一声）b:通常是单词的分界位置，但如果在字符类里使用代表退格t:制表符，tabr:回车v:竖向制表符f：换页符n:换行符e：escape0nn:ascii代码中八进制代码为nn的字符xnn：。代码中十六进制代码为nn的字符unnnn:unicode代码中十六进制代码为nnnn的字符cN:ascii控制字符，比如cC代表ctrl+cA:字符串开头（类似，

19、但不收处理多行选项的影响）Z:字符串结尾或行尾（不受处理多行选项的影响）z:字符串结尾（类似$，不收处理多行选项的影响）G：当前搜索的开头pname:unicode中命名为name的字符类，如：pisgreek(?>exp):贪婪子表达式(?<x>-<y>exp):平衡组(?in-nsx:exp):在子表达式exp中改变处理选项(?im-nsx):为表达式后面的部分改变处理选项(?(exp)yes|no):把exp当作零宽正向先行断言，如过在这个位置能匹配，使用yeszuowei 此组的表达式，否则使用no(?(exp)yes):同上，只是使用空表达式作为no(?

20、(name)yes|no):如果命名为那么的组捕获盗了内容，使用yes 作为表达式：否则使用no(?(name)yes):同上，只是使用空表达式作为no结束。新增placeholder:为input类型输入框提供一种提示。用于text,search,url,telephone,email,password.新增required:用于规定输入框填写的内容不能唯恐，否则不允许用户提交(text,search,url,telephone,email,password,date pickers,number,checkbox,radio,file)新增form元素：1. datalist:datali

21、st中option创建，可由list引用datelist的id.2. Keygen:密匙生成器（key-pair generator）,是用户的验证更为可靠，提交后生成私匙（存储在客户端）和公匙（存储在服务器）3. Output:用于在浏览器中显示计算结果或脚本输出，包含开始和结束标签。<output name=”>text</output>新增的form属性：1. autocomplete:同input中autocomplete2. Novalidate:用于在提交表单时取消整个表单的验证。 第5章 实战html5画布(cavas渲染上下文、坐标系统、画布状态、变形合

22、成)Canvas绘制工作需由javascript完成。绘制图形步骤：1. 定义Id属性值：<canvas id=”mycanvas” width=”200” height=”100”></canvas>2. 使用id寻找canvas,用document.getelementbyid.:var c=document.getelementbyid(“mycanvas”);3. 通过canvas的getcontext方法获取上下文（context）,创建context对象，获取允许绘制的2D环境：var context=c.getcontext(“2d”);4. 使用java

23、script绘制。：context.fillstyle=”#ff00ff”; context.fillrect(50,25,100,50); fillstyle填充颜色，fillrect:位置和尺寸，（50，25）坐标值，（100，50）宽和高。浏览器不支持时替代显示：<canvas id=”mycanvas” style=”border:1px solid;” width=”200” height=”100”>1、 绘制简单图形1、 直线：moveTo,lineTo,strke.context.eg:moveTo(x,y)和lineTo(x,y). Eg:起点context.mo

24、veTo(0,0);终点context.lineTo(200,100);绘制context.stroke();2、 绘制矩形：context.fillstyle=”ff0000”; context.fillrect(20,20,10,10); 两种方法：fillrect（用颜色填充）和strokerect（绘制轮廓或线条） Eg:context,strokestyle=”#ffffff”和context.strokerect(0,0,100,50)3、 绘制圆形：用到beginpath,arc,closepath,fill. eg:context.arc(x,y,radius,startAng

25、le,endangle,anticlockwise);anticlockwise:顺时针方向绘制为true;4、 绘制三角形：实心三角：context.moveTo(x,y);context.lineto();context.lineto();context.fill(); 空心三角：context.strokestyle=”red”;context.beginpath();context.moveto();context.lineto();context.linto();context.colsepath();context.stroke();2、 清空画布：context.clearrec

26、t(x,y,width,height);3、 绘制贝塞尔曲线1、 绘制二次方贝塞尔曲线：context.quadraticCurveTo(cp1x,cp1y,x,y);cp为控制点。2、 绘制三次方贝塞尔曲线：context.beziercurveto(cp1x,cp1y,cp2x,cp2y,x,y);4、 图形的变换1、 保存与恢复canvas状态：context.save(),context.restore().2、 移动坐标空间：context.translate(dx,dy).dx,dy为偏移量。3、 旋转坐标空间：context.rotate(angle).4、 缩放图形：conte

27、xt.scale(x,y);5、 矩阵变换：移动：context.transform(m11,m12,m21,m22,dx,dy); x1=x+dx; y1=y+dy缩放：context.transform(m11,0,0,m22,0,0)|context.transform(0,m12,m21,0,0,0) x1=(m11)x; y=(m22)y;|x1=(m12)x y1=(m21)y旋转：context.transform(cos,sin,-sin,cos,0,0); X1=x*cos-y*sin; y1=x*sin+y*cossin =的对边 / 斜边 cos =的邻边 / 斜边tan =的对边 / 的邻边cot =的邻边 / 的对边Ctx.translate(30,30)+ctx.scale(0.95,0.95)=cts.transform(0.95,0,0,0.95,30,30);6. setTransfor