HTML5学习笔记(1)

HTML5简介

HTML5 是下一代的 HTML。
HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

HTML5语法

沿用了HTML的语法，更简洁，更人性化。
1.DOCTYPE及字符编码
① DOCTYPE：<!doctype html>
② 字符编码：<meta charset="utf-8">
③ 给文档指定语言：<html lang="zh-CN">

2.大小写都可以
① 目的是为了兼容更多的文档，在HTML5里不区分大小写
建议：写代码最好规范，最好小写(标签和属性)

3.布尔值
① <input type="checkbox" checked/>
在这里checked写上就表示true，如果不写就表示false。而不用像HTML4中要写成checked=”checked”了。

4.省略引号

1
2
3

<input type="text" />
<input type='text'>
<input type=text>

上面三种写法都可以，当然如果属性值中出现空格，就必须写引号或双引号
建议：属性中，引号最好是双引号

5.结束符相关
1、不允许写结束符的标签：area , base,br , col， command , embed , hr , img , input , keygen , link , meta , param , source , track , wbr。格式
2、可以省略结束符的标签：li , dt , dd , p , rt , optgroup , colgroup , thread , tbody , tr , td , th省略
3、可以完全省略的标签：html , head , body , colgroup , tbody

HTML5新增标签/废除标签

结构标签——原来用div

（1）section元素——表示页面中一个内容区块，比如章节、页眉、页脚或页面的其他部分。可以和h1、h2等元素结合起来使用，表示文档结构。例：html5中<section>…</section>html4中<div>…</div>。
（2）article元素——表示页面中一块与上下文部相关的独立内容。比如一篇文章。
（3）aside元素——表示article元素内容之外的、与article元素内容相关的辅助信息。
（4）header元素——表示整个页面或页面中一个内容区块的标题。
（5）hgroup元素——表示整个页面或页面中一个内容区块的标题进行组合。
（6）footer元素——表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系方式。
（7）nav标签——表示页面中导航链接的部分
（8）figure标签——表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元，使用figcaption标签为figure标签组添加标题。例如：

<figure>
<figcaption>PRC</figcaption>
<p>the people's republic of china was born in 1949</p> 
</figure>

表单标签

（1） email——必须输入email
（2） url——必须输入url地址
（3） number——必须输入数值
（4） range——必须输入一定范围内数值
（5） Date Pickers（日期选择器）

拥有多个可供选取日期和时间的新输入类型：
date-选择日、月、年
month-选择月、年
week-选择周、年
time-选取时间（小时和分钟）
datetime-选取时间、日、月、年（UTC时间）
datetime-local-选取时间、日、月、年（本地时间）
（6） search——用于搜索域，域显示为常规的文本域
（7） color

媒体标签

（1） vedio标签——定义视频，像电影片段或其他视频流。例如：
<vedio src="movie.ogg" controls="controls">vedio标签</vedio>
（2） audio标签——定义音频，像音乐或其他音频流。例如：
<audio src="someaudio.wav">audio标签</audio>
（3） embed标签——用来嵌入内容（包括各种媒体），格式可以是Mldl、Wav、AIFF、AU、MP3、flash等。例如：
<embed src=”flash.saf”/>;

其他标签

（1） mark标签——高亮文字
（2） progress标签——进度条

<progress max="100" value="85">
<span>85</span>
"%"
</progress>

（3） time标签——属于语义标签，或者说是微数据标签，用来标注页面中的某一块内容，这个标注是给机器（搜索引擎）用的
<time datetime="2013-10-20T09:00Z"pubdate>9:00</time>——发布时间
（4） ruby标签——对某个字进行注释

<ruby>
漠
<rt></rt> //注释内容
<rp>(</rp> //当浏览器不支持时显示
“厂马”
<rp>)</rp>
</ruby>

（5） wbr标签——软换行
（6） canvas标签——与javascript配合进行图形绘制

<canvas id="mycanvas">
<script >
…
</script>

(7)command标签

<menu>
<command onclick="alert(hello world)" label="click">
"click me!"
</menu>

HTML5废除标签

1、能用css代替的元素
basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为画面展示服务的，HTML5中提倡把画面展示性功能放在css中统一编辑。
2、不再使用frame框架。
frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的符合页面的形式，删除以上这三个标签。
3、只有部分浏览器支持的元素
applet、bgsound、blink、marquee等标签。
4、其他被废除的元素：废除rb，使用ruby替代。废除acronym使用abbr替代。废除dir使用ul替代。废除isindex使用form与input相结合的方式替代。废除listing使用pre替代。废除xmp使用code替代。废除nextid使用guids。废除plaintex使用“text/plian”（无格式正文）MIME类型替代。

HTML5新增属性

新增属性：（表单属性、链接属性、其他属性）

1.<meta http-equiv="pragma" content="no-cache">禁止页面缓存。
2.manifest:定义离线应用所需的文件。<html manifest="cache.manifest">
3.<meta charset="utf-8">指定页面的字符集
4.sizes：指定浏览器选项卡上显示的网页logo，使用方法如下：
<link rel='icon' href='demo_icon.gif' type='image/gif' sizes='16*16'>
5.<base href="http://localhost/" target="_blank">超链接打开方式，在新窗口打开页面地址以http://localhost/ 开头 + 相对地址

6.script：defer和async（加载方式）
defer–当浏览器读到<script src..> 脚本文件下载后不执行，等页面加载完成后才执行（推迟执行）
async–当浏览器读到<script src..> 脚本文件下载后立刻执行，但并不停止执行后续的代码（异步执行）

7、<a href="http://www.mukewang.com/" media=”handheld” hreflang="zh" ref="external">慕课网</a>

- a: media="handheld" (对相应的设备进行优化，handheld（手持设备），tv(电视))
- a：hreflang="zh"（设置语言，这里设置语言是中文,表示网址使用的网址是中文）
- a：ref="external"（设置超链接的引用，表示网址使用的是外部的）

8、start 起始值 reversed 倒序
如：

<ol start="50" reversed> 
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

9、<menu type="">type的三个类型contextmenu（上下文菜单），list（列表菜单），toolbar（工具栏）
10、内嵌css新增的属性 <style type="text/css" scoded>scoded表示只对外部标签内部才有效,示例：

<div>
    <style type="text/css" scoped>
    h1{color:red;}
    p{color:blue;}
    </style>
    <h1>this my name</h1>
    <p>this my name</p>
<div>

11、<iframe ></iframe>//内嵌框架

seamless属性—不会有边框、边距
srcdoc属性—指定内嵌框架的内容。有srcdoc 时，src 会被忽略，此时显示srcdoc中的内容，srcdoc的值可以是html代码
sandbox—规定内嵌框架的安全级别: （禁止提交表单、禁止执行javascript脚本、内嵌页面与外层页面不是相同的源）
①allow-forms:允许提交表单
②allow-scripts：允许执行脚本
③allow-same-origin：允许 iframe 内容被视为与包含文档有相同的来源
④allow-top-navigation：允许 iframe 内容从包含文档导航（加载）内容

HTML5删除属性

在html5中，那些可以用css样式定义的标签和属性都被删除了！

HTML5全局属性

data-yourvalue:自定义数据属性
hidden：可以对标签内容隐藏，代替之前需在CSS中输入的display：none
spellcheck：对输入内容进行语法标错
tabindex：通过设定值，按下tab后，按照标注的顺序进行切换
contenteditable：这部分页面内容可以编辑：可以配合JS对网页内容进行局部修改
designMode属性：
1
2
3
<sricpt>
window.document.designMode='on';
</sricpt>
designMode属性为on时，所有的文档属性都可以修改。off时只有上面的属性指定的区域可编辑。