一、编辑器
pycharm | sublime | Hbuild | webstrom | atom
二、前端
# 前端概念
# 广义: 用户能看见并且交互的展示界面
# 狭义: 运行在浏览器上的页面
# 学习的语言
# html5 => (h5架构 + css3布局 + javascript逻辑)
# 网页编写 | 移动端应用编写 | (客户端编写)
# 前后台分离 开发方式 => 通过接口完成数据交互 => 后台可以千千万,前端就是h5
三、HTML: 超文本标记语言
# 学习html的目的: 完成页面结构的搭建 (什么时候用什么标签) # html属于标记语言: 标记语言为非编程语言，不具备编程语言具备的程序逻辑 # html三大组成: ''' 标签：被尖括号<>包裹，由字母开头包含合法字符的，可以被浏览器解析的标记。eg:系统标签，自定义标签; 指令：被尖括号<>包裹，由!开头的标记。eg：<!doctype html>（声明文件类型） <!-- -->（注释） <!-- 指令: 由<>包裹, !开头的标记(两个):文档类型 | 注释 --> <!--注: 文档类型必须出现在最上方--> <!--注: html语法不区分大小写 --> 转义字符：被&与;包裹的特殊字母组合或#开头的十进制数。eg:< 小于 < | > 大于 > | 空格 '''
1、标签
# what # 标签的概念: 被<>包裹由字母开头,可以结合合法字符(-|数字),能被浏览器解析的特殊符号 # why # 标签具有特定的功能: 换行 | 设置页面字符编码集 | 控制文本字体颜色与大小 | 加载图片与视频 # 注意 # 标签都有头有尾, 用/来标识标签的结束(用来标识尾) eg：<h1></h1>结尾标识
2、页面
# HTML页面模板 <!-- html的注释: 一个html页面有且只有一个页面模板 --> <html> <head> <!-- 字符编码 --> <meta charset="utf-8"> <!-- 页面标签的标题 --> <title>页面</title> <!-- 内部或外部的css样式 | js脚本 | 页面其他设置 --> </head> <body> <!-- 所有页面显示的内容: 文本 | 图片 | 视频 | 超链接 | 表格 | 表单 ... --> <!-- js脚本 --> </body> </html>
3、常用标签
# 学习的目的: 使用标签的语义与功能 | 完成页面架构的搭建(div) # 1.div: "三无", 无语义,无功能,无样式, 完成页面架构的搭建 # <div></div> 常用于整合结构 将一段独立的代码放入其中 # 2.h1: 页面总标题, 代表页面'整体含义', 出现一次即可 # 3.列表: ul>li*5 （简化后的书写方式） 无序列表 得到的结果为： <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> # 注： 有序列表为ol # 4.p: 段落标签 段落自带换行 # 5.img: 图片标签, src(数据源), alt(资源加载失败的文本提示) # <!--src: 数据源 --> # <!--alt: 资源加载失败的文字提示 --> # <!--width|height: 设置一个,另一个会等比缩放(同时设置很可能导致图片失真)--> # 6.a: 超链接标签, href(超链接地址), target(转跳方式_self|_blank), 锚点 # <!--href: 链接的地址--> # <!--target: _self|_blank --> # <!--title: 鼠标悬浮提示, 可以给任意标签添加--> # eg ：<a href="https://www.baidu.com" target="_blank" title="鼠标悬浮提示">前往百度</a> #b：<!--锚点: 快速定位到页面指定位置--> eg:<a href="#top">返回Top</a> 返回顶部 # 7.常用的文本类标签: span i b # <span>文本标签</span> # <i>斜体</i><em>斜体方式强调</em> # <b>加粗</b><strong>加粗方式强调</strong> # <sup>上角标</sup><sub>下角标</sub> # 8.表格标签:table <!--table>( caption{标题}+ (thead>tr>th{标题}*3)+ (tbody>(tr>td{单元格}*3)*2)+ (tfoot>tr>td{单元格}*3) )--> # 创建表格的简写方式 <!--table border: 表格边框宽度 cellspacing: 单元格之间的距离 rules: all(全部) | groups(组线) | rows(行线) | cols(列线) cellpadding: 内容距上距左的距离 --> # 为表格设置参数 案列： <table border="10" width="500" height="300" cellspacing="0" rules="all" cellpadding="20"> <caption>表格标题</caption> <thead> <tr> <!--th{标题}*3--> <th>标题</th> <th>标题</th> <th>标题</th> </tr> </thead> <tbody> <!--(tr>td{单元格}*3)*2--> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tbody> <tfoot> <!--tr>td{单元格}*3--> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tfoot> </table>
四、CSS: 样式层级表
# 学习CSS的目的: 完成页面布局(还原设计稿)
# 三大组成部分
'''
选择器：由标签、类、id单独或组合出现
作用域：一组大括号包含的区域
样式块：满足css连接语法的众多样式
'''
1、选择器
# what: 用来将css与html建立关联的桥梁, 称之为css选择器
# why: 将原来出现在标签内部的样式分离开来, 可以用一个个选择器加以管理, 达到页面与样式的解耦合目的, 从而提高代码的复用性与开发效率
# 本质: 就是页面标签的某种名字
2、css三种引入方式
# 1.行间式 ''' i)写在标签的style属性中 ii)属性 与 属性值 间用:赋值 iii)属性 与 属性 之间用;隔开 ''' # 2.内联式 ''' i)写在style标签中(style标签一般出现在head标签中) ii)用选择器与html建立连接 iii)样式块书写在作用域内 ''' # 3.外联式 ''' i)css样式完全与html文件脱离, 形成单独的.css文件, 样式书写在.css文件中 ii)用选择器与html建立连接 iii)样式块书写在作用域内 iv)要将.css文件与.html文件建立关联 => <link rel="stylesheet" href="css文件的相对路径"> ''' # 注: 选择器的应用场景在 内联式 和 外联式 ''' 总结: 开发: 最常用的是外联式, 内联与行间辅助样式布局 测试: 内联式, 可读性最强, 且解耦有复用性 行间的应用场景: 最简单粗暴, js操作的样式都是行间式 '''
案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>样式导入</title> <style> /*css注释: 书写在style标签内部的要采用css语法*/ /* p: 选择器 {}: 作用域 宽高背景颜色: 样式块 */ p { width: 150px; height: 150px; background-color: yellow; } h2 { width: 50px; height: 50px; background-color: red; } </style> <link rel="stylesheet" href="css/test.css"> </head> <body> <!--1.行间式--> <!-- i)写在标签的style属性中 ii)属性 与 属性值 间用:赋值 iii)属性 与 属性 之间用;隔开 --> <div style="width: 100px;height: 100px; color: rgb(17, 119, 0);">></div> <div style="width: 100px;height: 100px; color: rgb(17, 119, 0);">></div> <!--2.内联式--> <!-- i)写在style标签中(style标签一般出现在head标签中) ii)用选择器与html建立连接 iii)样式块书写在作用域内 --> <p></p> <p></p> <h2></h2> <h2></h2> <!--3.外联式--> <!-- i)css样式完全与html文件脱离, 形成单独的.css文件, 样式书写在.css文件中 ii)用选择器与html建立连接 iii)样式块书写在作用域内 iv)要将.css文件与.html文件建立关联 --> <h3></h3> <h3></h3> <!--注: 用link标签将css文件与html文件建立连接 <link rel="stylesheet" href="css文件的相对路径"> --> <!--总结: 开发: 最常用的是外联式, 内联与行间辅助样式布局 测试: 内联式, 可读性最强, 且解耦有复用性 行间的应用场景: 最简单粗暴, js操作的样式都是行间式 --> </body> </html>