thinking_fioa
thinking_fioa

HTML5-基础知识

HTML5

@author 鲁伟林
一直开发后端，现在开始全栈培养自己。
学习html的网址是：http://www.runoob.com/html/html5-intro.html
gitHub地址: https://github.com/thinkingfioa/Notes/tree/master/front-developer/html5

1 HTML5特性

HTML5中的一些有趣的新特性:

  • 1.用于绘画的canvas元素
  • 2.用于媒介回放的video和audio元素
  • 3.对本地离线存储提供更好的支持
  • 4.新的特殊内容元素,如:article、footer、header、nav、selection
  • 5.新的表单控件，如:calendar、date、time、email、url、search

2 HTML5 Canvas

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

2.1 创建一个画布(Canvas)

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

代码:

    
        浏览器不支持Canvas标签

2.2 使用JavaScript来绘制图像

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

代码:

    浏览器不支持Canvas标签

2.3 Canvas坐标

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

2.4 Canvas-路径(线条)

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

  • 1.moveTo(x,y)定义线条开始坐标
  • 2.lineTo(x,y)定义线条结束坐标
代码:

2.5 Canvas-圆

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

代码:

2.6 Canvas-文本

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

  • 1.font定义字体
  • 2.fillText(text, x, y)在canvas上绘制实心的文本
  • 3.strokeText(text, x, y)在canvas上绘制空心的文本
代码:

2.7 Canvas-渐变

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

  • 1.createLinearCradient(x,y,x1,y1)创建线条渐变
  • 2.createRadialGradient(x,y,r,x1,y1,r1)创建一个径向／圆渐变

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

代码:
// 线性变化

//径向／圆渐变

2.8 Canvas-画像

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

  • drawImage(image,x,y)
代码:

    无法加载
    
        浏览器不支持Canvas标签

3 HTML5内联SVG

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

4 HTML5 MathML

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

5 HTML5 拖放

5.1 设置元素为可拖放

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

5.2 拖动什么-ondragstart和setData()

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

5.3 放在何处-ondragover

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

5.4 进行放置-ondrop

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

代码:

    

        
拖动头像进入矩形框

6 HTML5 地理定位

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

7 HTML5 Video(视频)

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

8 HTML5 Audio(音频)

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

9 HTML5 Input类型

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

9.1 Input类型: color

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

代码:

    

        选择你喜欢的颜色:

9.2 Input类型: date

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

9.3 Input类型: datetime-local

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

9.4 Input类型: email

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

9.5 Input类型: month

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

9.6 Input类型: number

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

代码:

9.7 Input类型: range

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

9.8 Input类型: search

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

9.9 Input类型: tel

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

9.10 Input类型: time

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

9.11 Input类型: url

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

9.12 Input类型: week

week类型允许选择周和年

10 HTML5表单元素

HTML5有以下新的表单元素:

  • 1.
  • 2.
  • 3.

10.1 HTML5 元素

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

代码:

10.2 HTML5元素

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

代码:

10.3 HTML5元素

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

代码:

    

        0
        
        100+
        
        =

11 HTML5表单属性

HTML的

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

  • 1.autocomplete
  • 2.novalidate

的新属性:

  • 1.autocomplete
  • 2.autofocus
  • 3.form
  • 4.formaction
  • 5.formenctype
  • 6.formmethod
  • 7.formnovalidate
  • 8.formtarget
  • 9.height 与 width
  • 10.list
  • 11.min 与 max
  • 12.multiple
  • 13.pattern (regexp)
  • 14.placeholder
  • 15.required
  • 16.step

11.1 和 autocomplete属性

  • 1.autocomplete属性规定form和input域应该拥有自动完成的功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
  • 2.autocomplete属性有可能在form元素中开启的，而是在input元素中关闭
代码:

    First name:
    

    Last Name:
    

    E-mail:

11.2
novalidate 属性

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

代码:

    E-mail:

11.3 autofocus属性

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

代码:

    First Name:
    
    Last Name:

11.4 form属性

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

代码:
 
    First Name:
    
    


Last Name:

11.5 formaction属性

formaction属性用于描述表单提交的URL地址，会覆盖

元素中的action属性，元素中的action属性会无效

代码:

    E-mail:

11.6 formenctype属性

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

代码

    PPP:

11.7 formmethod属性

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

11.8 formnovalidate属性

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

代码:

    lwl-E-mail:

11.9 formtarget属性

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

代码:

  First name: 

  Last name:

11.10 height和width属性

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

代码：

    First name:
    

    Last Name:
    

    E-mail:

11.11 list属性

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

代码:

11.12 min和max属性

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

11.13 multiple属性

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

代码:

    选择图片:

11.14 pattern属性

  • 1.pattern属性描述了一个正则表达式，用于验证元素的值。适用于一些类型标签: text、search、url、tel、email和password
  • 2.使用title显示提示信息
代码:

    Country Code:

11.15 placeholder属性

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

代码:

    First Name:
    
    Last Name:

11.16 required属性

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

代码:

    Username:

11.17 step属性

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

12 HTML5 语义元素

语义元素指的是有意义的元素，能够清楚描述其意义给开发者。比如

或就是无意义，而则是语义元素。

12.1 HTML5中新的语义元素

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

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

具体如图所示：HTML5-基础知识_第1张图片

12.2 HTML5
元素

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

代码:

    

        
标题1

        
第一个段落

    

    

        
标题2

        
第二个段落

12.3 HTML5
元素

标签定义独立的内容

代码:

    

        
Internet Explorer 9

        
 Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。

12.4 HTML5