From df5c4b290d18d80e283fdc1c2aad2b8191879b8f Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Thu, 3 Oct 2019 17:18:39 +0800 Subject: [PATCH] =?UTF-8?q?update:=20HTML=20=E6=A0=87=E7=AD=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01-html/01-html标签图文详解（一）.md | 15 +- 01-html/02-html标签图文详解（二）.md | 201 +++++++++++++-------------- 03-CSS进阶/01-HTML基础强化.md | 17 ++- 3 files changed, 121 insertions(+), 112 deletions(-) diff --git a/01-html/01-html标签图文详解（一）.md b/01-html/01-html标签图文详解（一）.md index db02349..d86cecb 100644 --- a/01-html/01-html标签图文详解（一）.md +++ b/01-html/01-html标签图文详解（一）.md @@ -8,10 +8,12 @@ ## 本文主要内容 - 头标签 -- 排版标签：`

`     `

`     ``   `
`     `
`     `
`     `
`
-- 字体标记：`
`    ``    ``    ``    ``    ``
-- 超链接
-- 图片标签
+- 排版标签：`
`、 `
`、 ``、`
` 、 `
` 、 `
` 、 `
`
+- 字体标记：`
`、 ``、 ``、 `` 、`` 、``
+- 超链接 ``
+- 图片标签 ``
+
+
 
 ## 前言
 
@@ -1012,7 +1014,7 @@ aaa/../bbb/1.jpg
  - `Hspace`：指图片左右的边距
  - `Vspace`：指图片上下的边距
 
- - `Alt`：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）
+ - `alt`：当图片不可用（无法显示）的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思，代表替换资源。（有的浏览器不支持）
 
 举例：
 ```html
@@ -1022,12 +1024,13 @@ aaa/../bbb/1.jpg
 
 ![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_20.png)
 
-`Alt`属性效果演示：
+`Alt`属性效果演示：（当图片 src 不可用的时候，显示文字。这样做，至少能让用户知道，这个图片大概是什么内容）
 
 ![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_21.png)
 
  - 图片的`align`属性：**图片和周围文字的相对位置**。属性取值可以是：bottom（默认）、center、top、left、right。
 我们来分别看一下这`align`属性的这几个属性值的区别。
+
 1、`align=""`，图片和文字低端对齐。即默认情况下的显示效果：
 
 ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_19.png)
diff --git a/01-html/02-html标签图文详解（二）.md b/01-html/02-html标签图文详解（二）.md
index b642298..0e6fe35 100644
--- a/01-html/02-html标签图文详解（二）.md
+++ b/01-html/02-html标签图文详解（二）.md
@@ -14,7 +14,6 @@
  - 滚动字幕标签：``
 
 
-
 ## 列表标签
 
 列表标签分为三种。
@@ -46,7 +45,6 @@
 - 我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
 
 
-
 **属性：**
 
  - `type="属性值"`。属性值可以选： `disc`(实心原点，默认)，`square`(实心方点)，`circle`(空心圆)。
@@ -58,10 +56,9 @@
 
 ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_03.png)
 
-注意：项目符号可以是图片，但是通过CSS设置
  • 标记的背景图片来实现(CSS中讲)。
+注意：项目符号可以是图片，需要通过CSS设置`
  • `标记的背景图片来实现(CSS中讲)。
 
-当然了，列表之间是可以**嵌套**的。我们来举个例子：
-代码：
+当然了，列表之间是可以**嵌套**的。我们来举个例子。代码：
 
 ```html
   
      
@@ -86,14 +83,13 @@
 
 ![](http://img.smyhvae.com/2015-10-01-cnblogs_html_40.png)
 
+#### ul标签实际应用场景：
 
-#### ul标签实际应用场景
-
-场景1 —— 导航条：
+场景1、导航条：
 
 ![](http://img.smyhvae.com/20170704_1717.png)
 
-场景2 —— li里面放置的内容可能很多：
+场景2、li 里面放置的内容可能很多：
 
 ![](http://img.smyhvae.com/20170704_1719.png)
 
@@ -167,7 +163,6 @@ ol这个东西用的不多，如果想表达顺序，大家一般也用ul。举
 
    
 ```
 
-
 ### 3、定义列表`
    `
 
 > 定义列表的作用非常大。
@@ -211,8 +206,6 @@ ol这个东西用的不多，如果想表达顺序，大家一般也用ul。举
 备注：dd是描述dt的。
 
 
-
-
 定义列表用法非常灵活，可以一个dt配很多dd：
 
 ```html
@@ -285,7 +278,6 @@ ol这个东西用的不多，如果想表达顺序，大家一般也用ul。举
 
 dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）。
 
-
 ## 表格标签
 
 表格标签用``表示。
@@ -295,41 +287,41 @@ dt、dd都是容器级标签，想放什么都可以。所以，现在就应该
 
 例如，一行的单元格：
 ```html
-	
    
-		
-			
-			
-			
-			
-		
-	
    
+
+	
+		
+		
+		
+		
+	
+
    
 ```
 上面的表格中没有加文字，所以在生成的网页中什么都看不到。
 例如，3行4列的单元格：
 ```html
-	
-		
-			
-			
-			
-			
-		
+
    生命壹号23男黄冈
    
+	
+		
+		
+		
+		
+	
 
-		
-			
-			
-			
-			
-		
+	
+		
+		
+		
+		
+	
 
-		
-			
-			
-			
-			
-		
+	
+		
+		
+		
+		
+	
 
-	
    生命壹号23男黄冈
    许嵩29男安徽
    许嵩29男安徽
    邓紫棋23女香港
    邓紫棋23女香港
    
+
 ```
 效果：
 
@@ -361,40 +353,46 @@ dt、dd都是容器级标签，想放什么都可以。所以，现在就应该
 
 ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_11.png)
 
-备注：表格中很细表格边线的制作：
-CSS的写法：
-```html
+备注：表格中很细表格边线的制作，CSS的写法：
+
+```css
 style="border-collapse:collapse;"
 ```
 
+
 ### ``：行
-一个表格就是一行一行组成的嘛。
+
+一个表格就是一行一行组成的。
+
 **属性：**
- - `dir`：公有属性，设置这一行单元格内容的排列方式。可以取值：`ltr`：从左到右（left to right，默认），`rtl`：从右到左（right to left）
+
+ - `dir`：公有属性，设置这一行单元格内容的排列方式。可以取值：
+ 	- `ltr`：从左到右（left to right，默认）
+	- `rtl`：从右到左（right to left）
  - `bgcolor`：设置这一行的单元格的背景色。
 注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
  - `height`：一行的高度
  - `align="center"`：一行的内容水平居中显示，取值：left、center、right
  - `valign="center"`：一行的内容垂直居中，取值：top、middle、bottom
 
-
-
    
 ### ``：单元格
+
 **属性：**
- - `align`：内容的横向对齐方式。属性值可以填：left right center。
-如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
+
+ - `align`：内容的横向对齐方式。属性值可以填：left right center。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
  - `valign`：内容的纵向对齐方式。属性值可以填：top middle bottom
  - `width`：绝对值或者相对值(%)
  - `height`：单元格的高度
  - `bgcolor`：设置这个单元格的背景色。
  - `background`：设置这个单元格的背景图片。
 
-
    
 ### 单元格的合并
-如果要将两个单元格合并，那肯定就要删掉一个单元格。
+
 单元格的属性：
- - `colspan`：横向合并。例如`colspan="2"`表示当前单元格在水平方向上要占据两个单元格的位置。
- - `rowspan`：纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。
+
+- `colspan`：横向合并。例如`colspan="2"`表示当前单元格在水平方向上要占据两个单元格的位置。
+- `rowspan`：纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。
+
 效果举例：（横向合并）
 
 ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_13.png)
@@ -404,7 +402,8 @@ style="border-collapse:collapse;"
 ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_15.png)
 
 ### ``：加粗的单元格。相当于`` + ``
- - 属性同``标签。
+
+- 属性同``标签。
 
 
    
 ### ``：表格的标题。使用时和`tr`标签并列
@@ -414,9 +413,11 @@ style="border-collapse:collapse;"
 ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_16.png)
 
 ### 表格的``标签、``标签、``标签
+
 这三个标签有与没有的区别：
- - 1、如果写了，那么这三个部分的**代码顺序可以任意**，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
- - 2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么**数据可以边获取边显示**。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。
+
+- 1、如果写了，那么这三个部分的**代码顺序可以任意**，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
+- 2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么**数据可以边获取边显示**。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。
 
 举例：
 
@@ -468,16 +469,23 @@ style="border-collapse:collapse;"
 > - 框架的集合用``表示，然后在``集合里放入一个一个的框架``
 
 ### ``：框架的集合
-一个框架的集合可以包含多个框架或框架的集合。
-**属性：**
- - `rows`：水平分割，将框架分为上下部分。写法有两种：
+
+一个框架的集合可以包含多个框架或框架的集合。**属性：**
+
+- `rows`：水平分割，将框架分为上下部分。写法有两种：
+
 1、绝对值写法：`rows="200,*"`  其中`*`代表剩余的。这里其实包含了两个框架：上面的框架占200个像素，下面的框架占剩下的部分。
+
 2、相对值写法：`rows="30%,*"`  其中`*`代表剩余的。这里其实包含了两个框架：上面的框架占30%，下面的框架占70%。
+
 注：如果你想将框架分成很多行，在属性值里用逗号隔开就行了。
 
- - `cols`：垂直分割，将框架分为左右部分。写法有两种：
+- `cols`：垂直分割，将框架分为左右部分。写法有两种：
+
 1、绝对值写法：`cols="200,*"`  其中`*`代表剩余的。这里其实包含了两个框架：左边的框架占200个像素，右边的框架占剩下的部分。
+
 2、相对值写法：`cols="30%,*"`  其中`*`代表剩余的。这里其实包含了两个框架：左边的框架占30%，右边的框架占70%。
+
 注：如果你想将框架分成很多列，在属性值里用逗号隔开就行了。
 
 效果：
@@ -489,22 +497,29 @@ style="border-collapse:collapse;"
 ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_27.png)
 
 ### ``：框架
+
 一个框架显示一个页面。
+
 **属性：**
- - `scrolling="no"`：是否需要滚动条。默认值是true。
- - `noresize`：不可以改变框架大小。默认情况下，单个框架的边界是可以拖动的，这样的话，框架大小就不固定了。如果用了这个属性值，框架大小将固定。
+
+- `scrolling="no"`：是否需要滚动条。默认值是true。
+- `noresize`：不可以改变框架大小。默认情况下，单个框架的边界是可以拖动的，这样的话，框架大小就不固定了。如果用了这个属性值，框架大小将固定。
 
 举例：
+
 ```html
 
 ```
 
- - `bordercolor="#00FF00"`：给框架的边框定义颜色。这个属性在框架集合``中同样适用。
+- `bordercolor="#00FF00"`：给框架的边框定义颜色。这个属性在框架集合``中同样适用。
 颜色这个属性在IE浏览器中生效，但是在google浏览器中无效，不知道为啥。
- - `frameborder="0"`或`frameborder="1"`：隐藏或显示边框（框架线）。
 
- - `name`：给框架起一个名字。
+- `frameborder="0"`或`frameborder="1"`：隐藏或显示边框（框架线）。
+
+- `name`：给框架起一个名字。
+
 利用`name`这个属性，我们可以在框架里进行超链。
+
 举例：
 
 ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_28.png)
@@ -514,12 +529,14 @@ style="border-collapse:collapse;"
 ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_gif3.gif)
 
 
-
 ## 内嵌框架
 
 内嵌框架用`