HTML-day9

什么是html的字符实体？版权符号代码怎么写？

字符实体通俗讲就是网页文件中复杂的符号代码和一些标点的代码。例如小于号 < 大于号 > 双引号 "这些符号要在浏览器中显示，在HTML文档中都必需被转化成字符实体。字符实体有三部分：一个和号 (&)，一个实体名称及一个分号（；），或者 # 和一个实体编号，以及一个分号 (;)。

©

copyright

©

©

HTML ISO-8859-1 参考手册

 

有使用过HTML5的拖放API吗？说说你对它的理解

H5出现了拖放技术，与 JS 原生相比 HTML5 拖放的优势：

H5拖放技术，drag&drop，对于浏览器的支持性：

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注：在 Safari 5.1.2 中不支持拖放。

 

那么它有哪些api语法，我们来看一下：

1、draggable 属性

通过 draggable 告诉浏览器哪些元素需要实现拖拽功能。有三个可选值：

true： 元素可以被拖拽

false：元素不能被拖拽

auto：浏览器自己判断元素是否能被拖拽 ( 默认 )

2、对象拖放事件

dragstart：按下鼠标键并开始移动时触发

drag：在元素拖拽过程中持续触发----相似与mousemove

dragend：元素拖拽停止时触发

3、投放区事件流程

元素被拖动到有效的放置目标时，下列事件会依次发生：

1. dragenter：当拖拽对象进入投放区时触发

2. dragover ：拖拽对象在投放区内移动时持续触发

3. dragleave：元素被拖出了投放区时触发

4. drop    ：拖拽对象投放在投放区时触发

虽然所有元素都支持放置目标事件，但这些元素默认是不允许放置的，需要重写事件的默认行为，例如：

在ondragover中一定要执行 preventDefault()否则ondrop事件不会被触发

 

4、dataTransfer 对象--常用方法

setDragImage (图标，图标距指针X轴偏移值，Y轴偏移值 )

指定一个图标，当拖动发生时，显示在光标下方

 

5、dataTransfer 对象--常用属性：

dropEffect 表示被拖动的元素能够执行哪种放置行为

可能的值：

“none” : 不能把拖动的元素放在这里

“move”: 把拖动的元素移动到放置目标

“copy”: 把拖动的元素复制到放置目标  

“link”: 放置目标会打开拖动的元素（有URL）

effectAllowed    允许拖动元素的哪种dropEffect

允许值：

“copyLink” : 允许值为 copy 和 link 的 dropEffect

“copyMove”: 允许值为 copy 和 move 的 dropEffect

“linkMove” : 允许值为 link和 move 的 dropEffect

“all”   : 允许任意的 dropEffect

注意：dropEffect属性搭配effectAllowed属性使用

在dragstart事件处理程序中设置effectAllowed属性

在dragover事件处理程序中设置dropEffect属性

dropEffect 的每个可能值都会导致光标显示为不同的符号

 

6、files   文件

dataTransfer.files：如果是拖放文件，则返回正在拖放的文件列表FileList

FileReader：专门用于读取文件，FileReader 接口提供一些读取文件的方法与一个包含读取结果的事件模型

FileReader.readAsDataURL方法：参数为要读取的文件对象，将文件读取为DataUrl

FileReader.onload事件：当读取文件成功完成的时候触发此事件，在事件触发后，你可以通过this.result来获取读取的文件数据，如果是图片，将返回base64格式的图片数据。

 

HTML5 进阶系列：拖放 API 实现拖放排序

 

有用过HTML5的webSQL和IndexedDB吗？说说你对它们的理解

WebSQL也是一种在浏览器里存储数据的技术,跟IndexedDB不同的是,IndexedDB更像是一个NoSQL数据库,而WebSQL更像是关系型数据库,使用SQL查询数据。
【应该Web sql兼容性更好！】
1.Web Sql Database，中文翻译作“本地数据库”，是随着HTML5规范加入的在浏览器端运行的轻量级数据库。
在HTML5中，大大丰富了客户端本地可以存储的内容，添加了很多功能来将原本必须保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序的性能，减轻了服务器端的负担，使Web时代重新回到了“客户端为重，服务器为轻”的时代。
在这其中，一项非常重要的功能就是数据库的本地存储功能。在HTML5中内置了一个可以通过SQL语言来访问的数据库。在HTML4中，数据库只能放在服务器端，只能通过服务器来访问数据库，但是在HTML5中，可以就像访问本地文件那样轻松的对内置的数据库进行直接访问。现在，像这种不需要存储在服务器上的，被称为“SQLite”的文件型SQL数据库已经得到了很广泛的利用，所以HTML5中也采用了这种数据库来作为本地数据库。
2.IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据，你可以使用cookies或local storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能，在online和offline模式下都能使用。你可以用IndexedDB存储大型数据。
IndexedDB里数据以对象的形式存储，每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里，objectStore就相当于关系数据库里的表。IndexedDB可以有很多objectStore，objectStore里可以有很多对象。
浏览器里存储数据的技术,跟IndexedDB不同的是,IndexedDB更像是一个NoSQL数据库,而WebSQL更像是关系型数据库,使用SQL查询数据。
【应该Web sql兼容性更好！】
1.Web Sql Database，中文翻译作“本地数据库”，是随着HTML5规范加入的在浏览器端运行的轻量级数据库。
在HTML5中，大大丰富了客户端本地可以存储的内容，添加了很多功能来将原本必须保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序的性能，减轻了服务器端的负担，使Web时代重新回到了“客户端为重，服务器为轻”的时代。
在这其中，一项非常重要的功能就是数据库的本地存储功能。在HTML5中内置了一个可以通过SQL语言来访问的数据库。在HTML4中，数据库只能放在服务器端，只能通过服务器来访问数据库，但是在HTML5中，可以就像访问本地文件那样轻松的对内置的数据库进行直接访问。现在，像这种不需要存储在服务器上的，被称为“SQLite”的文件型SQL数据库已经得到了很广泛的利用，所以HTML5中也采用了这种数据库来作为本地数据库。
2.IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据，你可以使用cookies或local storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能，在online和offline模式下都能使用。你可以用IndexedDB存储大型数据。
IndexedDB里数据以对象的形式存储，每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里，objectStore就相当于关系数据库里的表。IndexedDB可以有很多objectStore，objectStore里可以有很多对象。

src、href、link的区别是什么？

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。

 

有用过WebGL吗？说说你对它的理解

WebGL程序的结构，先看下图：

左边为传统的web页面开发，右边为包含了WebGL的网页，GLSL ES是用于编写着色器的语言，开发WebGL程序的时候，除了直接调用WebGL相关的api，我们还要编写着色器。

WebGL入门教程(一)-初识webgl

 

HTML5相对于HTML4有哪些优势？

WEB前端之HTML5~HTML5与HTML4的区别

1、设备兼容特性

Html4代码不兼容是一个让人头痛的问题，html5就可以很好处理兼容问题，特别是移动设备HTML5另外也提供了更多功能上的优化选择，带来了更好的体验，例如视频影音可直接与麦克风及摄像头相联。

2、网页多媒体特性

Html5相比html4支持网页端的音响、录像等功能， 与网站自带的摄像头，影音功能，这些功能会大大提高用户体验。

3、语义结构

HTML5相比html4更能赋予网页更好的结构。比如新增加的article标签可以专门定义侧边栏内容，而在html4中需要自己定义页面侧边栏内容。

你了解HTML5的download属性吗？

download属性能让我们指定浏览器下载时采用新的文件名称，也就是在客户端重命名下载文件。而不是链接上原始的文件名称。

添加download属性后，无论a标签的href属性链接到一个网页、图片、文本等，download属性都会强制触发下载操作，且自动命名文件为download属性。

如下代码

<!DOCTYPE html>
<html>
<body>
<p>点击 W3School 的 logo 来下载该图片：<p>
<a href="/i/w3school_logo_white.gif" download="w3logo.jpg">
    <img border="0" src="/i/w3school_logo_white.gif">
</a>
</body>
</html>