├── posts ├── drafts │ ├── javascript │ │ ├── js_regexp.md │ │ ├── js_class.md │ │ ├── js_object-boolean.md │ │ ├── js_objects.md │ │ ├── js_object-regexp.md │ │ ├── js_object_function.md │ │ ├── js_object-number.md │ │ ├── js_variable.md │ │ ├── javascript.md │ │ ├── js_grammer.md │ │ ├── js_object.md │ │ ├── js_datatype.md │ │ ├── js_statements.md │ │ ├── js_object-string.md │ │ ├── js_object-math.md │ │ └── js_array.md │ ├── w3c │ │ ├── web-design │ │ │ ├── accessibility.md │ │ │ ├── math-on-the-web.md │ │ │ ├── privacy.md │ │ │ └── mobile-web.md │ │ ├── web-of-services │ │ │ ├── security.md │ │ │ ├── internationalization.md │ │ │ ├── protocols.md │ │ │ └── service-description.md │ │ ├── web-of-devices │ │ │ ├── mobile-web.md │ │ │ ├── web-and-tv.md │ │ │ ├── multimodal-access.md │ │ │ ├── device-independece-and-content-adaptation.md │ │ │ └── voice-browsing.md │ │ ├── xml │ │ │ ├── internationalization.md │ │ │ ├── query.md │ │ │ ├── security.md │ │ │ ├── publishing.md │ │ │ ├── components.md │ │ │ ├── processing.md │ │ │ └── schema.md │ │ ├── web-arch │ │ │ ├── internationalization.md │ │ │ ├── protocols.md │ │ │ ├── identifiers.md │ │ │ ├── architecture-principles.md │ │ │ ├── protocol-and-meta-format-considerations.md │ │ │ └── meta-formats.md │ │ ├── web-of-services.md │ │ ├── browser-and-authoring-tools.md │ │ ├── web-architecture.md │ │ ├── web-of-devices.md │ │ ├── xnl-technology.md │ │ ├── standards │ │ │ ├── dom-events │ │ │ │ └── DOM-EVENTS.md │ │ │ └── dom │ │ │ │ └── DOM.md │ │ ├── semantic-web.md │ │ ├── semantic-web │ │ │ ├── vertical-applications.md │ │ │ ├── linked-data.md │ │ │ ├── query.md │ │ │ └── inference.md │ │ └── agents │ │ │ └── browser-media-players.md │ ├── html │ │ ├── html_tag_br.md │ │ ├── html_tag_hr.md │ │ ├── images │ │ │ ├── html-index.html.png │ │ │ ├── html-tag-ruby.png │ │ │ ├── html-tag-meta-01.png │ │ │ ├── html-tag-title-01.png │ │ │ ├── html-tag-title-02.png │ │ │ ├── html-tag-link-icon.png │ │ │ └── html-semantic-blog-template.png │ │ ├── html_tag_body.md │ │ ├── html_tag_html.md │ │ ├── html_tag_title.md │ │ ├── html_tag_head.md │ │ ├── html_tag_style.md │ │ ├── html_tag_base.md │ │ ├── html_tag_canvas.md │ │ ├── html_tag_audio.md │ │ ├── html_tag_link.md │ │ ├── html_doctype.md │ │ ├── html_tag_script.md │ │ ├── html_tags_list.md │ │ ├── html_tag_meta.md │ │ ├── html_tag_form.md │ │ ├── html_tags_div.md │ │ ├── html_tag_a.md │ │ ├── html_semantic.md │ │ ├── html_tags_text.md │ │ ├── html_tags_table.md │ │ └── html_tags_media.md │ ├── browser-apis │ │ ├── dom │ │ │ ├── element.md │ │ │ ├── dom-objects.md │ │ │ ├── selector-apis.md │ │ │ ├── document.md │ │ │ ├── range.md │ │ │ ├── selection.md │ │ │ ├── html-elements │ │ │ │ └── HTMLAudio.md │ │ │ └── dom.md │ │ ├── bom │ │ │ ├── bom.md │ │ │ ├── history.md │ │ │ ├── bom-in-action.md │ │ │ ├── screen.md │ │ │ ├── location.md │ │ │ └── navigator.md │ │ └── event.md │ ├── userstyles-generator │ │ ├── scheme.md │ │ └── UI design.ddd │ ├── web_basic.md │ ├── css │ │ ├── css_box-shadow.md │ │ ├── css_filter.md │ │ ├── css_outline.md │ │ ├── css_dimension.md │ │ ├── css_margin.md │ │ ├── css_padding.md │ │ ├── css_overflow.md │ │ ├── css_table.md │ │ ├── css_border-image.md │ │ ├── css_column.md │ │ ├── css_font-face.md │ │ ├── css_units.md │ │ ├── css_position.md │ │ ├── css_transition.md │ │ ├── css_content.md │ │ ├── css_color.md │ │ ├── css_font.md │ │ ├── css_animation.md │ │ ├── css_list.md │ │ ├── css_border-radius.md │ │ ├── css_transform.md │ │ ├── css_gradient.md │ │ ├── css_background.md │ │ ├── css_border.md │ │ ├── css.md │ │ └── css_text.md │ └── demo │ │ └── html │ │ └── html-tag-base │ │ └── index.html ├── about-me.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 │ ├── third-party-logging-01.png │ ├── third-party-logging-02.png │ ├── position-and-size-screen.png │ ├── position-and-size-window.png │ └── position-and-size-element.png ├── css-preprocessor.md ├── project-in-my-mind.md ├── web-applications-profermance-and-optimizing.md ├── posts.json ├── position-and-size.md ├── common-sense-in-design.md ├── third-party-logging.md ├── tools-and-softwares-on-my-computer.md └── sublime-text2-install-and-config.md └── README.md /posts/drafts/javascript/js_regexp.md: -------------------------------------------------------------------------------- 1 | 正则表达式 -------------------------------------------------------------------------------- /posts/drafts/w3c/web-design/accessibility.md: -------------------------------------------------------------------------------- 1 | accessibility -------------------------------------------------------------------------------- /posts/about-me.md: -------------------------------------------------------------------------------- 1 | About LearnShare 2 | ================ 3 | 4 | -------------------------------------------------------------------------------- /posts/drafts/w3c/web-of-services/security.md: -------------------------------------------------------------------------------- 1 | SECURITY 2 | 3 | same as xml/security.md -------------------------------------------------------------------------------- /posts/drafts/html/html_tag_br.md: -------------------------------------------------------------------------------- 1 | br 标签 2 | ======= 3 | 4 | `
` 元素用于在页面中插入换行符，常用于连续的文本中。 -------------------------------------------------------------------------------- /posts/drafts/html/html_tag_hr.md: -------------------------------------------------------------------------------- 1 | hr 标签 2 | ======= 3 | 4 | `
` 元素用于分隔页面中不同主题的内容，表现为一条水平线。 -------------------------------------------------------------------------------- /posts/drafts/w3c/web-of-devices/mobile-web.md: -------------------------------------------------------------------------------- 1 | MOBILE WEB 2 | 3 | same as /web-design/mobile-web.md -------------------------------------------------------------------------------- /posts/drafts/browser-apis/dom/element.md: -------------------------------------------------------------------------------- 1 | Element 对象 2 | ========== 3 | 4 | `Element` 对象代表了元素节点，继承自 `Node` 对象。 -------------------------------------------------------------------------------- /posts/drafts/w3c/xml/internationalization.md: -------------------------------------------------------------------------------- 1 | INTERNATIONALIZATION 2 | 3 | same as web-design/internationalization.md -------------------------------------------------------------------------------- /posts/drafts/w3c/web-arch/internationalization.md: -------------------------------------------------------------------------------- 1 | INTERNATIONALIZATION 2 | 3 | same as web-design/internationalization.md -------------------------------------------------------------------------------- /posts/images/common-sense-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/images/common-sense-01.jpg -------------------------------------------------------------------------------- /posts/images/common-sense-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/images/common-sense-02.png -------------------------------------------------------------------------------- /posts/images/common-sense-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/images/common-sense-03.png -------------------------------------------------------------------------------- /posts/images/common-sense-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/images/common-sense-04.jpg -------------------------------------------------------------------------------- /posts/images/common-sense-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/images/common-sense-05.jpg -------------------------------------------------------------------------------- /posts/images/common-sense-06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/images/common-sense-06.jpg -------------------------------------------------------------------------------- /posts/images/common-sense-07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/images/common-sense-07.jpg -------------------------------------------------------------------------------- /posts/images/common-sense-08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/images/common-sense-08.jpg -------------------------------------------------------------------------------- /posts/images/common-sense-09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/images/common-sense-09.jpg -------------------------------------------------------------------------------- /posts/images/common-sense-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/images/common-sense-10.jpg -------------------------------------------------------------------------------- /posts/drafts/w3c/web-of-services/internationalization.md: -------------------------------------------------------------------------------- 1 | INTERNATIONALIZATION 2 | 3 | same as web-design/internationalization.md -------------------------------------------------------------------------------- /posts/images/third-party-logging-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/images/third-party-logging-01.png -------------------------------------------------------------------------------- /posts/images/third-party-logging-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/images/third-party-logging-02.png -------------------------------------------------------------------------------- /posts/images/position-and-size-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/images/position-and-size-screen.png -------------------------------------------------------------------------------- /posts/images/position-and-size-window.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/images/position-and-size-window.png -------------------------------------------------------------------------------- /posts/drafts/html/images/html-index.html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/drafts/html/images/html-index.html.png -------------------------------------------------------------------------------- /posts/drafts/html/images/html-tag-ruby.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/drafts/html/images/html-tag-ruby.png -------------------------------------------------------------------------------- /posts/drafts/userstyles-generator/scheme.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/drafts/userstyles-generator/scheme.md -------------------------------------------------------------------------------- /posts/images/position-and-size-element.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/images/position-and-size-element.png -------------------------------------------------------------------------------- /posts/drafts/html/images/html-tag-meta-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/drafts/html/images/html-tag-meta-01.png -------------------------------------------------------------------------------- /posts/drafts/html/images/html-tag-title-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/drafts/html/images/html-tag-title-01.png -------------------------------------------------------------------------------- /posts/drafts/html/images/html-tag-title-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/drafts/html/images/html-tag-title-02.png -------------------------------------------------------------------------------- /posts/drafts/html/images/html-tag-link-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/drafts/html/images/html-tag-link-icon.png -------------------------------------------------------------------------------- /posts/drafts/userstyles-generator/UI design.ddd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/drafts/userstyles-generator/UI design.ddd -------------------------------------------------------------------------------- /posts/drafts/html/html_tag_body.md: -------------------------------------------------------------------------------- 1 | body 标签 2 | ========= 3 | 4 | `` 元素定义了网页的内容，也就是我们可以从浏览器中看到的内容。 5 | 6 | 几乎所有的标签都可以而且必须嵌套在 `` 标签中。 7 | 8 | -------------------------------------------------------------------------------- /posts/drafts/javascript/js_class.md: -------------------------------------------------------------------------------- 1 | 类 2 | == 3 | 4 | 原型 5 | ---- 6 | 7 | 构造函数 8 | ------- 9 | 10 | 继承 11 | ---- 12 | 13 | 模块 14 | ---- -------------------------------------------------------------------------------- /posts/drafts/html/images/html-semantic-blog-template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/blog-old/HEAD/posts/drafts/html/images/html-semantic-blog-template.png -------------------------------------------------------------------------------- /posts/drafts/web_basic.md: -------------------------------------------------------------------------------- 1 | Web 基础概念 2 | =========== 3 | 4 | URL 5 | --- 6 | 7 | HTTP 8 | ---- 9 | 10 | Coookie 11 | ------- 12 | 13 | Session 14 | ------- 15 | 16 | Robot.txt 17 | --------- -------------------------------------------------------------------------------- /posts/drafts/javascript/js_object-boolean.md: -------------------------------------------------------------------------------- 1 | Boolean 对象 2 | ========== 3 | 4 | 方法 5 | ---- 6 | 7 | ###1.toString() 8 | 9 | 获取对象的字符串表示。 10 | 11 | 语法： 12 | >bool.toString(); 13 | 14 | 返回值： 15 | >bool "true" 或 "false" -------------------------------------------------------------------------------- /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/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/project-in-my-mind.md: -------------------------------------------------------------------------------- 1 | 项目构思 2 | ======= 3 | 4 | 1. 基于 Markdown 的博客 5 | 2. 收藏夹 6 | 3. UI 组件库（类似 Bootstrap） 7 | 4. JS 工具库（类似 jQuery） 8 | 5. 招聘求职网站 9 | 6. 基于网格的布局系统 10 | 7. 交互式自定义样式导出工具 11 | 8. 基于 tag 的收藏夹管理 12 | 8. 基于 tag 的音视频管理 13 | 9. Markman-canvas 基于 HTML5 canvas 的 markman -------------------------------------------------------------------------------- /posts/drafts/html/html_tag_html.md: -------------------------------------------------------------------------------- 1 | html 标签 2 | ======== 3 | 4 | `` 元素是HTML文档最外层的元素，又叫根元素。用来高速浏览器，该文档为HTML文档。 5 | 6 | 在XHTML中，该标签不可省略，不过在HTML5中，可以省略该标签。 7 | 8 | 属性 9 | ---- 10 | 11 | ###1.manifest [html5] 12 | 13 | 用于指定文件缓存描述文件（manifest file）的路径。 14 | 该属性可选。 15 | 16 | 属性值： 17 | >1.url 指向缓存描述文件 18 | 19 | 参考： -------------------------------------------------------------------------------- /posts/web-applications-profermance-and-optimizing.md: -------------------------------------------------------------------------------- 1 | Web 应用的性能与优化 2 | ================ 3 | 4 | 一、性能问题 5 | ---------- 6 | 7 | 1. 页面载入速度 8 | 2. 操作响应速度 9 | 3. 帧率（fps） 10 | 11 | 二、影响性能的原因 12 | --------------- 13 | 14 | 1. 网络速度 15 | 2. HTTP 延迟 16 | 3. HTTP 并发数 17 | 4. 文件大小 18 | 5. JS 效率 19 | 20 | 三、优化与解决方案 21 | --------------- 22 | 23 | 1. 服务器端优化 24 | 2. 前端优化 -------------------------------------------------------------------------------- /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/posts.json: -------------------------------------------------------------------------------- 1 | { 2 | "post-list":[ 3 | { 4 | "title": "About LearnShare", 5 | "aother": "LearnShare", 6 | "post-time": "2013-04-09 20:00", 7 | "update-time": "2013-04-10 11:34", 8 | "post-file": "about-me.md" 9 | }, 10 | { 11 | "title": "第三方登录", 12 | "aother": "LearnShare", 13 | "post-time": "2013-04-10 12:13", 14 | "update-time": "2013-04-10 15:40", 15 | "post-file": "third-party-logging.md" 16 | } 17 | ] 18 | } -------------------------------------------------------------------------------- /posts/drafts/html/html_tag_title.md: -------------------------------------------------------------------------------- 1 | title 标签 2 | ========== 3 | 4 | `` 标签用来定义HTML文档的标题，该信息会显示在浏览器的标题栏（或浏览器标签），收藏夹的项目名称以及搜索引擎的搜索项中。 5 | 6 | >`简单的HTML文档` 的 `title` 属性在浏览器标签和收藏夹中的效果： 7 | ![html-title](/images/html-tag-title-01.png "HTML Title") 8 | 9 | >`GitHub.com` 的 `title` 属性在 `Google` 搜索结果中的效果： 10 | ![search-title](/images/html-tag-title-02.png "Search Title") 11 | 12 | __提示：__ 13 | 14 | HTML文档中 __必须__ 要有 `<title>` 元素，它位于 `<head>` 元素内，而且 __只能有一个__。 -------------------------------------------------------------------------------- /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/javascript/js_objects.md: -------------------------------------------------------------------------------- 1 | 内置对象 2 | ====== 3 | 4 | Array 5 | ----- 6 | 7 | 参考：js_object-array 8 | 9 | Number 10 | ------ 11 | 12 | 参考：js_object-number 13 | 14 | String 15 | ------ 16 | 17 | 参考：js_object-string 18 | 19 | Boolean 20 | ------- 21 | 22 | 参考：js_object-boolean 23 | 24 | Date 25 | ---- 26 | 27 | 参考：js_object-date 28 | 29 | Math 30 | ---- 31 | 32 | 参考：js_object-math 33 | 34 | RegExp 35 | ------ 36 | 37 | 参考：js_object-regexp -------------------------------------------------------------------------------- /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_outline.md: -------------------------------------------------------------------------------- 1 | 轮廓(outline) 2 | ============ 3 | 4 | 类似于 border，outline 在元素周围呈现为轮廓线，位于 border 的外侧。与 border 不同的是，outline 不占据任何空间。 5 | 6 | outline-width 7 | ------------- 8 | 9 | 设置轮廓的宽度。 10 | 11 | outline-style 12 | ------------- 13 | 14 | 设置轮廓的样式。 15 | 16 | outline-color 17 | ------------- 18 | 19 | 设置轮廓的颜色。 20 | 21 | outline 22 | ------- 23 | 24 | 在同一个声明中设置轮廓属性。 25 | 26 | outline-offset 27 | -------------- 28 | 29 | 设置 outline 与 border 的距离。 30 | 31 | 属性值： 32 | 33 | 1. 尺寸值 -------------------------------------------------------------------------------- /posts/drafts/w3c/web-arch/protocols.md: -------------------------------------------------------------------------------- 1 | PROTOCOLS 2 | 3 | This intro text is boilerplate for the beta release of w3.org. Our intent is to invite the community to develop this template and help provide useful content and links. For a more complete example, see the page for HTML & CSS. 4 | 5 | current status： 6 | + HTTP 7 | + SOAP 8 | 9 | What is Topic? 10 | 11 | ...Explanation... 12 | 13 | What is Topic Used For? 14 | 15 | ...Explanation... 16 | 17 | Examples 18 | 19 | ...Explanation... 20 | 21 | Learn More 22 | 23 | ...Explanation... -------------------------------------------------------------------------------- /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/w3c/web-arch/identifiers.md: -------------------------------------------------------------------------------- 1 | IDENTIFIERS 2 | 3 | This intro text is boilerplate for the beta release of w3.org. Our intent is to invite the community to develop this template and help provide useful content and links. For a more complete example, see the page for HTML & CSS. 4 | 5 | current status： 6 | + URI 7 | + Web Services Addressing 8 | 9 | What is Topic? 10 | 11 | ...Explanation... 12 | 13 | What is Topic Used For? 14 | 15 | ...Explanation... 16 | 17 | Examples 18 | 19 | ...Explanation... 20 | 21 | Learn More 22 | 23 | ...Explanation... -------------------------------------------------------------------------------- /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/w3c/web-arch/architecture-principles.md: -------------------------------------------------------------------------------- 1 | ARCHITECTURE PRINCIPLES 2 | 3 | This intro text is boilerplate for the beta release of w3.org. Our intent is to invite the community to develop this template and help provide useful content and links. For a more complete example, see the page for HTML & CSS. 4 | 5 | current status： 6 | + Web Architecture 7 | + Web Services Architecture 8 | 9 | What is Topic? 10 | 11 | ...Explanation... 12 | 13 | What is Topic Used For? 14 | 15 | ...Explanation... 16 | 17 | Examples 18 | 19 | ...Explanation... 20 | 21 | Learn More 22 | 23 | ...Explanation... -------------------------------------------------------------------------------- /posts/drafts/w3c/web-of-services/protocols.md: -------------------------------------------------------------------------------- 1 | PROTOCOLS 2 | 3 | This intro text is boilerplate for the beta release of w3.org. Our intent is to invite the community to develop this template and help provide useful content and links. For a more complete example, see the page for HTML & CSS. 4 | 5 | current status： 6 | + HTTP 7 | + SOAP 8 | + Web Services Addressing 9 | + Web Services Architecture 10 | 11 | What is Topic? 12 | 13 | ...Explanation... 14 | 15 | What is Topic Used For? 16 | 17 | ...Explanation... 18 | 19 | Examples 20 | 21 | ...Explanation... 22 | 23 | Learn More 24 | 25 | ...Explanation... -------------------------------------------------------------------------------- /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_margin.md: -------------------------------------------------------------------------------- 1 | 外边距(margin) 2 | ============= 3 | 4 | margin-top 5 | ---------- 6 | 7 | 设置顶部外边距。 8 | 9 | 属性值： 10 | 11 | 1. auto 自动 12 | 2. 尺寸值 13 | 3. 百分值 14 | 15 | margin-right 16 | ------------ 17 | 18 | 设置右侧外边距。 19 | 20 | margin-bottom 21 | ------------- 22 | 23 | 设置底部外边距。 24 | 25 | margin-left 26 | ----------- 27 | 28 | 设置左侧外边距。 29 | 30 | margin 31 | ------ 32 | 33 | 在同一个声明中设置内边距属性。 34 | 35 | 可包括的属性： 36 | 37 | + margin-top 38 | + margin-right 39 | + margin-bottom 40 | + margin-left 41 | 42 | 有四种设置方式： 43 | 44 | 1. a b c d 分别设置顶部、右侧、底部和左侧的外边距 45 | 2. a b c 分别设置顶部、左右和底部的外边距 46 | 3. a b 分别设置顶部和底部、左右的外边距 47 | 4. a 一次设置四个外边距 -------------------------------------------------------------------------------- /posts/drafts/html/html_tag_head.md: -------------------------------------------------------------------------------- 1 | head 标签 2 | ========= 3 | 4 | `<head>` 元素代表了HTML文档的“头部”，这里描述了浏览器需要的一些信息，也可以定义一些需要从外部引入的文件（如 .css .js 文件）。 5 | 6 | `<head>` 元素内的其他标签 7 | ----------------------- 8 | 9 | `<head>` 标签内用于 _描述网页信息_ 的标签有： 10 | 11 | + `<title>` 记录了网页的标题 12 | + `<base>` 指定了网页中URL的目标 13 | + `<meta>` 记录了网页的“元信息”（meta-information） 14 | + `<style>` 用于定义CSS样式代码 15 | + `<script>` 用于定义脚本代码，通常是 `JavaScript` 16 | 17 | 参考： 18 | 19 | `<head>` 标签内用于 _定义外部文件_ 的标签有： 20 | 21 | + `<link>` 用于定义与当前HTML文档关联的外部文件，通常是样式文件（`CSS`） 22 | + `<script>` 用于定义外部的脚本文件，通常是 `JavaScript` 23 | 24 | 参考： 25 | 26 | __提示:__ 27 | 28 | 这些标签 _可用于_ `<head>` 元素中，但不是都必须存在，只有 `<title>` 标签是 __必须存在__ 的。 -------------------------------------------------------------------------------- /posts/drafts/w3c/web-arch/protocol-and-meta-format-considerations.md: -------------------------------------------------------------------------------- 1 | PROTOCOL AND META FORMAT CONSIDERATIONS 2 | 3 | This intro text is boilerplate for the beta release of w3.org. Our intent is to invite the community to develop this template and help provide useful content and links. For a more complete example, see the page for HTML & CSS. 4 | 5 | current status： 6 | + Accessible Rich Internet Application (WAI-ARIA) 7 | + Internationalization of XML 8 | + Quality Assurance (QA) Framework 9 | 10 | What is Topic? 11 | 12 | ...Explanation... 13 | 14 | What is Topic Used For? 15 | 16 | ...Explanation... 17 | 18 | Examples 19 | 20 | ...Explanation... 21 | 22 | Learn More 23 | 24 | ...Explanation... -------------------------------------------------------------------------------- /posts/drafts/css/css_padding.md: -------------------------------------------------------------------------------- 1 | 内边距(padding) 2 | ============== 3 | 4 | padding-top 5 | ----------- 6 | 7 | 设置顶部内边距。 8 | 9 | 属性值： 10 | 11 | 1. auto 自动 12 | 2. 尺寸值 13 | 3. 百分值 14 | 15 | padding-right 16 | ------------- 17 | 18 | 设置右侧内边距。 19 | 20 | padding-bottom 21 | -------------- 22 | 23 | 设置底部内边距。 24 | 25 | padding-left 26 | ------------ 27 | 28 | 设置左侧外边距。 29 | 30 | padding 31 | ------- 32 | 33 | 在同一个声明中设置内边距属性。 34 | 35 | 可包括的属性： 36 | 37 | + padding-top 38 | + padding-right 39 | + padding-bottom 40 | + padding-left 41 | 42 | 有四种设置方式： 43 | 44 | 1. a b c d 分别设置顶部、右侧、底部和左侧的内边距 45 | 2. a b c 分别设置顶部、左右和底部的内边距 46 | 3. a b 分别设置顶部和底部、左右的内边距 47 | 4. a 一次设置四个内边距 -------------------------------------------------------------------------------- /posts/drafts/html/html_tag_style.md: -------------------------------------------------------------------------------- 1 | style 标签 2 | ========== 3 | 4 | `<style>` 元素用于在HTML文档中定义CSS代码。 5 | 6 | 示例： 7 | 8 | <style> 9 | body{ 10 | background-color:#CCC; 11 | } 12 | </style> 13 | 14 | 也可以使用 `<link>` 元素引用外部的CSS文件，或者使用 `style` 属性定义内联的样式。 15 | 16 | 参考：CSS: media 17 | 18 | 属性 19 | ---- 20 | 21 | ###1.type 22 | 23 | 用于定义内容类型。 24 | 由于样式通常为CSS代码，所以该属性可选。 25 | 26 | 属性值： 27 | >1. text/css 内容为CSS代码 28 | 29 | ###2.media 30 | 31 | 用于定义应用样式的目标设备。 32 | 33 | 属性值： 34 | >1. all [默认值] 所有设备 35 | >2. screen 显示器 36 | >3. handheld 移动设备 37 | >4. print 打印机 38 | 39 | ###3.scoped [HTML5] 40 | 41 | 应用范围限定（样式仅应用于 `<style>` 元素的父元素及其所有子元素）。 42 | 43 | 属性值： 44 | >1. scoped -------------------------------------------------------------------------------- /posts/drafts/demo/html/html-tag-base/index.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html> 3 | <head> 4 | <base href="http://www.google.com/" /> 5 | <title>使用base指定相对URL的基地址 6 | 7 | 8 |

使用绝对URL：

9 |

10 | 11 |

12 |

图像地址为：http://www.google.com/images/srpr/logo4w.png

13 |

使用相对URL：

14 |

15 | 16 |

17 |

指定了base：http://www.google.com/

18 |

图像地址为：/images/srpr/logo4w.png

19 | 20 | -------------------------------------------------------------------------------- /posts/drafts/css/css_overflow.md: -------------------------------------------------------------------------------- 1 | 溢出（overflow） 2 | ============== 3 | 4 | overflow 5 | -------- 6 | 7 | 设置内容溢出时，元素的行为。 8 | 9 | 属性值： 10 | 11 | 1. visible 溢出部分可见（默认） 12 | 2. hidden 溢出部分不可见 13 | 3. scroll 元素出现滚动条（不论内容是否溢出） 14 | 4. auto 内容溢出时，才出现滚动条 15 | 16 | overflow-x 17 | ---------- 18 | 19 | 设置内容溢出时，元素在横向的行为。 20 | 21 | 属性值： 22 | 23 | 1. visible 24 | 2. hidden 25 | 3. scroll 26 | 4. auto 27 | 5. no-display 内容溢出时，隐藏整个元素 28 | 6. no-content 内容溢出时，隐藏所有内容 29 | 30 | overflow-x 31 | ---------- 32 | 33 | 设置内容溢出时，元素在纵向的行为。 34 | 35 | overflow-style 36 | -------------- 37 | 38 | 设置内容溢出时，元素的滚动方式。 39 | 40 | 属性值： 41 | 42 | 1. auto 43 | 2. scrollbar 滚动条 44 | 3. panner 45 | 4. move 内容可拖动 46 | 5. marquee 内容自动滚动 -------------------------------------------------------------------------------- /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/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/css/css_table.md: -------------------------------------------------------------------------------- 1 | 表格(table) 2 | ========== 3 | 4 | border-collapse 5 | --------------- 6 | 7 | 设置是否合并边框。 8 | 9 | 属性值： 10 | 11 | 1. separate 分离边框（保留 `border-spading` 和 `empty-cells` 的设置）（默认） 12 | 2. collapse 合并边框（忽略 `border-spading` 和 `empty-cells` 的设置） 13 | 14 | border-spacing 15 | -------------- 16 | 17 | 设置相邻单元格的边框间距。 18 | 19 | 属性值： 20 | 21 | 1. a 水平间距和垂直间距都设置为 a 22 | 2. a b 水平间距设置为 a，垂直间距设置为 b 23 | 24 | caption-side 25 | ------------ 26 | 27 | 设置 `` 元素相对于表格的位置。 28 | 29 | 属性值： 30 | 31 | 1. top 位于表格顶部 32 | 2. bottom 位于表格底部 33 | 34 | empty-cells 35 | ----------- 36 | 37 | 设置是否显示空单元格。 38 | 39 | 属性值： 40 | 41 | 1. show 显示 42 | 2. hide 隐藏 43 | 44 | table-layout 45 | ------------ 46 | 47 | 设置表格布局方式。 48 | 49 | 属性值： 50 | 51 | 1. auto 根据单元格内容设置列宽 52 | 2. fixed 根据表格宽度和列宽属性设置列宽 -------------------------------------------------------------------------------- /posts/drafts/html/html_tag_base.md: -------------------------------------------------------------------------------- 1 | base 标签 2 | ========= 3 | 4 | `` 元素指定了页面中所有相对URL的默认地址，该默认URL会影响页面中所有 `` `` `` `
` 中的相对URL（不影响绝对URL）。如果不通过 `` 指定URL基地址，所有的相对URL都是与当前页面的URL相关的。 5 | 6 | __示例：__ 7 | 8 | 使用 `` 指定相对URL的基地址：[Demo:base](/demo/html/html-tag-base/index.html "demo base") 9 | 10 | __注意：__ 11 | 12 | 1. `` 必须位于 `` 元素内，且每个HTML文档中最多只能有一个。 13 | 2. 建议将 `` 作为 `` 元素的首个子元素。这样，该基地址就可用于 `` 中的其他相对URL。 14 | 15 | 属性 16 | ---- 17 | 18 | ###1.href 19 | 20 | 用于指定页面中相对URL的基地址。 21 | 该属性不可省略。 22 | 23 | 属性值： 24 | >1. url 作为基地址的URL。 25 | 26 | ###2.target 27 | 28 | 用于指定所有受 `base` 影响的超链接的打开方式。 29 | 该属性可选。 30 | 31 | 属性值： 32 | >1. _blank 在新窗口（或标签）中打开 33 | >2. _self [默认值] 在当前窗口（标签或框架区域）中打开 34 | >3. _parent 在当前框架的父框架中打开（针对使用嵌套框架的页面） 35 | >4. _top 替换当前页面（针对使用框架的页面） 36 | 37 | __注：__ 该值会被 `` 标签中指定的 `target` 属性覆盖。 -------------------------------------------------------------------------------- /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/html/html_tag_canvas.md: -------------------------------------------------------------------------------- 1 | canvas 标签 2 | ========== 3 | 4 | `canvas` 元素用于向网页中插入画布组件，画布可用来绘制图形和图像。 5 | 6 | 7 | 8 | 属性 9 | ---- 10 | 11 | ###1.width 12 | 13 | 用于定义画布的宽度（默认为 300）。 14 | 15 | ###2.height 16 | 17 | 用于定义画布的高度（默认为 150）。 18 | 19 | __注意：__ 20 | 21 | 自定义画布尺寸时，请设置其 HTML 元素的 `width` 和 `height` 属性。如果在 CSS 中设置其尺寸，会导致画布 __拉伸变形__。 22 | 23 | canvas API 24 | ---------- 25 | 26 | `canvas` 元素无法通过 HTML 和 CSS 进行内容的添加和绘制，所有对它的操作都是通过其 JavsScript API 实现的。（如果读者学习过 VB、VC 中的图形绘制，就比较容易掌握 `canvas` 元素的 API） 27 | 28 | ###1.getContext(contextID) 29 | 30 | 取得画布的绘图环境。 31 | 32 | var canvas=document.getElementById("canvas"); 33 | var ctx=canvas.getContext("2d"); 34 | 35 | 参数： 36 | 37 | 1.contextID 绘图环境类型 38 | >value: 39 | >>2d CanvasRenderingContext2D（2D绘图环境） 40 | 41 | 目前，画布仅支持2D绘图。 42 | 43 | CanvasRenderingContext2D 44 | ------------------------ 45 | 46 | 有了 2D 绘图环境对象，就可以开始绘图了。 47 | 48 | 参考：context2D -------------------------------------------------------------------------------- /posts/drafts/html/html_tag_audio.md: -------------------------------------------------------------------------------- 1 | audio 标签 2 | ======= 3 | 4 | `