python 50 前端 html5 css3
2024-05-19 19:14:17
1 # 前端
2
3 接下来我们进入前端知识的学习，前端的学习目的就是为我们开发的应用程序提供一个与用户进行交互的界面，前端分为HTML5、CSS3、JavaScript三大部分，我们学习内容共分为HTML5、CSS3、JavaScript、jQuery前端框架及Bootstrap前端框架五个课程内容来介绍。
4
5
6
7 ## 一、HTML5
8
9 ### HTML5是什么
10
11 HTML5就是html语言，数字5是该语言的版本号；html语言开发的文件是以.html为后缀，制作运行在浏览器上展现给用户使用的前端界面，采用的语言是超文本标记语言(HyperText Mark-up Language)。
12
13 注：.html文件可以双击直接在浏览器中打开，被浏览器解析被显示给用户查看
14
15 标记语言不同于我们熟知的编程语言，下面我们就一起来学习一下HTML5这门超文本标记语言。
16
17
18
19 ### HTML5如何学习
20
21 学习方向：掌握转义字符、指令和标签三大组成部分
22
23 学习目的：通过标签知识完成搭建页面整体架构
24
25 ### 1、[转义字符](http://tool.oschina.net/commons?type=2)（了解）
26
27 像后台开发语言的特殊字符\n一样，会被解析为换行，html5中也有很多特殊字符数字的组合，会被解析为特殊的含义
28
29 ```
30 1. 空格：
31 2. 字符"："
32 3. 字符&：&
33 4. 字符<：<
34 5. 字符>：>
35 ```
36
37 ### 2、指令
38
39 被<>包裹，以!开头的特殊符号，称之为指令。
40
41 指令中不区分大小写，前端需要掌握文档指令和注释指令两个即可。
42
43 ```
44 1. 文档指令：<!DOCTYPE html>
45 -- 需要出现在一个html文件的最上方，代表该文件采用html5语法进行编写文件的
46 2. 注释指令：<!-- -->
47 -- <!-- 这里书写的就是html5语法下的注释，不会被浏览器解析展现给用户看 -->
48 ```
49
50 ### 3、标签（重点）
51
52 被<>包裹，以字母开头，可以结合数字、-连接符等合法字符的特殊字符，称之为标签（重点）。
53
54 标签中不区分大小写，帮助我们来更好的显示页面内容，标签有系统标签与自定义标签两种，html5中建议使用系统标签，标签名都采用小写即可。
55
56 ```
57 提倡规范命名的合法自定义标签
58 <num></num>
59 <my-tag><my-tag>
60 <student1></student1>
61 ```
62
63 ```
64 页面结构相关的系统标签
65 1. 页面根标签：<html></html>
66 2. 页面头标签：<head></head>
67 3. 页面体标签：<body></body>
68 4. 页面标题标签：<title></tile>
69 5. 元标签：<meta />
70 6. 链接标签：<link />
71 7. 样式标签：<style></style>
72 8. 脚本标签：<script></script>
73
74 简单的系统标签
75 1. 标题标签：<h1></h1> ... <h6></h6>
76 2. 段落标签：<p></p>
77 3. 换行标签：<br />
78 4. 分割线标签：<hr />
79 5. 行文本标签：<span></span>
80 6. 斜体标签：<i></i>
81 7. 加粗标签：<b></b>
82 8. 图片标签：<img />
83 9. 超链接标签：<a></a>
84 7. "架构"标签：<div></div>
85
86 复杂的系统标签
87 1. 无需列表标签：<ul><li></li></ul>
88 2. 表格标签：<table><!-- 包含大量的表格子标签 --></table>
89 3. 表单标签：<form><!-- 包含大量的表单子标签 --></form>
90 ```
91
92
93
94 ##### 案例一：页面结构相关的系统标签的使用
95
96 - 无注释版
97
98 ```html
99 <!doctype html>
100 <html>
101 <head>
102 <meta charset='utf-8' />
103 <title>第一个html页面</title>
104 <style></style>
105 <script></script>
106 </head>
107 <body>
108
109 </body>
110 </html>
111 ```
112
113 - 有注释版
114
115 ```html
116 <!--文档指令，建议出现在html文件的最上方，一个html文件只出现一次，html表示该文件采用html5语法进行编写-->
117 <!doctype html>
118 <!-- 页面根标签的开始标识，一个html文件只出现一次 -->
119 <html>
120 <!-- 页面头标签的开始标识，一个html文件只出现一次 -->
121 <head>
122 <!-- 规定文件编码的元标签，因为元标签只需要标注具体功能，不需要包裹内容，所以代表标签结束的/写在标签的最后即可(可以省略)， -->
123 <meta charset='utf-8' />
124 <!-- 页面标题标签，用来显示页面标签标题，如登录百度页面，页面标签标题显示: 百度一下，你就知道 -->
125 <title>第一个html页面</title>
126 <!-- 用来存放出现在head中的CSS3样式代码的标签(CSS3部分详细介绍) -->
127 <style></style>
128 <!-- 用来存放出现在head中的JavaScript脚本代码的标签(JavaScript部分详细介绍) -->
129 <script></script>
130 <!-- 页面头标签的结束标识，与页面头标签的开始一同包裹应该出现在页面头标签中的内容 -->
131 </head>
132 <!-- 页面体标签的开始标识，一个html文件只出现一次 -->
133 <body>
134
135 <!-- 页面中所有显示给用户查看的内容：普通文本、图片、音频及视频等 -->
136 <!-- 也会出现不显示给用户查看的内容：简单与复制的系统标签、脚本标签及影藏的内容等 -->
137
138 <!-- 页面体标签的结束标识，与页面体标签的开始一同包裹页面主体部分所有显示给用户查看的内容(还包含其他不显示的内容) -->
139 </body>
140 <!-- 页面根标签的结束标识，页面的所有内容都应该出现在html标签内部（被html标签开始与结束包裹） -->
141 </html>
142 ```
143
144 - 案例一补充（了解）
145
146 ```html
147 <!-- 关键词元元标签，让该页面更容易被百度这样的搜索引擎通过关键词搜索到 -->
148 <meta name="keywords" content="8-12个以英文逗号隔开的单词或词语">
149 <!-- 网页描述元标签，也是辅助于让页面更容易被搜索引擎搜索到 -->
150 <meta name="description" content="80字以内的一段话，介绍该网站">
151 <!-- 屏幕适配元标签，让该页面适配移动端屏幕尺寸 -->
152 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
153
154 <!-- 设置页面标签图片链接标签 -->
155 <link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />
156 ```
157
158
159
160 #### 案例二：简单的系统标签的使用
161
162 - 只用关注显示效果的简单系统标签
163
164 ```html
165 <!-- 简单的系统标签及控制的内容都应该出现在body标签中，以下写的内容都可以直接书写在body标签中，然后可以在浏览器中打开该html文件查看显示效果 -->
166 <h1>
167 在页面上显示的大字加粗的一级标题标签
168 </h1>
169 <h2>
170 在页面上显示的二级标题标签
171 </h2>
172 <!-- 省略h3~h5的案例 -->
173 <h6>
174 六级标题标签
175 </h6>
176
177 <p>
178 一个页面显示的文本段落放在一个p标签中
179 </p>
180
181 直接写在页面中的手动敲的换行不会被浏览器解析为换行，换行符采用br标签
182 <br /><!-- 可以注释掉br标签查看上下两句话前后的显示效果 -->
183 用了br标签，浏览器就会解析出一个换行
184
185 <hr />
186 在这行文本上下各书写一个hr标签，浏览器打开显示时，这行文本上下均有一个分割线
187 <hr />
188
189 <span>在页面中的显示文本除了可以写在标题标签(h1~h6)和段落标签(p)中，其他都建议写在span标签中</span>
190 <span>不同于标题标签和段落标签的是两个span标签之间不会换行显示，而是在一行显示，一行显示不下时会自动换行(可以缩放浏览器宽度查看效果)</span>
191
192 <span><i>斜体显示的文本，建议被span标签嵌套</i><b>加粗显示的文本，建议被span标签嵌套</b></span>
193
194 8. 图片标签：<img />
195 9. 超链接标签：<a></a>
196 7. "架构"标签：<div></div>
197 ```
198
199 - 功能是显示图片的简单系统标签
200
201 ```html
202 <!-- 加载显示网络图片 -->
203 <img src="http://www.baidu.com/favicon.ico" />
204
205 <!-- 图片加载失败是，标签alt全局属性中的文本将显示出来作为图片资源加载失败的文本解释 -->
206 <img src="http://www.baidu.com/favicon.ico_error" alt="百度图标" />
207
208 <!-- 通过相对路径加载本地图片，title中的文本会在鼠标先显示的图片上悬浮时，显示出来作为图片显示的文本解释 -->
209 <img src="img/bd_logo.png" title="百度logo" />
210 ```
211
212 - 功能是完成超链接的简单系统标签
213
214 ```html
215 <!-- 全局属性href中写超链接的目标地址，点击页面中显示的 前往百度，会在当前页面转跳到百度的首页 -->
216 <a href="https://www.baidu.com">前往百度</a>
217
218 <!-- 点击页面中显示的 "前往百度"，标签target全局属性中值为_blank时会新开一个标签页面转跳到百度的首页，默认值是_self，效果同第一种 -->
219 <a href="https://www.baidu.com" target="_blank">前往百度</a>
220
221 <!-- 锚点的使用(了解)，来完成一个浏览网页，返回网页顶部的案例 -->
222 <!-- 种下锚点：该a标签不能在页面中显示文本，用全局属性name来种下一个叫top的锚点 -->
223 <a name="top"></a>
224 <!-- 许许多多页面中其他的显示内容，也可以用一堆br标签来让页面可以滚动起来 -->
225 <!-- 返回锚点：href中用 #锚点名 来表示要前往的锚点，点击 "返回top" 会自动回到页面顶 -->
226 <a href="#top">返回top</a>
227 ```
228
229 - 功能是专门用来搭建页面架构的简单系统标签
230
231 ```
232 1. div标签没有特殊的显示效果，也没有特殊的功能，所以是最常用的标签
233 2. 通过建立标签的嵌套关系专门用来为页面搭建架构，在有层次架构下，我们的页面才会分块分级的更好的展现给用户
234 3. 根据页面的设计稿能很好的构思页面架构，并用div很好的还原页面架构，就是我们学习html语言的重点
235 4. 还原页面架构后，具体用来显示图片、文本还是其他内容，我们就选取具体的标签来显示这些内容
236 ```
237
238 
239
240 ```html
241 <div>
242 <h2>领先的 Web 技术教程 - 全部免费</h2>
243 <p>在 w3school，你可以找到你所需要的所有的网站建设教程。</p>
244 <p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
245 <p>
246 <b>从左侧的菜单选择你需要的教程！</b>
247 </p>
248 </div>
249 <div>
250 <img src="" alt="">
251 <div>
252 <h2>完整的网站技术参考手册</h2>
253 <p>我们的参考手册涵盖了网站技术的方方面面。</p>
254 <p>其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。</p>
255 </div>
256 </div>
257 ```
258
259 上面的案例来源于http://www.w3school.com.cn/（同学们可以再拿该页面的其他结构来锻炼自己的页面层级结构分析能力与用代码来还原层级结构的能力），HTML5学习阶段重点考虑页面的层级架构与标签的选取，不用考虑页面的显示效果，页面的显示效果是CSS3学习阶段考虑的问题，我们学习完HTML5马上就进入CSS3的学习。
260
261
262
263 #### 案例三：复杂的系统标签的使用
264
265 - 无序列表
266
267 ```html
268 <ul>
269 <li>列表项</li>
270 <!-- 多少列表项就可以出现多少个li标签 -->
271 <li>列表项</li>
272 </ul>
273 <!-- 无需列表只需要掌握ul与li的嵌套关系，样式的调整会在CSS3详细介绍 -->
274 ```
275
276 - 表格标签（了解）
277
278 ```html
279 <table border="1" cellspacing="0" cellpadding="10">
280 <caption>表格标题</caption>
281 <thead>
282 <tr>
283 <th>标题</th>
284 <th>标题</th>
285 <th>标题</th>
286 <th>标题</th>
287 </tr>
288 </thead>
289 <tbody>
290 <tr>
291 <td rowspan="2">单元格</td><!-- 合并2行单元格 -->
292 <td colspan="2">单元格</td><!-- 合并2列单元格 -->
293 <!-- <td>单元格</td> --><!-- 该列单元格被合并 -->
294 <td>单元格</td>
295 </tr>
296 <tr>
297 <!-- <td>单元格</td> --><!-- 该行单元格被合并 -->
298 <td>单元格</td>
299 <td>单元格</td>
300 <td>单元格</td>
301 </tr>
302 </tbody>
303 <tfoot>
304 <tr>
305 <td>单元格</td>
306 <td>单元格</td>
307 <td>单元格</td>
308 <td>单元格</td>
309 </tr>
310 </tfoot>
311 </table>
312
313 <!--
314 标签部分：
315 1. table表格标签
316 2. caption表格标题标签
317 3. thead表格头部区域标签，tbody表格主体区域标签，tfoot表格尾部区域标签，均可以省略别写
318 4. tr表格行标签
319 4. th表格标题单元格标签，td表格普通单元格标签
320
321 全局属性部分：
322 1. border表格的边框宽度
323 2. cellspacing单元格直接的间距
324 3. cellpadding单元格内部的间距
325 4. rowspan合并行单元格
326 5. colspan合列行单元格
327 -->
328 ```
329
330 - 表单标签（重点，后期前后台交互时重点讲）
331
332 ```html
333 <form actio="" method="" enctype="">
334 <label></label>
335 <input type="text" name="user">
336 <input type="password" name="pwd">
337 <select name="list">
338 <option value="val1">列表项</option>
339 <option value="val2">列表项</option>
340 </select>
341 <textarea></textarea>
342 <button type="button">按钮</button>
343 <input type="submit" value="提交">
344 </form>
345 <!--
346 标签部分：
347 1. from表单标签
348 2. 普通文本标签
349 3. input输入标签，通过全局属性type的值来确定具体是什么类型的输入标签
350 4. select表单中的列表标签，option列表项标签
351 5. textarea文本域标签
352 6. button按钮标签
353
354 form全局属性
355 1. action：提交表单数据给后台的地址
356 2. method：提交数据的方式(get或post)
357 3. enctype：提交数据的编码格式
358
359 form子标签全局属性
360 1. type：标签的类型
361 2. name：将该标签提交给后台标识数据的key (不设置name的标签的内容无法提交给后台)
362 3. value：该标签提交给后台的数据或是该标签的显示内容
363
364 input标签tpye属性值与分类
365 1. text：普通文本输入框
366 2. password：密文文本输入框
367 3. radio：单选框，该类型input标签有个全局属性checked，属性值省略，代表单选框默认选中状态
368 4. checkbox：复选框，该类型input标签也有个全局属性checke用同单选框，多个复选框用name值来标识属于同一组复选框，如都代表爱好的复选框的name都应该叫hobby
369 5. file：文件输入，该类型input标签有个全局属性multiple，属性值省略，代表同时可以选取多文件提交给后台
370 6. submit：提交表单信息给后台，用value设置提交按钮的显示内容
371
372 button标签tpye属性值与分类
373 1. button：不同按钮，默认点击后无任何操作
374 2. reset：重置按钮，默认点击后会还原表单的所有操作
375 3. submit：提交按钮，和type为submit的input标签功能一样，将表单信息提交给后台
376 -->
377 ```
378
379
380
381 ## 二、CSS3
382
383 ### CSS3是什么
384
385 CSS3就是css语言，数字3是该语言的版本号；css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中），采用的语言是级联样式表 （Cascading Style Sheet），也属于标记语言。
386
387 ### CSS3如何学习
388
389 学习方向：从css代码书写位置、css选择器和css具体样式设置三部分进行学习
390
391 学习目的：完成页面样式布局和位置布局
392
393 ### 1、css代码书写位置
394
395 css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。
396
397 #### ① 行间式
398
399 css样式书写在标签的style全局属性中，一条样式格式为 样式名: 样式值 单位;，可以同时出现多条样式
400
401 ```html
402 <!-- 关键代码 -->
403 <!-- 给div标签设置宽高背景颜色 -->
404 <div style="width: 200px; height: 200px; background-color: orange;"></div>
405 ```
406
407 #### ② 内联式
408
409 css样式书写在head标签内的style标签中，样式格式为 css选择器 { 样式块 }，样式块由一条条样式组成
410
411 ```html
412 <!-- 关键代码 -->
413 <head>
414 <style>
415 /* css语法下的注释语法 */
416 /* 设置页面中所有h2标签宽高背景颜色 */
417 h2 { 418 width: 50px;
419 height: 50px;
420 background-color: orange;
421 }
422 /* 设置页面中所有h3标签宽高背景颜色 */
423 h3 { 424 width: 100px;
425 height: 100px;
426 background-color: red;
427 }
428 </style>
429 </head>
430 <body>
431 <h2></h2>
432 <h2></h2>
433 <h3></h3>
434 <h3></h3>
435 </body>
436 ```
437
438 #### ③ 外联式
439
440 css样式的写法同内联式，但样式书写在css文件中，在html页面中用link标签引入css文件（建议在head标签中引入）
441
442 - css文件夹下的my.css
443
444 ```css
445 /* html文件会引入该css文件，设置所有引入了html文件中的所有p标签宽高背景颜色 */
446 p {
447 width: 50px;
448 height: 50px;
449 background-color: orange;
450 }
451 ```
452
453 - 根目录下的first.html
454
455 ```html
456 <!-- 关键代码 -->
457 <head>
458 <!--
459 rel="stylesheet"：引入的是层级样式表，也就是css文件
460 type="text/css"：引入文件采用的是css语法书写文本类型代码
461 href="css/my.css"：采用相当路径引入目标css文件
462 -->
463 <link rel="stylesheet" type="text/css" href="css/my.css">
464 </head>
465 <body>
466 <!-- 该页面中的p标签样式都被my.css文件控制 -->
467 <p></p>
468 <p></p>
469 </body>
470 ```
471
472 - 根目录下的second.html
473
474 ```html
475 <head>
476 <link rel="stylesheet" type="text/css" href="css/my.css">
477 </head>
478 <body>
479 <!-- 该页面中的p标签样式也都被my.css文件控制 -->
480 <p></p>
481 <p></p>
482 </body>
483 ```
484
485 ##### 总结：
486
487 行间式控制样式最直接，但是样式多了直接导致页面可读性变差，且样式相同的标签样式也需要各自设置，复用性差；
488
489 内联式可以用一套样式块同时控制多个标签，具有样式的复用性，但是css样式代码还是写在html文件中，在项目开发下，代码量剧增，导致html文件变得臃肿，不利于代码维护；
490
491 外联式将css样式移到外部css文件中，不仅避免项目开发下html文件的臃肿问题，同时具有一套代码块控制多个标签，一个css样式文件服务于多个html两种复用性的好处，但是在学习阶段代码量不大时，样式不需要服务于多个html页面时，前面两种方式显然显得更便利。
492
493 在行间式中，写在标签内部的样式自然是用来控制该标签的样式，那写在内联式和外联式中的样式又是通过什么样的联系来控制对应页面中标签的样式呢？答案就是用于建立css与html之间联系的css选择器。
494
495 ### 2、css选择器
496
497 css选择器本质就是css与html两种语法建立关联的特定标识符：
498
499 就是在css语法中，通过html中标签的某种名字，与html具体的标签建立关联，从而使写在对应css选择器后的css样式能控制html中关联的标签或标签们
500
501 而表示标签名字的方式有多种，每一种名字在css语法中都对应这一种特定标识符，下面我们就来详细介绍：
502
503 #### ① 基础选择器
504
505 - 通配选择器
506
507 ```css
508 /* 特定标识符 星号(*) -- 可以表示页面所有标签的名字 */
509 /* 通配选择器控制页面中所有的标签(不建议使用) */
510 * {
511 /* 样式块 */
512 }
513 ```
514
515 ```html
516 <!-- 页面中所有标签都能被匹配 -->
517 <html></html>
518 <body></body>
519 <div></div>
520 <p></p>
521 <i></i>
522 ```
523
524 - 标签选择器
525
526 ```css
527 /* 特定标识符 标签名 */
528 /* 标签选择器控制页面中标签名为标签选择器名的所有标签*/
529 div { /* 控制页面中所有div标签的样式 */
530 /* 样式块 */
531 }
532 ```
533
534 ```html
535 <!-- 页面中所有的div标签都能被匹配 -->
536 <div></div>
537 <div class="sup">
538 <div id='inner'></div>
539 </div>
540 ```
541
542 - class选择器（提倡使用）
543
544 ```css
545 /* 特定标识符 点(.) */
546 /* class选择器控制页面中标签全局属性class值为class择器名的所有标签*/
547 .box { /* 控制页面中所有标签全局属性class值为box标签的样式 */
548 /* 样式块 */
549 }
550 ```
551
552 ```html
553 <!-- 页面中class属性值为box的标签都能被匹配 -->
554 <div class="box"></div>
555 <p class="box">
556 <i class="box"></i>
557 </p>
558 ```
559
560 - id选择器
561
562 ```css
563 /* 特定标识符 井号(#) */
564 /* id选择器控制页面中标签全局属性id值为id择器名的唯一标签*/
565 #box { /* 控制页面中唯一标签全局属性id值为box标签的样式 */
566 /* 样式块 */
567 }
568 ```
569
570 ```html
571 <!-- 页面中id属性值为box的唯一标签备匹配，id具有唯一性：一个页面中所有标签的id属性值不能重名 -->
572 <div id="box"></div>
573 ```
574
575 ##### 补充：基础选择器优先级
576
577 在一个页面中，难免会出现页面中的某一个标签的某一个样式被不同的选择器下的样式同时控制，也就是出现了多种方式下对目标标签的同一样式出现了重复控制，那到底是哪种选择器下的样式最终控制了目标标签，一定会有一套由弱到强的控制级别规则，这种规则就叫做优先级，下面的例子就很好的解释了各种基础选择器的优先级关系：
578
579 ```html
580 <head>
581 <style>
582 * { 583 width: 50px;
584 height: 50px;
585 background-color: red;
586 color: pink;
587 }
588 div { 589 width: 60px;
590 height: 60px;
591 background-color: orange;
592 }
593 .box { 594 width: 70px;
595 height: 70px;
596 }
597 #ele { 598 width: 80px;
599 }
600 </style>
601 </head>
602 <body>
603 <div class="box" id="ele">文字内容</div>
604 </body>
605 <!--
606 1. 四种选择器都控制目标标签的宽度，最终目标标签宽度为80px，所以id选择器优先级最高
607 2. 三种选择器都控制目标标签的高度，最终目标标签宽度为70px，所以class选择器优先级其次
608 3. 二种选择器都控制目标标签的背景颜色，最终目标标签背景颜色为orange，所以标签选择器优先级再次
609 4. 只有一种选择器控制目标标签的字体颜色，目标标签字体颜色一定为pink
610 优先级：通配选择器 < 标签选择器 < class选择器 < id选择器
611 -->
612 ```
613
614 #### ② 复杂选择器
615
616 - 群组选择器
617
618 ```css
619 /* 连接标识符 逗号(,) */
620 /* 群组选择器就是一套样式块同时控制用逗号连接(,)的所有目标标签 */
621 div, p, .box, #ele {
622 /* 样式块 */
623 }
624 ```
625
626 ```html
627 <!-- 页面中所有div标签、所有p标签、所有class属性值为box、唯一id属性值为ele的标签都能被匹配 -->
628 <div>
629 <div></div>
630 </div>
631 <p></p>
632 <p></p>
633 <i class="box"></i>
634 <span class="box"></span>
635 <b id="ele"></b>
636 ```
637
638 - 后代选择器
639
640 ```css
641 /* 连接标识符 空格( ) */
642 /* 后代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
643 body .box i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/
644 /* 样式块 */
645 }
646 ```
647
648 ```html
649 <!-- body标签内部的class属性值为box内部的i标签们都能被匹配，所以只匹配i标签，其他都是修饰 -->
650 <body>
651 <div class='box'>
652 <span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，能被匹配 -->
653 </div>
654 <div>
655 <span class='box'><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，能被匹配 -->
656 </div>
657 </body>
658 <!-- 标签的嵌套结构形成父子代标签，后代选择器可以匹配直接父子关系或间距父子关系形成的层次，所以两个i标签均能被匹配 -->
659 ```
660
661 - 子代选择器
662
663 ```css
664 /* 连接标识符 大于号(>) */
665 /* 子代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
666 body>.box>i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/
667 /* 样式块 */
668 }
669
670 ```
671
672 ```html
673 <!-- body>.box>i：同理body和.box都是修饰位，i才是目标匹配位 -->
674 <body>
675 <div class='box'>
676 <span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，不能被匹配 -->
677 </div>
678 <div>
679 <span class='box'><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，不能被匹配 -->
680 </div>
681 <div class='box'>
682 <i></i><!-- body与.box是直接父子关系，.box与i是直接父子关系，能被匹配 -->
683 </div>
684 </body>
685 <!-- 子代选择器只能匹配直接父子关系，所以只能匹配最后一个i标签 -->
686 ```
687
688 - 兄弟选择器
689
690 ```css
691 /* 连接标识符 波浪号(~) */
692 /* 兄弟选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
693 #ele~div~i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/
694 /* 样式块 */
695 }
696 ```
697
698 ```html
699 <!-- #ele~div~i：同理#ele和div都是修饰位，i才是目标匹配位 -->
700 <h3 id="ele"></h3>
701 <div></div><!-- #ele与div是直接兄弟关系 -->
702 <i></i><!-- div与i是直接兄弟关系，能被匹配 -->
703 <div></div><!-- #ele与div是间距兄弟关系 -->
704 <i></i><!-- div与i是直接兄弟关系，能被匹配 -->
705 <!-- 标签的上下结构形成兄弟标签，兄弟选择器可以匹配直接兄弟关系或间距兄弟关系形成的层次，所以两个i标签均能被匹配 -->
706 ```
707
708 - 相邻选择器
709
710 ```css
711 /* 连接标识符 加号(+) */
712 /* 相邻选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
713 #ele+div+i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/
714 /* 样式块 */
715 }
716 ```
717
718 ```html
719 <!-- #ele+div+i：同理#ele和div都是修饰位，i才是目标匹配位 -->
720 <h3 id="ele"></h3>
721 <div></div><!-- #ele与div是直接兄弟关系 -->
722 <i></i><!-- div与i是直接兄弟关系，能被匹配 -->
723 <div></div><!-- #ele与div是间距兄弟关系 -->
724 <i></i><!-- div与i是直接兄弟关系，不能被匹配 -->
725 <!-- 相邻选择器只能匹配直接兄弟关系，所以只能匹配第一个i标签 -->
726 ```
727
728 - 交叉选择器
729
730 ```css
731 /* 连接标识符 紧挨着(没有任何连接符) */
732 /* 交叉选择器本质上是对一个目标标签的多个名字的同时表示 */
733 div.box#ele.tag { /*div是标签名，box和tag都是class属性值，ele是id属性值*/
734 /* 样式块 */
735 }
736 ```
737
738 ```html
739 <!-- 标签名div、class名box及tag和id名ele都是对一个目标标签的修饰空格隔开
740 <!-- class属性拥有多个值时，多个值之间用空格隔开 -->
741 <div class="box tag" id="ele"></div>
742 ```
743
744 ##### 补充：基础选择器优先级
745
746 简单选择器存在优先级，优先级的前提就是<span style="color: red">不同选择器同时控制同一标签的同一属性</span>，那么在复杂选择器下，一定会出现这种同时控制同一标签的同一属性情况，那复杂选择器的优先级又是如何来规定的呢？
747
748 ```html
749 1. 复杂选择器的种类并不会影响优先级
750 -- 后代：div #ele | 兄弟：div~#ele | 交叉：div#ele 优先级一样
751 2. 复杂选择器本质是通过同类型(简单选择器)的个数来确定优先级
752 -- 三层标签选择器后代：body div i 大于 两层标签选择器后代：div i | body i
753 3. 简单选择器的优先级起关键性作用，也就是一个id选择器要大于无限个class选择器，一个class选择器要大于无限个标签选择器
754 -- id选择器：#i 大于 n层class选择器：.box .i
755 -- class选择器：.box 大于 n层标签选择器：body div
756 ```
757
758 ##### 总结：
759
760 选择器是一个庞大的家族，还有很多css选择器等待大家自己去挖掘，掌握已上选择器也已足够帮助我们完成简单前端开发了
761
762 我们有了css与html建立联系的选择器基础，那么建立联系后，css语言除了控制标签的宽高背景颜色字体颜色外，还有哪些丰富的样式控制呢？下面我们就一起来学习一下具体的样式设置。
763
764 ### 3、具体的样式设置
765
766 #### ① 文字样式
767
768 文字样式是用来控制字体或文本的显示方式的。
769
770 ```css
771 /*字族：STSong作为首选字体, 微软雅黑作为备用字体*/
772 font-family: "STSong", "微软雅黑";
773 /*字体大小*/
774 font-size: 40px;
775 /*字重：100、200、300、400、500、600、700、800、900，值越大字越粗*/
776 font-weight: 900;
777 /*行高: 字体文本默认在行高中垂直居中显示*/
778 line-height: 200px;
779 /*字划线: overline(上划线) | line-through(中划线) | underline(下划线) | none(取消划线) */
780 text-decoration: overline;
781 /*字间距*/
782 letter-spacing: 2px;
783 /*词间距*/
784 word-spacing: 5px;
785 /*首行缩进：1em相当于一个字的宽度*/
786 text-indent: 2em;
787 /*字体颜色*/
788 color: red;
789 /* 文本水平排列方式：left(水平居左) | center(水平居中) | right(水平居右) */
790 text-align: center;
791 ```
792
793 #### ② 背景样式
794
795 标签的背景除了背景颜色还可以有背景图片，而背景图片又有很多相关设置。
796
797 ```css
798 /*背景图片：url函数可以链接网络或本地图片*/
799 background-image: url('https://www.baidu.com/favicon.ico');
800 /*平铺:repeat-x(x轴平铺) | repeat-y(y轴平铺) | repeat(双轴平铺) | no-repeat*/(不平铺)
801 background-repeat: no-repeat;
802 /*x轴背景图片位置偏移：正值往右偏移，负值往左偏移*/
803 background-position-x: 10px;
804 /*y轴背景图片位置偏移：正值往下偏移，负值往上偏移*/
805 background-position-y: 10px;
806 ```
807
808 #### ③ 显示样式
809
810 HTML5预定义了很多系统标签，大家学习了html标签部分的时候，肯定注意到了，不同的标签在页面中的显示效果是不一样的，比如两个div之间默认会换行显示，而两个span标签却在一行来显示，到底是什么样式控制着标签这种显示效果呢，那就是显示样式display来控制的。
811
812 - display: block;
813
814 ```html
815 <div style="display: block;"></div>
816 <span style="display: block;"></span>
817 <i style="display: block;"></i>
818 <!--
819 1. 任意标签的display样式值均可以设置为block，那么该标签就会以block方式来显示
820 2. block方式显示的标签，默认会换行
821 3. block方式显示的标签，支持所有的css样式
822 4. block方式显示的标签，可以嵌套所有显示方式的标签
823 注：标题标签和段落标签虽然也是block显示类标签，但不建议嵌套block显示类标签
824 -->
825 ```
826
827 - display: inline;
828
829 ```html
830 <div style="display: inline;"></div>
831 <span style="display: inline;"></span>
832 <i style="display: inline;"></i>
833 <!--
834 1. 任意标签的display样式值均可以设置为inline，那么该标签就会以inline方式来显示
835 2. inline方式显示的标签，默认不会换行
836 3. inline方式显示的标签，不支持所有css样式(如：不支持手动设置该标签的宽高)
837 4. inline方式显示的标签，建议只用来嵌套所有inline显示方式的标签
838 -->
839 ```
840
841 - display: inline-block;
842
843 ```html
844 <div style="display: inline-block;"></div>
845 <span style="display: inline-block;"></span>
846 <i style="display: inline-block;"></i>
847 <!--
848 1. 任意标签的display样式值均可以设置为inline-block，那么该标签就会以inline-block方式来显示
849 2. inline-block方式显示的标签，具有inline特性，默认不换行
850 3. inline-block方式显示的标签，也具备block特征，支持所有css样式
851 4. inline-block方式显示的标签，不建议嵌套任意显示方式的标签
852 -->
853 ```
854
855 #### ④ 盒模型
856
857 我们学习完display属性后，知道了标签在页面中都是有显示方式的，虽然display属性值决定了标签的不同显示方式（inline显示方式下标签的宽高不能手动设置），但是标签还是可以拥有宽高的（内容多宽多高，标签就会有多宽多高），所以显示的标签都具有宽和高。
858
859 那么标签其实除了宽(width)和高(height)，还拥有内边距(padding)、边框(border)以及外边局(margin)的，这些由内到外组件在一起，就相当于一个盒子，所以我们有把页面中显示的标签称之为盒模型。
860
861 
862
863 创建一个新的box.html页面来学习盒模型的四个区域部分
864
865 ```html
866 <!doctype html>
867 <html>
868 <head>
869 <meta charset='utf-8' />
870 <title>盒模型</title>
871 <style>
872 /* 去除系统默认样式对我们学习的干扰，body标签系统默认提供了外边局，且外边局的上右下左四个方位的值都是默认8px，我们写margin: 0;的意思是同时将四个方位的初始值都设置为0，这样我们可以只用关心class值为box的div盒模型的变化，从而更好的学习盒模型的四个区域 */
873 body { 874 margin: 0;
875 }
876
877 /* 填写盒模型四个区域的样式代码块 */
878 </style>
879 </head>
880 <body>
881 <div class="box"></div>
882 </body>
883 </html>
884 ```
885
886 - content区域
887
888 ```css
889 /* 效果：在最左上角显示一个100*100区域面积的橘色正方形 */
890 .box {
891 width: 100px;
892 height: 100px;
893 background-color: orange;
894 }
895 /* content区域就是width x height的面积区域，是用来显示标签内容的区域 */
896 ```
897
898 - padding区域
899
900 ```css
901 /* 效果：在content区域设置的基础上，再设置padding的四个方位值，就会在最左上角显示一个200*200区域面积的橘色正方形 */
902 .box {
903 padding-top: 50px;
904 padding-right: 50px;
905 padding-bottom: 50px;
906 padding-left: 50px;
907 }
908 /* padding区域控制着盒模型的内边距，是内容显示区域往外的留白区域，同样可以显示背景颜色的 */
909 ```
910
911 - border区域
912
913 ```css
914 /* 效果：在padding区域设置的基础上，再设置border的样式、颜色及宽度，最左上角显示一个橘色正方形外会接着多出20px宽度的红色区域 */
915 .box {
916 /*solid:实线 | dashed:虚线 | dotted:点状线*/
917 border-style: solid;
918 border-color: red;
919 border-width: 20px;
920 }
921 /* padding区域控制着盒模型的内边距，是内容显示区域往外的留白区域，同样可以显示背景颜色的 */
922 ```
923
924 - margin区域
925
926 ```css
927 /* 效果：在至少所有设置的基础上，再设置margin的四个方位值，橘色正方形就会出现在居屏幕上方150px，屏幕左侧150px地方显示 */
928 /* 而且修改margin-top的值，盒模型就会上下改变位置，修改margin-left的值，盒模型就会左右改变位置，当出现负值时，盒子会溢出屏幕边缘 */
929 .box {
930 margin-top: 150px;
931 margin-right: 150px;
932 margin-bottom: 150px;
933 margin-left: 150px;
934 }
935 /* padding区域控制着盒模型的内边距，是内容显示区域往外的留白区域，同样可以显示背景颜色的 */
936 ```
937
938 ##### 问题：
939
940 在盒模型除了修改margin-right与margin-bottom的值时，盒模型都会出现显示效果的上的改变，而修改margin-right与margin-bottom的值时，盒模型的并没有任何改变，那margin-right与margin-bottom又是怎样控制着盒模型的呢？
941
942 - margin-bottom是控制默认上下显示的两个盒模型之间的间距
943
944 ```html
945 <!doctype html>
946 <html>
947 <head>
948 <meta charset='utf-8' />
949 <title>margin-bottom案例</title>
950 </head>
951 <body>
952 <div style="margin-bottom: 100px">上下显示的【上】盒模型</div>
953 <div>上下显示的【下】盒模型</div>
954 <!-- 显示效果：两个div上下间距100px -->
955 </body>
956 </html>
957 ```
958
959 - margin-right是控制默认zzu左右示的两个盒模型之间的间距
960
961 ```html
962 <!doctype html>
963 <html>
964 <head>
965 <meta charset='utf-8' />
966 <title>margin-right</title>
967 </head>
968 <body>
969 <span style="margin-right: 100px">左右显示的【左】盒模型</div>
970 <span>上下显示的【右】盒模型</span>
971 <!-- 显示效果：两个span默认初始左右是有间距的，增加margin-right后，间距在原来基础上扩大了100px -->
972 </body>
973 </html>
974 ```
975
976 #### ⑤ 浮动
977
978 我们学习完了display与盒模型后，仍然不方便处理以下这个问题：多个可以手动设置宽高的盒模型如何快速的左右排列显示？
979
980 我们一起来看看：
981
982 display：inline;下的盒模型，不支持手动设置宽高，pass
983
984 display: inline-block;下的盒模型，支持手动设置宽高，且左右排列显示，但是之间有默认间距，且这个间距存在浏览器间的适配问题，不可控，pass
985
986 display: block;下的盒模型，支持手动设置宽高，但默认上下排列显示，于是我们想到了采用margin-left与margin-top两个可以改变位置的盒模型属性帮我们完成，显然是可以达到左右排列显示的，但是很明显是一个非常庞大的布局任务量
987
988 那有没有一种可以快速帮助block显示的盒模型左右排列显示的样式布局方式呢，有的，就是我们马上学习的**浮动**
989
990 ```html
991 <!doctype html>
992 <html>
993 <head>
994 <meta charset='utf-8' />
995 <title>盒模型</title>
996 <style>
997 /* 清除body默认外边距带来的影响 */
998 body { margin: 0 }
999 /* 浮动布局的开始 */
1000 .red { background-color: red }
1001 .blue { background-color: blue }
1002 .box {1003 width: 50px;
1004 height: 50px;
1005 }
1006 /* 以上设置后，红蓝正方形从左上角依次上下排列显示 */
1007 .box {1008 float: right;
1009 }
1010 /* 以上设置后，红蓝正方形依次从右上角(从右往左)左右排列显示 */
1011 .box {1012 float: left;
1013 }
1014 /* 以上设置后，红蓝正方形依次从左上角(从左往右)左右排列显示 */
1015 .wrapper {1016 width: 150px;
1017 }
1018 /* 以上设置后，父级提供的显示宽度为150px，所以一行最多能显示三个box，所以从左往右依次排列成了两行 */
1019 </style>
1020 </head>
1021 <body>
1022 <div class="wrapper">
1023 <div class="box red">1</div>
1024 <div class="box blue">2</div>
1025 <div class="box red">3</div>
1026 <div class="box blue">4</div>
1027 <div class="box red">5</div>
1028 <div class="box blue">6</div>
1029 </div>
1030 </body>
1031 </html>
1032 <!--
1033 总结：
1034 1. 浮动样式布局就是设置float属性的值，可以快速让默认上下显示的盒模型左右排列显示
1035 2. float可以设置left与fight两个值，决定了起始排列的位置与方向
1036 3. 父标签的宽度决定了一行可以排列的子标签个数
1037 -->
1038 ```
1039
1040 - 清浮动
1041
1042 我们学习了浮动样式布局，很明显感觉其给我们带来的布局便利，但是大家先写出下面的列子，看会出现什么样的布局问题？
1043
1044 ```html
1045 <!doctype html>
1046 <html>
1047 <head>
1048 <meta charset='utf-8' />
1049 <title>盒模型</title>
1050 <style>
1051 body { margin: 0 }
1052 .red { background-color: red }
1053 .blue { background-color: blue }
1054 .box {1055 width: 50px;
1056 height: 50px;
1057 float: left;
1058 }
1059 .wrapper {1060 width: 300px;
1061 }
1062 /* 层级关系上，wrapper与ele属于同一层级的上下兄弟标签 */
1063 .ele {1064 width: 100px;
1065 height: 100px;
1066 background-color: orange;
1067 }
1068 /* 设置ele的样式后，很明显会发现ele与wrapper的子标签发生了显示区域的重叠，并没有出现在wrapper子标签显示区域的下方，且ele显示区域被遮盖(具体原因可以搜索学习 浮动布局不完全脱离文档流 ) */
1069 </style>
1070 </head>
1071 <body>
1072 <div class="wrapper">
1073 <div class="box red">1</div>
1074 <div class="box blue">2</div>
1075 <div class="box red">3</div>
1076 <div class="box blue">4</div>
1077 <div class="box red">5</div>
1078 <div class="box blue">6</div>
1079 </div>
1080 <div class="ele"></div>
1081 </body>
1082 </html>
1083 ```
1084
1085 很显然，上面案例中的情况在实际开发过程中非常常见：一个标签的所有子标签采用浮动布局，该标签的下方兄弟标签会与子标签出现显示重叠问题，那么清浮动就是用来解决这样的问题的。
1086
1087 清浮动：就是让父标签在子标签浮动的情况下，根据子标签整体所需最大的显示高度，为父级设置固定格式的样式属性，系统就会默认提供给父标签这个所需最大的显示高度，具体格式如下：
1088
1089 ```css
1090 /*清浮动固定格式样式代码*/
1091 .wrapper:after {
1092 content: "";
1093 display: block;
1094 clear: both;
1095 }
1096
1097 /* 测试修改父级标签的宽度，让子标签以不同行数来显示，查看子标签与ele标签之间还会不会出现显示区域的重叠？显然不会了 */
1098 .wrapper {
1099 width: 150px; /* 子标签两行显示 */
1100 width: 100px; /* 子标签三行显示 */
1101 width: 50px; /* 子标签六行显示 */
1102 }
1103
1104 /*总结：以后哪个标签的子标签采用了浮动样式布局，一定要为该标签提供清浮动操作*/
1105 ```
1106
1107 #### ⑥ 定位
1108
1109 学习完盒模型样式后，可以完成盒模型位置的改变，学习了浮动样式布局后，又能让默认上下排列显示的盒模型快速左右排列，但是仍然不好或不能完成一下两种样式布局需求：
1110
1111 需求1：在页面可以发生滚动的时候，盒模型能不能相当页面窗口是静止的，不会随着页面滚动而滚动（页面小广告）
1112
1113 需求2：父标签已经规定死了宽和高，多个子标签之间不相互影响位置布局，每个子标签自身相对于父级宽高提供的显示区域进行独立的位置布局
1114
1115 - 固定定位：解决需求1
1116
1117 ```html
1118 <!doctype html>
1119 <html>
1120 <head>
1121 <meta charset='utf-8' />
1122 <title>固定定位</title>
1123 <style>
1124 /* 页面滚动的样式准备 */
1125 body {1126 height: 3000px;
1127 }
1128 .tag {1129 width: 120px;
1130 height: 240px;
1131 background-color: orange;
1132 }
1133 /* position: fixed; 代表采用固定样式定位进行对tag位置的布局操作 */
1134 /* 设置完成后，tag就相对于页面屏幕左侧30px屏幕上侧200px位置静止，不会随着屏幕的滚动而滚动 */
1135 /* 定位样式布局下，不仅可以采用top、left进行布局的位置调整，还可以采用bottom、right进行布局的位置调整，大家可以自我尝试一下，进入固定定位布局总结 */
1136 .tag {1137 position: fixed;
1138 top: 200px;
1139 left: 30px;
1140 }
1141 </style>
1142 </head>
1143 <body>
1144 <div class="tag"></div>
1145 </body>
1146 </html>
1147 <!--
1148 总结：
1149 1. 固定定位的盒模型参照页面屏幕四个边缘进行位置布局，top、right、bottom、left分别控制着距离页面屏幕上右下左四个边缘的距离
1150 2. top与bottom两个方位布局同时存在时，只有top属性值有布局效果，同理left与right同时出现，只有left属性值有布局效果
1151 3. 固定定位的盒模型可能会与页面上其他的盒模型发生显示区域重叠（因为页面滚动，固定定位盒子的位置相对于页面永远是静止的），固定定位的盒模型会在上方显示
1152 -->
1153 ```
1154
1155 - 绝对定位（重点）：与相当定位一同解决需求2
1156
1157 ```html
1158 <!doctype html>
1159 <html>
1160 <head>
1161 <meta charset='utf-8' />
1162 <title>绝对定位</title>
1163 <style>
1164 /* 清除body默认外边距带来的影响 */
1165 body { margin: 0 }
1166 /* 根据需求2，优先设置好outer的显示区域 */
1167 .outer {1168 width: 400px;
1169 height: 400px;
1170 background-color: yellow;
1171 }
1172 /* 所有的inner采用一样的大小，绝对样式定位进行布局 */
1173 .inner {1174 width: 150px;
1175 height: 150px;
1176 position: absolute;
1177 }
1178 /* 想让box1在outer的左上角显示 */
1179 .box1 {1180 background-color: red;
1181 top: 0px;
1182 left: 0px;
1183 }
1184 /* 想让box2在outer的正中央显示 */
1185 .box2 {1186 background-color: green;
1187 top: 125px;
1188 left: 125px;
1189 }
1190 /* 想让box3在outer的右下角显示 */
1191 .box3 {1192 background-color: green;
1193 bottom: 0px;
1194 right: 0px;
1195 }
1196 </style>
1197 </head>
1198 <body>
1199 <div class="outer">
1200 <div class="inner box1"></div>
1201 <div class="inner box2"></div>
1202 <div class="inner box3"></div>
1203 </div>
1204 </body>
1205 </html>
1206 <!--
1207 结果：
1208 进行上方布局设置后，并没有达到预期的显示效果，子标签我们已经采用了绝对样式定位完成了指定的布局，那么父标签又需要做什么样的定位样式布局处理呢？
1209 -->
1210 ```
1211
1212 - 相对定位（了解）：辅助绝对定位解决需求2
1213
1214 ```css
1215 .outer {
1216 /* 父标签设置完相对样式布局后，再观察绝对定位中的案例显示效果 */
1217 position: relative;
1218 /* 如果父标签也需要改变自身位置，也可以修改left、top或是margin-left、margin-top来完成 */
1219 }
1220
1221 /*
1222 总结：
1223 1. 父标签采用相对定位(relative)来辅助于子标签绝对定位(absolute)布局，这样每一个子标签都独立参考父标签的四个边缘进行位置布局，top、right、bottom、left分别控制着距离父标签的上右下左四个边缘的距离
1224 2. top与bottom两个方位布局同时存在时，只有top属性值有布局效果，同理left与right同时出现，只有left属性值有布局效果
1225 3. 绝对定位的盒模型可能会与页面上其他的盒模型发生显示区域重叠，一般都是布局所需，不用处理；但是同时采用绝对定位的标签们之间也可能发生重叠，此时往往需要处理谁在上在下显示，z-index属性就是解决这样的问题
1226 */
1227 ```
1228
1229 - z-index：接着需求2的案例
1230
1231 z-index的属性值为大于0的任意正整数，值大的标签显示区域就会覆盖值小的标签显示区域来显示
1232
1233 ```css
1234 .box1 {
1235 /* 显示层级中等 */
1236 z-index: 10;
1237 }
1238 .box2 {
1239 /* 显示层级最高 */
1240 z-index: 100;
1241 }
1242 .box3 {
1243 /* 显示层级最低 */
1244 z-index: 1;
1245 }
1246 /*
1247 总结：
1248 1. z-index属性值不需要从1依次叠加，随意设置
1249 2. z-index属性值越大显示层级越高，显示层级不同的发生显示区域重叠时，显示层级高的显示区域覆盖显示层级低的显示区域
1250 */
1251 ```
1252
1253
1254
1255 ## 三、JavaScript
1256
1257 ### JavaScript是什么
1258
1259 JavaScript（下文我们会用简称JS来代替）是脚本编程语言，JS语言开发的文件是以.js为后缀，通过在html文件中引入该js文件来控制html代码的交互功能以及前台数据处理的业务逻辑（js语言代码也可以直接写在html文件中），采用的[ECMAScript](https://baike.baidu.com/item/ECMAScript/1889420?fr=aladdin)语法，属于编程语言。
1260
1261 ECMAScript目前普遍使用的存在ES5与ES6两个版本，我们也会基于这两个版本来介绍JS这么应用的学习
1262
1263 ### JavaScript如何学习
1264
1265 学习方向：从JS代码书写位置、JS基础语法、JS选择器和JS页面操作四部分进行学习
1266
1267 学习目的：完成页面标签与用户的人机交互及前台数据处理的业务逻辑
1268
1269 ### 1、JS代码书写位置
1270
1271 JS属于脚本(可以以代码片段的方式内嵌到其他语言中)编程语言，可以内嵌到html代码中，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。
1272
1273 #### ① 行间式
1274
1275 JS代码书写在标签的事件全局属性中，采用的是JS编程语言的语法
1276
1277 ```html
1278 <!-- 关键代码 -->
1279 <!-- 给div标签添加点击事件的交互逻辑：弹出文本提示框 -->
1280 <div onclick="alert('点击我完成页面交互')">点我</div>
1281 ```
1282
1283 #### ② 内联式
1284
1285 JS代码书写在script标签中，script标签可以出现在页面中的任意位置，建议放在body标签的最后(html代码是自上而下进行解析加载，放在body标签的最下方，会保证页面所有标签都加载完毕，html再去加载js文件，那么js脚步文件就会更好的控制页面标签的人机交互了)，采用的是JS编程语言的语法
1286
1287 ```html
1288 <!-- 关键代码 -->
1289 <!-- 页面被加载打开时，就会触发事件的交互逻辑：弹出文本提示框 -->
1290 <body>
1291 <!-- body标签中的所有子标签位置 -->
1292
1293 <!-- script标签出现在body标签的最下方 -->
1294 <script>
1295 alert('该页面被加载！')
1296 </script>
1297 </body>
1298 ```
1299
1300 #### ③ 外联式
1301
1302 JS代码书在外部js文件中，在html页面中用script标签引入js文件（建议在body标签最下方引入，理由同上）
1303
1304 - js文件夹下的my.js
1305
1306 ```css
1307 alert('外联式js文件弹出框')
1308 ```
1309
1310 - 根目录下的first.html
1311
1312 ```html
1313 <!-- 关键代码 -->
1314 <!-- 页面被加载打开时，就会触发事件的交互逻辑：弹出文本提示框 -->
1315 <body>
1316 <!-- body标签中的所有子标签位置 -->
1317
1318 <!-- script标签出现在body标签的最下方 -->
1319 <script src="js/my.js">
1320 /* 不要在此写JS代码，原因是用来引入外部js文件的script标签，标签内部书写的JS代码不在起作用 */
1321 </script>
1322 </body>
1323 ```
1324
1325 - 根目录下的second.html
1326
1327 ```html
1328 <!-- 关键代码 -->
1329 <!-- 页面被加载打开时，就会触发事件的交互逻辑：弹出文本提示框 -->
1330 <body>
1331 <!-- body标签中的所有子标签位置 -->
1332
1333 <!-- script标签出现在body标签的最下方 -->
1334 <script src="js/my.js">
1335 /* 不要在此写JS代码，原因是用来引入外部js文件的script标签，标签内部书写的JS代码不在起作用 */
1336 </script>
1337 </body>
1338 ```
1339
1340 ##### 总结：
1341
1342 行间式控制交互最直接，但是交互逻辑多了直接导致页面可读性变差，且交互逻辑相同的标签样式也需要各自设置，复用性差，不建议使用；
1343
1344 内联式可以同时为多个标签提供交互逻辑（课程后面会详细介绍），学习阶段代码量不大的情况下，也不需要分文件处理的，这时候建议使用内联式；
1345
1346 外联式是分文件管理不同的页面存在的相同与不同的数据处理的业务逻辑与人机交互，可以极大提高开发效率，项目开发时一定要采用外联式来处理JS代码。
1347
1348 通过上面的介绍，大家很清楚JS是一门脚本编程语言，那么我们一定先要了解一下这门编程语言的基础语法，才可以慢慢的展开学。
1349
1350 ### 2、JavaScript基础语法
1351
1352 我们前期已经学习了Python这门编程语言，也知道了一门编程语言的基础如何来学习，我们JS的基础和Python大致相同，只是存在一些语法上的差异而已。
1353
1354 下面我们就从：
1355
1356 1、变量的定义
1357
1358 2、基本数据类型
1359
1360 3、运算符
1361
1362 4、分支结构
1363
1364 5、循环结构
1365
1366 6、JS中对象的运用
1367
1368 7、函数
1369
1370 七个方向来学习JS这门语言。
1371
1372 #### ① 变量的定义
1373
1374 JS中定义变量，不同于Python，我们需要像Python定义函数那样，也需要用特定的关键词来定义变量：
1375
1376 ES5语法，我们采用var关键词定义变量，并且没有常量的概念
1377
1378 ES6语法，我们采用let关键词定义变量，用const关键词定义常量
1379
1380 注：我们不需要像Python那样切换解释器版本来区别到底该书写什么版本语法的代码，在一个JS文件中我们可以同时书写两种语法的JS代码，浏览器都可以自动帮我们解析并运行。
1381
1382 ```js
1383 // ES5定义变量：var是关键词、num是变量名、=为赋值符、10为变量值、;为JS语言语句的结束标识符
1384 var num = 10;
1385
1386 // ES6定义变量
1387 let count = 100;
1388
1389 const PI = 3.14;
1390 ```
1391
1392 ##### 补充：变量的命名规范
1393
1394 ```js
1395 /*
1396 1. 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
1397 2. 区分大小写
1398 3. 不能出现关键字及保留字
1399 */
1400 ```
1401
1402 | | | | | |
1403 | --------- | --------- | ---------- | --------- | ------------ |
1404 | abstract | arguments | boolean | break | byte |
1405 | case | catch | char | class\* | const |
1406 | continue | debugger | default | delete | do |
1407 | double | else | enum\* | eval | export\* |
1408 | extends\* | false | final | finally | float |
1409 | for | function | goto | if | implements |
1410 | import\* | in | instanceof | int | interface |
1411 | let | long | native | new | null |
1412 | package | private | protected | public | return |
1413 | short | static | super\* | switch | synchronized |
1414 | this | throw | throws | transient | true |
1415 | try | typeof | var | void | volatile |
1416 | while | with | yield | | |
1417
1418 #### ② 基本数据类型
1419
1420 JS语言中基本数据类型分值类型与引用类型两部分。
1421
1422 - 值类型
1423
1424 ```js
1425 // 数字类型：number
1426 var num = 10;
1427 const PI = 3.14;
1428 console.log(typeof(num), num); // 结果：number 10
1429
1430 // 字符串类型：string
1431 var s1 = "双引号可以表示字符串";
1432 var s2 = '单引号可以表示字符串';
1433 console.log(typeof(s1), s1); // 结果：string 双引号可以表示字符串
1434
1435 // 布尔类型：boolean
1436 var b1 = true;
1437 var b2 = false;
1438 console.log(typeof(b1), b1); // 结果：string 双引号可以表示字符串
1439
1440 // 未定义类型：undefined
1441 var u1;
1442 var u2 = undefined;
1443 console.log(typeof(u1), u1); // 结果：undefined undefined
1444 ```
1445
1446 - 引用类型
1447
1448 ```js
1449 // 函数类型：function
1450 function fn1() {}
1451 var fn2 = function() {};
1452 console.log(typeof(fn1), fn1); // 结果：function ƒ fn1() {}
1453
1454 // 对象类型：object
1455 var obj1 = {}
1456 console.log(typeof(obj1), obj1); // 结果：function {}
1457
1458 // Array对象类型：
1459 var arr1 = [1, 2, 3, 4, 5]
1460 console.log(typeof(arr1), arr1); // 结果：object (5) [1, 2, 3, 4, 5]
1461 ```
1462
1463 #### ③ 运算符
1464
1465 - 算数运算符
1466
1467 前提：n = 5
1468
1469 <table>
1470 <tr>
1471 <th>运算符</th>
1472 <th>描述</th>
1473 <th>例子</th>
1474 <th>x结果</th>
1475 <th>n结果</th>
1476 </tr>
1477 <tr>
1478 <td>+</td>
1479 <td>加法</td>
1480 <td>x=n+2</td>
1481 <td>7</td>
1482 <td>5</td>
1483 </tr>
1484 <tr>
1485 <td>-</td>
1486 <td>减法</td>
1487 <td>x=n-2</td>
1488 <td>3</td>
1489 <td>5</td>
1490 </tr>
1491 <tr>
1492 <td>*</td>
1493 <td>乘法</td>
1494 <td>x=n*2</td>
1495 <td>10</td>
1496 <td>5</td>
1497 </tr>
1498 <tr>
1499 <td>/</td>
1500 <td>除法</td>
1501 <td>x=n/2</td>
1502 <td>2.5</td>
1503 <td>5</td>
1504 </tr>
1505 <tr>
1506 <td>%</td>
1507 <td>取模(余数)</td>
1508 <td>x=n/2</td>
1509 <td>1</td>
1510 <td>5</td>
1511 </tr>
1512 <tr>
1513 <td rowspan="2">++</td>
1514 <td rowspan="2">自增</td>
1515 <td>x=++n</td>
1516 <td>6</td>
1517 <td>6</td>
1518 </tr>
1519 <tr>
1520 <td>x=n++</td>
1521 <td>5</td>
1522 <td>6</td>
1523 </tr>
1524 <tr>
1525 <td rowspan="2">--</td>
1526 <td rowspan="2">自减</td>
1527 <td>x=--n</td>
1528 <td>4</td>
1529 <td>4</td>
1530 </tr>
1531 <tr>
1532 <td>x=n--</td>
1533 <td>5</td>
1534 <td>4</td>
1535 </tr>
1536 </table>
1537
1538 - 赋值运算符
1539
1540 前提：x=5，y=5
1541
1542 | 运算符 | 例子 | 等同于 | 运算结果 |
1543 | :----- | :--- | ------ | -------- |
1544 | = | x=y | | 5 |
1545 | += | x+=y | x=x+y | 10 |
1546 | -= | x-=y | x=x-y | 0 |
1547 | *= | x*=y | x=x*y | 25 |
1548 | /= | x/=y | x=x/y | 1 |
1549 | %= | x%=y | x=x%y | 0 |
1550
1551 - 比较运算符
1552
1553 前提：x=5
1554
1555 | 运算符 | 描述 | 比较 | 结果 |
1556 | ------ | ---------- | ------- | ----- |
1557 | == | 等于 | x=="5" | true |
1558 | === | 绝对等于 | x==="5" | false |
1559 | != | 不等于 | x!="5" | fales |
1560 | !== | 不绝对等于 | x!=="5" | true |
1561 | > | 大于 | x>5 | false |
1562 | < | 小于 | x<5 | false |
1563 | >= | 大于等于 | x>=5 | true |
1564 | <= | 小于等于 | x<=5 | true |
1565
1566 - 逻辑运算符
1567
1568 前提：n=5
1569
1570 | 运算符 | 描述 | 例子 | 结果 |
1571 | ------ | ---- | ------------- | ------------------- |
1572 | && | 与 | x=n>10&&++n | x=false,n=5（短路） |
1573 | \|\| | 或 | x=n<10\|\|n-- | x=true,n=5（短路） |
1574 | ! | 非 | x=!n | x=false,x=5 |
1575
1576 - 三目运算符
1577
1578 ```js
1579 // 结果 = 条件表达式 ? 结果1 : 结果2;
1580 // 语法规则：条件表达式成立，将结果1赋值给结果，反正赋值结果2
1581
1582 // 案例：
1583 var weather = prompt("天气(晴|雨)"); // 文本输入弹出框
1584 var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";
1585 console.log(res); // 今天天气挺好
1586 ```
1587
1588 #### ④ 分支结构
1589
1590 - if 基础语法
1591
1592 ```js
1593 if (条件表达式) {
1594 代码块;
1595 }
1596 // 1. 当条件表达式结果为true，会执行代码块；反之不执行
1597 // 2. 条件表达式可以为普通表达式
1598 // 3. 0、undefined、null、""、NaN为假，其他均为真
1599 ```
1600
1601 - if 复杂语法
1602
1603 ```js
1604 // 1.双分支
1605 if (表达式1) {
1606 代码块1;
1607 } else {
1608 代码块2;
1609 }
1610
1611 // 2.多分支
1612 if (表达式1) {
1613
1614 } else if (表达式2) {
1615
1616 }
1617 ...
1618 else if (表达式2) {
1619
1620 } else {
1621
1622 }
1623 ```
1624
1625 - if 嵌套
1626
1627 ```js
1628 if (表达式1) {
1629 if (表达式2) {
1630
1631 }
1632 }
1633 ```
1634
1635 - 案例：
1636
1637 ```js
1638 var weather = prompt("天气(晴|雨)"); // 文本输入弹出框
1639 if (weather == "晴") {
1640 alert("今天是晴天")
1641 } else if (weather == "雨") {
1642 alert("今天是雨天")
1643 } else {
1644 alert("输入信息有误")
1645 }
1646 ```
1647
1648 #### ⑤ 循环结构
1649
1650 - for循环
1651
1652 ```js
1653 for (循环变量①; 条件表达式②; 循环变量增量③) {
1654 代码块④;
1655 }
1656 // for循环执行的顺序：① ②④③ ... ②④③ ②，入口为①，出口为②，②④③就是循环过程
1657
1658 // 案例：
1659 for (var i = 0; i < 5; i++) {
1660 console.log(i);
1661 }
1662
1663 // 结果：
1664 0
1665 1
1666 2
1667 3
1668 4
1669 ```
1670
1671 - while循环
1672
1673 ```js
1674 while (条件表达式) {
1675 代码块;
1676 }
1677 // 条件满足执行代码块，条件不满足跳出循环
1678
1679 // 案例：
1680 var i = 0;
1681 while (i < 5) {
1682 console.log(i);
1683 i++;
1684 }
1685
1686 // 结果：
1687 0
1688 1
1689 2
1690 3
1691 4
1692 ```
1693
1694 - for…in迭代器
1695
1696 ```js
1697 var arr = [1, 2, 3, 4, 5]
1698 for (num in arr) {
1699 console.log(num);
1700 }
1701
1702 // 结果：
1703 0
1704 1
1705 2
1706 3
1707 4
1708 ```
1709
1710 - break，continue关键词
1711
1712 ```js
1713 // 1. break：结束本层循环
1714 // 2. continue：结束本次循环进入下一次循环
1715 ```
1716
1717 #### ⑥ JS中对象的运用
1718
1719 JS语言中没有字典类型的存在，但是JS对象可以很好的来表示Python语法中dict类型表示的数据，其使用方式也及其简单。
1720
1721 ```js
1722 // 定义对象：可以将对象看做字典来使用
1723 var teacher = {name: "Zero", age: 28}
1724
1725 // 取值
1726 var res = teacher.name;
1727 res = teacher['name'];
1728
1729 // 改值
1730 teacher.name = "Owen";
1731
1732 // 增值
1733 teacher.gender = "男";
1734
1735 // 删值
1736 delete teacher.age
1737 ```
1738
1739 #### ⑦ 函数
1740
1741 - 函数的定义
1742
1743 ```js
1744 function 函数名 (参数列表) {
1745 函数体;
1746 }
1747
1748 var 函数名 = function (参数列表) {
1749 函数体;
1750 }
1751 ```
1752
1753 - 函数的调用
1754
1755 ```js
1756 函数名(参数列表)
1757 ```
1758
1759 - 函数的参数
1760
1761 ```js
1762 // 个数不需要统一
1763 function fn (a, b, c) {
1764 console.log(a, b, c) // 结果：100 undefined undefined
1765 }
1766 fn(100); // 并未给b，c传值
1767
1768 function fn (a) {
1769 console.log(a) // 结果：100
1770 }
1771 fn(100, 200, 300); // 200，300被丢弃
1772 ```
1773
1774 ```js
1775 // 可以任意位置具有默认值
1776 function fn (a, b=20, c, d=40) {
1777 console.log(a, b, c, d) // 100 200 300 40
1778 }
1779 fn(100, 200, 300); // 一定按照先后顺序依次传参
1780 ```
1781
1782 ```js
1783 // 通过...语法接收多个值
1784 function fn (a, ...b) {
1785 console.log(a, b) // 100 [200 300]
1786 }
1787 fn(100, 200, 300)
1788 // ...变量必须出现在参数列表最后
1789 ```
1790
1791 - 函数的返回值
1792
1793 ```js
1794 function fn () {
1795 return 返回值;
1796 }
1797 // 1.可以空return操作，用来结束函数
1798 // 2.返回值可以为任意js类型数据
1799 // 3.函数最多只能拥有一个返回值
1800 ```
1801
1802 ### 3、JS选择器
1803
1804 想必大家学习完之前的内容，已经知道了css选择器本质就是css与html两种语法建立关联的特定标识符，那在JS语言的语法中，也有特点的方式与html语言编写的表情建立关联，我们就称之为JS选择器。
1805
1806 #### ① getElement系列
1807
1808 ```js
1809 // 1.通过id名获取唯一满足条件的页面元素
1810 document.getElementById('id名');
1811 // 该方法只能由document调用
1812
1813 // 2、通过class名获取所有满足条件的页面元素
1814 document.getElementsByClassName('class名');
1815 // 该方法可以由document及任意页面元素对象调用
1816 // 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
1817 // 没有匹配到任何结果返回空HTMLCollection对象 ([])
1818
1819 // 3.通过tag名获取所有满足条件的页面元素
1820 document.getElementsByTagName('tag名');
1821 // 该方法可以由document及任意页面元素对象调用
1822 // 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
1823 // 没有匹配到任何结果返回空HTMLCollection对象 ([])
1824 ```
1825
1826 #### ② querySelect系列
1827
1828 ```js
1829 // 1.获取第一个匹配到的页面元素
1830 document.querySelector('css3语法选择器');
1831 // 该方法可以由document及任意页面对象调用
1832
1833 // 2.获取所有匹配到的页面元素
1834 document.querySelectorAll('css3语法选择器');
1835 // 该方法可以由document及任意页面对象调用
1836 // 返回值为NodeList (一个类数组结果的对象，使用方式同数组)
1837 // 没有匹配到任何结果返回空NodeList对象 ([])
1838 ```
1839
1840 #### 案例：
1841
1842 ```html
1843 <body>
1844 <div id="box" class="box"></div>
1845 <script>
1846 var box1 = document.getElementById('box');
1847 var box2 = document.querySelector('.box');
1848 // box1 === box2，就代表页面id为box，class为box的div标签
1849 </script>
1850 </body>
1851 ```
1852
1853 ### 4、JS页面操作
1854
1855 我们学习完JS的基本语法后，知道如何简单使用JS语言，有掌握了JS选择器，就可以与页面建立起联系，那我们可以通过哪些方式与页面标记进行交互？有可以在交互的过程中对标签进行哪些具体的操作呢？
1856
1857 #### ① 鼠标事件
1858
1859 我们先来看一下交互的方式，叫做标签对象的事件绑定，可以绑定的事件有：
1860
1861 ```js
1862 /*
1863 onclick：鼠标点击
1864 ondblclick：鼠标双击
1865 onmousedown：鼠标按下
1866 onmousemove：鼠标移动
1867 onmouseup：鼠标抬起
1868 onmouseover：鼠标悬浮
1869 onmouseout：鼠标移开
1870 oncontextmenu：鼠标右键
1871 */
1872 ```
1873
1874 #### ② 事件的绑定
1875
1876 具体绑定事件的方式：
1877
1878 ```html
1879 <body>
1880 <div class="box">绑定点击事件后可以完成点击交互</div>
1881 <script>
1882 var box = document.querySelector('.box');
1883 // 页面class为box的div被鼠标点击后会有弹出框
1884 box.onclick = function() {
1885 alert("box标签被点击了")
1886 }
1887 </script>
1888 </body>
1889
1890 ```
1891
1892 那么绑定完事件后又可以怎样具体操作页面标签呢？
1893
1894 - 操作行间式样式
1895
1896 ```html
1897 <head>
1898 <style>
1899 .box {1900 width: 200px;
1901 height: 200px;
1902 }
1903 </style>
1904 </head>
1905 <body>
1906 <div class="box" style="background-color: red"></div>
1907 <script>
1908 var box = document.querySelector('.box');
1909 // 语法：页面对象.全局style属性.具体的样式名
1910 box.onclick = function() {
1911 // 读：获取行间式样式值
1912 var bgColor = box.style.backgroundColor;
1913 // 写：对行间式样式进行赋值，初始没有该条行间式样式，相同会自动添加设置好的行间式
1914 box.style.backgroundColor = 'orange'; // css3多个单词的属性名采用小驼峰命名法
1915 }
1916 </script>
1917 </body>
1918 ```
1919
1920 - 只读 计算后 样式
1921
1922 ```html
1923 <head>
1924 <style>
1925 .box {1926 width: 200px;
1927 height: 200px;
1928 }
1929 </style>
1930 </head>
1931 <body>
1932 <div class="box" style="background-color: red"></div>
1933 <script>
1934 var box = document.querySelector('.box');
1935 // 语法：getComputedStyle(页面元素对象, 伪类).样式名;
1936 // 注：我们不需要考虑伪类的范畴，直接用null填充即可
1937 box.onclick = function() {
1938 // 只读：获取计算后样式值
1939 var width = getComputedStyle(box, null).width;
1940 }
1941 </script>
1942 </body>
1943 ```
1944
1945 - 操作标签class名
1946
1947 ```html
1948 <body>
1949 <div class="box">class名操作</div>
1950 <script>
1951 var box = document.querySelector('.box');
1952 // 查看类名
1953 var cName = box.className;
1954 // 修改类名
1955 box.className = "ele";
1956 // 增加类名
1957 box.className = " tag"; // 添加后的结果class="ele tag"，所以赋值时一定注意tag前有个空格字符串
1958 // 删除所有类名
1959 box.className = "";
1960 </script>
1961 </body>
1962 ```
1963
1964 - 操作标签全局属性值
1965
1966 ```html
1967 <body>
1968 <img src="https://www.baidu.com/favicon.ico" class="image" />
1969 <script>
1970 var img = document.querySelector('.image');
1971 // 查看全局属性值
1972 var imgSrc = img.getAttribute('src');
1973 // 修改全局属性值
1974 img.setAttribute('src', 'img/bg_logo.png');
1975 // 删除全局属性值
1976 img.setAttribute = ('src', '');;
1977 </script>
1978 </body>
1979 ```前端大纲
上文前端大纲，是对前端内容的详述，重点***********************************************************
今日内容
前端
html5
css3
## 前端
```python
"""
所有用户能看到的界面:前端
网页、pc端的应用exe、移动端应用app、微信小程序、手环的时间界面
html5为基础的前端：网页、app、微信小程序
html5：
"""
```
"""
所有用户能看到的界面:前端
网页、pc端的应用exe、移动端应用app、微信小程序、手环的时间界面
html5为基础的前端：网页、app、微信小程序
html5：
"""
```
## HTML5是什么
```html
HTML5就是html语言，数字5是该语言的版本号；html语言开发的文件是以.html为后缀，制作运行在浏览器上展现给用户使用的前端界面，采用的语言是超文本标记语言(HyperText Mark-up Language)。
HTML5就是html语言，数字5是该语言的版本号；html语言开发的文件是以.html为后缀，制作运行在浏览器上展现给用户使用的前端界面，采用的语言是超文本标记语言(HyperText Mark-up Language)。
<b></b>
<owen></owen>
<zero>
没有对错，只有有无效果之分
```
<owen></owen>
<zero>
没有对错，只有有无效果之分
```
## 前端三剑客
```python
"""
1、html5：页面结构框架
标签 => 学会标签的嵌套结构
"""
1、html5：页面结构框架
标签 => 学会标签的嵌套结构
2、css3：页面布局与样式
3、javaScript：页面的交互逻辑
"""
```
## html知识
```python
"""
标签：由<>包裹字母开头，可以结合数字和合法字符的能被浏览器解析的标记 -- 字母 数字 -
标签有语义：<br> 换行
标签有作用范围：<h1>中间就是标签的作用范围，由标签来控制，具有默认样式</h1>
标签可以修改内容样式：<xyz style="color: red">000</xyz>
"""
标签：由<>包裹字母开头，可以结合数字和合法字符的能被浏览器解析的标记 -- 字母 数字 -
标签有语义：<br> 换行
标签有作用范围：<h1>中间就是标签的作用范围，由标签来控制，具有默认样式</h1>
标签可以修改内容样式：<xyz style="color: red">000</xyz>
转义字符：由 &与;包裹，可以使10进制数字组合，也可以使特殊单词缩写组合
> => >
< => <
> => >
< => <
指令：<>包裹由!开头
文档类型指令：<!doctype html>
注释：<!-- 注释 -->
"""
```
文档类型指令：<!doctype html>
注释：<!-- 注释 -->
"""
```
## 标签
```python
"""
单双标签之分：单标签无需内容，主功能，可以省略结束符/；双标签主内容，需要有作用域，必须明确结束标签<a></a>
"""
单双标签之分：单标签无需内容，主功能，可以省略结束符/；双标签主内容，需要有作用域，必须明确结束标签<a></a>
常用标签：
h1~h6
p
b
i
a
img
ul>li
table>tr>th|td
form>input|button|textarea|select>option
h1~h6
p
b
i
a
img
ul>li
table>tr>th|td
form>input|button|textarea|select>option
span：无语义，同行显示（不带换行）
div：无语义，换行显示（自带换行）
"""
```
div：无语义，换行显示（自带换行）
"""
```
## 标签的嵌套规则(重点)
```html
<!-- w3c分析 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面架构</title>
</head>
<body>
<div class="site">
<div class="top">
<div>
<img src="" alt="">
<form action=""></form>
</div>
<ul>
<li></li>
...
<li></li>
</ul>
</div>
<div class="mian">
<!--.left+.center+.right-->
<div class="left"></div>
<div class="center">
<div class="box1">
<h2></h2>
<div>
<p></p>
<p></p>
</div>
<h3></h3>
</div>
</div>
<div class="right"></div>
</div>
<div class="foot"></div>
</div>
</body>
</html>
```
<!-- w3c分析 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面架构</title>
</head>
<body>
<div class="site">
<div class="top">
<div>
<img src="" alt="">
<form action=""></form>
</div>
<ul>
<li></li>
...
<li></li>
</ul>
</div>
<div class="mian">
<!--.left+.center+.right-->
<div class="left"></div>
<div class="center">
<div class="box1">
<h2></h2>
<div>
<p></p>
<p></p>
</div>
<h3></h3>
</div>
</div>
<div class="right"></div>
</div>
<div class="foot"></div>
</div>
</body>
</html>
```
## css三种引入
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式</title>
<style>
.dd {
width: 200px;
height: 200px;
}
.d1 {
}
.dd.d2 {
background-color: red;
}
.d2 {
background-color: brown;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式</title>
<style>
.dd {
width: 200px;
height: 200px;
}
.d1 {
}
.dd.d2 {
background-color: red;
}
.d2 {
background-color: brown;
}
</style>
<link rel="stylesheet" href="./css/4.样式.css">
</head>
<body>
<!-- 标签的宽度会适应父级，高度由内容撑开 -->
<!--1、行间式：直接，可读性差-->
<div style="width: 200px; height: 200px; "></div>
<div style="width: 300px; height: 200px; ">123</div>
</head>
<body>
<!-- 标签的宽度会适应父级，高度由内容撑开 -->
<!--1、行间式：直接，可读性差-->
<div style="width: 200px; height: 200px; "></div>
<div style="width: 300px; height: 200px; ">123</div>
<!--2、内联式：可读性增强，复用性(文件内部复用) head->style标签-->
<div class="dd d1"></div>
<div class="dd d2"></div>
<div></div>
<div class="dd d1"></div>
<div class="dd d2"></div>
<div></div>
<!--3、外联式：团队开发，复用性(文本级别复用) head->link->外部css文件-->
<div class="pp p1"></div>
<div class="pp p2"></div>
<div></div>
</body>
</html>
```
<div class="pp p1"></div>
<div class="pp p2"></div>
<div></div>
</body>
</html>
```
## 基础选择器
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
/*优先级：按作用域大小区分，作用域越小优先级越高*/
/* !important > 行间式 > id > class > 标签 > 统配 */
/*重点： class选择器 - 单类名 多类名 */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
/*优先级：按作用域大小区分，作用域越小优先级越高*/
/* !important > 行间式 > id > class > 标签 > 统配 */
/*重点： class选择器 - 单类名 多类名 */
/*1.统配选择器*/
* {
font-size: 30px;
color: brown;
}
/*2.标签选择器：标签名*/
div {
color: orange;
}
span {
color: darkcyan;
}
* {
font-size: 30px;
color: brown;
}
/*2.标签选择器：标签名*/
div {
color: orange;
}
span {
color: darkcyan;
}
/*3.类选择器：.类名*/
.aa {
color: indigo;
}
.aa {
color: indigo;
}
/*4.id选择器：#id名*/
#bb {
color: green;
}
#bb {
color: green;
}
/*组合使用：找id为bbclass为aa的div*/
div#bb.aa {
color: red;
}
div#bb.aa {
color: red;
}
.aa {
color: red!important;
}
</style>
</head>
<body>
<div class="aa" id="bb" style="color: gold!important;">d1</div>
<div class="aa">d2</div>
<div>d3</div>
<span class="aa">s1</span>
<span>s2</span>
<span>s3</span>
</body>
</html>
```
color: red!important;
}
</style>
</head>
<body>
<div class="aa" id="bb" style="color: gold!important;">d1</div>
<div class="aa">d2</div>
<div>d3</div>
<span class="aa">s1</span>
<span>s2</span>
<span>s3</span>
</body>
</html>
```
转载于:https://www.cnblogs.com/llx--20190411/p/11116091.html
python 50 前端 html5 css3相关推荐
- 尚硅谷新版Web前端HTML5+CSS3知识点集合篇【p1-p8】
尚硅谷新版Web前端HTML5+CSS3知识点集合笔记篇 尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门) p1(22:55) 一.软件的分类: 1.系统软件 -wind ...
- 前端HTML5+CSS3静态页面开发-博文尚美
前端html5+css3静态页面开发-博文尚美 项目介绍 博文尚美是一个设计网站, 此项目由html + css 布局完成页面,对前端基础知识的入门及掌握有非常好的提升效果,对html和css的使用及 ...
- 前端HTML5+CSS3静态页面开发-京东首页
前端html5+css3静态页面开发-京东首页 项目介绍 (1)京东首页项目由html + css 布局完成页面,对前端基础知识的入门及掌握有非常好的提升效果,本项目旨在教授HTML和CSS的基础知识 ...
- 前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介 二.css语法规范 三.css代码风格 四.css选择器的作用 五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
- Web前端html5+css3前端开发入门学习笔记
文章目录 前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...
- css3宽度变大动画_学所 前端 | HTML5+CSS3
HTML5 &CSS3 2020/09/5 啥?!HTML5是什么? "HTML5"和"HTML"有什么区别? 新增的HTML5特性有多好用? HTML ...
- 前端 html5 css3 框架,UI,分享,CSS3,HTML5,前端框架
随着HTML5和CSS3以及网页设计布局的全面翻新创新改革.让很多网页设计者和界面设计师都知道一个道理.就是去掌握一套对应的工具包.这不仅仅是未来提高工作的效率,还能更好的去处理网页整体视觉效果.界面 ...
- 最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了
基于黑马前端视频学习的CSS3笔记,每一天的知识点都放在一起,方便学习查阅 ==CSS第一天== 一.css简介 二.css语法规范 三.css代码风格 四.css选择器的作用 五.css基础选择器 ...
- php+python+java+c+html5+css3等各类IT视频教程合集500T
课程持续更新,以下所有课程均免费 ID 课程名称 1 传智平面设计+网页设计视频教程合集 2 传智安卓开发视频教程大全 3 传智前端视频教程合集 4 传智大数据教程hadhoop[含笔记] 5 Jav ...
最新文章
- JZOJ 5462. 【NOIP2017提高A组冲刺11.8】好文章
- 双绞线传输距离_光纤传输有哪些特点 光纤传输原理介绍【图文】
- 暂时关闭 windows 病毒防护
- shell编程 之 test命令
- 十三不香了？不止去掉刘海，iPhone14或改用QLC闪存：最高2TB容量
- 边缘计算框架_黑科技 | 英特尔发布边缘计算加速框架最新版本 | OpenVINO 2019R02...
- 运维工程师必会的109个Linux命令（1）
- Web Client Software Factory系列（3）：View-Presenter模式
- docker 源码分析 三（基于1.8.2版本），NewDaemon启动
- 通过vba代码将word转换为PDF
- zbbz插件使用教程_zbbz加载成功用不了_坐标标注插件zbbz【CAD教学】
- 浮动时间怎么计算_自由浮动时间 VS 总浮动时间
- python调用rf关键字_RobotFramework之关键字
- apkmirror_how to download your app from apkmirror to get the lastest app version
- 拒绝烂图表，Excel商务图表小白篇
- linux串口操作及设置
- 关于笔记本电脑触摸板失灵的解决办法
- 内核领域-功耗机型的续航基线优化问题-技术调研报告-王井玉_20211216
- JS实现五星好评效果
- 区块链+跨境支付的应用及案例分析