一 语法的改变

1.1 HTML5中标记方法

　　1.内容类型（ContentType）:扩展符仍为“.html”或".htm",内容类型仍是“text/html”。

　　2.DOCTYPE声明：<!DOCTYPE html>(不区分大小写)。

　　3.指定字符编码：<meta charset = "UTF-8">

1.2 元素

　　1.2 .1新增的结构元素

　　1. section：内容区块，如章节，页眉，页脚，或页面中其他部分，可以和h1~h6等元素结合，标示文档结构。

　　2. article ：与上下文不相关的独立内容，如博客（报纸）中的一篇文章 ；

　　3. aside : 表示article元素的内容之外的，与article元素的内容相关的辅助信息；

　　4. header：标题；

　　5. hgroup：对标题的组合

　　6. footer：脚注；

　　7. nav : 导航链接部分

　　8. figure：独立的流内容，表示文档流内容中一个独立单元，使用figcaption元素为figure元素添加标题。

　　1.2.2 新增的其他元素

　　1.vedio：视频，<vedio src="movie.ogg" controls="controls">...</vedio>

　　2. audio：音频，<audio src="audio.ogg">...</vedio>

　　3. embed：插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等，<embed src="horse.wav"/>

　　4. mark：呈现突出显示或高亮显示的文字，应用：在搜索结果中向用户高亮显示搜索的关键词。<mark>博客园</mark>

　　5. progress：运行中的进程，可显示JS中耗费时间的函数进程，<progress value="22" max="100"></progress>

　　6. time：日期和时间，<time></time>

　　7. ruby：表示ruby注释（中文注音或字符）,与rt，rp元素结合使用，例：<ruby>漢 <rt> ㄏㄢˋ </rt></ruby>

　　8. wbr：软换行，表示浏览器窗口或父级元素宽度不够时，此处主动换行。

　　9. canvas：提供画布，把绘图API展现给客户端JS

　　10. command：命令按钮，如单选按钮，复选框或按钮,<command onclick="alert('Hello World')"> Click Me!</command>

　　11. details：用于描述文档或文档某个部分的细节。可以和summary元素配合，summary提供标题或图例，标题可见，用户点击时，会显示细节信息。summary是它第一个子元素

　　　　　　<details>

　　　　　　　　<summary>Copyright 2011.</summary>

　　　　　　　　<p>All pages and graphics on this web site are the property of W3School.</p>

　　　　　　</details>

　　12. datalist：可选数据的列表，与input元素配合。制作出输入值的下拉列表

　　　　　　　　<input list="cars" />
　　　　<datalist id="cars">
    　　　　<option value="BMW">
   　　　　 <option value="Ford">
    　　　　<option value="Volvo">
　　　　</datalist>

　　13. datagrid：可选数据的列表，以树形列表的形式显示。

　　14. keygen：生成密钥，用于表单的密钥对生成器字段

　　15. output：不同类型的输出，比如脚本的输出

　　16. source：为媒体元素（如<vedio>和<audio>）定义媒介资源

　　17. menu：菜单列表，当希望列出表单控件时使用

　　　　　　　　<menu>

　　　　　　　　　　　　<li><input type="checkbox" />red</li>

　　　　　　　　　　　　<li><input type="checkbox" />blue</li>

　　　　　　　　</menu>

　　1.2.3 新增的input元素的类型

　　HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证

  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color

1.3 属性

　　1.3.1 表单相关属性

　　1. 可对input（type=text）、select、textarea、button指定autofocus属性；

　　2. 可对input（type=text）、textarea指定placeholder属性

　　3. 可对input、output、select、textarea、button、fieldset元素指定form属性，声明属于那个表单，然后将其放置在页面任何位置而不在表单之内；

　　4. 可对input元素（type=text）与textarea指定required属性，提交时进行检查，必须填写；

　　5. 为input元素新增的属性：autocomplete、mim、max、multiple、pattern与step

　　1.3.2 链接相关属性

　　1. 为a和area增加了media属性，规定目标URL是为什么类型的媒介/设备进行优化，只能在href属性存在时使用；

　　2. 为area元素增加了hreflang和rel属性，保持与a元素，link元素的一致；

　　3. 为link元素增加了新属性sizes，可与icon元素结合使用，制定关联图标（icon）的大小；

　　4. 为base元素增加了target属性，主要目标是保持与a元素的一致；

　　1.3.3 其他属性

　　1.为ol元素增加了属性reversed。指定列表倒序显示；

　　2. 为meta元素增加了charset属性，

　　3. 为menu元素增加type和label；label为菜单定义一个可见标注，type属性让菜单可以以上下文菜单、工具条与列表菜单的三种形式出现；

　　4. 为style增加scoped属性，规定样式的作用范围，比如只对某个树起作用；

　　5. 为script元素增加async属性，定义脚本是否异步执行；

　　6. 为html元素增加mainfest,开发离线的Web应用程序时它与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息；

　　7. 为iframe元素增加三个属性sandbox、seamless、srcdoc，用来提高页面安全性，防止不信任的Web页面执行某些操作；

另外，html5中还废弃了很多属性；

　　1.3.4  全局属性

　　所谓全局属性，就是任何元素都可以使用的属性

　　1. contentEditable属性：允许用户编辑元素中内容，true或false,inherit; 另外，还有isContentEditable属性，元素可编辑时为true

　　2. designMode属性：指定整个页面是否可编辑；该属性只能在js脚本中被编辑修改，有两个值——on和off，例：document.designMode = "on";

　　3. hidden属性：布尔值属性；

　　4. spellcheck属性：针对input(type=text)和textarea，对用户输入的文本进行拼写和语法检查，布尔值；必须声明属性值；

　　5. tabindex属性：表示该控件是第几个被访问到的

HTML5学习笔记一：与html4的区别（整合）的更多相关文章

  1. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  2. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  4. 【PMP学习笔记】第4章 项目整合管理

    [PMP学习笔记]第4章 项目整合管理 一.项目整合管理 什么是项目整合管理? 项目整合管理由项目经理负责.虽然其他知识领域可以由相关专家(如成本分析专家.进度规划专家.风险管理专家)管理,但是项目整 ...

  5. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  6. HTML5 学习笔记--------》HTML5概要与新增标签！

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  7. HTML5学习笔记（一）：HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

  8. CSS3秘笈第三版涵盖HTML5学习笔记1~5章

    第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...

  9. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

  10. Html5学习笔记(1)

    1.figure\figcaption||detail\summary||mark学习笔记 效果图 代码为: <!DOCTYPE html> <html> <head&g ...

随机推荐

  1. 教你用CSS代码写出的各种形状图形

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...

  2. Android 下得到 未安装APK包含信息 等

    很多情况下,我们需要通过APK文件来得到它的一些信息. (此时此APK不一定被安装了) 0. 基础知识:可以通过android.content.Context的方法 getPackageManager ...

  3. plsql找外键约束关联的表的方法

    直接Ctrl + 鼠标左键 表名 就可以找到参照表(关联表)的名称 下面的是复杂的方法 这个就是关联的表 这里右键查看 可以查看到参照的表

  4. ubuntu配置openvpn

    http://www.zhixing123.cn/ubuntu/ubuntu-openvpn-settings-tutorial.html 本文介绍Ubuntu连接使用OpenVPN方法教程,Ubun ...

  5. Struts2.3.16日志（中）

    Result Configuration --Result 配置 当一个操作类方法完成后,它将返回一个字符串.字符串的值是用来选择一个元素的结果.一个操作映射的结果往往会有一组代表不同的可能的结果.一 ...

  6. 使用Spring框架的好处（转帖）

    http://blog.csdn.net/cynhafa/article/details/6205361 在SSH框假中spring充当了管理容器的角色.我们都知道Hibernate用来做持久层,因为 ...

  7. opencart配置mail服务

    编辑mail配置,如下图所示 如果sever开启了SSL,则端口改成465 在Contant Us页面留言,发送成功则配置完成

  8. Struts2--Result类型

    4种 result类型: dispatcher, redirect, chain, redirectAction dispatcher, redirect只能跳转到jsp等页面 chain,redir ...

  9. 【HighCharts系列教程】三、图表属性——chart

    一.chart属性说明 Chart是HighCharts图表中主要属性,包括了图表区域的颜色.线条.高度.宽度.对齐.图表类型等诸多属性,也是HighCharts图表中必须配置的属性之一. 配置cha ...

  10. 解决IE6中PNG图出现灰色背景问题

    第 1 种方法:定义一个样式,给某个div应用这个样式后,div的透明png背景图片自动透明了.(注意两处图片的路径写法不一样,本例中,icon_home.png图片与html文件在相同目录) < ...