热门关键字:
jquery > jquery教程 > jquery教程 > HTML5-基础知识

HTML5-基础知识

324
作者:管理员
发布时间:2021/4/12 18:57:26
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4419
  1.用于绘画的canvas元素


  2.用于媒介回放的video和audio元素


  3.对本地离线存储提供更好的支持


  4.新的特殊内容元素,如:article、footer、header、nav、selection


  5.新的表单控件,如:calendar、date、time、email、url、search


  HTML5元素用于图形的绘制,提供图形容器,通过脚本(通常是JavaScript)来绘制图形


  一个画布在网页中是一个矩形框,通过元素来绘制。


  代码:


  canvas元素本身没有绘图能力,所有的绘制工作由JavaScript内部完成


  代码:


  canvas是一个二维网格,左上角坐标是(0,0),横轴是x轴,竖轴是y轴。


  在Canvas上画线,可以使用下列两种方法:


  1.moveTo(x,y)定义线条开始坐标


  2.lineTo(x,y)定义线条结束坐标


  代码:


  Canvas可以画圆形,具体方法是: arc(x,y,r,start,stop)


  代码:


  使用canvas绘制文本,重要的属性和方法如下:


  1.font定义字体


  2.fillText(text, x, y)在canvas上绘制实心的文本


  3.strokeText(text, x, y)在canvas上绘制空心的文本


  代码:


  渐变可以填充在矩形、圆形、和文本等等。以下有两种不同的方式设置Canvas渐变:


  1.createLinearCradient(x,y,x1,y1)创建线条渐变


  2.createRadialGradient(x,y,r,x1,y1,r1)创建一个径向/圆渐变


  当使用渐变对象时,必须使用两种或两种以上的停止颜色。addColorStop()方法指定颜色停止,参数使用坐标描述,可以是0或1.


  代码:


  将一幅图画放到画布上,使用以下方法:


  drawImage(image,x,y)


  代码:


  HTML5支持内联SVG,SVG是使用XML格式定义图片。


  在HTML5中可以使用MathML元素,对应的标签是…MathML是一个数学标记语言,是一种基于XML的标准,用来写网页版的数学符号和公式。


  为了是元素可拖动,把draggable属性设置为true,则:


  规定当元素被拖动时,会发生什么。ondragstart属性需要定义函数drag(event),函数中需要填入拖动的数据。


  ondragover事件规定在何处放置被拖动的数据


  当放置被拖动数据时,会发生drop事件


  代码:


  HTML5 Geolocation API用于获得用户的地理位置。该特性可能侵犯用户的隐私,HTML5可以做到


  HTML5规定一种通过video元素来包含视频的标准方法,具体代码如下:


  HTML5中规定音频元素标准,使用


  HTML5拥有多个新的表单输入类型,新的特性提供更好的输入控制和验证。新的输入类型:color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week。


  color类型用在input字段主要用于从拾色器中选择颜色


  代码:


  date类型允许从日期选择器选择一个日期,代码:


  datetime-local类型允许你选择一个日期,但具体怎么用的,我没整明白


  email类型用于应该包含e-mail的地址输入域,会进行email格式的校验。如:


  month类型允许选择年/月,时间精确到月份。如:


  number类型用于包含数值的输入域。该类型有较多的属性,请看下面的代码:


  代码:


  range类型的显示为滑动条,包括一定的范围。如: 。其中value属性是规定默认值


  search类型用于定义搜索域,比如站点搜索等。如:。完全是让好理解,我觉得文本框也可以做到。


  定义输入电话号码,完全是让好理解,我觉得文本框也可以做到。如:


  time类型允许你选择一个时间,如:?


  url类型包含URL地址输入域,在提交表单时,自动验证url域的值。如:


  week类型允许选择周和年


  HTML5有以下新的表单元素:


  1.


  2.


  3.


  元素规定输入域的选择列表,但是如果用户自己输入,也可以。


  代码:


  标签规定用于表单的密钥对生成器,我没有理解怎么用?请补充实例?


  代码:


  元素用于不同类型的输出,比如计算或脚本输出:


  代码:


  HTML的和标签新加了几个属性 的新属性:


  1.autocomplete


  2.novalidate


  的新属性:


  1.autocomplete


  2.autofocus


  3.form


  4.formaction


  5.formenctype


  6.formmethod


  7.formnovalidate


  8.formtarget


  9.height 与 Width</li>


  10.list


  11.min 与 max


  12.multiple


  13.pattern (regexp)


  14.placeholder


  15.required


  16.step


  1.autocomplete属性规定form和input域应该拥有自动完成的功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。


  2.autocomplete属性有可能在form元素中开启的,而是在input元素中关闭


  代码:


  novalidate属性是一个boolean属性。规定在提交表单时不应该验证form或input域


  代码:


  autofocus属性是一个boolean属性,规定在页面加载时,域自动获得焦点


  代码:


  标签中有属性form,可以指明该标签属于哪个form表单,即使该标签不在其对应的form域内。比如: 例子中lastName标签不在id=form1表单中,但是提交按钮会一起打包提交。


  代码:


  formaction属性用于描述表单提交的URL地址,会覆盖元素中的action属性,元素中的action属性会无效


  代码:


  formenctype属性描述了表单提交到服务器的数据编码,只对form表单中method="post"有效。且会覆盖form元素中的enctype属性


  代码


  formmethod属性定义了表单提交的方式,会覆盖form元素中的method属性,formmethod="post"


  novalidate属性是一个boolean属性,描述元素提交时无需验证。formnovalidate属性可实现同样的效果,注意:formnovalidate属性与type="submit"提起使用


  代码:


  formtarget属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。目前没有懂,下面的例子没什么用,运行结果一样的


  代码:


  height和width属性规定用于type="image"标签的图像大小。type="image"标签用于图片代替type="submit"提交按钮


  代码:


  list属性规定输入域为datalist。datalist输入域定义选项列表


  代码:


  min、max和step属性用于包含数字或日期的input类型的约束。适用于类型的标签: date picker、number和range。


  multiple属性是一个boolean属性,规定元素中可选择多个值,使用于标签: email和file


  代码:


  1.pattern属性描述了一个正则表达式,用于验证元素的值。适用于一些类型标签: text、search、url、tel、email和password


  2.使用title显示提示信息


  代码:


  placeholder属性提供一种提示(hint),描述输入域所期待的值,适用于以下类型标签:text、search、url、telephone、email和password


  代码:


  required属性是一个boolean属性。规定在提交之前必须填写输入域(不能为空)。适用的标签有: text、search、url、telephone、email、password、date pickers、number、checkbox、radio和file


  代码:


  step规定了合法的数字间隔,step属性往往和min、max属性创建一个区域值。适用的标签有:number、range、date、datetime、datetime-local、month、time和week.


  语义元素指的是有意义的元素,能够清楚描述其意义给开发者。比如或就是无意义,而则是语义元素。


  HTML5提供了新的语义元素来明确一个Web页面的不同部分:


  1.


  2.


  3.


  4.


  5.


  6.


  7.


  8.


  具体如图所示:


  标签定义文档中的节,包含一组内容及其标题


  代码:


  标签定义独立的内容


  代码:


  标签定义导航链接的部分


  标签定义页面主区域内容外的内容,如侧边栏。


  元素描述了文档的头部区域,在页面中可以使用多个元素


  元素描述了文档底部区域,一个页脚通常包含文档的作者、联系信息等


  代码:


  标签规定独立的流内容,如图像、图表和代码等。标签定义元素的标题。


  代码:


  HTML5web存储,一个比cookie更好的本地存储方式,可以在本次存储用户的浏览数据。客户端存储数据的两个对象为:


  1.localStorage:没有时间限制的数据存储


  2.sessionStorage:针对一个session的数据存储


  当HTML页面执行脚本时,页面的状态是不可相应,直到脚本完成。web worker是运行在后台JavaScript,独立于其他脚本,不影响页面的性能。


  由于web worker位于外部文件中,因此无法访问下列JavaScript对象:


  1.window对象


  2.document对象


  3.parent对象




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐