windyBaby/HtmlBasic

> [rammderek](http://rammderek.com)  
> 2016年8月

---

## 快速入门

### WEB前端的定义

1. WEB 前端的发展
      - [Web 1.0](http://baike.baidu.com/view/14342.htm)（共享）  
      代表公司: 新浪、搜狐、网易、雅虎、网景
      - [Web 2.0](http://baike.baidu.com/view/733.htm)（交互）  
      代表产品: RSS、Wiki、Blog
      - [Web 3.0](http://baike.baidu.com/view/269113.htm)（聚合）  
      行业特征： 聚合性、普适性、语义化

2. 互联网应用
      - Telnet： 远程登陆服务的标准协议和主要方式
      - Email：电子邮件
      - BBS：电子公告牌系统（Bulletin Board System）
      - FTP：文件传输协议（File Transfer Protocol）
      - WWW：万维网（Word Wide Web）

3. 万维网
      - 文字
      - 图像
      - 音频
      - 视频

4. WEB 前端工程师  
定义：需求 + 原型 + 交互 + 后端 + 实现 + 优化
      - 基础前端：HTML（结构）、CSS（样式）、JavaScript（行为）
      - 全栈前端：NodeJS、数据库管理系统（BDMS）、服务端编程语言、框架、模式
      - 移动前端：jQuery Mobile、React Native、ionic、PhoneGap/Cordova
      - 动画前端：Flash、ActionScript、Cocos2d

## HTML工作原理
1. 模式（B/S 架构）
2. 浏览器：Browser
      - 提交请求（GET / POST）
      - 呈现内容（渲染引擎 / 内核）
      - 执行脚本
3. 通信协议：Protocol
      - HTTP：Hyper Text Transfer Protocol
      - HTTPS：Hyper Text Transfer Protocol over Secure Socket Layer
      - FTP：File Transfer Protocol
      - FILE：文件协议
4. 服务器：Server
      - 响应请求
      - 执行程序（运行环境）
      - 存储数据

### 开发工具
### 浏览器
1. 浏览器 的作用
    - HTML 解释器
      - 脚本执行器
      - 调试工具
2. 渲染引擎（内核）
      - Trident（IE + Edge）
      - Gecko（Firefox）
      - WebKit（Safari）
      - Blink（Chrome + Opera）
      - ~~Presto（Opera）~~

### 服务器
1. [Apache Tomcat](http://tomcat.apache.org)
2. Internet Information Service（Windows 系统内置）
3. 内置服务器（WebStorm）
4. 互联网主机服务

### 编辑器
1. [Sublime Text 3](http://www.sublimetext.com/3)
	- 注册码  
	
			—– BEGIN LICENSE —–  
			Michael Barnes  
			Single User License  
			EA7E-821385  
			8A353C41 872A0D5C DF9B2950 AFF6F667  
			C458EA6D 8EA3C286 98D1D650 131A97AB  
			AA919AEC EF20E143 B361B1E7 4C8B7F04  
			B085E65E 2F5F5360 8489D422 FB8FC1AA  
			93F6323C FD7F7544 3F39C318 D95E6480  
			FCCC7561 8A4A1741 68FA4223 ADCEDE07  
			200C25BE DBBC4855 C4CFB774 C5EC138C  
			0FEC1CEF D9DCECEC D3A5DAD1 01316C36  
			—— END LICENSE ——

- 安装包控制器 [参考文档](http://www.cnblogs.com/Rising/p/3741116.html)
  	- 安装 Emmet 插件  
      可以使用`emmet`语法
  	- 安装 `html-css-javascript pretty` 插件

2. [WebStorm 2016](http://www.jetbrains.com/webstorm/)
  - 激活服务器地址：[http://114.215.133.70:41017](http://114.215.133.70:41017)
3. [Visual Studio Code](https://www.visualstudio.com/en-us/products/code-vs.aspx)

### 版本控制
1. GIt [下载地址](https://git-scm.com/downloads)
	- 分布式版本控制管理软件
  	- GitHub [网站](https://github.com/)
  	- GitOsc [网站](http://git.oschina.net)
  	- 桌面工具  
	  	* [GitHub Desktop](https://desktop.github.com/)  
	  	* [Tortoise Git](https://download.tortoisegit.org)
2. Markdown
  	- 轻量级标记语言
  	- Markdown 工具 
    	* [Mou](http://25.io/mou/)
    	* [MacDown](http://macdown.uranusjr.com)
		* [Markdown Pad](http://markdownpad.com)

## 语法基础

### HTTP 协议
1. HTTP 定义
  	- 超文本传输协议：HyperText Transfer Protocol
2. 处理方式
  	- 请求：Request
  	- 响应：Response
3. 状态编码
  	- 200：请求成功
  	- 301：被请求的资源永久移动到新位置
  	- 403：权限不足
  	- 404：资源不存在
  	- 500：服务器内部错误
4. 内容类型（MIME）
  	- text/plain [测试网址](http://rammderek.com/Test/Mime?mime=text/plain)
  	- text/html [测试网址](http://rammderek.com/Test/Mime?mime=text/html)
  	- text/xml [测试网址](http://rammderek.com/Test/Mime?mime=text/xml)
  	- application/json [测试网址](http://rammderek.com/Test/Mime?mime=application/json)

### 标签结构
1. 定义：TyperText Markup Language（HTML）
2. 版本：
	- HTML 4.01  
	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`
	- XHTML 1.0    
	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`
	- HTML 5  
	`<!DOCTYPE html>`
  	- DTD
    	* District：严格模式
        * Transition：过渡模式
        * Framework：框架模式
  	- HTML5
3. 元素：标签 + 属性 + 内容
4. 属性
  	- id
  	- class
  	- style
  	- title
  	- data-*
5. 编码
  	- ASCII
  	- UTF-8
6. 注释	``
  	- 抑制浏览器解释执行
  	- 提高代码阅读性
  	- 适应浏览器兼容性
7. HTML 主体结构
  	- 文档根元素：`<html>`
  		* 属性：lang=“zh-cn”
  	- 文档头部元素：`<head>`
  	- 文档主题元素：`<body>`

### 元素
1. 头部元素
  	- 元数据：`<meta>`
  	- 父链接：`<base>`
  	- 标题：`<title>`
  		* 浏览器工具栏标题
  		* 收藏夹标题
  		* 搜索引擎结果页面标题
  	- 资源链接：`<link>`
  		* favicon
  		* 外部样式文件
  	- 样式：`<style>`
  	- 脚本：`<script>`
  		* 外部脚本文件
  		* 内部脚本
  	- 其他：`<noscript>`
2. 元数据
  	- 编码 
    	* `<meta charset="utf-8">`
  	- 兼容 
    	* `<meta http-equiv="x-ua-compatible" content="ie=edge>"`
  	- 适配 
    	* `<meta name="viewport" content="width=device-width,initial-scale=1">`
  	- 搜索
    	* `<meta name="author" content="jikexueyuan">`
    	* `<meta name="keywords" content="html,css">`
    	* `<meta name="description" content="learning web">`
  	- 刷新
    	* `<meta http-equiv="refresh" content="30">`

3. 文本
  	- 实体字符  
  		* `&lt;` &lt; 
  		* `&gt;` &gt; 
  		* `&amp;` &amp; 
  		* `&quot;` &quot; 
  		* `&yen;` &yen; 
  		* `&copy;` &copy; 
  		* `&reg;` &reg; 
  		* `&trade;` &trade; 
  		* `&times;` &times; 
  		* `&divide` &divide; 
  		* `&nbsp;` 空格
  	- 块级标签：`<div>` 
  	- 行内标签：`<span>`
    - 语义化短标签
      	* 格式：  
      	`<b>`   
      	`<em>`   
      	`<i>`   
      	`<small>`   
      	`<strong>`  
      	`<sub>`   
      	`<sup>`   
      	`<ins>`  
      	`<del>`
      	* 输出：  
      	`<code>`   
      	`<kbd>`   
      	`<samp>`   
      	`<var>`   
      	`<pre>`
      	* 引用：  
      	`<abbr>`  
      	`<address>`   
      	`<bdo>`   
      	`<q>`   
      	`<cite>`   
      	`<dfn>`   
      	`<blockquote>`
    - 标题：`<h1>` - `<h6>`
    	* 搜索引擎根据标题为内容编制索引
    	* 用于呈现文档的结构
    - 水平线：`<hr>`
    - 段落：`<p>` 
    - 换行：`<br>`
4. 显示
  	- 超链接：`<a>` （属性：href、target）
    	* 锚：`<a href="#anchorName">跳转到</a>`
    	* HTTP：`<a href="http://www.jikexueyuan.com>极客学院</a>`
    	* 邮箱：`<a href="mailto:dxy@jikexueyuan.com">邮件</a>`
    	* 资源：JavaScript 脚本
  	- 图像：`<img>`
    	* 属性：src、alt、width、height、align、usemap
    	* 热点
    		+ `<map>`    		
    		+ `<area>` （属性：shape、coords、href、target）
5. 序列
  	- 列表
    	* 有序列表：`<ol>` / `<li>` （属性：type、reversed）
    	* 无序列表：`<ul>` / `<li>`
    	* 自定义列表：`<dl>` / `<dt>` + `<dd>`
  	- 表格：`<table>` （属性：border、cellpadding、cellspacing）
  		* 标题：`<caption>`
    	* 头部：`<thead>` / `<tr>` / `<th>`
    	* 内容：`<tbody>` / `<tr>` / `<td>` （属性: colspan、rowspan)
    	* 尾部：`<tfoot>` / `<tr>` / `<td>`
6. 表单：`<form>`
	- 属性
	    * action
	    * method 
	    	+ get 
	    	+ post
	    * enctype
	    	+ application/x-www.form-urlencoded
	    	+ multipart/form-data
	    	+ text/plain
	    * name
	    * novalidate
	    * autocomplete
	    * target
	- 分组
	    * `<fieldset>` / `<legend>`
	- 显示
	    * `<label>` （属性：for）
	- 输入
	  	* `<input>` 属性
	  		+ name
	  		+ id
	  		+ value
	  		+ autocomplete
	  		+ checked
	  		+ disabled
	  		+ readonly
	  		+ required
	  		+ form
	  			- formaction
	  			- formenctype
	  			- formmethod
	  			- formnovalidate
	  			- formtarget
	  		+ placeholder
	    * `<input>` 类型
	    	+ checkbox
	    	+ color
	    	+ date （datetime、datetime-local、month、time、week）
	    	+ email
	    	+ file
	    	+ hidden
	    	+ number
	    	+ password
	    	+ radio
	    	+ range
	    	+ search
	    	+ tel
	    	+ submit （reset、image）
	    	+ tel
	    	+ text
	    	+ url
	    * `<textarea>`
	- 选择: `<select>` / `<optgroup>` / `<option>`
	- 提交
	    * `<button type="submit">submit</button>`
	    * `<input type="submit" value="submit">`
7. 框架
	- ~~框架集~~ `<frameset>` / `<frame>`
	- 内置框架 `<iframe>` （属性：src、frameborder、width、height） 
8. 媒体
	- 插件 （属性：data）
		* `<object>`
		* `<embed>`
	- 音频
		* `<audio>` / `<source>` （属性：src、type） + `<embed>`  
			+ type="audio/mpeg"
			+ type="audio/ogg"
		* 雅虎媒体播放器
			+ `<script src="http://mediaplayer.yahoo.com/latest"></script>`
	- 视频
		* `<video>` 
			+ `<source>` （属性：src、type） 
			+ `<object>` / `<embed>`
		* 优酷解决方案

windyBaby/HtmlBasic

简介

发行版

贡献者

近期动态

windyBaby/HtmlBasic .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

windyBaby/HtmlBasic