前端基础复习之HTML

1.web基础知识

 1 1、Web基础知识
 2     1、Internet
 3         1、简介
 4             Internet 实际上就是由计算机所组成的网络结构
 5
 6             服务：
 7                 1、Telnet
 8                     远程登录
 9                 2、Email
10                     电子邮件
11                 3、WWW
12                     万维网服务，World Wide Web
13                 4、BBS
14                     电子公告板 (论坛)
15                     百度贴吧，天涯论坛，... ...
16                     CSDN ... ...
17                 5、FTP
18                     文件传输协议
19
20             基本实现技术：
21                 1、分组交换原理
22                     将传递的数据 拆分成若干数据包
23                 2、TCP/IP协议
24     2、Web
25         Web ：运行在Internet上的最流行的应用
26             WWW : World Wide Web
27             W3C : World Wide Web Consortium(万维网联盟)
28
29             将 各类信息 以及 服务 进行无缝连接：
30                 信息：文字，图像，音频，视频，文件
31                 服务：BBS，Telnet，Email
32     3、Web的工作原理
33         WEB是 基于 浏览器 / 服务器 模式的程序(B/S)
34             B : Browser 浏览器
35             S : Server 服务器
36
37         基于 客户端 / 服务器 模式的程序(C/S)
38             C : Client 客户端
39             S : Server 服务器
40             必须通过指定的客户端才能访问服务器数据的一种模式
41         由Web服务器，浏览器 以及 通信协议 来组成
42             服务器：提供服务的机器
43             浏览器：工具
44             通信协议：web中使用的时http通信协议
45                 http: Hyper Text Transfer Protocol
46                         超级  文本 传输     协议
47                 规范了
48                     数据是如何打包的
49                     数据是如何传递的
50         1、Web服务器
51             功能：
52                 1、存储Web上内容信息
53                 2、接收客户端请求，并给出响应
54                 3、具备一定的安全功能
55             产品：
56                 1、Tomcat
57                 2、Apache
58                 3、IIS
59                 ... ...
60         2、WEB浏览器
61             功能:
62                 1、代替用户提交请求(User Agent)
63                 2、作为HTML/CSS/Javascript 的解析器
64                 3、以图像化的方式显示网页文档
65             产品:
66                 1、Microsoft IE
67                 2、Mozilla FireFox
68                 3、Google Chrome
69                 4、Apple Safari
70                 5、Opera
71     4、Web相关技术
72         1、服务器端技术
73             运行于服务器端，具备访问数据库的能力
74
75             1、PHP
76             2、JSP
77             3、ASP
78             4、ASP.NET
79             5、Python
80             6、NodeJS
81         2、浏览器端技术(客户端)
82             运行在客户端，由浏览器负责解释
83             1、HTML
84             2、CSS
85             3、JavaScript(JS)

2.HTML入门

  1 2、HTML入门
  2     1、HTML概述
  3         Web : 一种应用
  4         HTML是开发Web网页程序的一种语言
  5
  6         1、什么是HTML
  7             HTML：Hyper Text Markup Language
  8                       超级  文本 标签   语言
  9                 超级文本：具备超能力的文本
 10                     字符 a ：首字符
 11                     超文本 a ：链接
 12                 标签/标记：超文本的组成形式
 13                 语言：具备不同的语法规范
 14             由HTML编写的文本最终是以 .html 或 .htm作为结尾的文件 , 并且由浏览器解释运行
 15     2、HTML语法规范(重点)
 16         1、标记
 17             在HTML中，用于描述功能的符号称之为 "标记"
 18
 19             语法：
 20                 标记在书写时，必须用 尖括号 括起来(<>)
 21                 标记分成 封闭类型的标记 和 非封闭类型的标记
 22                 1、封闭类型标记
 23                     必须成对出现
 24                     <标记> 内容 </标记>
 25                     注意：
 26                         1、封闭类型标记必须成对出现
 27                         2、标记必须要完整,否则会有意想不到的效果
 28
 29                 2、非封闭类型标记
 30                     又称为 单标记 或 空标记
 31                     <标记> 或 <标记/>
 32                     ex :
 33                         <br> : 换行
 34                         <hr/>: 水平线
 35         2、元素
 36             元素 即 标记
 37             ex:
 38                 <a>百度</a>
 39
 40             1、元素的嵌套
 41                 元素之间可以相互嵌套，形成更为复杂的页面结构
 42                 语法：
 43                     <标记><标记1></标记1></标记>
 44                 注意：
 45                     1、注意嵌套顺序
 46                     2、必须完整嵌套
 47                     3、格式问题
 48                         被嵌套的内容要通过缩进(Tab)表示层级关系
 49                     ex:
 50                         <a><b><span><i><u>Hello World</u></i></span></b></a>
 51                         推荐的格式：
 52                         <a>
 53                             <b>
 54                                 <span>
 55                                     <i>
 56                                         <u>
 57                                             Hello World
 58                                         </u>
 59                                     </i>
 60                                 </span>
 61                             </b>
 62                         </a>
 63             2、属性 和 值
 64                 属性 是用来修饰 元素的
 65                 语法：
 66                     1、属性的声明必须位于开始标记中
 67                     2、属性名称与标记名称之间用空格隔开
 68                         <标记 属性></标记>
 69                         <标记 属性/>
 70                     3、属性值 与 属性之间 用 "=" 来连接
 71                          属性值要用 "" 或 '' 引起来
 72                         <标记 属性="值">
 73                     4、一个元素允许有多属性，多属性之间排名不分先后，中间用 空格 隔开
 74                         <标记 属性1="值" 属性2="值">
 75
 76                         ex:
 77                             <p align="center" id="p1"></p>
 78
 79                 通用属性：大部分元素都会具备的属性
 80                     1、id
 81                         定义元素在页面中独一无二的名称
 82                     2、title
 83                         鼠标移入到元素上时所提示的信息
 84                     3、class
 85                         指定元素所引用的类选择器(CSS中使用)
 86                     4、style
 87                         定义元素的内联样式(css中使用)
 88         3、注释
 89             要编写在源文档中，但不想被浏览器解释运行的内容
 90             <!--  注释  -->
 91             注意：
 92                 1、注释不能嵌套
 93                     <!--
 94                         这是一段注释
 95                         <!--
 96                             这是另一段注释
 97                         -->
 98                     -->
 99                     以上结构是错的
100                 2、注释不能出现在标记(<>)里
101                     <a <!-- 这是一个a -->></a>
102                     以上的写法是错误的
103     3、文档结构
104         1、两部分组成
105             1、文档类型声明
106                 指定当前html文档用的时哪个版本
107                 语法：
108                     文档中的第一句话位置处
109                     <!doctype html>
110             2、html页面
111                 网页要表示的信息的开始与结束
112                 语法：
113                     <html></html>
114                     属性：
115                         1、lang
116                             取值：zh-cn
117                 子级内容：
118                     1、网页头部信息
119                         作用：用于定义网页的全局信息
120                         语法：
121                             <head></head>
122                         子级：
123                             1、网页标题
124                                 <title>标题内容</title>
125                             2、网页元数据
126                                 指定网页编码格式
127                                 <meta charset="utf-8">
128                                 注意：
129                                     必须保证网页文档的编码格式也是 utf-8 的
130
131                     2、网页主体信息
132                         包含要显示给用户去看的所有内容
133                         <body></body>
134                         属性：
135                             1、text
136                                 作用：控制当前文档的文本颜色
137                                 取值：颜色的英文表示方式
138                             2、bgcolor
139                                 作用：控制当前文档的背景颜色
140                                 取值：同上

3.文本

 1 3、文本
 2     1、作用
 3         以不同的形式展现文字
 4     2、特殊字符
 5         默认下，任意多个 回车 和 空格 最后都会被折叠成一个空格
 6         通过转义字符表示特殊字符：
 7         1、 
 8             一个空格
 9         2、>
10             >
11         3、<
12             <
13         4、&copy;
14
15         5、&yen;
16             ￥
17     3、文本标记
18         1、文本样式
19             <i>内容</i> 斜体显示文本
20             <u>内容</u> 下划线的文本
21             <s>内容</s> 删除线的文本
22             <b>内容</b> 加粗显示文本
23             <sub></sub> 下标
24             <sup></sup> 上标
25
26             特点：
27                 所有的内容会在一行内显示
28         2、标题元素
29             作用：以标题的方式显示文本(突出显示)
30             语法：
31                 <hn></hn>
32                     n : 1~6
33                     <h1></h1>
34                     ...
35                     <h6></h6>
36             属性：
37                 1、align ：文本的水平排列方式
38                     取值：left / center / right
39             特点：
40                 1、独自成行
41                 2、加粗显示文本
42                 3、上下会有垂直的空白
43         3、段落元素
44             语法：
45                 <p></p>
46             属性：
47                 align
48             特点：
49                 1、垂直空白
50                 2、独占一行
51         4、换行元素
52             语法：<br> 或 <br/>
53         5、分割线元素
54             语法：<hr> 或 <hr/>
55             属性：
56                 1、size
57                     尺寸，以px或%为单位(省略单位的话是px)
58                 2、width
59                     宽度，以px或%为单位
60                 3、align
61                     水平对齐方式
62                 4、color
63                     颜色
64         6、行分区元素
65             语法：<span></span>
66             作用：包裹文本并且设置不同的样式
67         7、块分区元素
68             语法：<div></div>
69             作用：布局
70         8、预格式化
71             作用：保留标记内的格式(回车 和 空格)
72             语法：<pre></pre>
73         9、块级元素和行内元素
74             1、块级元素
75                 每一个块级元素独占一行
76                 块级元素的主要作用：布局
77             2、行内元素
78                 多个元素会在一行内显示，显示不下自动换行
79                 span,i,b,s,u,sub,sup
80                 作用：设置文本样式
81 <a>
82 <b>
83 <span>
84 <i>
85 <u>
86 <b>
87 Hello World
88 </b>
89 </u>
90 </i>
91 </span>
92 </b>
93 </a>

4.结构标记

 1 1、结构标记
 2     1、网页结构(布局)
 3         块级元素做布局 -> div
 4     2、什么是结构标记
 5         为了取代 做布局的 div，从而体现出布局标记的语义性
 6     3、常用结构标记
 7         1、header 元素
 8             作用：用来表示页面 或 某部分内容的 顶部信息
 9             语法：<header></header>
10         2、nav 元素
11             作用：用来表示页面的主导航信息
12             语法：<nav></nav>
13         3、section 元素
14             作用：表示页面中的 小节，也可以用来表示页面的主体内容
15             语法：<section></section>
16         4、article 元素
17             作用：表示页面中的 文章信息 ，或是文字居多的部分，比如：博客信息，微博中的条目，论坛中的主贴 和 回帖
18             语法：<article></article>
19         5、footer 元素
20             作用：表示页面中 底部的信息，一般用户关注度较低
21             语法：<footer></footer>
22         6、aside 元素
23             作用：表示页面中的边栏信息
24             语法：<aside></aside>

5.表单

  1 2、表单(重难点)
  2     1、表单概述
  3         表单用于显示、收集用户信息，并提交给服务器
  4
  5         完整的表单由两部分组成：
  6             1、实现表单以及可交互的界面元素(前端)
  7                 1、表单元素
  8                     用于定义表单的提交信息如：提交地址，提交方式... ...
  9                 2、表单控件
 10                     能够与用户交互的界面元素 如：文本框，密码框... ...
 11             2、表单提交后的处理(服务器端)
 12     2、表单元素
 13         1 、语法
 14             <form></form>
 15
 16             注意：
 17                 1、只有出现在 form 中的 表单控件的数据才会被提交
 18                 2、form 在页面中 没有显示效果，只有功能
 19         2、属性
 20             1、action
 21                 作用：指定提交给服务器处理程序的地址，该地址要与服务器端人员商量
 22                 注意：如果省略不写，默认提交给本页
 23             2、method
 24                 作用：指定提交数据的方法(模式)
 25                 取值：
 26                     1、get (默认值)
 27                         获取
 28                         特点：
 29                             1、以明文的方式提交数据到服务器(数据会显示在地址栏上),安全性较低
 30                             2、最大提交2kb数据
 31                             3、向服务要数据时用get方式
 32                     2、post
 33                         邮寄... ...
 34                         特点：
 35                             1、以隐式的方式提交数据到服务器(不会显示),安全性较高
 36                                 身份证号，密码，安全性要求高的数据，必须用post
 37                             2、无提交数据大小限制
 38                             3、让服务器处理数据时使用post
 39                     3、put
 40                     4、delete
 41                     ... ...
 42             3、enctype
 43                 作用：指定表单数据的编码方式(什么样的数据允许被提交)
 44                 取值：
 45                     1、application/x-www-form-urlencoded
 46                         默认值
 47                         可以将所有的数据提交给服务器(文件除外)
 48                     2、multipart/form-data
 49                         允许将文件(图像，音频，视频，文档等)提交给服务器
 50                     3、text/plain
 51                         允许将普通字符提交给服务器，特殊字符无法提交(=,&,?)
 52             4、name
 53                 定义表单的名称
 54             5、ID
 55                 定义表达独一无二的标识
 56     3、表单控件
 57         都是与用户进行交互的元素
 58         表单控件：
 59             1、input 元素
 60                 作用：收集用户的信息
 61                 标记：<input> 或 <input/>
 62                 属性：
 63                     1、type
 64                         根据不同的type值，创建不同的输入控件
 65                     2、name
 66                         定义控件的名称，提供给服务器端使用,采用匈牙利命名法 控件缩写+功能
 67                     3、value
 68                         定义控件的值，提供给服务器端使用
 69                     4、disabled
 70                         禁用控件(无法操作，无法提交)
 71                         该属性无值
 72                 input控件详解：
 73                     1、文本框 与 密码框
 74                         文本框：type="text"
 75                         密码框：type="password"
 76
 77                         属性：
 78                             1、maxlength
 79                                 限制输入的字符数
 80                             2、readonly
 81                                 只读(只能看，不能改，但允许被提交)
 82                                 无值属性
 83                             3、name
 84                                 缩写：txt
 85                                  用户名：txtUsername
 86                                  用户密码:txtPassword
 87                             4、placeholder
 88                                 占位符
 89                     2、单选按钮 和 复选框
 90                         单选按钮：type="radio"
 91                         复选框：type="checkbox"
 92
 93                         属性：
 94                             1、name
 95                                 1、定义控件的名称
 96                                 2、为控件分组
 97
 98                                 radio缩写：rdo
 99                                 checkbox缩写：chk
100                             2、value
101                                 值
102                             3、checked
103                                 预选中
104                     3、按钮
105                         1、提交按钮
106                             type="submit"
107                         2、重置按钮
108                             type="reset"
109                         3、普通按钮
110                             type="button"
111                         属性：
112                             1、name
113                                 缩写：btn
114                             2、value
115                                 按钮上的文字
116                         其他按钮：
117                         1、图片按钮(提交功能)
118                             <input type="image">
119                             属性：src
120                         2、按钮(提交按钮)
121                             <button>内容</button>
122                     4、隐藏域 和 文件选择框
123                         隐藏域：type="hidden"
124                         文件选择框：type="file"
125
126                         隐藏域：想提交给服务器，但不想被用户看见的数据放在隐藏域中
127
128                         属性：
129                             1、name
130                             2、value
131                         使用文件选择框时注意以下问题：
132                         1、要求 form 的method 属性必须为 post
133                         2、要求 form 的enctype 属性必须为 multipart/form-data
134
135             2、textarea 元素(多行文本域)
136                 允许录入多行数据
137                 1、语法
138                     标记：<textarea></textarea>
139                     属性：
140                         1、name
141                             缩写：txt
142                         2、cols
143                             指定文本区域的列数
144                         3、rows
145                             指定文本区域的行数
146                         4、readonly
147                             只读
148             3、select 和 option(选择框)
149                 语法：
150                     1、标记
151                         选择框：
152                         <select></select>
153                         选项：
154                         <option></option>
155                     2、属性
156                         1、<select>属性
157                             1、name
158                                 缩写：sel
159                             2、size
160                                 默认显示选项的数量，如果大于1的话，则为滚动列表
161                             3、multiple
162                                 设置多选，也会变成滚动列表
163                                 配合 Ctrl 或 Shift 实现多选
164                         2、<option>属性
165                             1、value
166                                 值
167                             2、selected
168                                 默认预选中,无值
169             4、其他
170                 1、label 元素
171                     作用：关联文本 与 控件
172                     语法：
173                         1、标记
174                             <label></label>
175                         2、属性
176                             for ：表示与该元素关联的控件的ID值
177                 2、为控件分组
178                     <fieldset></fieldset> : 分组
179                     <legend></legend> : 分组标题
180                 3、浮动框架
181                     1、什么是浮动框架
182                         可以在一个浏览器窗口中同时显示多个页面文档的内容
183                         （在一个页面中引入另外一个页面）
184                     2、语法
185                         1、标记
186                             <iframe>文字</iframe>
187                         2、属性
188                             1、src
189                                 浮动框架中要引入的页面URL
190                             2、width
191                                 宽度
192                             3、height
193                                 高度
194                             4、frameborder
195                                 浮动框架边框，如果不想要边框的话，可以设置为0

6.新表单元素：

 1 3、新表单元素(HTML5新标记) ：缩写统一 txt
 2     属性：
 3         required : 非空限制
 4
 5     1、电子邮件类型
 6         <input type="email">
 7     2、搜索类型
 8         <input type="search">
 9     3、URL类型
10         数据必须符合 URL 规范
11         <input type="url">
12     4、电话号码类型
13         <input type="tel">
14         移动终端：弹出 数字键盘
15     5、数字类型
16         <input type="number">
17         属性：
18             1、min
19                 控件接受的最小值
20             2、max
21                 控件接受的最大值
22             3、step
23                 控制控件递增的步长，默认为1
24     6、范围类型
25         作用：允许选择指定范围内的一个值
26         <input type="range">
27         属性：
28             1、min ：指定范围的最小值(下限值)
29             2、max ：指定范围的最大值(上限值)
30             3、step：值变化的步长
31             4、value：设置初始值
32     7、颜色类型
33         作用：颜色拾取控件
34         <input type="color">
35     8、日期类型
36         作用：允许用户选择日期
37         <input type="date">
38     9、周类型
39         作用：与date类似，但只能选择周
40         <input type="week">
41     10、月份类型
42         作用：与date类型，但只能选择一个月份
43         <input type="month">