##前端导读
“”“ 接下来我们进入前端知识的学习，前端的学习目的就是为我们开发的应用程序提供一个与用户进行交互的界面，前端分为HTML5、CSS3、JavaScript三大部分，我们学习内容共分为HTML5、CSS3、JavaScript、jQuery前端框架及Bootstrap前端框架五个课程内容来介绍。 ”“” #1、前端三剑客 1、html5：页面结构框架 内容 标签 => 学会标签的嵌套结构 2、css3：页面布局与样式 外观 3、javaScript：页面的交互逻辑 动作 #2、浏览器输入网址发送了几件事？ 1.输入网址 2.朝服务端发送请求 3.服务器接收请求并查询浏览器想要的数据返回给浏览器 4.浏览器拿到数据展示页面
##HTML5
#1、HTML5是什么 HTML5就是html语言，数字5是该语言的版本号；html语言开发的文件是以.html为后缀，制作运行在浏览器上展现给用户使用的前端界面，采用的语言是超文本标记语言(HyperText Mark-up Language)。 #2、HTML5如何学习 学习方向：掌握转义字符、指令和标签三大组成部分 学习目的：通过标签知识完成搭建页面整体架构 #2-1、转义字符（了解） 由 &与;包裹，可以使10进制数字组合，也可以使特殊单词缩写组合 1. 空格： 2. 字符"：" 3. 字符&：& 4. 字符<：< 5. 字符>：> #2-2、指令 被<>包裹，以!开头的特殊符号，称之为指令。 指令中不区分大小写，前端需要掌握文档指令和注释指令两个即可 1. 文档指令：<!DOCTYPE html> -- 需要出现在一个html文件的最上方，代表该文件采用html5语法进行编写文件的 2. 注释指令：<!-- --> 单行注释 <!-- 这里书写的就是html5语法下的注释，不会被浏览器解析展现给用户看 --> 多行注释 <!-- 这是多行注释 --> #2-3、标签（重点） 由<>包裹字母开头，可以结合数字和合法字符的能被浏览器解析的标记 -- 字母 数字 - 标签有语义：<br> 换行 标签有作用范围：<h1>中间就是标签的作用范围，由标签来控制，具有默认样式</h1> 标签可以修改内容样式：<xyz style="color: red">000</xyz> 单双标签之分：单标签无需内容，主功能，可以省略结束符/；双标签主内容，需要有作用域，必须明确结束标签<a></a>
##标签
#1、页面结构相关的系统标签 1. 页面根标签：<html></html> 2. 页面头标签：<head></head> 3. 页面体标签：<body></body> 4. 页面标题标签：<title></tile> 5. 元标签：<meta /> 6. 链接标签：<link /> 7. 样式标签：<style></style> 8. 脚本标签：<script></script> #2、简单的系统标签 1. 标题标签：<h1></h1> ... <h6></h6> 2. 段落标签：<p></p> 3. 换行标签：<br /> 4. 分割线标签：<hr /> 5. 行文本标签：<span></span> 6. 斜体标签：<i></i> 7. 加粗标签：<b></b> 8. 图片标签：<img /> 9. 超链接标签：<a></a> 7. "架构"标签：<div></div> #3、复杂的系统标签 1. 无需列表标签：<ul><li></li></ul> 2. 表格标签：<table><!-- 包含大量的表格子标签 --></table> 3. 表单标签：<form><!-- 包含大量的表单子标签 --></form>
#标签的嵌套规则
<!-- w3c分析 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面架构</title>
</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>
</body>
</html>
##CSS3
#1、CSS3是什么 CSS3就是css语言，数字3是该语言的版本号；css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中），采用的语言是级联样式表 （Cascading Style Sheet），也属于标记语言。 #2、CSS3如何学习 学习方向：从css代码书写位置、css选择器和css具体样式设置三部分进行学习 学习目的：完成页面样式布局和位置布局
##CSS代码中书写位置（重点）
css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。 #三种书写位置案例 .代表找class #找id <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>样式</title> <style> /* css语法下的注释语法 */ /* 设置页面中所有h2标签宽高背景颜色 */ h2 { width: 50px; height: 50px; background-color: orange; } /* 设置页面中所有h3标签宽高背景颜色 */ h3 { width: 100px; height: 100px; background-color: red; } .dd { width: 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> <h2></h2> <h3></h3> <!-- 标签的宽度会适应父级，高度由内容撑开 --> <!--1、行间式：直接，可读性差--> <div style="width: 200px; height: 200px; background-color: pink;"></div> <div style="width: 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> #三种书写位置总结 行间式控制样式最直接，但是样式多了直接导致页面可读性变差，且样式相同的标签样式也需要各自设置，复用性差； 内联式可以用一套样式块同时控制多个标签，具有样式的复用性，但是css样式代码还是写在html文件中，在项目开发下，代码量剧增，导致html文件变得臃肿，不利于代码维护； 外联式将css样式移到外部css文件中，不仅避免项目开发下html文件的臃肿问题，同时具有一套代码块控制多个标签，一个css样式文件服务于多个html两种复用性的好处，但是在学习阶段代码量不大时，样式不需要服务于多个html页面时，前面两种方式显然显得更便利。 在行间式中，写在标签内部的样式自然是用来控制该标签的样式，那写在内联式和外联式中的样式又是通过什么样的联系来控制对应页面中标签的样式呢？答案就是用于建立css与html之间联系的css选择器。
##CSS选择器
#基础选择器：注意各个选择器的优先级********** <!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.类选择器：.类名*/（提倡使用） /* 特定标识符 点(.) 页面中class属性值为box的标签都能被匹配*/ /* class选择器控制页面中标签全局属性class值为class择器名的所有标签*/ .aa { color: indigo; } /*4.id选择器：#id名*/ /* 特定标识符 井号(#) 页面中id属性值为box的唯一标签备匹配，id具有唯一性：一个页面中所有标签的id属性值不能重名*/ /* id选择器控制页面中标签全局属性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>