HTML5学习笔记-第二章 核心技术

八、div标记

1、层：层属于网页中的块级元素，提供了一种分块控制网页内容的方法，各层可以叠加。一般有两类层，CSS层和Netscape层。主要使用CSS层

2、

是用来为大块的内容提供结构和背景的元素。

 属性可以设置id,align对齐方式,class，定义CSS样式中的CLASS选择符。

  style定于CSS属性值，可以定义位置、display等

3、 与

非常相似，也能作为CSS容器。但是与DIV的区别是div主要是控制块的，span是控制行的。Div会自动换行，span不会

4、标记，又叫浮动帧标记，能够拖入外部文件。属性可以设置位置、class、对齐方式、大小、内容等等

5、

和都可以定义层，精确定位层。两者的区别是ilayer会自动分行显示，laye不会。

 

九、表单页面获取数据

1表单一般是通过

限定区域。

2表单属性：

   action是指向处理数据的脚本或者程序的地址，也可以直接是一个地址，说明数据提交的地方，如email地址。

   Name是表单名字。

   Method是表单中数据传送的方式，get是将数据附在url后面传，速度快，但是数据不能太多，post是分开传，速度慢，但是数据量可以大。

   Enctype是表单信息提交的编码方式，可以选择纯文本、默认编码、MIME编码。Target是目标显示方式，即提交后返回的信息的显示方式，可以选择新开窗口、父窗口等等方式。

3、文字字段-text：输入任何类型的数据，一般至少需要填name\size\maxlength等属性。

4、密码域-password：文本以*号显示

5、单选-radio：”redio” value=”单选按钮的取值” name=”单选按钮名称” checked=”checked”>

6、多选：checkbox

7、普通按钮-button：可以设置value，onclick事件监听器

8、提交按钮-submin：只需要设置value，他会执行form里的action

9、重置：reset

10、图像域：”image” src=”图像路径” name=”自己取名字”>

11、隐藏域-hidden：不显示，但是在提交的时候会把value一起提交上去

12、文件域-file：可以选择文件

13、下拉菜单和列表：

”名字”>

  ” ” selected=” ”>显示的内容

 

14、文本域：textarea:可以设置多行，一般用于论坛啊等等

 

十、多媒体页面

1、文字的动画

   Marquee:设置文字滚动  文字（可以嵌入front设置属性）。属性可以设置方向、滚动循环次数、速度、延迟、带范围滚动、背景颜色等等

2、背景音乐：” ”>属性可以设置播放次数

3、多媒体标记：图像、声音文件、视频文件都可以用。” ” ....各种属性>，属性可以设置自动播放、循环次数、隐藏视屏保留声音

4、canvas可以绘制图形图像，可以画直线、圆、多边形、颜色、透明度等等（不过我觉得干嘛不直接把图片做好了用呢？）还提供图片的预览功能，保存和处置的图片

 

十一、 HTML5的新特性

1、全局属性：指对所有元素都有效的属性。

  contentEditable:允许用户编辑元素中的内容，页面可以修改编辑。加在元素属性里面  “contentEditable=”true””

  Spellcheck：拼写检查，如”true”>

 

十二、文件与拖放

文件

1、在HTML5中，允许一次添加多个文件，只需要在file的属性里写一个”multiple”。FIlelist用于存放选择的多个文件。

 

 

 

 Function Showname()

{

  Var file;

  For(var i=0;i“file”).files.length;i++)

{

  file=document.getElementByIdx_x(“file”).files[i];

  Alert(file.name);

}

}

 

 

”file” id=”file ” multiple  size=”50”/>

”button” οnclick=”Showname;” value=”提交” />

 

2、file有size、type、name等属性可以选择，可以通过类型筛选文件类型是否合法。”file” id=”file ”accept=”image/*”/>表示只接受图片类型文件

3、FileReader可以提供读取图片、读取文本的API。在使用前，需要判断浏览器是否支持此接口。

   If(typeof  FileReader==’undefined’)

{

   result.innerHTML=”不支持”

}

4、预览读取图片:readAsDataURL。一般是先定义一个div块，然后后面通过innerHTML来实现在那个块上进行显示

5、预览文本文件:readAsTex。一般是先定义一个div块，然后后面通过innerHTML来实现在那个块上进行显示

6、FIleReader有很多接口实现，onload是读取成功后触发，然后再显示读取的内容。还有读取中触发、失败触发、终端触发、读取开始触发等等

拖放

1、在HTML5中，除了可以在浏览器内部进行拖放外，还可以与其他的应用程序之间进行拖放操作。

2、拖放一般做两步：1将要拖放的元素的draggable属性设置为true。2编写拖放事件处理代码

3、dataTransfer对象是存放拖动的数据

4、setDragImage可以设置拖放图标

 

十三、 多媒体播放

1、HTML5能够利用浏览器自带的播放器进行音乐和视频的播放，在以前都是用插件进行播放。

2、播放音频，播放视频。

3、在播放的时候，需要使用进行多媒体数据指定多个播放格式与编码格式，因为浏览器支持的不一样，因此需要多指定几个。

4、视频和音乐的属性都差不多，可以指定src和自动播放、预加载、当视屏不可用的时候显示的图片、循环次数、是否使用自带控制条、错误代码、网络状态、播放时间等等

5、常用方法：media.play()或.pause()或.load()重载