├── README.md └── posts ├── about-me.md ├── common-sense-in-design.md ├── css-preprocessor.md ├── drafts ├── GreaseSpot │ └── wiki │ │ ├── Metadata_Block.md │ │ └── Metadata_Block_zh.md ├── browser-apis │ ├── bom │ │ ├── bom-in-action.md │ │ ├── bom.md │ │ ├── history.md │ │ ├── location.md │ │ ├── navigator.md │ │ ├── screen.md │ │ └── window.md │ ├── dom │ │ ├── document.md │ │ ├── dom-objects.md │ │ ├── dom.md │ │ ├── element.md │ │ ├── html-elements │ │ │ └── HTMLAudio.md │ │ ├── node.md │ │ ├── range.md │ │ ├── selection.md │ │ └── selector-apis.md │ └── event.md ├── css │ ├── css.md │ ├── css_animation.md │ ├── css_background.md │ ├── css_border-image.md │ ├── css_border-radius.md │ ├── css_border.md │ ├── css_box-shadow.md │ ├── css_color.md │ ├── css_column.md │ ├── css_content.md │ ├── css_dimension.md │ ├── css_filter.md │ ├── css_font-face.md │ ├── css_font.md │ ├── css_gradient.md │ ├── css_list.md │ ├── css_margin.md │ ├── css_outline.md │ ├── css_overflow.md │ ├── css_padding.md │ ├── css_position.md │ ├── css_properties.md │ ├── css_selectors.md │ ├── css_table.md │ ├── css_text.md │ ├── css_transform.md │ ├── css_transition.md │ └── css_units.md ├── demo │ └── html │ │ └── html-tag-base │ │ └── index.html ├── html │ ├── html.md │ ├── html_doctype.md │ ├── html_dom_canvas_context_2d.md │ ├── html_semantic.md │ ├── html_tag_a.md │ ├── html_tag_audio.md │ ├── html_tag_base.md │ ├── html_tag_body.md │ ├── html_tag_br.md │ ├── html_tag_canvas.md │ ├── html_tag_form.md │ ├── html_tag_head.md │ ├── html_tag_hr.md │ ├── html_tag_html.md │ ├── html_tag_input.md │ ├── html_tag_link.md │ ├── html_tag_meta.md │ ├── html_tag_script.md │ ├── html_tag_style.md │ ├── html_tag_title.md │ ├── html_tags_div.md │ ├── html_tags_form.md │ ├── html_tags_list.md │ ├── html_tags_media.md │ ├── html_tags_table.md │ ├── html_tags_text.md │ └── images │ │ ├── html-index.html.png │ │ ├── html-semantic-blog-template.png │ │ ├── html-tag-link-icon.png │ │ ├── html-tag-meta-01.png │ │ ├── html-tag-ruby.png │ │ ├── html-tag-title-01.png │ │ └── html-tag-title-02.png ├── javascript │ ├── javascript.md │ ├── js_array.md │ ├── js_class.md │ ├── js_datatype.md │ ├── js_function.md │ ├── js_grammer.md │ ├── js_object-array.md │ ├── js_object-boolean.md │ ├── js_object-date.md │ ├── js_object-math.md │ ├── js_object-number.md │ ├── js_object-properties.md │ ├── js_object-regexp.md │ ├── js_object-string.md │ ├── js_object.md │ ├── js_object_function.md │ ├── js_objects.md │ ├── js_operators.md │ ├── js_regexp.md │ ├── js_statements.md │ └── js_variable.md ├── userstyles-generator │ ├── UI design.ddd │ └── scheme.md ├── w3c │ ├── agents │ │ ├── authoring-tools-social-media.md │ │ └── browser-media-players.md │ ├── browser-and-authoring-tools.md │ ├── semantic-web.md │ ├── semantic-web │ │ ├── inference.md │ │ ├── linked-data.md │ │ ├── query.md │ │ ├── vertical-applications.md │ │ └── vocabulary.md │ ├── standards │ │ ├── css │ │ │ └── CSS.md │ │ ├── dom-events │ │ │ └── DOM-EVENTS.md │ │ ├── dom │ │ │ └── DOM.md │ │ ├── html │ │ │ └── HTML.md │ │ └── javascript-apis │ │ │ └── JAVASCRIPT-APIS.md │ ├── w3c-standards.md │ ├── web-arch │ │ ├── architecture-principles.md │ │ ├── identifiers.md │ │ ├── internationalization.md │ │ ├── meta-formats.md │ │ ├── protocol-and-meta-format-considerations.md │ │ └── protocols.md │ ├── web-architecture.md │ ├── web-design-and-applications.md │ ├── web-design │ │ ├── accessibility.md │ │ ├── audio-and-video.md │ │ ├── graphics.md │ │ ├── html-css.md │ │ ├── internationalization.md │ │ ├── javascript-web-apis.md │ │ ├── math-on-the-web.md │ │ ├── mobile-web.md │ │ └── privacy.md │ ├── web-of-devices.md │ ├── web-of-devices │ │ ├── device-independece-and-content-adaptation.md │ │ ├── mobile-web.md │ │ ├── multimodal-access.md │ │ ├── voice-browsing.md │ │ └── web-and-tv.md │ ├── web-of-services.md │ ├── web-of-services │ │ ├── internationalization.md │ │ ├── protocols.md │ │ ├── security.md │ │ └── service-description.md │ ├── xml │ │ ├── components.md │ │ ├── internationalization.md │ │ ├── processing.md │ │ ├── publishing.md │ │ ├── query.md │ │ ├── schema.md │ │ ├── security.md │ │ ├── transformation.md │ │ └── xml-essentials.md │ └── xnl-technology.md └── web_basic.md ├── how-to-read-w3c-specs.md ├── images ├── common-sense-01.jpg ├── common-sense-02.png ├── common-sense-03.png ├── common-sense-04.jpg ├── common-sense-05.jpg ├── common-sense-06.jpg ├── common-sense-07.jpg ├── common-sense-08.jpg ├── common-sense-09.jpg ├── common-sense-10.jpg ├── position-and-size-element.png ├── position-and-size-screen.png ├── position-and-size-window.png ├── third-party-logging-01.png └── third-party-logging-02.png ├── position-and-size.md ├── posts.json ├── project-in-my-mind.md ├── sublime-text2-install-and-config.md ├── third-party-logging.md ├── tools-and-softwares-on-my-computer.md ├── web-applications-profermance-and-optimizing.md └── xiami-music.md /README.md: -------------------------------------------------------------------------------- 1 | LearnShare-Blog 2 | =============== 3 | 4 | My blog and notes 5 | 6 | Posts 7 | ----- 8 | 9 | + 2013-07-24 [Sublime Text2 安装配置](/posts/sublime-text2-install-and-config.md "Sublime Text2 安装配置") 10 | + 2013-05-14 [设计中的常识](/posts/common-sense-in-design.md "设计中的常识") 11 | + 2013-05-11 [虾米音乐](/posts/xiami-music.md "虾米音乐") 12 | + 2013-04-28 [HTML & JavaScript 中的位置和尺寸](/post/position-and-size.md "HTML & JavaScript 中的位置和尺寸") 13 | + 2013-04-16 [我所使用的一些工具及软件](/posts/tools-and-softwares-on-my-computer.md "我所使用的一些工具及软件[持续更新中]") update @2013-06-02 21:20:39 14 | + 2013-04-11 [HTML标签语义化](/posts/drafts/html_semantic.md "HTML标签语义化[草稿]") 15 | + 2013-04-10 [第三方登录](/posts/third-party-logging.md "第三方登录") 16 | + 2013-04-09 [About LearnShare](/posts/about-me.md "About Me") -------------------------------------------------------------------------------- /posts/about-me.md: -------------------------------------------------------------------------------- 1 | About LearnShare 2 | ================ 3 | 4 | -------------------------------------------------------------------------------- /posts/common-sense-in-design.md: -------------------------------------------------------------------------------- 1 | 设计中的常识 2 | =========== 3 | 4 | 几日前，[@Voldemorty1989](http://weibo.com/2332996753 "他的微博") 同学在 [微博](http://weibo.com/2332996753/zvkYjclql "微博原文") 分享了自己的作品，请求大家指导： 5 | 6 | ![image01](./images/common-sense-01.jpg "天气时间一枚") 7 | 8 | 我给他品论： 9 | >太阳木有高亮，又不是水晶球。 10 | 11 | @Voldemorty1989 同学很快修改了这处错误。由此，我又想到了许多同学会在月牙的缺口处画上几颗星星，这也是一个严重的错误。 12 | 13 | 今天，@Voldemorty1989 同学把整套 [设计作品](http://weibo.com/2332996753/zwEbSzeO4 "微博原文") 分享出来，果然把月牙的缺口画上了星星： 14 | 15 | ![image02](./images/common-sense-02.png "夜晚晴") 16 | 17 | 作为一个挑剔的人，我觉得必须要写写文章了。 18 | 19 | 设计中的现实成分 20 | -------------- 21 | 22 | 设计（Design）应该包括 现实 和 创意 两种成分。而创意，也有相当一部分是抽象自现实。 23 | 24 | 了解设计风格及其变化和发展的同学应该知道，最近有两种风格颇为流行： 25 | 26 | __拟物：__ 模仿现实中物体的形状、色彩和纹理。比如 iOS 的设计，以及许多同学在画的 icon。 27 | 28 | ![image03](./images/common-sense-03.png "Siri") 29 | 30 | __扁平：__ 简化效果，剥离模仿现实的成分（阴影、高光、纹理）。比如 Android 和 Windows Phone 的设计。 31 | 32 | ![image04](./images/common-sense-04.jpg "Android") 33 | 34 | 这两种风格虽然完全不同，但都是基于现实的事物延伸和抽象而来。所以， __现实是设计的基础__ 。 35 | 36 | 设计中背离现实的错误 37 | ------------------ 38 | 39 | 下面几个是我在近几天看到的，在设计中背离现实的错误，分享出来与大家一同学习。 40 | 41 | ###1.太阳 42 | 43 | 太阳是经常出现在设计作品中的元素，比如天气图标等。文章开头提到的例子中，设计师给太阳加了高光，看起来更像是水晶球或煎蛋。 44 | 45 | ![image05](./images/common-sense-05.jpg "水晶球") 46 | 47 | ![image06](./images/common-sense-06.jpg "煎蛋") 48 | 49 | 太阳看起来应该是这样（透过望远镜并减光）： 50 | 51 | ![image07](./images/common-sense-07.jpg "望远镜中的太阳") 52 | 53 | ###2.月亮 54 | 55 | 月亮，准确的说法应该是 月球。月亮虽然有圆缺，但它本身还是一个球，并没有缺口，阴暗的部分是因为没有阳光直射（就像地球的黑夜一侧）。所以， __月牙的缺口中无法看到任何星星__ 。 56 | 57 | 来看一张月牙的照片，这张照片进行了长时间曝光，所以我们能清楚地看到月球的阴暗面： 58 | 59 | ![image08](./images/common-sense-08.jpg "孩子、木星和月亮") 60 | 61 | ###3.锁 62 | 63 | [@song_楚歌飞雪](http://weibo.com/cathysong "他的微博") 同学也在前两天分享了自己的 [作品](http://weibo.com/1653923503/zvcPmozSr "微博原文")： 64 | 65 | ![image09](./images/common-sense-09.jpg "登陆界面") 66 | 67 | 一个不太起眼，却又非常明显的错误：锁扣不会在锁的中心。 68 | 69 | ![image10](./images/common-sense-10.jpg "锁") 70 | 71 | 要善于观察 72 | --------- 73 | 74 | 善于观察，可以积累知识、获得灵感，从而提升设计的质量。许多常识，要从细致的观察得到。 75 | 76 | 我觉得设计师们都应该去搞搞摄影和手工制作，光熟悉 PS 的工具条是不够的， __现实才是设计的基础__ 。 77 | 78 | >关于我： 79 | >[LearnShare](http://weibo.com/learnshare "我的微博")，学 PS 起家的 Web 前端开发，业余天文爱好者，爱挑毛病星人。 -------------------------------------------------------------------------------- /posts/css-preprocessor.md: -------------------------------------------------------------------------------- 1 | CSS 预处理器 2 | ========= 3 | 4 | CSS 预处理器是一种方便快速编写 CSS 代码的工具。它们基于 CSS 的语法规则，并在传统的 CSS 中扩展了如下功能： 5 | 6 | + 变量 7 | + 继承 8 | + 混入（Mixin） 9 | + 规则集合(Ruleset) 10 | + 嵌套 11 | + 计算 12 | + 函数 13 | + 条件语句 14 | + 循环 15 | + 导入（import） 16 | + 命名空间 17 | + JS 函数 -------------------------------------------------------------------------------- /posts/drafts/browser-apis/bom/bom-in-action.md: -------------------------------------------------------------------------------- 1 | BOM 实战 2 | ======= 3 | 4 | `BOM` 实战部分包含了许多 BOM API 的应用实例。 5 | 6 | 对话框 7 | ----- 8 | 9 | + win.alert() 10 | + win.prompt() 11 | + win.confirm() 12 | 13 | 定时器和计时器 14 | ----------- 15 | 16 | + win.setTimeout() 17 | + win.clearTimeout() 18 | + win.setInterval() 19 | + win.clearInterval() 20 | 21 | 页面滚动/缓动 22 | ----------- 23 | 24 | + win.scrollBy() 25 | + win.scrollTo() 26 | 27 | 页面高度自适应 28 | ----------- 29 | 30 | + win.innerHeight 31 | + win.onresize 32 | 33 | 历史管理 34 | ------- 35 | 36 | URL 管理 37 | -------- -------------------------------------------------------------------------------- /posts/drafts/browser-apis/bom/bom.md: -------------------------------------------------------------------------------- 1 | BOM 浏览器对象模型 2 | ============== 3 | 4 | `BOM` （Browser Object Model，浏览器对象模型）提供了通过 `JavaScript` 访问和控制浏览器窗口（window）、显示器（screen）与浏览历史（history）等对象的接口。 5 | 6 | `BOM` 并非 W3C 的标准，而是在各家浏览器中逐渐形成的一致性接口。 7 | 8 | `BOM` 可以看做是 Browser API 的一部分。 9 | 10 | BOM 对象 11 | -------- 12 | 13 | ###1.Window 14 | 15 | ###2.Navigator 16 | 17 | ###3.Screen 18 | 19 | ###4.History 20 | 21 | ###5.Location -------------------------------------------------------------------------------- /posts/drafts/browser-apis/bom/history.md: -------------------------------------------------------------------------------- 1 | History 对象 2 | ========== 3 | 4 | `history` 对象代表了浏览历史。 5 | 6 | 属性 7 | --- 8 | 9 | ###length 10 | 11 | 历史列表的长度（浏览过的页面数量）。 12 | 13 | 方法 14 | --- 15 | 16 | ###back() 17 | 18 | 加载历史列表中的前一个页面（后退一步）。 19 | 20 | 语法： 21 | >history.back(); 22 | 23 | ###forward() 24 | 25 | 加载历史列表中的下一个页面（前进一步）。 26 | 27 | 语法： 28 | >history.forward(); 29 | 30 | ###go() 31 | 32 | 加载历史列表中指定的页面。 33 | 34 | 语法： 35 | >history.go(n); 36 | 37 | 参数： 38 | >1.n 要加载的页面与当前页面的相对距离（0 代表当前页面；-1 代表上一个页面） -------------------------------------------------------------------------------- /posts/drafts/browser-apis/bom/location.md: -------------------------------------------------------------------------------- 1 | Location 对象 2 | =========== 3 | 4 | `location` 对象包含了当前页面 URL 的相关信息。 5 | 6 | 属性 7 | --- 8 | 9 | ###hash 10 | 11 | 设置或返回当前 URL 中的锚信息（从 # 开始的部分）。 12 | 13 | ###host 14 | 15 | 设置或返回当前 URL 中的主机名和端口号。 16 | 17 | ###hostname 18 | 19 | 设置或返回当前 URL 中的主机名。 20 | 21 | ###href 22 | 23 | 设置或返回当前 URL。 24 | 25 | ###pathname 26 | 27 | 设置或返回当前 URL 中的路径部分。 28 | 29 | ###port 30 | 31 | 设置或返回当前 URL 中的端口号。 32 | 33 | ###protocol 34 | 35 | 设置或返回当前 URL 的协议。 36 | 37 | ###search 38 | 39 | 设置或返回当前 URL 中的查询信息（以 ? 开始的部分）。 40 | 41 | 方法 42 | --- 43 | 44 | ###assign() 45 | 46 | 加载新页面。 47 | 48 | 语法： 49 | >location.assigh(url); 50 | 51 | 参数： 52 | >1.url 要加载的页面 URL 53 | 54 | ###reload() 55 | 56 | 重新加载当前页面。 57 | 58 | 语法： 59 | >location.reload(force); 60 | 61 | 参数： 62 | >1.force 是否强制重新加载（从服务器重新加载，忽略本地缓存）。true 强制重新加载；false 重新加载。该参数可选，默认为 false 63 | 64 | ###replace() 65 | 66 | 加载新页面，并替换当前页面（不产生新的历史记录）。 67 | 68 | 语法： 69 | >location.assigh(url); 70 | 71 | 参数： 72 | >1.url 要加载的页面 URL -------------------------------------------------------------------------------- /posts/drafts/browser-apis/bom/navigator.md: -------------------------------------------------------------------------------- 1 | Navigator 对象 2 | ============ 3 | 4 | `navigator` 对象包含了浏览器的相关信息。 5 | 6 | 属性 7 | --- 8 | 9 | plugins 10 | 11 | 以数组形式返回页面中的嵌入对象。 12 | 13 | appCodeName 14 | 15 | 浏览器代码名称。 16 | 17 | appMinorVersion 18 | 19 | 浏览器的次要版本号。 20 | 21 | appName 22 | 23 | 浏览器名称。 24 | 25 | appVersion 26 | 27 | 包括浏览器的平台及版本信息。 28 | 29 | browserLangauge 30 | 31 | 浏览器的语言。 32 | 33 | cookieEnabled 34 | 35 | 是否已启用 cookie。 36 | 37 | cpuClass 38 | 39 | CPU 信息。 40 | 41 | onLine 42 | 43 | 在线模式/脱机模式。 44 | 45 | platform 46 | 47 | 运行平台。 48 | 49 | systemLangauge 50 | 51 | 浏览器所在系统使用的语言。 52 | 53 | userAnget 54 | 55 | 用户代理信息。 56 | 57 | userLangauge 58 | 59 | 浏览器所在系统使用的语言。 60 | 61 | 方法 62 | --- 63 | 64 | javaEnabled() 65 | 66 | 检测浏览器是否启用了 Java。 67 | 68 | 语法： 69 | >navigator.javaEnabled(); 70 | 71 | 返回值： 72 | >1.true 已启用 73 | >2.false 已禁用 74 | 75 | taintEnabled() 76 | 77 | 检测浏览器是否启用了 data tainting。 78 | 79 | 语法： 80 | >navigator.taintEnabled(); 81 | 82 | 返回值： 83 | >1.true 已启用 84 | >2.false 已禁用 -------------------------------------------------------------------------------- /posts/drafts/browser-apis/bom/screen.md: -------------------------------------------------------------------------------- 1 | Screen 对象 2 | ========= 3 | 4 | `screen` 对象包含了显示器屏幕的相关信息。 5 | 6 | 属性 7 | --- 8 | 9 | ###availHeight 10 | 11 | 返回屏幕窗口显示区域的高度（不高扩任务栏）。 12 | 13 | ###availWidth 14 | 15 | 返回屏幕窗口显示区域的宽度（不高扩任务栏）。 16 | 17 | ###bufferDepth 18 | 19 | 设置或返回调色板比特值。 20 | 21 | ###colorDepth 22 | 23 | 设置或返回设备或缓冲器的调色板比特值。 24 | 25 | ###deviceXDPI 26 | 27 | 返回屏幕水平 DPI（每英寸点数）。 28 | 29 | ###deviceYDPI 30 | 31 | 返回屏幕垂直 DPI（每英寸点数）。 32 | 33 | ###fontSmoothingEnabled 34 | 35 | 返回是否启用了字体平滑。 36 | 37 | ###height 38 | 39 | 返回屏幕高度。 40 | 41 | ###localXDPI 42 | 43 | 返回屏幕水平 DPI（每英寸点数）。 44 | 45 | ###localYDPI 46 | 47 | 返回屏幕垂直 DPI（每英寸点数）。 48 | 49 | ###pixelDepth 50 | 51 | 返回屏幕的颜色分辨率。 52 | 53 | ###updateInterval 54 | 55 | 设置或返回屏幕的刷新频率。 56 | 57 | ###width 58 | 59 | 返回屏幕宽度。 -------------------------------------------------------------------------------- /posts/drafts/browser-apis/dom/document.md: -------------------------------------------------------------------------------- 1 | Document 对象 2 | =========== 3 | 4 | `document` 对象代表了整个 HTML 文档（HTML 元素）。 5 | 6 | 属性 7 | ---- 8 | 9 | activeElement 10 | 11 | 返回当前获取焦点的对象。 12 | 13 | anchors 14 | 15 | 以数组形式返回页面中的锚。 16 | 17 | body 18 | 19 | 返回 body 节点。 20 | 21 | characterSet 22 | 23 | 返回页面的字符集。 24 | 25 | cookie 26 | 27 | 以分号分隔列表的形式返回所有 cookie，也可以通过 cookie="key1=value1;key2=value2" 设置 cookie 值。 28 | 29 | defaultView 30 | 31 | 返回当前文档所在的 window 对象的引用。 32 | 33 | designMode 34 | 35 | 设置或返回页面内容是否可编辑。 36 | 37 | doctype 38 | 39 | 返回 DTD。 40 | 41 | documentElement 42 | 43 | 返回 html 节点。 44 | 45 | embeds 46 | 47 | 以数组形式返回 embed 对象列表。 48 | 49 | forms 50 | 51 | 以数组形式返回 form 对象列表。 52 | 53 | head 54 | 55 | 返回 head 节点。 56 | 57 | images 58 | 59 | 以数组形式返回 image 对象列表。 60 | 61 | lastModified 62 | 63 | 返回文档的最后修改时间。 64 | 65 | links 66 | 67 | 以数组形式返回 link 对象列表。 68 | 69 | plugins 70 | 71 | 以数组形式返回 plugin 对象列表。 72 | 73 | readyState 74 | 75 | 返回文档当前状态（loading 加载中；interactive 解析完成；complete 加载完毕）。 76 | 77 | referrer 78 | 79 | 返回跳转到当前页面的前一个页面的 URI。 80 | 81 | scripts 82 | 83 | 以数组形式返回 script 对象列表。 84 | 85 | styleSheets 86 | 87 | 以数组形式返回 styleSheet 对象列表。 88 | 89 | title 90 | 91 | 返回页面的 title 值。 92 | 93 | 方法 94 | ---- 95 | 96 | close() 97 | 98 | 关闭文档的输出流。 99 | 100 | 语法： 101 | >document.close(); 102 | 103 | 输出流由 open() 方法打开，可通过 write() 方法输出文本内容。 104 | 105 | createAttribute() 106 | 107 | 创建并返回属性节点。 108 | 109 | 语法： 110 | >document.createAttribute("attr"); 111 | 112 | craeteComment() 113 | 114 | 创建并返回注释节点。 115 | 116 | 语法： 117 | >document.createComment("comments"); 118 | 119 | createDocumentFragment() 120 | 121 | 创建并返回文档片段。 122 | 123 | 语法： 124 | >document.createDocumentFragment(); 125 | 126 | createElement() 127 | 128 | 创建并返回元素节点。 129 | 130 | 语法： 131 | >document.createElement("tag"); 132 | 133 | craeteRange() 134 | 135 | 创建并返回 Range 对象。 136 | 137 | 语法： 138 | >document.createRange(); 139 | 140 | createTextNode() 141 | 142 | 创建并返回文本节点。 143 | 144 | 语法： 145 | >document.createTextNode("text"); 146 | 147 | elementFromPoint() 148 | 149 | 返回指定位置的元素。 150 | 151 | 语法： 152 | >document.elementFromPoint(x,y); 153 | 154 | hasFocus() 155 | 156 | 当前文档是否获取了焦点。 157 | 158 | 语法： 159 | >document.hasFocus(); 160 | 161 | open() 162 | 163 | 打开文档的输出流。 164 | 165 | 语法： 166 | >document.open(); 167 | 168 | 输出流可通过 write() 方法输出文本内容，并使用 close() 方法关闭你。 169 | 170 | releaseCapture() 171 | 172 | 释放页面元素捕获的鼠标。 173 | 174 | 语法： 175 | >document.releaseCapture(); 176 | 177 | 鼠标可通过 elmt.setCapture() 捕获。 178 | 179 | write() 180 | 181 | 向文档输出流中输出文本。 182 | 183 | 语法： 184 | >document.write("text"); 185 | 186 | 文本可包含 HTML tag，会被解析为 HTML。 187 | 188 | writeln() 189 | 190 | 向文档输出流中输出文本，会在输出的文本之后添加换行。 191 | 192 | 语法： 193 | >document.writeln("text"); 194 | 195 | 事件 196 | --- 197 | 198 | ononline 199 | 200 | onoffline 201 | 202 | onreadystatechange -------------------------------------------------------------------------------- /posts/drafts/browser-apis/dom/dom-objects.md: -------------------------------------------------------------------------------- 1 | DOM Objects DOM 对象 2 | ================= 3 | 4 | DOM 对象代表了 DOM 树中的各类元素，它们具有许多有用的属性，并提供了许多访问/修改 DOM 的方法。 5 | 6 | 参考：[mozila dev/DOM/dom-reference](https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference) 7 | 8 | -------------------------------------------------------------------------------- /posts/drafts/browser-apis/dom/dom.md: -------------------------------------------------------------------------------- 1 | DOM 文档对象模型 2 | ============= 3 | 4 | `DOM` （Document Object Model，文档对象模型）提供了通过 `JavaScript` 访问和控制 HTML 和 XML 文档内容的接口。 5 | 6 | `DOM` 的核心是将文档中的所有内容作为对象处理，这些对象又被称作节点（Node）。 7 | 8 | 节点 9 | ---- 10 | 11 | `DOM` 中的节点包括： 12 | 13 | + 代表每个 HTML 元素的 __元素节点__ 14 | + 代表整个 HTML 文档（HTML 元素）的 __文档节点（document 对象）__ 15 | + 代表 HTML 元素属性的 __属性节点__ 16 | + 代表嵌套在 HTML 元素中的文本的 __文本节点__ 17 | + 代表注释的 __注释节点__ 18 | 19 | 参考：node.md 20 | 21 | 节点树（DOM 树/文档树） 22 | ----- 23 | 24 | HTML 文档在浏览器中被解析成树形数据结构，该数据结构称为节点树（DOM 树/文档树）。 25 | 26 | 节点树的特征： 27 | 28 | + document 节点称为 __根节点（root node）__ 29 | + 除了文档节点，所有节点都有 __父节点__ 和 __祖先节点__ 30 | + 大部分元素都有 __子节点__ 31 | + 父节点相同的节点称为 __兄弟节点__ 32 | 33 | 访问节点 34 | ------- 35 | 36 | ###查找节点 37 | 38 | document 对象提供了从文档中查找元素/集合的方法： 39 | 40 | + getElementById("id") 41 | + getElementByName("name") 42 | + getElementsByClassName("class") 43 | + getElementsByTagName("tag") 44 | + querySelector("selectors") 45 | + querySelectorAll("selectors") 46 | 47 | 也可以直接通过 document 对象的属性访问某些元素/集合： 48 | 49 | + document.all 50 | + document.images 51 | + document.links 52 | + document.body 53 | + ... 54 | 55 | 参考：document.md 和 selector-apis.md 56 | 57 | 注：本文中的 `元素` 一词等同于 `节点` 。 58 | 59 | ###读取/设置 HTML 属性 60 | 61 | + node.attributes nodeList 属性列表 node.attributes[0].nodeName（属性名）/.nodeValue（属性值） 62 | + elmt.classList 数组 ["class0","class1",...] 63 | + elmt.name str name 属性值 64 | + elmt.className str class 属性值 65 | + elmt.getAttribute("attr") str attr 属性值 66 | + elmt.setAttribute("attr","value") 67 | + node.hasAttribute("attr") true/false 68 | + node.hasAttributes() true/false 69 | + elmt.removeAttribute("attr") 70 | + elmt.setAttributeNode("attr","value") 71 | 72 | ###读取/修改 HTML 内容 73 | 74 | + innerHTML 75 | + nodeValue textNode 76 | 77 | 访问节点树 78 | --------- 79 | 80 | ###遍历节点树 81 | 82 | 节点/集合的访问方式只能访问到元素节点，如果需要访问属性节点和文本节点，还需要借助节点之间的关系： 83 | 84 | + node.childNodes 子节点列表 85 | + node.firstChild 首个子节点 86 | + node.lastChild 最后一个子节点 87 | + node.nextSibling 下一个兄弟节点 88 | + node.previousSibling 上一个兄弟节点 89 | + node.parentNode 父节点 90 | + node.textContent 所有文本，包含特殊字符（换行等） 91 | + node.hasChildNodes() true/false 92 | 93 | 参考：node.md 94 | 95 | ###添加/复制/删除节点 96 | 97 | + node.appendChild(child) 98 | + node.cloneNode(child) 99 | + node.insertBefore(newNode,target) 100 | + node.removeChild(child)/removeNode(child) 101 | + node.replaceChild(child)/replaceNode(child) 102 | 103 | 访问节点样式 104 | ---------- 105 | 106 | ###node.style 107 | 108 | node.style 属性代表了节点的 CSS 样式，可通过它来访问/操作节点的样式： 109 | 110 | var target=document.getElementById("target"); 111 | target.style.backgroundColor="#CCC"; 112 | 113 | 在 style 属性中的任何包含 `-` 的样式属性名都要采用 `驼峰命名法` ，如： 114 | 115 | margin-top --> marginTop 116 | background-color --> backgroundColor 117 | 118 | 另外，任何 style 中样式的值均为字符串类型，其格式与 CSS 中的属性值相同。 119 | 120 | ###优化方案 121 | 122 | 如果需要修改大量节点的样式，或者需要修改大量样式，建议先在 CSS 中编写好样式，然后通过 JS 修改节点的 class/id 等属性值，使其应用相应的样式： 123 | 124 | // CSS 125 | .blue{ 126 | color:#00F; 127 | } 128 | // JS 129 | document.getElementsByClassName("target").className += "blue"; 130 | 131 | 事件 132 | ---- 133 | 134 | 事件在程序中用来监视可能产生的动作，并在该动作发生时产生相应的反应。GUI 程序都是由事件驱动的，如界面中的按钮，会在鼠标点击时执行相应的动作。 135 | 136 | ###监听事件 137 | 138 | 有多种方式来为目标对象添加事件监听函数： 139 | 140 | ① 在 HTML 中设置事件属性（出于内容与行为分离的考虑，不要这么干） 141 | >\ 142 | 143 | ② 为对象的事件属性赋值 144 | >elmt.onclick=func; 145 | 146 | ③ 为对象绑定事件监听函数 147 | >elmt.addEventListener("event",func()); 148 | 149 | ###解除监听 150 | 151 | 某些时候，不再需要监视某个事件，可以取消事件监听函数： 152 | 153 | ① 将对象的事件属性设置为空 154 | >elmt.onclick=null; 155 | 156 | ② 取消绑定的事件监听函数 157 | >elmt.removeEventListener("event",func()); 158 | 159 | ###事件对象 160 | 161 | 从事件对象中，可以获得事件的详细信息： 162 | 163 | + event.srcElement 事件源 164 | + event.offsetX/event.offsetY 事件发生的位置 165 | 166 | 参考：event.md -------------------------------------------------------------------------------- /posts/drafts/browser-apis/dom/element.md: -------------------------------------------------------------------------------- 1 | Element 对象 2 | ========== 3 | 4 | `Element` 对象代表了元素节点，继承自 `Node` 对象。 -------------------------------------------------------------------------------- /posts/drafts/browser-apis/dom/html-elements/HTMLAudio.md: -------------------------------------------------------------------------------- 1 | Audio对象 2 | ---------- 3 | 4 | 参考：[HTMLMediaElement](https://developer.mozilla.org/zh-CN/docs/DOM/HTMLMediaElement "HTMLMediaElement") 5 | [MediaElement](http://www.w3.org/TR/2012/CR-html5-20121217/embedded-content-0.html#media-element "media-element") 6 | 7 | ###属性 8 | 9 | 1.src 10 | 11 | 音频文件的URL。 12 | 13 | var src=audio.src; // 读取URL 14 | audio.src="music.mp3"; // 修改URL 15 | 16 | 2.currentTime 17 | 18 | 当前播放时间（单位：秒）。 19 | 20 | var time=audio.currentTime; // 读取当前时间 21 | audio.currentTime=30; // 设置当前时间为30秒 22 | 23 | 3.volume 24 | 25 | 音频的音量（范围：0.0-1.0）。 26 | 27 | var volume=audio.volume; // 读取音量 28 | audio.volume+=0.1; // 增大音量 29 | 30 | 4.autoplay 31 | 32 | 音频是否自动播放（true/false）。 33 | 34 | var autoplay=audio.autoplay; // 读取自动播放状态 35 | audio.autoplay=true; // 设置音频自动播放 36 | 37 | 5.controls 38 | 39 | 是否显示播放控件（true/false）。 40 | 41 | 6.defaultMuted 42 | 43 | 是否默认静音（true/false）。 44 | 45 | 7.defaultPlaybackRate 46 | 47 | 默认播放速度（>0.0~1.0-...）。 48 | 49 | 8.duration 50 | 51 | 音频时长（只读，单位：秒）。 52 | 53 | 9.ended 54 | 55 | 是否播放完毕（只读，true/false）。 56 | 57 | 10.initialTime 58 | 59 | 可播放的起始时间（只读，单位：秒）。 60 | 61 | 11.loop 62 | 63 | 是否循环播放（true/false）。 64 | 65 | 12.muted 66 | 67 | 是否静音（true/false）。 68 | 69 | 13.networkState 70 | 71 | 网络状态。 72 | 73 | NETWORK_EMPTY/0 未加载文件 74 | NETWORK_IDLE/1 网络空闲 75 | NETWORK_LOADING/2 正在加载文件 76 | NETWORK_NO_SOURCE/3 资源不可用【？】 77 | 78 | 14.paused 79 | 80 | 是否暂停（只读，true/false）。 81 | 82 | 15.playbackRate 83 | 84 | 播放速度。 85 | 86 | FF中，范围是 0.25~5.0。 87 | Chrome中，范围是 0.5~4.0。 88 | 89 | 16.played 90 | 91 | 已播放时间范围（只读）。 92 | 93 | timeRanges 94 | 95 | 17.preload 96 | 97 | 预加载方式（none/metadata/auto）。 98 | 99 | 18.readyState 100 | 101 | 媒体状态（只读）。 102 | 103 | HAVE_NOTHING/0 不可用 104 | HAVE_METADATA/1 媒体信息可用 105 | HAVE_CURRENT_DATA/2 已加载当前播放数据 106 | HAVE_FUTURE_DATA/3 已加载未来播放数据 107 | HAVE_ENOUGH_DATA/4 数据充足 108 | 109 | 19.seekable 110 | 111 | 用户可选播放范围。 112 | 113 | TimeRanges 包含多个时间段的数组。 114 | timeRanges.length 数组长度 115 | timeRanges.start(i) 时间段i的起始时间 116 | timeRanges.end(i) 时间段i的终止时间 117 | 118 | 20.seeking 119 | 120 | 是否正在选择播放位置（拖动滑块）。 121 | 122 | 21.buffered 123 | 124 | 已加载的时间段（timeRanges）。 125 | 126 | ###方法 127 | 128 | 1.play() 129 | 130 | 开始播放。 131 | 132 | audio.play(); // 开始播放 133 | 134 | 2.pause() 135 | 136 | 暂停播放。 137 | 138 | audio.pause(); // 暂停播放 139 | 140 | 3.load() 141 | 142 | 开始加载数据。 143 | 144 | 4.canPlayType(DOMString) 145 | 146 | return: 147 | >1. probably 可播放 148 | >2. maybe 可能可播放 149 | >3. [empty] 不可播放 150 | 151 | ###事件 152 | 153 | 1.abort 154 | 155 | 文件载入被中止时触发。 156 | 157 | 2.canplay 158 | 159 | 文件可开始播放时触发。 160 | 161 | 3.canplaythrough 162 | 163 | 文件完全可播放时触发。（不需要暂停来缓冲） 164 | 165 | 4.durationchange 166 | 167 | 文件时长改变时触发。 168 | 169 | 5.emptied 170 | 171 | 播放列表为空时触发。 172 | 173 | 6.ended 174 | 175 | 播放结束时触发。 176 | 177 | 7.error 178 | 179 | 文件载入出错时触发。 180 | 181 | 8.loadeddata 182 | 183 | 文件当前帧加载完成时触发。 184 | 185 | 9.loadedmetadata 186 | 187 | 媒体信息加载完成时触发。 188 | 189 | 10.loadstart 190 | 191 | 浏览器开始查找文件时触发。 192 | 193 | 11.pause 194 | 195 | 播放被暂停时触发。 196 | 197 | 12.play 198 | 199 | 开始播放时触发。 200 | 201 | 13.playing 202 | 203 | 暂停或停止后，文件可播放时触发。 204 | 205 | 14.progress 206 | 207 | 浏览器加载媒体文件时触发。 208 | 209 | 15.ratechange 210 | 211 | 播放速度改变时触发。 212 | 213 | 16.seeked 214 | 215 | 用户选择播放进度后触发。 216 | 217 | 17.seeking 218 | 219 | 用户选择播放进度时触发。 220 | 221 | 18.stalled 222 | 223 | 浏览器尝试加载媒体信息，但信息不可用时触发。 224 | 225 | 19.suspend 226 | 227 | 浏览器有意不加载媒体信息时触发。 228 | 229 | 20.timeupdate 230 | 231 | 播放位置改变时触发。 232 | 233 | 21.volumechange 234 | 235 | 音量改变时触发。 236 | 237 | 22.waiting 238 | 239 | 播放因需要换冲而暂停时触发。 -------------------------------------------------------------------------------- /posts/drafts/browser-apis/dom/range.md: -------------------------------------------------------------------------------- 1 | Range 2 | ===== 3 | 4 | `Range` 对象代表了包含文本节点片段或其他节点的文档片段（范围）。 5 | 6 | 有三种方式获得 Range 对象： 7 | 8 | var range=document.createRange(); 9 | var range=selection.getRangeAt(index); 10 | var range=new Range(); 11 | 12 | 属性 13 | ---- 14 | 15 | ###collapsed 16 | 17 | 范围的起点与终点是否重合（空，未包含任何内容）。 18 | 19 | ###commonAncestorContainer 20 | 21 | 获取文档中包含 Range.startContainer 和 Range.endContainer 节点的最深层节点（最小包含节点）。 22 | 23 | ###endContainer 24 | 25 | 范围终点所在的节点。 26 | 27 | ###endOffset 28 | 29 | 范围终点在 endContainer 节点中的位置。 30 | 31 | ###startContainer 32 | 33 | 范围起点所在的节点。 34 | 35 | ###startOffset 36 | 37 | 范围起点在 endContainer 节点中的位置。 38 | 39 | 方法 40 | ---- 41 | 42 | ###setStart() 43 | 44 | 设置范围的起点。 45 | 46 | 语法： 47 | >range.setStart(startNode, startOffset); 48 | 49 | ###setEnd() 50 | 51 | 设置范围的起点。 52 | 53 | 语法： 54 | >range.setEnd(endNode, endOffset); 55 | 56 | ###setStartBefore() 57 | 58 | 设置范围起点在指定节点之前，目标节点与范围起点所在节点的父节点相同。 59 | 60 | 语法： 61 | >range.setStartBefore(referenceNode); 62 | 63 | 参数： 64 | >用作参考的节点 65 | 66 | ###setStartAfter() 67 | 68 | 设置范围起点在指定节点之后，目标节点与范围起点所在节点的父节点相同。 69 | 70 | ###setEndBefore() 71 | 72 | 设置范围终点在指定节点之前，目标节点与范围终点所在节点的父节点相同。 73 | 74 | ###setEndAfter() 75 | 76 | 设置范围终点在指定节点之后，目标节点与范围终点所在节点的父节点相同。 77 | 78 | ###selectNode() 79 | 80 | 设置范围包含指定节点，目标节点与范围起点/终点所在节点的父节点相同。 81 | 82 | 语法： 83 | >range.selectNode(referenceNode); 84 | 85 | ###selectNodeContents() 86 | 87 | 设置范围包含指定节点的所有内容，目标节点就是范围起点/终点所在节点，startOffset 为 0，endOffset 为目标节点包含的字符数。 88 | 89 | 语法： 90 | >range.selectNodeContents(referenceNode); 91 | 92 | ###collapse(toStart) 93 | 94 | 折叠范围，并将光标定位在范围起点/终点。 95 | 96 | 语法： 97 | >range.collapse(toStart); 98 | 99 | 参数： 100 | >toStart 是否将光标定位在起点（true：定位在起点；false：定位在终点(默认)） 101 | 102 | ###cloneContents() 103 | 104 | 以 DocumentFragment 对象的形式返回 Range 的内容。 105 | 106 | ###deleteContents() 107 | 108 | 从文档中删除 Range 包含的内容。 109 | 110 | ###extractContents() 111 | 112 | 从文档中删除 Range 包含的内容，以 DocumentFragment 对象的形式返回。 113 | 114 | ###insertNode() 115 | 116 | 将指定节点添加到范围的开始。如果目标节点将要插入到文本节点中，则该文本节点被分割成两部分。 117 | 118 | 语法： 119 | >range.insertNode(newNode); 120 | 121 | ###surroundContents(newNode) 122 | 123 | 将 Range 的内容插入到指定节点中，并将目标节点放置在 Range 的起始位置。操作完成后，Range 将会包含目标节点。（如果 Range 中包含了非完整元素(被起点/终点截断)，则无法完成该操作）。 124 | 125 | 语法： 126 | >range.surroundContents(newNode); 127 | 128 | ###compareBoundaryPoints() 129 | 130 | 比较指定范围与当前范围的起点/终点位置关系。 131 | 132 | 语法： 133 | >range.compareBoundaryPoints(how, sourceRange); 134 | 135 | 参数： 136 | >how 比较方式。可使用的参数： 137 | >>Range.END_TO_END 比较二者的终点 138 | >>Range.END_TO_START 比较目标范围的终点与当前范围的起点 139 | >>Range.START_TO_END 比较目标范围的起点与当前范围的终点 140 | >>Range.START_TO_START 比较二者的起点 141 | 142 | >sourceRange 目标范围 143 | 144 | 返回值： 145 | >-1 之前 146 | >0 相同 147 | >1 之后 148 | 149 | ###cloneRange() 150 | 151 | 复制当前范围，返回其副本，而非引用。 152 | 153 | ###detach() 154 | 155 | 释放当前范围对象。 156 | 157 | ###toString() 158 | 159 | 返回当前范围内的文本。 160 | 161 | ### 162 | 163 | ### 164 | 165 | ### 166 | 167 | ### 168 | 169 | ### -------------------------------------------------------------------------------- /posts/drafts/browser-apis/dom/selection.md: -------------------------------------------------------------------------------- 1 | Selection 2 | ======== 3 | 4 | `Selection` 对象代表了当前页面中被选中的文本，可通过 getSelection() 方法获取该对象： 5 | 6 | var se=window.getSelection(); 7 | var se=document.getSelection(); 8 | 9 | 属性 10 | ---- 11 | 12 | ###anchorNode/baseNode 13 | 14 | 选择起点所在的节点/元素。 15 | 16 | ###anchorOffset/baseOffset 17 | 18 | 选择起点相对于其所在的节点/元素的位置。 19 | 20 | ###focusNode/extentNode 21 | 22 | 选择终点所在的节点/元素。 23 | 24 | ###focusOffset/extentOffset 25 | 26 | 选择终点相对于其所在的节点/元素的位置。 27 | 28 | ###isCollapsed 29 | 30 | 选择起点与终点是否重合（未选择任何内容）。 31 | 32 | ###rangeCount 33 | 34 | 选择范围总数（1：已选择；0：未选择）。 35 | 36 | ###type 37 | 38 | 已选择的类型（"Range"：范围(已选择)；"Caret"：插入光标(未选择)）。 39 | 40 | ### 41 | 42 | 方法 43 | ---- 44 | 45 | ###getRangeAt() 46 | 47 | 获取指定位置的 Range 对象。 48 | 49 | 语法： 50 | >selection.getRangeAt(index); 51 | 52 | 参数： 53 | >index Range 的索引 54 | 55 | 返回值： 56 | >Range 对象 57 | 58 | ###collapse() 59 | 60 | 将 Selection 对象折叠为插入点（不修改文档内容）。 61 | 62 | 语法： 63 | >selection.collapse(parentNode, offset); 64 | 65 | 参数： 66 | >parentNode 折叠后光标所在的元素 67 | >offset 0：光标位于元素文本的开头；1：光标位于元素文本的末尾 68 | 69 | ###extend() 70 | 71 | 将 Selection 对象的焦点移动到指定元素的指定位置。 72 | 73 | 语法： 74 | >selection.extend(parentNode, offset); 75 | 76 | 参数： 77 | >parentNode 目标元素 78 | >offset 目标位置 79 | 80 | ###modify() 81 | 82 | 修改 Selection 对象选择的内容。 83 | 84 | 语法： 85 | >selection.modify(alter, direction, granularity); 86 | 87 | 参数： 88 | >alter 修改类型（"move"：移动；"extend"：扩展） 89 | >direction 修改进行的方向。可指定的值： 90 | >>forward 向前（根据语言的方向） 91 | >>backward 向后（根据语言的方向） 92 | >>left 向左 93 | >>right 向右 94 | 95 | >granularity 指定修改的间隔。可指定的值： 96 | >>character 按字符 97 | >>word 按单词 98 | >>sentence 按句子 99 | >>line 按行 100 | >>paragraph 按段落 101 | >>lineboundary 行边界 102 | >>sentenceboundary 句边界 103 | >>paragraphboundary 段落边界 104 | >>documentboundary 文档边界 105 | 106 | ###collapseToStart() 107 | 108 | 将光标定位到 Selection 对象首个 Range 的起点。 109 | 110 | 语法： 111 | >selection.collapseToStart(); 112 | 113 | ###collapseToEnd() 114 | 115 | 将光标定位到 Selection 对象最后一个个 Range 的终点。 116 | 117 | 语法： 118 | >selection.collapseToEnd(); 119 | 120 | ###selectAllChildren() 121 | 122 | 选中指定元素的所有子元素（之前选中的内容会被丢弃）。 123 | 124 | 语法： 125 | >selection.selectAllChildren(parentNode); 126 | 127 | ###addRange() 128 | 129 | 将 Range 添加到 Selection 对象。 130 | 131 | 语法： 132 | >selection.addRange(range); 133 | 134 | ###removeRange() 135 | 136 | 从 Selection 对象中移除指定的 Range 对象。 137 | 138 | 语法： 139 | >selection.removeRange(range) 140 | 141 | ###removeAllRanges() 142 | 143 | 从 Selection 对象中移除所有的 Range 对象。 144 | 145 | 语法： 146 | >selection.removeAllRanges(); 147 | 148 | ###deleteFromDocument() 149 | 150 | 从文档中删除选中的内容。 151 | 152 | 语法： 153 | >selection.deleteFromDocument(); 154 | 155 | ###toString() 156 | 157 | 获取选中的文本内容。 158 | 159 | 语法： 160 | >selection.toString(); 161 | 162 | ###containsNode(aNode, aPartlyContained) 163 | 164 | 检测指定元素知否包含（或部分包含）在 Selection 对象中。 165 | 166 | 语法： 167 | >selection.containsNode(aNode, aPartlyContained); 168 | 169 | 参数： 170 | >aNode 要检测的元素 171 | >aPartlyContained 是否检测部分包含（true：检测部分包含；false：检测完全包含） 172 | 173 | 返回值： 174 | >true 包含/部分包含 175 | >false 不包含/完全包含 176 | -------------------------------------------------------------------------------- /posts/drafts/browser-apis/dom/selector-apis.md: -------------------------------------------------------------------------------- 1 | Selector APIs 2 | ============ 3 | 4 | 方法 5 | ---- 6 | 7 | ###1.getElementById("ID") 8 | 9 | 通过指定的 `id` 属性值搜索目标元素。 10 | 11 | 可用于： 12 | 13 | + document 14 | 15 | 返回值： 16 | >node 17 | 18 | ###2.getElementsByName("name") 19 | 20 | 通过指定的 `name` 属性值搜索目标元素。 21 | 22 | 可用于： 23 | 24 | + document 25 | 26 | 返回值： 27 | >nodeList 28 | 29 | ###3.getElementsByClassName("class") 30 | 31 | 通过指定的 class 属性值搜索目标元素。 32 | 33 | 可用于： 34 | 35 | + document 36 | + element 37 | 38 | 返回值： 39 | >nodeList 40 | 41 | ###4.getElementsByTagName("tag") 42 | 43 | 通过指定的 HTML tag 搜索目标元素。 44 | 45 | 可用于： 46 | 47 | + document 48 | + element 49 | 50 | 返回值： 51 | >nodeList 52 | 53 | ###5.querySelector("selector") 54 | 55 | 通过指定的 selector 搜索目标元素。 56 | 57 | 可用于： 58 | 59 | + document 60 | + element 61 | 62 | 返回值： 63 | >node 64 | 65 | ###6.querySelectorAll("selector") 66 | 67 | 通过指定的 selector 搜索目标元素。 68 | 69 | 可用于： 70 | 71 | + document 72 | + element 73 | 74 | 返回值： 75 | >nodeList 76 | 77 | 返回值 78 | ------ 79 | 80 | ###1.node 81 | 82 | 单个节点，可直接访问其属性或调用其方法。 83 | 84 | ###2.nodeList 85 | 86 | 节点列表，类似于数组。nodeList.length 属性代表了节点的个数。可以通过处理数组的方法访问每个节点。 87 | 88 | 行为 89 | ---- 90 | 91 | 以下四个方法的返回值是 __动态__ 的： 92 | 93 | + getElementById("id") 94 | + getElementByName("name") 95 | + getElementsByClassName("class") 96 | + getElementsByTagName("tag") 97 | 98 | 当 HTML 文档结构发生改变时，函数的返回值可能会改变。示例代码： 99 | 100 | // HTML 101 |

1

102 |

2

103 | // JS 104 | var target=document.getElementsByClassName("target"); 105 | var len=target.length; // len=1 106 | // 修改

2

的 class 107 | document.getElementsByTagName("p")[1].className="target"; 108 | // 重新读取 target.length 109 | len=target.length; // len=2 110 | 111 | 另外两个方法只会读取执行时的文档状态： 112 | 113 | + querySelector("selectors") 114 | + querySelectorAll("selectors") 115 | 116 | 示例代码： 117 | 118 | // HTML 119 |

1

120 |

2

121 | // JS 122 | var target=document.querySelectAll(".target"); 123 | var len=target.length; // len=1 124 | // 修改

2

的 class 125 | document.getElementsByTagName("p")[1].className="target"; 126 | // 重新读取 target.length 127 | len=target.length; // len=1 128 | -------------------------------------------------------------------------------- /posts/drafts/browser-apis/event.md: -------------------------------------------------------------------------------- 1 | 事件 2 | === 3 | 4 | onabort 5 | 6 | 当用户中止加载时触发。 7 | 8 | onafterprint 9 | 10 | 打印结束或打印预览结束时触发。 11 | 12 | onbeforedeactivate 13 | 14 | onbeforeprint 15 | 16 | 打印开始或打印预览开始前触发。 17 | 18 | onblur 19 | 20 | 当对象失去焦点时触发。 21 | 22 | onchange 23 | 24 | 当对象的内容或选择部分改变时触发。 25 | 26 | onclick 27 | 28 | 当用户在对象上点击鼠标左键时触发。 29 | 30 | oncontextmenu 31 | 32 | 当用户在对象上点击鼠标右键时触发。 33 | 34 | ondbclick 35 | 36 | 当用户在对象上点击鼠标双击左键时触发。 37 | 38 | ondrag 39 | 40 | 当对象被拖动时触发。 41 | 42 | ondragend 43 | 44 | 当拖动对象被释放时触发。 45 | 46 | ondragenter 47 | 48 | 当拖动对象进入放置区域时触发。 49 | 50 | ondragleave 51 | 52 | 当拖动对象离开放置区域时触发。 53 | 54 | ondragover 55 | 56 | 当拖动对象位于放置区域中时触发。 57 | 58 | ondragstart 59 | 60 | 当拖动对象被拖动时触发。 61 | 62 | ondrop 63 | 64 | 当拖动对象被放置到目标对象时由目标对象触发。 65 | 66 | onerror 67 | 68 | 当对象载入出错时触发。 69 | 70 | onfocus 71 | 72 | 当对象获取焦点时触发。 73 | 74 | onfocusin 75 | 76 | 当为对象设置焦点时触发。 77 | 78 | onfocusout 79 | 80 | 当为对象取消焦点时触发。 81 | 82 | onhashchange 83 | 84 | 当 URL 中的锚信息（从 # 开始的部分）改变时触发。 85 | 86 | onhelp 87 | 88 | 当请求帮助信息（点击 F1）时触发。 89 | 90 | oninput 91 | 92 | 当修改文本输入框（input textarea）的内容时触发。 93 | 94 | onkeydown 95 | 96 | 当按下按键时触发。 97 | 98 | onkeypress 99 | 100 | 当点击按键时触发。 101 | 102 | onkeyup 103 | 104 | 当释放按键时触发。 105 | 106 | onload 107 | 108 | 当对象载入完成时触发。 109 | 110 | onmessage 111 | 112 | 当接收到 postMessage 发送的消息是触发。 113 | 114 | onmousedown 115 | 116 | 当在对象上按下鼠标任意按键时触发。 117 | 118 | onmousemove 119 | 120 | 当在对象上移动鼠标指针时触发。 121 | 122 | onmouseout 123 | 124 | 当鼠标指针离开对象边界时触发。 125 | 126 | onmouseover 127 | 128 | 当鼠标指针位于对象上方时触发。 129 | 130 | onmouseup 131 | 132 | 当在对象上释放鼠标任意按键时触发。 133 | 134 | onmousewhell 135 | 136 | 当在对象上滚动鼠标滚轮时触发。 137 | 138 | onmspointercancel 139 | 140 | 当鼠标指针无效时触发。 141 | 142 | onoffline 143 | 144 | 当浏览器离线时触发。 145 | 146 | ononline 147 | 148 | 当浏览器在线时触发。 149 | 150 | onreset 151 | 152 | 当表单被重置时触发。 153 | 154 | onscroll 155 | 156 | 当页面滚动时触发。 157 | 158 | onselect 159 | 160 | 当当前选中内容改变时触发。 161 | 162 | onstorage 163 | 164 | 当 Web Storage 更新时触发。 165 | 166 | onunload 167 | 168 | 当卸载对象时触发。 -------------------------------------------------------------------------------- /posts/drafts/css/css.md: -------------------------------------------------------------------------------- 1 | CSS 参考 2 | ======== 3 | 4 | 概述 5 | ---- 6 | 7 | CSS（Cascading Style Sheets，层叠样式表）指的是一系列的 CSS 样式。样式定义了 HTML 元素的显示规则（如 字体、颜色、尺寸等）。 8 | 9 | CSS 的最新标准为 CSS 2.1，CSS3 标准还在制定和发展中。 10 | 11 | ###内容与表现 12 | 13 | 早期的 HTML 中，仅有 `` `

` 等基本的元素，它们不仅描述了页面的内容，还决定了内容的外观表现。开发人员开始不断地向 HTML 中添加新的标签（如 `` `

` 等），用来实现更丰富的外观表现。这些新的标签带来了更丰富的样式，却使网页变得杂乱和臃肿，难以修改和维护。 14 | 15 | 为了解决 HTML 内容和表现关联较强的问题（耦合），开发人员将 HTML 内容的表现部分独立出来，以样式表的形式来定义 HTML 内容的表现。 16 | 17 | ###使用样式 18 | 19 | 在网页中使用样式，有三种方法： 20 | 21 | ####1.内联样式 22 | 23 | 为元素定义 `style` 属性，即可使用内联样式： 24 | 25 |

段落的文本显示为红色

26 | 27 | 内联样式只对当前的元素有效。 28 | 29 | ####2.内部样式 30 | 31 | 在 `` 元素内定义 ` 38 | 39 | 在内部样式中，可以为当前页面中的任意元素定义样式规则。 40 | 41 | ####3.外部样式 42 | 43 | 外部样式的规则记录在一个 `.css` 文件中，并通过 `` 元素中的 `` 元素引入到网页中： 44 | 45 | 46 | 47 | 在外部样式中，可以为所有引用该样式文件的页面中的任意元素定义样式规则。 48 | 49 | __注意：__ 50 | 51 | 建议所有的样式规则都写在外部样式表中，这种方式有许多益处： 52 | 53 | 1. 所有样式都在独立的文件中，方便修改和查找 54 | 2. 外部样式表可以被多个 HTML 文档引用，其中的样式可以在多个页面共享 55 | 3. 在 HTML 中可以简单地切换外部样式文件（网站改版或换肤功能） 56 | 57 | ###层叠、优先权与继承 58 | 59 | HTML 元素同时被多组 CSS 指定了样式，称为 __层叠__ 。 60 | 61 | // style.css 62 | p{ 63 | color:red; 64 | } 65 | // index.html 66 | ... 67 | 68 | 73 | ... 74 |

some text

75 | 76 | 这段代码中的 `

` 元素同时受到三组颜色属性的控制，它的文本会是什么颜色呢？ 77 | 78 | 在多组样式同时作用于一个元素时，会依据 __优先权__ 来选择应用哪一个样式的规则。 79 | 80 | 网页中同时存在的样式可能有三类，共 5 组： 81 | 82 | 1. 浏览器默认样式 83 | 2. 网页定义的样式（包括 内联样式、内部样式和外部样式） 84 | 3. 用户自定义样式（通过 custom.css 或通过浏览器插件设置的样式） 85 | 86 | 参考：user stylesheet 87 | 88 | 优先权从高到低依次为： 89 | 90 | 1. 用户自定义样式 91 | 2. 内联样式 92 | 3. 内部样式 93 | 4. 外部样式 94 | 5. 浏览器默认样式 95 | 96 | 附加规则： 97 | 98 | + 同一个 `style` 属性中，同一个内部或外部样式中的相同或不同样式组中，后定义的样式规则优先权高 99 | + 如果页面通过 `` 元素引用了多个外部样式文件，最后引用的样式文件优先权高 100 | + 内部样式和外部样式的位置？ 101 | + @import 引入的样式？ 102 | 103 | __继承__ 是来自面向对象的概念，CSS 中的继承有如下特点： 104 | 105 | + 外部元素（父元素，祖先元素）中定义的样式规则会同时应用于内部元素（子元素，后代元素） 106 | + 子元素中定义的样式规则会取代父元素中定义的同一规则 107 | 108 | ###语法规则 109 | 110 | __CSS 规则__ 的语法如下： 111 | 112 | selector{ 113 | declaration1; 114 | declaration2; 115 | ... 116 | declarationN; 117 | } 118 | 119 | 上面的代码称为一条 CSS 规则。每个规则分为两个部分： 120 | 121 | 1. 选择器 122 | 选择器通过一系列的规则，指定了应用当前样式规则的目标元素。 123 | 2. 声明列表 124 | 列表中包含了一系列的样式声明。样式声明列表需要包含在 `{}`中。 125 | 126 | __样式声明__ 由属性和值两部分组成： 127 | 128 | property:value; 129 | 130 | 属性名和属性值通常为小写字母，每条样式声明都必须以 `;` 结尾。 131 | 132 | __CSS 注释__ 的语法如下： 133 | 134 | /* CSS 单行注释 */ 135 | 136 | 注释可以是单行的，也可以是多行的。 137 | 138 | /* 139 | * CSS 140 | * 多行注释 141 | */ 142 | 143 | ###颜色和单位 144 | 145 | 参考：css_color css_units 146 | 147 | ###选择器 148 | 149 | 参考：css_selectors 150 | 151 | ###样式属性 152 | 153 | 参考：css_properties -------------------------------------------------------------------------------- /posts/drafts/css/css_animation.md: -------------------------------------------------------------------------------- 1 | 动画(animation) 2 | ============== 3 | 4 | @keyframes 5 | ---------- 6 | 7 | 定义多个关键帧。 8 | 9 | @keyframes name{ 10 | from{top:0px;} 11 | to{top:200px;} 12 | } 13 | 14 | 属性： 15 | 16 | 1.name 定义动画名称 17 | 2.keyframes 定义关键帧的位置 18 | >属性值： 19 | >1.百分值 20 | >2.from=0% 21 | >3.to=100% 22 | 3.styles 定义关键帧的样式属性 23 | 24 | animation-name 25 | -------------- 26 | 27 | 定义动画的名称。 28 | 29 | animation-duration 30 | ------------------ 31 | 32 | 定义动画的长度。 33 | 34 | 属性值： 35 | 36 | 1. time 默认为 0，无动画效果（单位：s） 37 | 38 | animation-timing-function 39 | ------------------------- 40 | 41 | 定义动画的速度曲线。 42 | 43 | animation-deley 44 | --------------- 45 | 46 | 定义动画的延迟。 47 | 48 | animation-iteration-count 49 | ------------------------- 50 | 51 | 定义动画的播放次数（默认为 1）。 52 | 53 | animation-derection 54 | ------------------- 55 | 56 | 定义动画是否循环反向播放。 57 | 58 | 属性值： 59 | 60 | 1. normal 不反向播放（默认） 61 | 2. alternate 循环反向播放 62 | 63 | animation-play-state 64 | -------------------- 65 | 66 | 设置动画的播放状态。 67 | 68 | 属性值： 69 | 70 | 1. paused 暂停 71 | 2. running 播放 72 | 73 | animation 74 | --------- 75 | 76 | 在同一个声明中设置动画的属性。 77 | 78 | 可包括的属性： 79 | 80 | + animation-name 81 | + animatin-duration 82 | + animation-timing-function 83 | + animation-deley 84 | + animation-iteration-count 85 | + animation-direction -------------------------------------------------------------------------------- /posts/drafts/css/css_background.md: -------------------------------------------------------------------------------- 1 | 背景(background) 2 | =============== 3 | 4 | background-attachment 5 | --------------------- 6 | 7 | 设置背景图像是否随页面滚动。 8 | 9 | 属性值： 10 | 11 | 1. scroll 随页面滚动（默认） 12 | 2. fixed 不随页面滚动 13 | 14 | background-color 15 | ---------------- 16 | 17 | 设置背景色。 18 | 19 | 属性值： 20 | 21 | 1. transparent 透明（默认） 22 | 2. css_color 23 | 24 | background-image 25 | ---------------- 26 | 27 | 设置背景图像。 28 | 29 | 属性值： 30 | 31 | 1. none 无背景图像 32 | 2. url("url") 设置背景图像的路径 33 | 34 | background-position 35 | ------------------- 36 | 37 | 设置背景图像的起始位置。 38 | 39 | 属性值： 40 | 41 | 1.top|center|bottom left|center|right 的组合。如果仅设置一个值，第二个为 center 42 | 43 | 2.x% y% 水平位置和垂直位置。如果仅设置一个值，第二个为 50% 44 | 45 | 3.x y 尺寸值。如果仅设置一个值，第二个为 50% 46 | 47 | 默认位置为 (0%,0%)。 48 | 49 | background-repeat 50 | ----------------- 51 | 52 | 设置背景图像的平铺方式。 53 | 54 | 属性值： 55 | 56 | 1. repeat 在水平方向和垂直方向平铺 57 | 2. repeat-x 在水平方向平铺 58 | 3. repeat-y 在垂直方向平铺 59 | 4. no-repeat 不平铺 60 | 61 | background-clip 62 | --------------- 63 | 64 | 设置背景的绘制区域。 65 | 66 | 属性值： 67 | 68 | 1. border-box 包括边框的区域（默认） 69 | 2. padding-box 包括内边距的区域 70 | 3. context-box 包括内容的区域 71 | 72 | background-origin 73 | ----------------- 74 | 75 | 设置 background-position 的定位依据。 76 | 77 | 属性值： 78 | 79 | 1. border-box 包括边框的区域（默认） 80 | 2. padding-box 包括内边距的区域 81 | 3. context-box 包括内容的区域 82 | 83 | background-size 84 | --------------- 85 | 86 | 设置背景图像的尺寸（缩放）。 87 | 88 | 属性值： 89 | 90 | 1. x y 宽度和高度。如果仅设置一个值，另一个为 auto 91 | 2. x% y% 百分值。如果仅设置一个值，另一个为 auto 92 | 3. cover 缩放图像，填充整个背景区域（1:1 缩放） 93 | 4. contain 缩放图像，填充整个背景区域（非 1:1 缩放） 94 | 95 | background 96 | ---------- 97 | 98 | 在同一个声明中设置背景属性。 99 | 100 | 可包括的属性： 101 | 102 | + background-color 103 | + background-position 104 | + background-size 105 | + background-repeat 106 | + background-origin 107 | + background-clip 108 | + background-attachment 109 | + background-image 110 | 111 | 多重背景 112 | ------- 113 | 114 | ###1.分组声明 115 | 116 | 在各个 background-* 属性中声明多组属性，每组对应一个背景的声明： 117 | 118 | background-image:url("image1"),url("image2"); 119 | background-position:top,bottom; 120 | ... 121 | 122 | ###2.合并声明 123 | 124 | 在同一个 background 属性中声明多组属性： 125 | 126 | background:url("image1") top,url("image2") bottom; -------------------------------------------------------------------------------- /posts/drafts/css/css_border-image.md: -------------------------------------------------------------------------------- 1 | 图像边框(border-image) 2 | ===================== 3 | 4 | border-image-outset 5 | =================== 6 | 7 | 设置边框图像超出边框的量。 8 | 9 | 属性值： 10 | 11 | + 尺寸值 12 | + border-width 的倍数 13 | 14 | 有四种设置方式，分别代表顶部、右侧、底部及左侧的 outset 值。 15 | 16 | border-image-repeat 17 | =================== 18 | 19 | 设置边框图像的呈现方式。 20 | 21 | 属性值： 22 | 23 | 1. stretch 拉伸 24 | 2. repeat 平铺 25 | 3. round 类似于 repeat。无法平铺时，会对图像进行缩放 26 | 27 | border-image-slice 28 | ================== 29 | 30 | ？？ 31 | 32 | border-image-source 33 | =================== 34 | 35 | 设置边框图像的 URL。 36 | 37 | 属性值： 38 | 39 | 1. url("url") 用作边框图像的资源 40 | 41 | border-image-width 42 | ================== 43 | 44 | ？？ 45 | 46 | border-image 47 | ============ 48 | 49 | 在同一个声明中设置边框图像属性。 50 | 51 | 可包括的属性： 52 | 53 | + border-image-source 54 | + border-image-slice 55 | + border-image-width 56 | + border-image-outset 57 | + border-image-repeat -------------------------------------------------------------------------------- /posts/drafts/css/css_border-radius.md: -------------------------------------------------------------------------------- 1 | 圆角(border-radius) 2 | ================== 3 | 4 | border-top-left-radius 5 | ---------------------- 6 | 7 | 设置边框左上角的外形。 8 | 9 | 属性值： 10 | 11 | 1. 尺寸值 圆角半径 12 | 2. 百分值 乘以边框宽/高度，作为圆角的半径 13 | 14 | 属性值组合： 15 | 16 | 1. a b/a% b%/a% 椭圆的水平半径和垂直半径 17 | 2. a 圆的半径 18 | 19 | border-top-right-radius 20 | ---------------------- 21 | 22 | 设置边框右上角的外形。 23 | 24 | border-bottom-left-radius 25 | ------------------------- 26 | 27 | 设置边框左下角的外形。 28 | 29 | border-bottom-right-radius 30 | -------------------------- 31 | 32 | 设置边框右上角的外形。 33 | 34 | border-radius 35 | ------------- 36 | 37 | 在同一个声明中设置内边距属性。 38 | 39 | 可包括的属性： 40 | 41 | + border-top-left-radius 42 | + border-top-right-radius 43 | + border-bottom-right-radius 44 | + border-bottom-left-radius 45 | 46 | 可包括的属性组合： 47 | 48 | 1.a b c d / e f g h 49 | >top-left:a e; 50 | >top-right:b f; 51 | >bottom-right:c g; 52 | >bottom-left:d h; 53 | 54 | 2.a b c d / e f g 55 | >top-left:a e; 56 | >top-right:b f; 57 | >bottom-right:c g; 58 | >bottom-left:d f; 59 | 60 | 3.a b c d / e f 61 | >top-left:a e; 62 | >top-right:b f; 63 | >bottom-right:c e; 64 | >bottom-left:d f; 65 | 66 | 3.a b c d / e 67 | >top-left:a e; 68 | >top-right:b e; 69 | >bottom-right:c e; 70 | >bottom-left:d e; 71 | 72 | ... 73 | a b c d | a b c | a b | a 74 | * 75 | e f g h | e f g | e f | e 76 | ... 77 | 78 | 4.a b c d 79 | >top-left:a a; 80 | >top-right:b b; 81 | >bottom-right:c c; 82 | >bottom-left:d d; 83 | 84 | 5.a b c 85 | >top-left:a a; 86 | >top-right:b b; 87 | >bottom-right:c c; 88 | >bottom-left:b b; 89 | 90 | 6.a b 91 | >top-left:a a; 92 | >top-right:b b; 93 | >bottom-right:a a; 94 | >bottom-left:b b; 95 | 96 | 7.a 97 | >top-left:a; 98 | >top-right:a; 99 | >bottom-right:a; 100 | >bottom-left:a; -------------------------------------------------------------------------------- /posts/drafts/css/css_border.md: -------------------------------------------------------------------------------- 1 | 边框(border) 2 | =========== 3 | 4 | border-top-width 5 | ---------------- 6 | 7 | 设置顶部边框的宽度。 8 | 9 | 属性值： 10 | 11 | 1. thin 细 12 | 2. medium 中等（默认） 13 | 3. thick 粗 14 | 4. 尺寸值 15 | 16 | border-top-style 17 | ---------------- 18 | 19 | 设置顶部边框的样式。 20 | 21 | 属性值： 22 | 23 | 1. none 无边框 24 | 2. hidden 与 none 类似。在应用于表格时，可以解决边框冲突 25 | 3. dotted 点状线 26 | 4. dashed 虚线 27 | 5. solid 实线 28 | 6. double 双线 29 | 7. groove 3D 凹陷 30 | 8. ridge 3D 突出 31 | 9. inset 3D inset 32 | 10. outset 3D outset 33 | 34 | border-top-color 35 | ---------------- 36 | 37 | 设置顶部边框的颜色。 38 | 39 | 属性值： 40 | 41 | 1. transparent 透明（默认） 42 | 2. 颜色值 43 | 44 | bottom-top 45 | ---------- 46 | 47 | 在同一个声明中设置顶部边框属性。 48 | 49 | 可包括的属性： 50 | 51 | + border-top-width 52 | + border-top-style 53 | + border-top-color 54 | 55 | border-right-width 56 | - 57 | 58 | border-right-style 59 | - 60 | 61 | border-right-color 62 | - 63 | 64 | bottom-right 65 | - 66 | 67 | border-bottom-width 68 | - 69 | 70 | border-bottom-style 71 | - 72 | 73 | border-bottom-color 74 | - 75 | 76 | bottom-bottom 77 | - 78 | 79 | border-left-width 80 | - 81 | 82 | border-left-style 83 | - 84 | 85 | border-left-color 86 | - 87 | 88 | bottom-left 89 | - 90 | 91 | ... 92 | 93 | border-color 94 | ------------ 95 | 96 | 在同一个声明中设置边框颜色。 97 | 98 | 可包括的属性： 99 | 100 | + border-top-color 101 | + border-right-color 102 | + border-bottom-color 103 | + border-left-color 104 | 105 | 有四种设置方式： 106 | 107 | 1. a b c d 分别设置顶部、右侧、底部和左侧的边框颜色 108 | 2. a b c 分别设置顶部、左右和底部的边框颜色 109 | 3. a b 分别设置顶部和底部、左右的边框颜色 110 | 4. a 一次设置四个边框颜色 111 | 112 | border-style 113 | ------------ 114 | 115 | 在同一个声明中设置边框样式。 116 | 117 | 可包括的属性： 118 | 119 | + border-top-style 120 | + border-right-style 121 | + border-bottom-style 122 | + border-left-style 123 | 124 | 有四种设置方式： 125 | 126 | 1. a b c d 分别设置顶部、右侧、底部和左侧的边框样式 127 | 2. a b c 分别设置顶部、左右和底部的边框样式 128 | 3. a b 分别设置顶部和底部、左右的边框样式 129 | 4. a 一次设置四个边框样式 130 | 131 | border-width 132 | ------------ 133 | 134 | 在同一个声明中设置边框宽度。 135 | 136 | 可包括的属性： 137 | 138 | + border-top-width 139 | + border-right-width 140 | + border-bottom-width 141 | + border-left-width 142 | 143 | 有四种设置方式： 144 | 145 | 1. a b c d 分别设置顶部、右侧、底部和左侧的边框宽度 146 | 2. a b c 分别设置顶部、左右和底部的边框宽度 147 | 3. a b 分别设置顶部和底部、左右的边框宽度 148 | 4. a 一次设置四个边框宽度 149 | 150 | ... 151 | 152 | border 153 | ------ 154 | 155 | 在同一个声明中设置边框属性。 156 | 157 | 可包括的属性： 158 | 159 | + border-width 160 | + border-style 161 | + border-color -------------------------------------------------------------------------------- /posts/drafts/css/css_box-shadow.md: -------------------------------------------------------------------------------- 1 | 盒阴影(box-shadow) 2 | ================= 3 | 4 | box-shadow 5 | ---------- 6 | 7 | 设置 box 的阴影。 8 | 9 | 可包括的属性： 10 | 11 | + h-shadow 阴影水平位置（右为正，左为负。默认为 0） 12 | + v-shadow 阴影垂直位置（下为正，上为负。默认为 0） 13 | + blur 模糊距离（可选，默认为 0） 14 | + spread 阴影尺寸（可选） 15 | + color 阴影颜色（可选，默认与边框颜色相同） 16 | + inset 内阴影（可选，不设置则为外阴影） 17 | 18 | 多重阴影 19 | ------- 20 | 21 | 在 box-shadow 中设置多组阴影数据，即可实现多重阴影： 22 | 23 | box-shadow:2px 2px 5px #CCC inset,5px 5px 10px #AAF; -------------------------------------------------------------------------------- /posts/drafts/css/css_color.md: -------------------------------------------------------------------------------- 1 | CSS 颜色 2 | ======== 3 | 4 | CSS 中的许多属性都和颜色有关，如： 5 | 6 | color 文本颜色 7 | background-color 背景颜色 8 | border-color 边框颜色 9 | outline-color 外框颜色 10 | ... 11 | 12 | 颜色表示方式 13 | ----------- 14 | 15 | ###1.颜色名 16 | 17 | 这是最常见的颜色表示方式，使用浏览器预定义的名称来表示颜色： 18 | 19 | color:red; 20 | 21 | 详细的颜色名称列表，请参考：[Color Name List](http://www.ncdesign.org/html/samp/s030list.htm) or [HTML Color Chart](http://www.html-color-names.com/color-chart.php) 22 | 23 | ###2.十六进制 24 | 25 | 十六颜色使用三组十六进制（00-FF）数字分别代表红色（R，red）、绿色（G，green）和蓝色（B，blue）： 26 | 27 | color:#096A53； 28 | 29 | 如果三组十六进制数的两个字符相同，则可以使用简写形式： 30 | 31 | color:#66AA99; 32 | // 等于 33 | color:#6A9; 34 | 35 | ###3.RGB 36 | 37 | RGB 颜色同样使用三组数字（0-255）分别代表红色、绿色和蓝色： 38 | 39 | color:rgb(80,150,30); 40 | 41 | ###4.RGBA 42 | 43 | RGBA 颜色在 RGB 颜色的基础上扩展了透明（alpha）通道： 44 | 45 | color:rgba(80,150,30,0.3); 46 | 47 | 透明数值的范围是 0.0(完全透明)-1.0（完全不透明）。 48 | 49 | ###5.HSL 50 | 51 | HSL 颜色使用三组数字分别代表色调（H，hue）、饱和度（S，saturation）和亮度（L，lightness）： 52 | 53 | color:hsl(240,80%,60%); 54 | 55 | 色调的范围是 0-360（0/360 红色，120 绿色，240 蓝色），代表色盘的角度； 56 | 饱和度的范围是 0%-100%（0% 灰色，100% 全彩色）； 57 | 亮度的范围也是 0%-100%（0% 黑色，100% 白色）。 58 | 59 | ###6.HSLA 60 | 61 | HSLA 颜色在 HSL 颜色的基础上扩展了透明通道： 62 | 63 | color:hsla(240,80%,60%,0.3); -------------------------------------------------------------------------------- /posts/drafts/css/css_column.md: -------------------------------------------------------------------------------- 1 | 多列(multi-column) 2 | ================= 3 | 4 | column-count 5 | ------------ 6 | 7 | 设置元素内容划分的列数。 8 | 9 | 属性值： 10 | 11 | 1. auto 根据 column-width 等属性自动计算 12 | 2. n 划分为 n 列 13 | 14 | column-width 15 | ------------ 16 | 17 | 设置列宽。 18 | 19 | 1. auto 自动计算列宽 20 | 2. 尺寸值 21 | 22 | column-span 23 | ----------- 24 | 25 | 设置元素所跨列数（默认为 1）。 26 | 27 | 1. all 横跨所有列 28 | 2. n 横跨 n 列 29 | 30 | column-fill 31 | ----------- 32 | 33 | ？？ 34 | 35 | column-gap 36 | ---------- 37 | 38 | 设置列的间离。 39 | 40 | 属性值： 41 | 42 | 1. normal 默认（1 em） 43 | 2. 尺寸值 44 | 45 | column-rule-width 46 | ----------------- 47 | 48 | 设置列分割线的宽度。 49 | 50 | 属性值： 51 | 52 | 1. thin 53 | 2. medium 54 | 3. thick 55 | 4. 尺寸值 56 | 57 | column-rule-style 58 | ----------------- 59 | 60 | 设置列分割线的样式。 61 | 62 | column-rule-color 63 | ----------------- 64 | 65 | 设置列分割线的颜色。 66 | 67 | column-rule 68 | ----------- 69 | 70 | 在同一个声明中设置列分割线属性。 71 | 72 | 可包括的属性： 73 | 74 | + column-rule-width 75 | + column-rule-style 76 | + column-rule-color -------------------------------------------------------------------------------- /posts/drafts/css/css_content.md: -------------------------------------------------------------------------------- 1 | 内容生成(content) 2 | ================ 3 | 4 | content 5 | ------- 6 | 7 | 与 :before 和 :after 伪元素配合，用于插入内容。 8 | 9 | elmt:before{ 10 | content:"abc"; 11 | ... 12 | } 13 | 14 | 属性值： 15 | 16 | 1. "string" 插入的文本 17 | 2. url("url") 插入的文件 18 | 3. attr(attr) 获取并插入 elmt 的 attr 属性值 19 | 4. counter(counter) 获取并插入计数器 counter 的值 20 | 21 | 使用 content 插入内容后，还可以继续为插入的内容添加样式： 22 | 23 | elmt:before{ 24 | content:"abc"; 25 | color:blue; 26 | ... 27 | } 28 | 29 | counter-reset 30 | ------------- 31 | 32 | 创建或重置计数器。 33 | 34 | 属性值： 35 | 36 | 1. none 不重置计数器 37 | 2. counter n 定义计数器 counter 并指定初始值 n（可选，默认为 0） 38 | 39 | counter-increment 40 | ----------------- 41 | 42 | 设置计数器的增量。 43 | 44 | 属性值： 45 | 46 | 1. none 无计数器增量（默认） 47 | 2. counter n 设置计数器 counter 的增量为 n（正数、负数或 0。可选，默认为 1） 48 | 49 | quotes 50 | ------ 51 | 52 | 设置包含嵌套引用的引号。 53 | 54 | 属性值： 55 | 56 | 1. none 57 | 2. a b c d 一级嵌套使用 ab，二级嵌套使用 cd 58 | 59 | 可用的引号字符： 60 | 61 | + " (%#34;) 双引号 62 | + ' (%#39;) 单引号 63 | + < (%#8249;) 左尖括号 64 | + > (%#8250;) 右尖括号 65 | + 《 (%#171;) 左书名号 66 | + 》 (%#187;) 右书名号 67 | + ` (%#8216;) 左单引号 68 | + ˊ (%#8217;) 右单引号 69 | + 〝 (%#8220;) 左双引号 70 | + 〞 (%#8221;) 右双引号 71 | + ** (%#8222;) 双引号 -------------------------------------------------------------------------------- /posts/drafts/css/css_dimension.md: -------------------------------------------------------------------------------- 1 | 尺寸(dimension) 2 | ============== 3 | 4 | width 5 | ----- 6 | 7 | 设置元素的宽度。 8 | 9 | 属性值： 10 | 11 | 1. auto 自动计算宽度（默认） 12 | 2. 尺寸值 13 | 3. 百分值 14 | 15 | min-width 16 | --------- 17 | 18 | 设置元素的最小宽度（实际宽度等于或大于此值，不会小于此值） 19 | 20 | 属性值： 21 | 22 | 1. 尺寸值 23 | 2. 百分值 24 | 25 | max-width 26 | --------- 27 | 28 | 设置元素的最大宽度（实际宽度等于或小于此值，不会打于此值） 29 | 30 | height 31 | ------ 32 | 33 | 设置元素的高度。 34 | 35 | min-height 36 | ---------- 37 | 38 | 设置元素的最小高度（实际高度等于或大于此值，不会小于此值） 39 | 40 | max-height 41 | ---------- 42 | 43 | 设置元素的最大高度（实际高度等于或小于此值，不会打于此值） -------------------------------------------------------------------------------- /posts/drafts/css/css_filter.md: -------------------------------------------------------------------------------- 1 | opacity 2 | ------- 3 | 4 | 设置元素的透明度。 5 | 6 | 属性值： 7 | 8 | 1. alpha 透明度（0.0-1.0 0.0 代表完全透明，1.0 代表完全不透明） 9 | 10 | filter 11 | ------ 12 | 13 | 滤镜，主要应用于图像。 14 | 15 | 属性值： 16 | 17 | 1.grayscale() 灰度 18 | 19 | 2.sepia() 褐色 20 | 21 | 3.saturate() 饱和度 22 | 23 | 4.hue-rotate() 色向反转 24 | 25 | 5.invert() 反色 26 | 27 | 6.opacity() 透明度 28 | 29 | 7.brightness() 亮度 30 | 31 | 8.contrast() 对比度 32 | 33 | 9.blur() 模糊 34 | 35 | 10.drop-shadow() 阴影 -------------------------------------------------------------------------------- /posts/drafts/css/css_font-face.md: -------------------------------------------------------------------------------- 1 | 自定义字体(@font-face) 2 | ==================== 3 | 4 | 格式支持（[caniuse.com](caniuse.com/http://caniuse.com/#feat=fontface "font-face")）： 5 | 6 | + eot IE: 6+ 7 | + woff IE: 9+; FF: 3.6+; Chrome: 5+; Safari: 5.1+; Opera: 11.1+; 8 | + SVG Chrome: 4+; Safari: 3.2+; Opera: 9.0+ 9 | + ttf/otf IE 9+(partial); FF: 3.5+; Chrome: 4.0+; Safari: 3.1+; Opera: 10.0+ 10 | 11 | @font-face 12 | ---------- 13 | 14 | 用于声明自定义字体： 15 | 16 | @font-face{ 17 | font-family:font-name; 18 | src:url("font-file"); 19 | ... 20 | } 21 | 22 | ###@font-face 声明中必须有的属性： 23 | 24 | 1.font-family 25 | 26 | 用于定义字体的名称，在引用处通过 `font-family` 属性使用该字体。 27 | 28 | // 引用自定义字体 29 | font-family:font-name; 30 | 31 | 2.src 32 | 33 | 用于定义字体文件的 URL。 34 | 35 | 可定义多组 URL 值，用于设置不同格式的字体，来支持不同的浏览器。 36 | 37 | src:url("file1"),url("file2"); 38 | 39 | ###@font-face 声明中可选的属性： 40 | 41 | 可选属性用于定义自定义字体的默认样式。 42 | 43 | + font-stretch 44 | + font-style 45 | + front-weight 46 | + unicode-range 47 | 48 | 设置字体支持的 UNICODE 字符范围。 49 | 50 | __注意：__ @font-face 声明需要放置到所有引用该字体的位置之前，以保证字体在引用时已经加载完成。 -------------------------------------------------------------------------------- /posts/drafts/css/css_font.md: -------------------------------------------------------------------------------- 1 | 字体(font) 2 | ========= 3 | 4 | font-family 5 | ----------- 6 | 7 | 设置字体。 8 | 9 | 属性值： 10 | 11 | 1. font_list 字体名称或字体系列名称 12 | 13 | 可设置多个值（使用 `,` 分隔），如果无法识别第一个，会依次向后选择一个支持的字体。如果全部无法识别，则使用默认字体。 14 | 15 | font-size 16 | --------- 17 | 18 | 设置字体大小。 19 | 20 | 属性值： 21 | 22 | 1. xx-small|x-small|small|medium|large|x-large|xx-large 不同的相对尺寸（默认为 medium） 23 | 2. smaller 比父元素更小 24 | 3. larger 比父元素更大 25 | 4. 尺寸值 26 | 5. 百分值 （与父元素的字体大小相乘，作为字体大小） 27 | 28 | font-size-adjust 29 | ---------------- 30 | 31 | font-stretch 32 | ------------ 33 | 34 | font-style 35 | ---------- 36 | 37 | 设置字体样式。 38 | 39 | 属性值： 40 | 41 | 1. normal 标准样式（默认） 42 | 2. italic 斜体 43 | 3. oblique 倾斜 44 | 45 | font-variant 46 | ------------ 47 | 48 | 设置是否使用小型大写字母显示文本。 49 | 50 | 属性值： 51 | 52 | 1. none 标准文本（默认） 53 | 2. small-caps 使用小型大写字母 54 | 55 | font-weight 56 | ----------- 57 | 58 | 设置文本粗细。 59 | 60 | 属性值： 61 | 62 | 1. normal 默认 63 | 2. bold 粗体 64 | 3. bulder 更粗 65 | 4. lighter 更细 66 | 5. 100|200|...|900 （400=normal，700=bold） 67 | 68 | font 69 | ---- 70 | 71 | 在同一个声明中设置字体属性。 72 | 73 | 可包括的属性： 74 | 75 | + font-style 76 | + font-variant 77 | + font-weight 78 | + font-size/line-height 79 | + font-family 80 | + line-height 81 | 82 | 建议使用此顺序指定字体属性。其中的属性均为可选值，但建议至少包括 `font-size` 和 `font-family` 属性。 -------------------------------------------------------------------------------- /posts/drafts/css/css_gradient.md: -------------------------------------------------------------------------------- 1 | 背景渐变(background-gradient) 2 | ============================ 3 | 4 | liner-gradient() 5 | ---------------- 6 | 7 | 线性渐变。 8 | 9 | background-image:liner-gradient(left,#FFF,#339); 10 | 11 | 可能的参数组合： 12 | 13 | liner-gradient(point/angle,stop1,stop2...) 14 | 15 | point 起点 16 | >top 顶部（从上到下的渐变） 17 | >bottom 底部（从下到上的渐变） 18 | >left 左侧（从左到右的渐变） 19 | >right 右侧（从右到左的渐变） 20 | >top left 左上角（从左上到右下的渐变） 21 | >top right 右上角（从右上到左下的渐变） 22 | >bottom left 右上角（从右上到左下的渐变） 23 | >bottom right 右下角（从右下到左上的渐变） 24 | >不指定该值，则默认为 top 25 | 26 | angle 渐变角度 27 | >45deg 从右侧开始，逆时针45° 28 | 29 | stop 标记位置（color position） 30 | >1.多个 color，不指定位置，则位置平均分布 31 | >>color1,color2=color1 0%,color2 100% 起点为 color1，终点为 color2 32 | >>color1,color2,color3=color1 0%,color2 50%,color3 100% 起点为 color1，中点为 color2，终点为 color3 33 | 34 | >2.多个 color position，按照指定的位置分布颜色 35 | >3.有的 stop 指定了位置，有的未指定，则未指定位置的 stop 平均分布 36 | 37 | radial-gradient() 38 | ----------------- 39 | 40 | 径向渐变。 41 | 42 | background-image:radial-gradient(#FFF,#339); 43 | 44 | 可能的参数组合： 45 | 46 | radial-gradient(center,shap size,stop1,stop2...) 47 | 48 | center 渐变中心 49 | >top | center | bottom * left | center | right 的组合 50 | >a b 尺寸值 51 | >a% b% 百分值 52 | >top | center | bottom | a | a% 指定一个值，第二个值为 center/50% 53 | >默认为 center center 54 | 55 | shap 渐变形状 56 | >circle 圆 57 | >ellipse 椭圆（默认） 58 | 59 | size 渐变范围 60 | >closest-side 渐变外围到达最近的边 61 | >farthest-side 渐变外围到达最远的边 62 | >closest-corner 渐变范围到达最近的角 63 | >farthest-corner 渐变范围到达最远的角 64 | >contain 渐变包含在元素框中 65 | >cover 渐变覆盖整个元素框 66 | 67 | repeating-linear-gradient() 68 | --------------------------- 69 | 70 | 重复线性渐变。 71 | 72 | 可能的参数组合： 73 | 74 | repeating-linear-gradient(point,stop1,stop2,stop3,stop4) 75 | 76 | point 起点 77 | 78 | stop 1-4 重复渐变片段（只有 stop1 可省略 position） 79 | 80 | repeating-radial-gradient() 81 | --------------------------- 82 | 83 | 重复径向渐变。 84 | 85 | 可能的参数组合： 86 | 87 | radial-gradient(center,shap size,stop1,stop2,stop3,stop4) 88 | 89 | 属性包含 circle contain 时，会导致 Chrome 崩溃。 -------------------------------------------------------------------------------- /posts/drafts/css/css_list.md: -------------------------------------------------------------------------------- 1 | 列表(list) 2 | ========= 3 | 4 | 列表样式属性针对 `