## 前端 ```python 所有用户能看到的界面:前端 网页、pc端的应用exe、移动端应用app、微信小程序、手环的时间界面 html5为基础的前端：网页、app、微信小程序 html5： HTML5就是html语言，数字5是该语言的版本号；html语言开发的文件是以.html为后缀，制作运行在浏览器上展现给用户使用的前端界面，采用的语言是超文本标记语言(HyperText Mark-up Language)。 <b></b> <owen></owen> <zero> '没有对错，只有有无效果之分' ``` ## 前端三剑客 ```python """ 1、html5：页面结构框架 标签 => 学会标签的嵌套结构 2、css3：页面布局与样式 3、javaScript：页面的交互逻辑 """ ``` ## html知识 ```python 'html5的文档有三种类型的标记： 标签<> 转义字符 指令 标签：由<>包裹字母开头，可以结合数字和合法字符的能被浏览器解析的标记 -- 字母 数字 - '标签三个特性 标签有语义：<br> 换行 标签有作用范围：<h1>中间就是标签的作用范围，由标签来控制，具有默认样式</h1> 标签可以修改内容样式：<xyz style="color: red">000</xyz> '转义字符： 由 &与;包裹，可以使10进制数字组合，也可以使特殊单词缩写组合 > (大于号)=> > < （小于号=> < '指令： <>包裹由!开头 文档类型指令：<!doctype html> 注释：<!-- 注释 --> ``` ## 标签 ```python 单双标签之分：单标签无需内容，主功能，可以省略结束符/；双标签主内容，需要有作用域，必须明确结束标签<a></a> 常用标签： h1~h6 标题 p 段落 b 加粗 i 斜体 a 超文本链接 img 图片连接（本地或www.） ul>li 列 table>tr>th|td 表格 th:b表格头，tr:单元格，td:单元格内容 标签部分： 1. table表格标签 2. caption表格标题标签 3. thead表格头部区域标签，tbody表格主体区域标签，tfoot表格尾部区域标签，均可以省略别写 4. tr表格行标签 4. th表格标题单元格标签，td表格普通单元格标签 form>input|button|textarea|select>option 表单（用来提交后台） <form action="" method=""> <input type="text" name="user" placeholder="请输入姓名" width="50"> <input type="password" name="密码" value="123456"> #必须有name才能提交后台，value是提交的值。没有value，用户输入值，默认作为value值提交给后台。单选框、复选框、选择列表不能作为value值提交，需要编写value值。 <input type="color"> <input type="file"> <input type="radio" name="gender" ，value="male"> <input type="radio" name="gender"> <input type="submit" value="登录"> <select name="subject" multiple> <option value="chinese">语文</option> <option value="math">数学</option> <option value="python">python</option> </select> <!--文本域--> <textarea></textarea> <!--三个按钮--> <button type="button">按钮</button> <button type="reset">重置</button> <button type="submit">提交</button> </form> span：无语义，同行显示（不带换行） div：无语义，换行显示（自带换行） ``` ## 标签的嵌套规则、页面架构（重点） ```python <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面架构</title> <link rel="stylesheet" href="./css/4.样式.css"> </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> <div class="pp p1"></div> <div class="pp p2"></div> <div></div> </body> </html> ``` ## 样式的引入 ```python <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>样式</title> <style> .dd { 200px; height: 200px; } .d1 { background-color: yellow; } .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; background-color: pink;"></div> <div style=" 300px; height: 200px; background-color: greenyellow;">123</div> <!--2、内联式：可读性增强，复用性(文件内部复用) head->style标签--> <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> ``` ## 基础选择器 ```python <!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; } /*3.类选择器：.类名*/ .aa { color: indigo; } /*4.id选择器：#id名*/ #bb { color: green; } /*组合使用：找id为bbclass为aa的div*/ 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> ```