HTML5学习笔记（1）：与html4的区别-职坐标

HTML5学习笔记（1）：与html4的区别

沉沙 2018-10-19 来源：阅读 1041 评论 0

摘要：本篇教程探讨了HTML5学习笔记（1）：与html4的区别，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML5学习笔记（1）：与html4的区别，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

一语法的改变

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><meter></meter>

　　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属性：表示该控件是第几个被访问到的