Skip to content

Commit

Permalink
fix syntax
Browse files Browse the repository at this point in the history
  • Loading branch information
guojinchao committed Jul 30, 2018
1 parent cb18399 commit 2ab437f
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 13 deletions.
16 changes: 8 additions & 8 deletions chapter4/section4.7.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,17 +47,17 @@ HTMLImageElement.currentSrc属性返回当前正在展示的图像的网址。Ja

(3)HTMLImageElement.alt

HTMLImageElement.alt属性可以读写<img>的 HTML 属性alt,表示对图片的文字说明。
HTMLImageElement.alt属性可以读写`<img>`的 HTML 属性alt,表示对图片的文字说明。

(4)HTMLImageElement.isMap,HTMLImageElement.useMap

HTMLImageElement.isMap属性对应<img>元素的 HTML 属性ismap,返回一个布尔值,表示图像是否为服务器端的图像映射的一部分。
HTMLImageElement.isMap属性对应`<img>`元素的 HTML 属性ismap,返回一个布尔值,表示图像是否为服务器端的图像映射的一部分。

HTMLImageElement.useMap属性对应<img>元素的 HTML 属性usemap,表示当前图像对应的<map>元素。
HTMLImageElement.useMap属性对应`<img>`元素的 HTML 属性usemap,表示当前图像对应的`<map>`元素。

(5)HTMLImageElement.srcset,HTMLImageElement.sizes

HTMLImageElement.srcset属性和HTMLImageElement.sizes属性,分别用于读写<img>元素的srcset属性和sizes属性。它们用于<img>元素的响应式加载。srcset属性可以单独使用,但是sizes属性必须与srcset属性同时使用。
HTMLImageElement.srcset属性和HTMLImageElement.sizes属性,分别用于读写`<img>`元素的srcset属性和sizes属性。它们用于`<img>`元素的响应式加载。srcset属性可以单独使用,但是sizes属性必须与srcset属性同时使用。
```js
// HTML 代码如下
// <img srcset="example-320w.jpg 320w,
Expand All @@ -82,7 +82,7 @@ img.sizes
上面代码中,sizes属性指定,对于小于320px的屏幕,图像的宽度为280px;对于小于480px的屏幕,图像宽度为440px;其他情况下,图像宽度为800px。然后,浏览器会根据当前屏幕下的图像宽度,到srcset属性加载宽度最接近的图像。

## HTMLImageElement.width,HTMLImageElement.height
width属性表示<img>的 HTML 宽度,height属性表示高度。这两个属性返回的都是整数。
width属性表示`<img>`的 HTML 宽度,height属性表示高度。这两个属性返回的都是整数。
```js
// HTML 代码如下
// <img width="300" height="400" id="myImg" src="pic.jpg">
Expand All @@ -107,10 +107,10 @@ if (img.naturalHeight > img.naturalWidth) {
上面代码中,如果图片的高度大于宽度,则设为portrait模式。

## HTMLImageElement.complete
HTMLImageElement.complete属性返回一个布尔值,表示图表是否已经加载完成。如果<img>元素没有src属性,也会返回true。
HTMLImageElement.complete属性返回一个布尔值,表示图表是否已经加载完成。如果`<img>`元素没有src属性,也会返回true。

## HTMLImageElement.crossOrigin
HTMLImageElement.crossOrigin属性用于读写<img>元素的crossorigin属性,表示跨域设置。
HTMLImageElement.crossOrigin属性用于读写`<img>`元素的crossorigin属性,表示跨域设置。

这个属性有两个可能的值。

Expand All @@ -125,7 +125,7 @@ img.crossOrigin // "anonymous"
```

## HTMLImageElement.referrerPolicy
HTMLImageElement.referrerPolicy用来读写<img>元素的 HTML 属性referrerpolicy,表示请求图像资源时,如何处理 HTTP 请求的referrer字段。
HTMLImageElement.referrerPolicy用来读写`<img>`元素的 HTML 属性referrerpolicy,表示请求图像资源时,如何处理 HTTP 请求的referrer字段。

它有五个可能的值。

Expand Down
8 changes: 4 additions & 4 deletions chapter5/section5.12.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
## File 对象
File 对象代表一个文件,用来读写文件信息。它继承了 Blob 对象,或者说是一种特殊的 Blob 对象,所有可以使用 Blob 对象的场合都可以使用它。

最常见的使用场合是表单的文件上传控件(<input type="file">),用户选中文件以后,浏览器就会生成一个数组,里面是每一个用户选中的文件,它们都是 File 实例对象。
最常见的使用场合是表单的文件上传控件(`<input type="file">`),用户选中文件以后,浏览器就会生成一个数组,里面是每一个用户选中的文件,它们都是 File 实例对象。
```js
// HTML 代码如下
// <input id="fileItem" type="file">
Expand Down Expand Up @@ -62,7 +62,7 @@ File 对象没有自己的实例方法,由于继承了 Blob 对象,因此可
## FileList 对象
FileList对象是一个类似数组的对象,代表一组选中的文件,每个成员都是一个 File 实例。它主要出现在两个场合。

- 文件控件节点(<input type="file">)的files属性,返回一个 FileList 实例。
- 文件控件节点(`<input type="file">`)的files属性,返回一个 FileList 实例。
- 拖拉一组文件时,目标区的DataTransfer.files属性,返回一个 FileList 实例。
```js
// HTML 代码如下
Expand Down Expand Up @@ -117,7 +117,7 @@ FileReader 有以下实例方法。
- FileReader.abort():终止读取操作,readyState属性将变成2。
- FileReader.readAsArrayBuffer():以 ArrayBuffer 的格式读取文件,读取完成后result属性将返回一个 ArrayBuffer 实例。
- FileReader.readAsBinaryString():读取完成后,result属性将返回原始的二进制字符串。
- FileReader.readAsDataURL():读取完成后,result属性将返回一个 Data URL 格式(Base64 编码)的字符串,代表文件内容。对于图片文件,这个字符串可以用于<img>元素的src属性。注意,这个字符串不能直接进行 Base64 解码,必须把前缀data:*/*;base64,从字符串里删除以后,再进行解码。
- FileReader.readAsDataURL():读取完成后,result属性将返回一个 Data URL 格式(Base64 编码)的字符串,代表文件内容。对于图片文件,这个字符串可以用于`<img>`元素的src属性。注意,这个字符串不能直接进行 Base64 解码,必须把前缀data:*/*;base64,从字符串里删除以后,再进行解码。
- FileReader.readAsText():读取完成后,result属性将返回文件内容的文本字符串。该方法的第一个参数是代表文件的 Blob 实例,第二个参数是可选的,表示文本编码,默认为 UTF-8。

下面是一个例子。
Expand All @@ -141,4 +141,4 @@ function previewFile() {
}
}
```
上面代码中,用户选中图片文件以后,脚本会自动读取文件内容,然后作为一个 Data URL 赋值给<img>元素的src属性,从而把图片展示出来。
上面代码中,用户选中图片文件以后,脚本会自动读取文件内容,然后作为一个 Data URL 赋值给`<img>`元素的src属性,从而把图片展示出来。
3 changes: 2 additions & 1 deletion chapter5/section5.8.md
Original file line number Diff line number Diff line change
Expand Up @@ -284,4 +284,5 @@ self.addEventListener('message', function(e) {
console.log(e.data.method)
// 可以进行一些操作在对主进程进行发送信息
self.postMessage('You said: ' + e.data.method);
}, false);
}, false);
```

0 comments on commit 2ab437f

Please sign in to comment.