编辑器
pycharm:JetBrains 捷克的软件开发公司
sublime:程序员Jon Skinner开发的文本编辑器
Hbuild:数字天堂
webstrom:JetBrains 捷克的软件开发公司旗下的JavaScript开发工具
atom:Atom 是 Github专门为程序员推出的一个跨平台文本编辑器
前端
#概念
#广义:用户能看见并且交互的界面展示
#狭义:运行在浏览器上的页面
#学习的语言
#htlm5=>(h5架构 + css3布局 +javascript逻辑) 相当于 一个房子的架构,装饰,然后让它具有商业价值
#为什么使用html5?
#功能强大,可以进行 网页编写 | 移动端应用编写 |(客户端编写)
#前后台分离的开发方式 =>通过接口完成数据交互 =>后台可以千千万,前端就是h5
HTML: 超文本标记语言
#学习html的目的:完成页面的结构的搭建,负责的是页面的结构
#html属于标记语言,标记语言非编程语言,不具备编程语言具备的程序逻辑
#html三大组成:
'''
标签:被尖括号包裹,由字母开头包含的合法字符,可以被解释器解析的标记.
指令：被尖括号包裹，由!开头的标记。eg:设置文档类型:<!doctype html> 注释:<!-- -->
转义字符：被&与;包裹的特殊字母组合或#开头的十进制数。eg:< > 实际开发中几乎不用了解
'''
标签
#what
#概念:被<>包裹由字母开头,可以结合合法字符(-|数字),能被浏览器解析的特殊字符
#why
#标签具有特定的功能:换行 | 设置页面的字符编码集 | 控制文字体颜色和大小 | 加载图片与视频
<br> #换行
<meta charset='utf-8'> #设置页面字符编码集
<div style="color: #89ff43;font-size: 300px"></div> #控制文字颜色和大小
#注意
#标签都有头有尾,用/来标识标签的尾
页面
<!-- html的注释: 一个html页面有且只有一个页面模板 -->
<!doctype html>
<html>
<head>
<!-- 字符编码 -->
<meta charset="utf-8">
<!-- 页面标签的标题 -->
<title>页面</title>
<!-- 内部或外部的css样式 | js脚本 | 页面其他设置 -->
</head>
<body>
<!-- 所有页面显示的内容: 文本 | 图片 | 视频 | 超链接 | 表格 | 表单 ... -->
<!-- js脚本 -->
</body>
</html>
常用标签
# 学习的目的: 使用标签的语义与功能 | 完成页面架构的搭建(div)
# 1.div: "三无", 无语义,无功能,无样式,可以随意使用,完成页面架构的搭建
# 2.h1: 页面总标题, 代表页面'整体含义', 出现一次即可
<!--标题标签 h1-h6-->
<!--h1标签: 页面基本上都会出现, 有且只要一个, 用来标识整个页面的标题 -->
<h1>一级标题</h1>
<h3>三级标题</h3>
# 3.列表: ul>li*5 #重点 常用无序列表项
ul>li{无序列表项}*5
按tab键得到如下结果:
<ul>
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
ol>li{有序列表项}*5
<ol start="10" type="I">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
# 4.p: 段落标签 <p>段落</p>
# 5.img: 图片标签, src(数据源), alt(资源加载失败的文本提示)
<img src="https://ps.ssl.qhimg.com/dm/196_123_/t0120cdcea452f2bbff.jpg"
alt="海贼王"
title="给我个面子"
width="200"> #等比设置宽高
# 6.a: 超链接标签, href(超链接地址), target(转跳方式_self|_blank)
#有四种状态:没访问的状态,正要访问的状态,悬浮状态,访问后的状态
<!--超链接标签-->
<!--href: 链接的地址-->
<!--target: _self|_blank --> #_self:自身页面转跳 _blank:新开页面转跳
<!--title: 鼠标悬浮提示, 可以给任意标签添加-->
<a href="https://www.baidu.com" target="_blank" title="鼠标悬浮提示">前往百度</a>
#https 安全性能比http高,但是访问速度降低
<!--锚点: 快速定位到页面指定位置-->
<a name="top" id="top"></a>
<div style="height: 2000px"></div>
<a href="#top">返回Top</a>
<!--总结: 通过a的name或普通标签的id设置锚点,再通过另一个a的href属性,值为#加锚点名,转跳到设置的锚点位-->
# 7.常用的文本类标签: span i b
<span>文本标签</span>
<i>斜体</i><em>斜体方式强调</em>
<b>加粗</b><strong>加粗方式强调</strong>
<sup>上角标</sup><sub>下角标</sub>
#了解
#表格
#<hr>分割线
#<pre>原文本</pre>
CSS: 样式层级表
# 学习CSS的目的: 完成页面布局(还原设计稿)
# 三大组成部分
'''
选择器：由标签、类、id单独或组合出现 #重点
作用域：一组大括号包含的区域
样式块：满足css连接语法的众多样式 #多条样式,字体多大,什么颜色等
'''
选择器
# what: 用来将css与html建立关联的桥梁, 称之为css选择器
# why: 将原来出现在标签内部的样式分离开来, 可以用一个个选择器加以管理, 达到页面与样式的解耦合目的, 从而提高代码的复用性与开发效率
# 本质: 就是页面标签的某种名字
css三种引入方式
# 1.行间式
'''
i)写在标签的style属性中
ii)属性 与 属性值 间用:赋值
iii)属性 与 属性 之间用;隔开
eg:<div style=" 100px;height: 100px;background-color: red"></div>
'''
# 2.内联式
'''
i)写在style标签中(style标签一般出现在head标签中)
<style>
p{
150px;
height: 120px;
background-color: greenyellow;#这三个样式组成样式快
} #{}就是作用域 p是选择器
</style>
ii)用选择器与html建立连接
iii)样式块书写在作用域内
<p></p>
'''
# 3.外联式
'''
i)css样式完全与html文件脱离, 形成单独的.css文件, 样式书写在.css文件中
h3 {
80px;
height: 80px;
background-color: darkgreen;
border-radius: 50%;
}
ii)用选择器与html建立连接
iii)样式块书写在作用域内
iv)要将.css文件与.html文件建立关联 => <link rel="stylesheet" href="css文件的相对路径">
#rel:样式层级表 href:数据源
'''
# 注: 选择器的应用场景在 内联式 和 外联式
'''
总结:
开发: 最常用的是外联式, 内联与行间辅助样式布局
测试: 内联式, 可读性最强, 且解耦有复用性
行间的应用场景: 最简单粗暴, js操作的样式都是行间式
'''