Skip to content

Instantly share code, notes, and snippets.

@whusnoopy

whusnoopy/WebDevGuide.md

Last active July 6, 2016 09:35
Show Gist options
  • Save whusnoopy/ddc5f9257f2436b45184e25f75c5dea5 to your computer and use it in GitHub Desktop.
Save whusnoopy/ddc5f9257f2436b45184e25f75c5dea5 to your computer and use it in GitHub Desktop.
Download ZIP
Web develop guide book for my friends
Raw
markdownGuide.md

常用的 Markdown

各种教程

一些简单的说明

  • 就跟正常在记事本里写东西一样
  • 多加空格，在有必要做区分的内容前后都加空格（比如链接，比如用户名等）
  • 合理用空行，两段文本直接如果没有一个空行，会被认为是一段，从而没有对应效果
  • 对于需要标记的内容，合理使用标记（我们用 代码反撇 比较多，加粗 斜体 等在中文里并不明显）

哪里有用到？

Github Favored Markdown

主要差异

支持更多语法，比如表格，比如代码高亮

一些例子

表格 内容
表 表 
<div class="mz-alert alert-info">
  <p>一个段落里面带了<code>代码</code></p>
</div>

Slack 里的

主要差异

  • 加粗斜体等也只用一个符号，且中间不能带空格，并且前后各要加一个空格，语法跟标准略有不同，详见输入框下面的提示
    • 加粗星号 * (Shift_8)
    • 斜体下划线 _ (Shift_-， 0 右边)
    • 删除线波浪号 ~ (Shift_`，1 左边)
    • 代码反撇 ` (1 左边，英文输入法状态)
  • 引用区分行引用和块引用
  • 发链接会自动生成一个摘要
  • 可以创建 Post 指定语言来共享代码

一些例子

Trello 里的 Markdown

主要差异

在对空行的要求上比较高，比如三个反撇的代码块前后必须要有空行

一些例子

有道云协作里的 Markdown

主要差异

支持更多的图表格式，没具体用过不清楚

官方介绍

Raw
WebDevGuide.md

Web 前端开发与测试基本技能树

  • HTML
    • 元素意义和语法
    • 元素嵌套规则
    • 布局
  • CSS
    • 盒模型
    • 属性表
    • 伪类
    • LESS 等增强语言
  • JavaScript
    • 基本语法
    • jQuery
    • MVVM / Knockout.js

HTML 语言

Hyber Text Markup Language, 超文本标记语言, 核心是 标记语言

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <h1>一级标题</h1>
  <p>这里是一段文字</p>
</body>
</html>

跟数学上的括号一样, 一定有开始和结束 <xxx> 和 </xxx> (部分元素自闭合, 类似 <xxx /> 这样的语法, HTML5 里允许部分自闭合元素可以直接写成 <xxx>)

嵌套关系不能乱, <xxx>...</xxx> 里面可以有 <yyy>...</yyy>, 但是不能 <xxx><yyy></xxx></yyy> 这样的情况

部分标记有上下级关系, 比如有序列表 <ol> 的下级是 <li>

部分标记是语义相关的, 插入和被插入时有限制, 比如 <p> 标签内部不能插入 <div> 标签

标记可以有多样的属性, 写在 <> 内部的后面, 一般是 xx="yy" 这样的语法, 比如链接标记可以有链接到哪里的属性, <a href="www.meideng.net">

常见属性

  • id, 元素代号, 不能重复
  • class, 元素的样式类, 详见 CSS 部分

扩展资料

CSS 样式表

Cascade Style Sheet 层叠样式表, 核心是 样式表

.orange-btn {
  background-color: orange;
  color: #fff;
  padding: 5px 10px;
}

颜色规则

  • #rgb, 等于 #rrggbb
  • #rrggbb, 红 (r) 绿 (g) 蓝 (b) 三原色值, 范围是从 00ff (十六进制, 对应十进制的 0255)

常用尺寸

  • px 像素, 屏幕上一个小点的大小
  • em 字宽, 定义好字大小后等于一个字的宽度
  • dx dp 等, 移动设备上考虑的大小, 暂不介绍

为一个 HTML 标记加上 class="orange-btn" 的属性即可将此样式应用到该标记部分上

会影响一个 HTML 元素样式的可能情况有

  • 类样式, 通过为 HTML 元素添加 class= 的方式为其指定样式, 加 . 选择符, 如上大块代码
  • 选择器样式, 通过某个 HTML 元素的 id 为其指定样式, 加 # 选择符, 如 #header { background-color: #999 }
  • 元素类型样式, 如 p { font-size: 14px }
  • HTML 元素上的 style 属性, 如 <a style="display: none">

层叠生效, 所以叫 层叠样式表

盒模型

内容 (content), 内补 (padding), 边框 (border), 外距 (margin), 从内到外, 矩形嵌套

尺寸描述顺序, 上, 右, 下, 左 (顺时针), 如果指定个数不够时, 后面没有的参照其对面的值

  • padding: 5px 10px 20px 15px, 上 5px, 右 10px, 下 20px, 左 15px
  • padding: 5px 10px 20px, 上 5px, 右/左 10px, 下 20px
  • padding: 5px 10px, 上/下 5px, 右/左 10px
  • padding: 5px, 上右下左都是 5px

扩展资料

JavaScript 脚本语言

TODO

扩展资料

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment