html5和html4的区别

发表于   |   分类于   |     |  

参考

1.html5的元素：http://www.w3school.com.cn/tags/tag_menu.asp

html5的目标

  • 解决浏览器的兼容性
  • 使得文档结构清晰
  • 为Web应用提供API

html5的语法改动

1.可以省略标记的元素
不允许写结束标记的元素：area、base、br、col、command、hr、img、input、link…
可以省略结束标记的元素：li、dt、p、option、tbody、tr、tfoot…
可以省略全部标记的元素：html、head、body、colgroup、tbody

2.具有bolean值的属性
有些属性不指定属性值时，表示属性值为true，如果想使得属性值为false，可以不使用该属性值。
表示属性值为true可以有几种方式：属性名设置为属性值或者空字符串设置为属性值。
<input type="checkbox" checked>//表示checked为true
<input type="checkbox"> //表示chencked为false

3.省略引号
html5中，当属性值不包含空字符串、<、>、=、单引号、双引号等字符时，属性值可以不用引号括起来。
<input type=text>

新增的元素和废除的元素

新增的结构元素

1.<section>
适合用于章节、标签切换效果的每一个tab容器或论文中有编号的地方，也可以用于网站主页中划分简介、新闻、联系信息等板块
2.article
表示页面中一块与上下文不相关的独立内容
3.aside
与article内容相关的辅助信息
4.header
标题
5.hgroup
将标题及其子标题进行分组。
6.footer
脚部
7.nav
导航
8.figure
独立的流内容。一般表示文档主题流内容的一个独立单元

1
2
3
4
<figure>
		<figcaption>标题</figcaption>
		<p>内容xxxxxxxxxxxxxxxxxxx</p>
</figure>

新增的其他元素

1.video视频

1
<video src="./movie.mp4"  controls="controls"> video元素</video>

2.audio 音乐

1
<audio src="ext.mp3"> audio元素</audio>

3.embed插入各种多媒体

1
<embed src="hor.wav" />

4.mark 向用户呈现那些需要突出显示或高亮的文字。例如在搜索结果中向用户高亮显示搜索关键词
<mark></mark>

5.progress 表示运行中的进程，可以用来显示js中消耗时间的函数的进程

1
<meter value="0.6">60%</meter>

显示60%的进度条

6.time 时间
<time></time>

7.ruby 表示ruby的注释
8.wbr 软换行
与br的区别是：当浏览器宽度足够宽时，不进行换行

9.canvas 画布
它把一个绘图API展示给js，以使脚本能够把想绘制的东西绘制到这块画布上。

1
2
3
4
5
6
7
8
9
10
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

Canvas.getContext(contextID)参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

10.details 细节信息
配合summary使用,summary提供标题或者图例，summary元素时可见的，点击summary元素时会显示details的细节信息

1
2
3
4
<details>
        <summary>HTML5</summary>
        this is a            a            details
</details>

11.menu 菜单列表

1
2
3
4
<menu>
		<li>red</li>
		<li>blue</li>
</menu>

新增input元素

提交的时候自动检查是否符合要求

1
2
3
4
5
<input type="date" name="user_date">
 <input type="range" min="1" max="10">
  <input type="number">
   <input type="email"  value="">
   <input type="url">

html5废除的元素

1.不再使用frame框架，只支持iframe框架

新增的属性

表单相关的属性

1.autofocus属性：可以对input(type=text)、select、textarea、button元素指定autofocus属性，使得自动获得焦点：
<input type="text" name="user_name" autofocus="autofocus" />
2.placeholder属性：input(type=text)与textarea的属性。用户提示，框内默认显示的文字
3.form属性：对input、output、select、textarea、button、filedside指定form属性，声明它时属于哪个表单，这样可以不必将它放在表单内，放在页面任何位置都可以。
4.required属性：input(type=text)、textarea拥有。表示在用户提交的时候进行检查该元素必填。
5.novalidate 属性:form属性，表示在表单提交时不进行验证。
6.input属性：

  • readonly属性:input，规定输入字段为只读，不能修改。
  • disabled属性 ：input，禁用。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。该属性不需要值。
  • size属性：input，输入字段的字符数。
  • maxlength属性：最大长度
  • autocomplete 属性：规定表单或输入字段是否应该自动完成。autocomplete=”on”，当自动完成开启，浏览器会基于用户之前的输入值自动填写值。
    autocomplete 属性适用于<form> 以及如下 <input>类型：text、search、url、tel、email、password、datepickers、range 以及 color。
    • formaction属性：适用于input(type=submit,type=image)、button。formaction 属性覆盖
      元素的 action 属性。
    • list属性：list 属性引用的 <datalist> 元素中包含了<input> 元素的预定义选项
1
2
3
4
5
6
7
8
9
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>
  • min 和 max 属性
    min 和 max 属性规定 <input> 元素的最小值和最大值。
    min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
    <input type="date" name="bday" max="1979-12-31">
  • multiple 属性
    multiple 属性是布尔属性。
    如果设置，则规定允许用户在 <input> 元素中输入一个以上的值。
    multiple 属性适用于以下输入类型：email 和 file。
    <input type="file" name="img" multiple>
  • pattern 属性
    pattern 属性规定用于检查 <input> 元素值的正则表达式。
    pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。
1
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="错误提示">
  • step 属性
    step 属性规定 <input> 元素的合法数字间隔。

链接相关属性

  • 为a与area元素添加了media属性。
  • 为area元素添加hreflang属性与rel属性
  • 为link元素添加sizes新属性
  • 为base元素添加target属性

其他属性

  • 为ol元素添加reversed属性，指定列表倒序显示
  • 为menu元素增加两个新属性：type和label
  • 为style增加scoped属性。如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。
  • 为script增加async属性。async 属性规定一旦脚本可用，则会异步执行。
    注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。
    注释：有多种执行外部脚本的方法：
    如果 async=”async”：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
    如果不使用 async 且 defer=”defer”：脚本将在页面完成解析时执行
    如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本、
  • 为html元素增加manifest属性
  • 为iframe元素增加sandbox、seamless、srcdoc属性(后两个浏览器还没实现)，提高页面安全性
    <iframe src="http://alibaba.com" sandbox>,sandbox后面如果不加任何值，就代表采用默认的安全策略，即：iframe的页面将会被当做一个独自的源，同时不能提交表单，以及执行JavaScript脚本，也不能让包含iframe的父页面导航到其他地方，所有的插件，如flash,applet等也全部不能起作用。简单说iframe就只剩下一个展示的功能

废除的属性

align：(div、h1..、p)。使用css替代
其他不列举了 。总之是希望样式都放到css中去

全局属性

contentEditable

功能是允许用户编辑元素中的内容

designMode

用来指定整个页面是否可编辑，该属性只能子啊js里被修改.为on时，上面的contentEditable属性的元素都变成了可编辑状态。

hidden

html5中所有元素都允许使用hidden属性。可以用js使得该隐藏的元素显示。

spellcheck

html5针对input(type=text)元素与textarea新增。作用时对用户输入的文本内容进行拼写和语法检查。spellcheck属性必须设为true才有效。
如果元素的readonly属性或者disable属性设置为true，则不执行拼写检查。

tabindex

Tab键让页面中的控件获得焦点，tabindex值表示该控件时第几个被访问到的。
如果你不想某个已经focus的元素使用tab获得焦点，可以把该元素的tabindex值设置为负数，通常设置为-1

新增的主体结构元素

article元素

1
2
3
4
5
6
7
8
9
10
<article>
        <header>
            <h1>苹果</h1>
            <p>发表日期：<time pubdate="pubdate">2017-06-22</time></p>
        </header>
        <p><b>苹果</b>植物类水果...</p>
        <footer>
            <p><small>版权所有，翻版搞死你</small></p>
        </footer>
</article>

aiticle可以嵌套，内容要相关联：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<article>
		<header>...</header>
		<p>...</p>
		<section>
		<h2>...</h2>
		<article>
					<header>...</header>
					<p>...</p>
		</article>
		<article>
					<header>...</header>
					<p>...</p>
		</article>
		</section>
</article>

section元素

section元素用于页面上内容进行分块，通常由内容及其标题组成。

1
2
3
4
<section>
		<h1>标题</h1>
		<p>内容</p>
</section>

aside元素

用来表示页面附属信息部分，例如：侧边栏、广告、导航条等

pubdate

布尔值属性，代表网页的发布日期

表单与文件

input类型

1.url类型
2.email类型
3.date类型：选择年月日
4.datetime类型：专门输入UTC时间的文本框，提交时会对输入的日期进行检查。
5.datetime-local类型：专门用来输入本地日期和时间的文本框，提交时会验证。
6.month、week类型
7.number类型：有min、max、step属性
8.range类型：有min、max、step属性。用滑条形式显示
9.search类型：专门用来输入搜索关键词的文本框
10.tel类型：电话号码。没有特殊的校验规则，通过pattern属性来验证。
11.color类型：提供一个颜色选取器

表单验证

1.自动验证：

  • required属性：必填
  • pattern属性：正则表达式
  • min、max属性：输入数值或日期范围
  • step属性：步幅

2.取消验证

  • 使用form的novalidate属性，整个form里的元素的验证都失效
  • 使用input的formnovalidate属性,使得单个input元素验证失效

文件

file对象

  1. file对象有两个属性：

    • name：文件名，不包括路径
    • lastModifiedDate：最后修改日期
      file还继承了Blob对象的两个属性size和type，size表示文件的大小，type表示文件类型，类型嗾使以“image/”开头

  2. FileReader接口
    作用是把文件读入内存，并且读取文件中的数据。
    检查浏览器是否支持改接口方法：

1
2
3
4
5
if(typeof FileReader=='undefined')
           {alert("未实现");}
       else{
           var reader=new FileReader();
       }
  • 接口使用
    *
    filereader使用

  • 接口事件

拖放API

1.drag and drop事件流程
一个完整的drag and drop流程通常包含以下几个步骤:

  • 设置可拖拽目标.设置属性draggable=”true”实现元素的可拖拽.
  • 监听dragstart设置拖拽数据
  • 为拖拽操作设置反馈图标(可选)
  • 设置允许的拖放效果,如copy,move,link
  • 设置拖放目标,默认情况下浏览器阻止所有的拖放操作,所以需要监听dragenter或者dragover取消浏览器默认行为使元素可拖放.
  • 监听drop事件执行所需操作

2.拖拽事件
以下是拖拽产生的一系列事件,拖拽事件产生时不会产生对应的鼠标事件.

  • dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.
  • dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮
  • dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.
  • dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.
  • drag:拖拽期间在被拖拽元素上连续触发
  • drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.
  • dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.

3.DataTransfer对象
拖拽事件周期中会初始化一个DataTransfer对象,用于保存拖拽数据和交互信息.以下是它的属性和方法：

  • dropEffect: 拖拽交互类型,通常决定浏览器如何显示鼠标光标并控制拖放操作.常见的取值有copy,move,link和none
  • effectAllowed: 指定允许的交互类型,可以取值:copy,move,link,copyLink,copyMove,limkMove, all, none默认为uninitialized(允许所有操作)
  • files: 包含File对象的FileList对象.从操作系统向浏览器拖放文件时有用.
  • types: 保存DataTransfer对象中设置的所有数据类型.
  • setData(format, data): 以键值对设置数据,format通常为数据格式,如text,text/html
  • getData(format): 获取设置的对应格式数据,format与setData()中一致
  • clearData(format): 清除指定格式的数据
  • setDragImage(imgElement, x, y): 设置自定义图标

dataTransfer对象在传递给监听器的事件对象中可以访问,如下:

1
2
3
draggableElement.addEventListener('dragstart', function (event) {
  event.dataTransfer.setData('text', 'Hello World');
}, false);

画图

画矩形

先设置颜色，再勾勒形状
1.取得canvas元素
2.取上下文:context
3.设定绘图样式：填充fillStyle 边框strokeRect
4.绘制形状:context.fillRect(x,y,width,height)

1
2
3
4
5
6
var context= document.getElementById("canvasId");
        context.fillStyle="red";//填充颜色
        context.strokeStyle="blue";//外边框颜色
        context.lineWidth=10;//线宽度
        context.fillRect(50,50,100,100);//画填充
        context.strokeRect(50,50,100,100);//画边框

使用路径

fill() 填充当前绘图（路径）
stroke() 绘制已定义的路径
beginPath() 起始一条路径，或重置当前路径

绘制圆形

先勾勒图形轮廓，再设置颜色。和上面的相反
1.取得canvas元素
2.取得上下文
3.创建路径 context.beginPath()
4.创建图形 context.arc(x,y,半径,起始角度，结束角度，是否逆时针画)
5.路径创建完后关闭路径 context.closePath()
6.设定绘制样式 context.fillStyle context.fill()

绘制直线

1.moveTo(x,y) 将光标移动到指定坐标点，直线可以以这个为起点
2.lineTo(x,y) 直线终点

光标在哪里那里就是直线的起点。lineTo的坐标是下一个直线的起点。

颜色渐变

1
2
3
4
var g1=context.createLinearGradient(xStart,yStart,xEnd,yEnd);
g1.addColorStop(0,'#000');
g1.addColorStop(1,'#fff');
context.fillStyle=g1;//把fillStyle设置为LineearGradient对象

坐标变换

1.平移：context.translate(x,y)
2.放大：context.scale(x,y)
3.旋转：context.rotate(angle)

canvas绘制视频

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<body>
<p>要使用的视频：</p>
<video id="video1" controls width="270" autoplay>
  <source src="/example/html5/mov_bbb.mp4" type='video/mp4'>
  <source src="/example/html5/mov_bbb.ogg" type='video/ogg'>
  <source src="/example/html5/mov_bbb.webm" type='video/webm'>
</video>
<p>画布（每 20 毫秒，代码就会绘制视频的当前帧）：</p>
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play', function() {var i=window.setInterval(function() {ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
</script>
</body>
</html>

热评文章