4月9日学习笔记——HTML5

  • 新增功能

1. HTML5新标准中直接添加了拥有具体含义的HTML标签比如:<article><footer><header><nav><section>、<video><progress>(进度条)、<meter>(容量占用条)、<time>(不显示效果)<aside>(文章侧栏)<canvas>

同时取消了一些标签,如<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <isindex>, <noframes>, <strike>,<tt>

2. HTML5的标准中直接添加了智能表单,让这一切都变得那么的简单,比如 calendardatetimeemailurlsearch

3. 在HTML5标准中原生的就支持音频、视频、画布等技术。让WEB程序更加独立,更好的适应多种形式的客户端。

4. HTML5 提供了两种在客户端存储数据的新方法

5. HTML5 的canvas元素使用 JavaScript 在网页上绘制图像。并拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

6. 在不影响UI update及浏览器与用户交互的情况下, 前端做大规模运算,只能通过 setTimeout 之类的去模拟多线程 。而新的标准中,JS新增的HTML5 Web Worker对象原生的就支持多线程。

7. WebSockets是在一个(TCP)接口进行双向通信的技术,PUSH技术类型。WebSocket是html5规范新引入的功能,用于解决浏览器与后台服务器双向通讯的问题,使用WebSocket技术,后台可以随时向前端推送消息,以保证前后台状态统一,在传统的无状态HTTP协议中,这是“无法做到”的。

8. HTML5(text/html)浏览器将在错误语法的处理上更加灵活。HTML5在设计时保证旧的浏览器能够安全地忽略掉新的HTML5代码。与HTML4.01相比,HTML5给出了解析的完整规则,让不同的浏览器即使在发生语法错误时也能返回完全相同的结果。

9. 由于项目中经常遇到用Web应用中控制操作本地文件,而之前都是使用一些富客户端技术比如flashActiveXSilverlight等技术。在HTML5的新的提供的 HTML5 File API 让JS可以轻松上阵了。

10. HTML5仅有一种类型,<!DOCTYPE html>


  • 页面布局变化

   HTML5: 

代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>my page</title>
 5     </head>
 6     <body>
 7         <header>header</header>
 8         <nav>nav</nav>
 9         <article>
10             <section>section</section>
11         </article>
12         <aside>aside</aside>
13         <footer>footer</footer>
14     </body>
15 </html>

  • 标签具体解释

<section>定义文档中的节。它用来表现普通的文档内容或应用区块,但section元素标签并非一个普通的容器元素,它表示一段专题性的内容,一般会带有标题。

<article>特殊的section标签,它比section具有更明确的语义,它代表一个独立的、完整的相关内容块。当我们描述一件具体的事物的时候,通常鼓励使用article来代替sectionarticle会有标题部分(通常包含在header内),也可以包含footerarticle可以嵌套,内层的article对外层的article标签有隶属关系。

<nav>可以作为页面导航的链接组,其中的导航元素链接到其它页面或者当前页面的其它部分,使html代码在语义化方面更加精确,同时对于屏幕阅读器等设备的支持也更好。

<aside>标签用来装载非正文的内容,被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告,成组的链接,侧边栏等等。

<header>标签定义文档的页眉,通常是一些引导和导航信息。它不局限于写在网页头部,也可以写在网页内容里面。通常header标签至少包含一个标题标记(h1-h6),还可以包括hgroup标签,还可以包括表格内容、标识、搜索表单、nav导航等。

<footer>标签定义sectiondocument的页脚,包含了与页面、文章或是部分内容有关的信息,比如说文章的作者或者日期。 它和header标签使用基本一样,可以在一个页面中多次使用,如果在一个区段的后面加入footer,那么它就相当于该区段的页脚了。

<hgroup>标签是对网页或区段section的标题元素(h1-h6)进行组合。例如,在一区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。

<figure>用于对元素进行组合。多用于图片与图片描述组合。


  • <input>新增类型

1. number类型

1 <input type="number" name="demoNumber" min="1" max="100" step="1"/>

控制输入数据的范围。name: 标识表单提交时的key值,min: 标识当前输入框输入的最小值, max: 标识当前输入框输入的最大值,step: 标识点击增大/减小的时候,增加/减小的步长,value:规定默认值

2. Email类型

1 <input type="email" name="email" placeholder="请输入注册邮箱"/>

系统自动检测是否为邮箱格式

3. URL类型

1 <input type="url" placeholder="请输入网址" name="url"/>

系统自动检测是否为网址格式

4. range类型

1 <form oninput="output.value=parseInt(range.value)">
2     <input type="range" min="0" max="100" step="5" name="range" value="0"/>
3     <output name="output">0<output/>
4 </form>

range是滑动条效果,可以和<output>标签一起使用显示滑动条代表的数值(form标签加上oninput="output.value=parseInt(range.value)")

5. 日期类型

datetime类型谷歌浏览器不支持

6. color类型

1 <input type="color" name="colordemo"/>

7. 表单自动提示

1 <input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />
2 <datalist id="autoNames">
3   <option  value="实验楼" ></option>
4   <option  value="HTML5" ></option>
5   <option  value="input标签" ></option>
6 </datalist>

  • 表单新增属性

1.input标签新增属性

2.form新增属性


  • 文件操作API

主要是FileList、Blob、File、FileReader几个JS对象:

FileList:

时间: 2024-10-10 14:45:50

4月9日学习笔记——HTML5的相关文章

2016年7月19日学习笔记

2016年7月19日学习笔记 计算机系统的组成部分 计算机系统由硬件系统和软件系统两大部分组成 硬件系统 冯.诺依曼体系结构: 1946年数学家冯.诺依曼提出运算器,控制器,存储器,输入设备,输出设备. 具体变现为一下硬件: 运算器,控制器  ------>  CPU 存储器          ------>  内存(断电数据清空),硬盘(可永久存储数据) 输入设备------>  键盘,鼠标等 输出设备------>  显示器 打印机等 软件系统 OS : Operating S

2014年7月17日学习笔记--PHP的循环结构学习

今天重新开始学习PHP, 为了学习PHP买了书,但书是一本大部头的书,不好带一直没有好好学习,我决定把书拆了分章来看,这样也方便带 也可以很快完成任务. 今天在linux mint 17上安装了lnmp 环境 和brackets工具,来学PHP,小的例子用vim来完成的. 记录一下自己美化的九九乘法表 代码如下: <?php     for($i=1;$i<=9;$i++){         for($j=1;$j<=9;$j++){             if($i>=$j){

2016年7月21日学习笔记

2016年7月21日学习笔记 Linux安装以后出现的文件目录的作用: 文件系统的类型 LINUX有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别. 普通文件:如文本文件.C语言元代码.SHELL脚本.二进制的可执行文件等,可用cat.less.more.vi.emacs来察看内容,用mv来改名. 目录文件:包括文件名.子目录名及其指针.它是LINUX储存文件名的唯一地方,可用ls列出目录文件. 连接文件:是指向同一索引节点的那些目录条目.用ls来查看是,连

linux文档的打包和压缩 3月27日学习笔记

linux文档的打包和压缩 一.gzip:压缩工具 gzip只能压缩文件,不可以压缩目录后面直接跟要压缩的文件就可以进行压缩. 文件压缩后默认会带一个后缀名,作用是为了区分是什么工具压缩的. 压缩和解压之后源文件都会消失. 1.压缩passwd文件 [[email protected] cheng]# gzip passwd  [[email protected] cheng]# ls passwd.gz 2.gzipz -d:解压文件 [[email protected] cheng]# gz

3月18日学习笔记

一.特殊权限(chattr.lsattr)二.特殊权限(set_uid.set_gid.sticky_bit)三.搜索文件(which.whereis.find.locate)四.链接文件的建立(ln -s.ln) 一.特殊权限设置 chattr命令      这个命令为文件或目录添加特殊权限,较常用的有i.a这两个权限.chattr +i 名称(文件或目录)     文件:文件添加此权限后无法写入数据,无法重命名.删除此文件.    目录:目录添加此权限后无法再写入文件.无法删除目录内的文件或

4月1日学习笔记(CSS部分)

CSS初始化 内边距padding padding属性宽度是按照上右下左的顺序来的,否则单独设置就是padding-left... 边框border border可以设置样式(border-style),颜色(border-color),宽度(border-width). 颜色和宽度都可以单独设置border-left-color/border-left-width. 外边距margin 单独设置就是“margin-left:”.margin笼统设置按照上右下左的顺序.但可以省略设置: 如果缺少

4月6日学习笔记——css设置网页打印样式

有三种方法 1. 为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: <link rel="stylesheet" href="css/noprint.css" media="screen" />  用于打印的css:<link rel="stylesheet" href="css/print.css" media="print" />

3月7日学习笔记

第一&二章 Chapt 1 *信息的基本概念:总的来说,信息的概念存在两个基本的层次,即本体论层次和认识论层次.前者是纯客观的层次,只与客体本身的因素有关,与主体的因素无关:后者则是从主体立场来考察的信息层次,既与客体因素有关, 也与主体因素有关.本体论层次的信息概念因为它的纯客观性而成为最基本的概念,认识论层次的信息概念则因为考虑了主体因素而成为最适用的概念. *认识论信息与本体论信息的关系:从上面给出的定义可以看出,认识论信息与本体论信息是相通的,它们共同的核心都是"事物运动的状态和

2015年4月29日学习笔记

1.又学到了一种水平垂直居中的方法.适用于父级元素只有一个子元素的情况,比如全屏的效果. 父级元素:pos-r, w.h设定;(emmet代码, 下同) 子元素:   pos-a,w.h设定, t0 b0 l0 r0, m-a. 以前只知道margin: 0 auto之类的,从来没想到margin: auto的妙用...孤陋寡闻了... <!DOCTYPE html> <html lang="zh-CN"> <head> <meta chars