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 像后台开发语言的特殊字符 一样，会被解析为换行，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=" 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 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 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- 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 150px; /* 子标签两行显示 */ 1100 100px; /* 子标签三行显示 */ 1101 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 {
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 {
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=" 200px; height: 200px; "></div>
<div style=" 300px; height: 200px; ">123</div>
</head>
<body>
<!-- 标签的宽度会适应父级，高度由内容撑开 -->
<!--1、行间式：直接，可读性差-->
<div style=" 200px; height: 200px; "></div>
<div style=" 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>
```