pycharm:JetBrains 捷克的软件开发公司 sublime:程序员Jon Skinner开发的文本编辑器 Hbuild:数字天堂 webstrom:JetBrains 捷克的软件开发公司旗下的JavaScript开发工具 atom:Atom 是 Github专门为程序员推出的一个跨平台文本编辑器
#概念 #广义:用户能看见并且交互的界面展示 #狭义:运行在浏览器上的页面 #学习的语言 #htlm5=>(h5架构 + css3布局 +javascript逻辑) 相当于 一个房子的架构,装饰,然后让它具有商业价值 #为什么使用html5? #功能强大,可以进行 网页编写 | 移动端应用编写 |(客户端编写) #前后台分离的开发方式 =>通过接口完成数据交互 =>后台可以千千万,前端就是h5
#学习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的目的: 完成页面布局(还原设计稿) # 三大组成部分 ''' 选择器:由标签、类、id单独或组合出现 #重点 作用域:一组大括号包含的区域 样式块:满足css连接语法的众多样式 #多条样式,字体多大,什么颜色等 '''
# what: 用来将css与html建立关联的桥梁, 称之为css选择器 # why: 将原来出现在标签内部的样式分离开来, 可以用一个个选择器加以管理, 达到页面与样式的解耦合目的, 从而提高代码的复用性与开发效率 # 本质: 就是页面标签的某种名字
# 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操作的样式都是行间式 '''