编辑器
pycharm,sublime,hbuild,webstorm,atom
前端概念
广义:用户能看见并且交互的显示页面
狭义:运行在浏览器上的页面
学习的语言
html5 => (h5架构 + css3布局 + javasript逻辑)
网页编写 | 移动应用编写 | (客户端编写)
前后台分离 开发方式 => 通过接口完成数据交互 => 后台可以千千万,前端就是h5
HTML(超文本标记语言)
学习html的目的:完成页面结构的构建(什么时候用什么标签)
html属于标记语言:标记语言非编程语言,不具备编程语言具备的逻辑
html三大组成:
标签：被尖括号包裹，由字母开头包含合法字符的，可以被浏览器解析的标记。eg:系统标签，自定义标签
指令：被尖括号包裹，由!开头的标记。eg:<!doctype html>
标签
1.标签的概念
什么是标签
页面
一个html有且只有一个页面模板,多了浏览器会只解析成一个,如果没写的话,浏览器会自动加一个页面模板
常用标签
输入标签吗,按tab,会自动创建<>和</>,这是一个插件实现的,emmet,
.body.name+.body.name之后按tab自动生成层级标签
学习的目的:使用标签的语义与功能,完成页面架构的搭建(用div来完成)
1.div:'三无',无语义,无功能,无样式,完成页面的架构
2.h1:页面总标题,代表页面的'整体含义',出现一次即可
3.列表:ul>li*5 (无序列表)
4.p:段落标签
5.img:图片标签,src(数据源),alt(资源加载失败的文本提示)
6.a标签:超链接标签,href(超链接点击后跳转的地址),target(转跳方式_self在当前页面跳转,_blank打开新页面跳转)
7.常用的文本类标签:spam,i,b
CSS:样式层级表
学习CSS的目的:完成页面布局(还原设计稿)
三大组成部分:
选择器：由标签、类、id单独或组合出现
作用域：一组大括号包含的区域
样式块：满足css连接语法的众多样式
选择器
what:用来将CSS与HTML建立关联的桥梁,称之为css选择器
why:将原来出现在标签内部的样式分离开来,可以用一个个选择器加以管理,达到页面与样式的解耦合目的,从而提高代码的复用性和开发效率
本质:就是页面标签的某种名字
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操作的样式都是行间式