一 语法的改变

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. Html基础详解之（CSS）

    css选择器 CSS选择器用于选择你想要的元素的样式的模式. “CSS”列表示在CSS版本的属性定义(CSS1,CSS2,CSS3). CSS id和class选择器 <!DOCTYPE htm ...

  2. bash报错./mq.sh: line 15: warning: here-document at line 10 delimited by end-of-file (wanted `eof')

    [root@localhost tmp]# ./mq.sh./mq.sh: line 15: warning: here-document at line 10 delimited by end-of ...

  3. BCDedit 研究

    bcdedit的研究 系统引导安装 2009-11-12 22:21:13 阅读13 评论0 字号:大中小 首先说明下引导: 微软在Vista之前的系统,采用的是Ntldr来进行引导系统,使用的是bo ...

  4. iOS中FMDB和GCD剖析

    转载至:http://www.cocoachina.com/industry/20130819/6821.html 英文链接:https://github.com/ccgus/fmdb 由于FMDB是 ...

  5. hihocoder 网络流二·最大流最小割定理

    网络流二·最大流最小割定理 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi:在上一周的Hiho一下中我们初步讲解了网络流的概念以及常规解法,小Ho你还记得内容么? ...

  6. 把MSSQL的表数据查询成 insert into格式的函数

    USE [db] GO /****** Object: StoredProcedure [dbo].[proc_insert] Script Date: 12/05/2012 17:18:31 *** ...

  7. Android----paint触摸轨迹监听

    paint触摸轨迹监听,主要是三种而已,ACTION_DOWN,ACTION_MOVE,ACTION_UP public boolean onTouchEvent(MotionEvent event) ...

  8. (转)C++中返回对象的情形及RVO

    http://www.cnblogs.com/xkfz007/archive/2012/07/21/2602110.html 之前有文章介绍过临时对象和返回值优化RVO方面的问题.见此处. 在C++中 ...

  9. CodeForces 158C - Cd and pwd commands（模拟）

    这个题我们又把题意理解错了,队友翻译了以后给我解释,我问这个直接一个单词开头的是要找到这个文件夹吗,他说是,然后我就呵呵了..奔着树形结构去和字符串维护就去了...做了好久都没模拟出来,感觉做出来的人 ...

  10. PAT (Advanced Level) 1064. Complete Binary Search Tree (30)

    因为是要构造完全二叉树,所以树的形状已经确定了. 因此只要递归确定每个节点是多少即可. #include<cstdio> #include<cstring> #include& ...