diff --git a/01-html/01-html标签.md b/01-html/01-html标签.md index c956749..d6577a9 100644 --- a/01-html/01-html标签.md +++ b/01-html/01-html标签.md @@ -9,7 +9,7 @@ - 头标签 -- 排版标签：`

`     `
`     `

`     `
`     `
`     `
`     ``
+- 排版标签：`
`     `
`     ```
`     `
`     `
`     `
`
 - 字体标记：`
`    ``    ``    ``    ``    ``
 - 超链接
 - 图片标签	
@@ -40,7 +40,7 @@ web标准总结：
 
 浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、猎豹浏览器、Safari和Opera等。如下图所示：
 
-![](http://img.smyhvae.com/20170628_1350.png)
+![](http://img.smyhvae.com/20170628_1351.png)
 
 
 
@@ -590,9 +590,70 @@ PS：Chrome浏览器是世界上HTML5支持最好的浏览器。提供了非常
 
 
 
+### 块级标签 `
`和``
+
+> div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。
+
+>CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。
+
+div：把标签中的额内容作为一个块儿来对待(division)。必须单独占据一行。
+
+div标签的属性：
+ - `align="属性值"`：设置块儿的位置。属性值可选择：left right center。
+
+

+
+``和`
`唯一的区别在于：``是不换行的，而`
`是换行的。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的或者说，DIV+CSS来实现各种样式。。
+
+效果举例：
+
+![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_08.png)
+
+div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。
+div标签是一个**容器级**标签，里面什么都能放，甚至可以放div自己。
+
+span也是表达“小区域、小跨度”的标签，但是是一个**文本级**的标签。
+就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
 
 
-### 换行标签`
`
+span里面是放置小元素的，div里面放置大东西的。举例如下：
+
+span举例：
+
+```html
+			

+				简介简介简介简介简介简介简介简介
+				
+					详细信息
+					购买
+				
+			

+
+```
+
+div举例：
+
+```html
+	

+		
+		

+	

+	

+		

+		

+	

+	

+
+```
+
+所以，我们亲切的称呼这种模式叫做“**div+css**”。**div标签负责布局，负责结构，负责分块。css负责样式**。
+
+
+
+
+
+
+### 换行标签`
`（已废弃）
 
 当你打算结束一行，而又不想开始一个新段落时，`
 `标签就派上用场了。无论你将它置于何处，`
 `标签都会产生一个强制的换行。
 ```html
@@ -607,7 +668,7 @@ This 
 is a para
graph with line breaks
 
 

 
-### 水平线标签`
`
+### 水平线标签`
`（已废弃）
 
 水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
 效果如下：
@@ -652,24 +713,7 @@ This 
 is a para
graph with line breaks
 
 好吧，其实这个标签也用的比较少。
 
-

 
-### 块级标签 `
`
-
-把标签中的额内容作为一个块儿来对待(division)。必须单独占据一行。
-
-属性：
- - `align="属性值"`：设置块儿的位置。属性值可选择：left right center。
-
-

-
-### 块级标签 ``
-
-``和`
`唯一的区别在于：``是不换行的，而`
`是换行的。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的或者说，DIV+CSS来实现各种样式。。
-
-效果举例：
-
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_08.png)
 
 ## 3、字体标签
 
@@ -686,7 +730,7 @@ c
 
 
 
-### 字体标签``
+### 字体标签``（已废弃）
 
 属性：
  - `color="红色"`或`color="#ff00cc"`或`color="new rgb(0,0,255)"`：设置字体颜色。
@@ -704,15 +748,18 @@ c
 
 ### 特殊字符
 
- - ` `：空格
- - `<`：小于号
- -  `>`：大于号 
- - `&`：符号`&`
- - `"`：双引号
- - `'`：单引号
- - `©`：版权`©`
- - `™`：商标`™`
- -  `绐`：文字`绐`。其实，`#32464`是汉字`绐`的unicode编码。
+- ` `：空格	（non-breaking spacing，不断打空格）
+- `<`：小于号（less than）
+-  `>`：大于号（greater than）
+- `&`：符号`&`
+- `"`：双引号
+- `'`：单引号
+- `©`：版权`©`
+- `™`：商标`™`
+-  `绐`：文字`绐`。其实，`#32464`是汉字`绐`的unicode编码。
+
+要求背诵的特殊字符有：` `、`<`、`>`、`©`。
+
 
 比如说，你想把`
`作为一个文本在页面上显示，直接写`
`是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到转义字符。应该这么写：
 ```html
@@ -752,17 +799,17 @@ http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_13.png)
 
 

 
-### 粗体标签``或``
+### 粗体标签``或``（已废弃）
 
 效果：
 
 ![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_14.png)
 
-### 下划线标记 ``   中划线标记``
+### 下划线标记 ``   中划线标记``（已废弃）
 
 

 
-### 斜体标记  ``或``
+### 斜体标记  ``或``（已废弃）
 
 效果：
 
@@ -781,6 +828,8 @@ O2    53
 
 ![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_16.png)
 
+
+
 ## 4、超链接
 
 超链接有三种形式：
diff --git a/01-html/02-html标签.md b/01-html/02-html标签.md
new file mode 100644
index 0000000..508be39
--- /dev/null
+++ b/01-html/02-html标签.md
@@ -0,0 +1,992 @@
+
+
+> 本文最初于2015-10-02发表于[博客园](http://www.cnblogs.com/smyhvae/p/4852863.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新。以下是正文。
+
+
+HTML标签超详细的图文演示再来一波~~~
+
+如果还没有看过昨天的福利的，那可要抓紧喽，传送门：[HTML标签----图文详解](http://www.cnblogs.com/smyhvae/p/4850684.html)
+
+## 本文主要内容
+
+ - 列表标签：`
    `、`
      `、`
      `
+ - 表格标签：``
+ - 框架标签及内嵌框架`
+ 	
      
+ 	嘿嘿
+
+ 
+
+```
+
+效果演示：
+![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_GIF.gif)
+
+
+
+## 表单标签
+
+表单标签用``表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。
+
+
+
+
+**属性：**
+ - `name`：表单的名称，用于JS来操作或控制表单时使用；
+ - `id`：表单的名称，用于JS来操作或控制表单时使用；
+ - `action`：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
+ - `method`：表单数据的提交方式，一般取值：get(默认)和post
+
+注意：表单和表格嵌套时，是在标记中套
      标记。
+
+form标签里面的action属性和method属性，在《Ajax》课程上给大家讲解。稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。
+
+
+**get提交和post提交的区别：**
+GET方式：
+将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。
+特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。
+
+POST方式：
+将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
+特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。
+
+**Enctype：**
+表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。
+ - Application/x-www-form-urlencoded：**默认**加密方式，除了上传文件之外的数据都可以
+ - Multipart/form-data：**上传附件时，必须使用这种编码方式**。
+
+
+
+### ``：输入标签（文本框）
+
+用于接收用户输入。
+
+```html
+
+```
+
+
+**属性：**
+
+- **`type="属性值"`**：文本类型。属性值可以是：
+	- `text`（默认）
+	- `password`：密码类型
+	- `radio`：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
+）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
+	- `checkbox`：多选按钮，名字相同的按钮作为一组进行选择。
+	- `checked`：将单选按钮或多选按钮默认处于选中状态。当``标签的`type="radio"`时，可以用这个属性。属性值也是checked，可以省略。
+	- `hidden`：隐藏框，在表单中包含不希望用户看见的信息
+	- `button`：普通按钮，结合js代码进行使用。
+	- `submit`：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
+	- `reset`：重置按钮，清空当前表单的内容，并设置为最初的默认值
+	- `image`：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
+	- `file`：文件选择框。
+提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
+
+ - **`value="内容"`**：文本框里的默认内容（已经被填好了的）
+ - `size="50"`：表示文本框内可以显示**五十个字符**。一个英文或一个中文都算一个字符。
+注意**size属性值的单位不是像素哦**。
+ - `readonly`：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
+用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
+ - `disabled`：文本框只读，不能编辑，光标点不进去。属性值可以不写。
+
+> 备注：HTML5中，input的类型又增加了很多（比如date、color，但是都不兼容，所以我们是在专门的HTML5课程中学）。
+
+
+举例：
+
+```html
+	
+		姓名：逗比
      
+		昵称：
      
+		名字：
      
+		密码：
      
+		性别：男 
+			  女
      
+		爱好：吃饭
+			  睡觉
+			  打豆豆
+	
+```
+效果：
+
+![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_33.png)
+
+四种按钮的举例：
+
+```html
+	
+		
      
+		
      
+		
      
+		
      
+		
      
+		
+	
+```
+
+**前端开发工程师，只需要关心页面的美、样式、板式、交互。至于数据的保存、读取，都是后台工程师做的事情。**
+
+Node.js就是后台语言，到时候我们就知道怎么把表单存储到数据库中了。在Ajax课中会有PHP内容，涉及MySQL，Ajax课你就知道表单怎么真的被提交了。
+
+效果：
+
+![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_35.png)
+
+
+
+
+
+### ``标签里面的每一项用`
+			
+			
+			
+			
+		
+		


      
+
+		
+		


      
+
+		
+		


      
+
+	
+```
+
+效果：
+
+![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_32.png)
+
+### ``标签：多行文本输入框
+
+text就是“文本”，area就是“区域”。
+
+
+**属性：**
+
+ - `value`：提交给服务器的值。
+ - `rows="4"`：指定文本区域的行数。
+ - `cols="20"`：指定文本区域的列数。
+ - `readonly`：只读。
+
+举例：
+
+```html
+	
      
+		
+	
+```
+
+上方代码解释：textarea这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。
+
+
+效果：
+
+![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_34.png)
+
+上图的红框部分表示，我在文本区域进行了换行，所以显示的效果也出现了空白。
+
+
+
+### 表单的语义化
+
+比如，我们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。
+举例：
+
+```html
+	
      
+
+		
      
+		账号信息
+		姓名：逗比
      
+		密码：
      
+		
      
+
+		
      
+		其他信息
+		性别：男 
+			  女
      
+		爱好：吃饭
+			  睡觉
+			  打豆豆
+		
      
+
+	
+```
+
+效果：
+
+![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_36.png)
+
+
+
+
+
+
+### `