目录
一、前端导言
1.现阶段前端学习的内容：HTML、CSS、JavaScript、jQuery、bootstrap
2.这些内容分别指的是：
1.html：页面架构
2.css：页面布局
3.javascript：页面交互
4.jquery：js的工具包
5.bootstrap：快速实现页面搭建的框架
前端：写网页、用户能看到的一切交互页面、app、小程序
二、HTML
1.HTML导读
1.内容概况：
1.什么是HTML：超文本标记语言
1.1 超文本：文本、图片、音频、视频、超链接
1.2 标记：符号、标签，用于解释，没有逻辑
2.语言的组成：转义字符、指令、标签
3.学习HTML的目的：完成页面架构的搭建（用什么标签完成什么样的标签嵌套关系）
2.熟悉HTML语法：
<!--文档指令，建议出现在HTML文件的最上方，一个HTML文件只出现一次，HTML表示该文件采用HTML5语法进行编写-->
<!--每搭建一个页面就必须要写一个版本类型的语句，如果多写了，它会被放到body中-->
<!doctype html>
<!--html语言不区分大小写，可以在语句的任何位置使用大小写字母，推荐用小写，更容易理解-->
<!-- <html></html>是页面标签的意思，一个HTML文件只出现一次，包含所有页面内容，且只有头标签head与体标签body两个子标签，这两个子标签在一个HTML文件中都是只出现一次-->
<html>
<!-- <head></head>头标签：它包含页面样式、脚本、后勤操作（页面编码、标题和图标）-->
<head>
<!--页面标题标签，用来显示页面标签标题，如登录百度页面，页面标签标题显示: 百度一下，你就知道-->
<title>第一个页面</title>
<meta charset="utf-8"> <!-- 规定文件编码的元标签，因为元标签只需要标注具体功能，不需要包裹内容，所以代表标签结束的斜杠写在标签的最后即可（可以省略）-->
<style></style> <!--页面样式标签，用来存放出现在head中的css3样式代码的标签-->
<script></script> <!--脚本标签，用来存放出现在head中的js脚本代码的标签-->
</head>
<!-- <body></body>体标签：页面显示内容的存放区域、样式、脚本-->
<body>
helloworld
<!--页面中所有显示给用户查看的内容：普通文本、图片、音频等等，一般都放在这里-->
<!--不显示给用户查看的内容：简单与复杂的系统标签、脚本标签以及隐藏的内容等，一般也会出现在这里-->
<style></style> <!--页面样式-->
<script></script> <!--脚本-->
<!--页面体标签的结束标识，与页面体标签的开始一同包裹页面主体部分所有显示给用户查看的内容（还包含其他不显示的内容）-->
</body>
<!--页面根标签的结束标识，页面的所有内容都应该出现在html标签内部（被HTML标签开始与结束包裹）-->
</html>
<!--如果在一个页面中写了多个文档指令或页面标签，则除了第一个的会保留原样外，其他重复的都会放在第一个页面的体标签中-->
3.补充：
<!-- 关键词元标签，让该页面更容易被百度这样的搜索引擎，通过关键词搜索到-->
<meta name="keywords" content="8-12个以英文逗号隔开的单词或词语">
<!-- 网页描述元标签，也是辅助于让页面更容易被搜索引擎搜索到-->
<meta name="description" content="80字以内的介绍网站的文字">
<!-- 屏幕适配元标签，让该页面适配移动端屏幕尺寸-->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<!-- 设置页面标签 图片链接标签 -->
<link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />
2.HTML相关内容
1.指令：
1.被尖括号包裹，以感叹号开头的书写格式就是指令
2.比如注释：<!-- -->，可以在里面用一个减号，但是推荐两个减号的写法
3.又比如指定文档类型的文档指令：<!doctype html>
2.转义字符(http://tool.oschina.net/commons?type=2)：
1.被and和分号包裹，包裹内容可以是井号与数字的组合，也可以是多个字母
2.比较常用的有：
2.1 < —— 小于(<)
2.2 > —— 大于(>)
2.3 —— 空格
2.4 © —— 版权
3.标签：
1.被尖括号包裹，以字母开头，后面可以接数字或减号
2.系统标签：h1~h6、P、span、div、i、b、a、img、hr、br、table、form、input
3.自定义标签：满足合法命名规范的所有标签
4.注意：HTML语言中，系统建议只使用系统标签，不建议使用自定义标签
3.HTML常用标签
1.自定义标签：
提倡规范命名的合法自定义标签
<num></num>
<my-tag></my-tag>
<student1></student1>
2.系统标签：
页面结构相关的系统标签
1.页面根标签：<html></html>
2.页面头标签：<head></head>
3.页面体标签：<body></body>
4.页面标题标签：<title></title>
5.元标签：<meta /> (熟练之后单标签中斜杠可写可不写)
6.链接标签：<link />
7.样式标签：<style></style>
8.脚本标签：<script></script>
简单的系统标签
1.标题标签：<h1></h1> ... <h6></h6>
2.段落标签：<p></p>
3.换行标签：<br />
4.分割线标签：<hr />
5.行文本标签：<span></span>（一般用于嵌套其他文本标签）
6.斜体标签：<i></i> (推荐) 或 <em></em> (以斜体作为强调的强调标签)
7.加粗标签：<b></b> (常用) 或 <strong></strong> (以加粗作为强调的强调标签)
8.图片标签：<img />
9.超链接标签：<a></a>
10.“架构”标签：<div></div>
11.角标标签：<sup></sup> (上角标) <sub></sub> (下角标)
复杂的系统标签（组合标签）
1.无需列表标签：<ul><li></li></ul>
2.表格标签：<table><tr><td></td></tr></table>或<table><tr><th></th></tr></table>
<table><!-- 包含大量的表格子标签 --></table>
3.表单标签：<form><input></input></form>
<form><!-- 包含大量的表单子标签 --></form>
3.实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<!-- 重点：<h1></h1>的语义：该页面的主标题 -->
<h1 title="样式，悬浮在此行文字的字体上">
一级标题
</h1>
<h2>
二级标题
</h2>
<h6>
六级标题
</h6>
正文文本 正文文本 <!--如果不加空格转义字符 或<br>换行标签，则无论空多少格或换行，都只会空出固定的一点点空隙-->
<!-- <p></p>段落标签：自带换行，有段落间距（不是行间距）-->
<p>
段落之间的间距不是行间距
</p>
<p>
一般段落间距比行间距要大
</p>
<!-- <br>换行标签，给文字换行-->
正文文本 <br>
正文文本 <br>
<!-- <span></span>行文本标签 -->
<span>一般用来嵌套其他文本类标签，比如：这是<sup>上角标</sup>，这是<sub>下角标</sub></span>
<!--<i></i>加粗标签-->
<i>加粗</i>
<!-- <a></a>:超链接标签-->
<!-- 全局属性href中写超链接的目标地址；全局属性target值为"_blank"时，会新开一个标签页面跳转到目标页面，默认值是_self，是在当前页面跳转 -->
<a href="https://www.baidu.com" target="_blank">百度</a><br>
<!-- 图片标签；属性title中的值可以在鼠标悬停时提示文本内容；当img标签资源加载失败时，会显示属性alt的值 -->
<img title="幽灵公主" alt="幽灵公主" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1564404410&di=d9fbb4c06e3fc427341ecd9dbc98488c&src=http://b-ssl.duitang.com/uploads/item/201609/30/20160930174809_BAyu3.thumb.700_0.jpeg" >
<!-- 列表标签：无序<ul><li></li></ul> 有序<ol><li></li></ol>
<!-- 可以用快捷方法：ul>li{第$列}*5，最后按Tab键-->
<ul>
<li>第一列</li>
<li>第二列</li>
</ul>
<!-- 表格标签：table>tr>th 或者 table>tr>td -->
<!-- tr:行 th:标题单元格 td:普通单元格 -->
<!-- border:边框；cellspacing:单元格的间距，最小为0,但是单元格之间是两条线，可以用rules="all"处理成一条线；cellpadding：单元格的内边距（文本于内边框的间距）-->
<table border="1" width="500" height="300" rules="all" cellspacing="0" cellpadding="10">
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<!--th{标题}*3,Tab键-->
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<!--表体-->
<tbody>
<!--(tr>td{$}*3)*2，tab键，两行三列-->
<!--rowspan:合并行-->
<!--colspan:合并列-->
<tr>
<!--将两行合成一行-->
<td rowspan="2">单元格</td>
<!--将两列合成一列-->
<td colspan="2">单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<!--表尾-->
<tfoot>
<tr>
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
</tr>
</tfoot>
</table>
</body>
</html>
4.表单：
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>表单</title>
</head>
<body>
<!--form的作用：完成前后台数据的交互，将用户录入的信息提交给后台，或者上传文件-->
<form action="">
<p>
<!--label作为input的文本解释标签，for绑定input中的id -->
<!--value属性是表单标签的内容，用于提交给后台的数据；name是提交给后台的key，后台通过name取到输入的值；value是输入的值-->
<!--type决定标签的类型本质，可以是文本、密码、文件、按钮等等-->
<!--placeholder是文本占位符，用于显示给用户看需要输入什么内容；multiple：多选；checked默认激活；multiple和checked属于布尔类型属性，不需要赋值-->
<lable for="username">账号：</lable>
<input id="username" type="text" value="king" name="user">
</p>
<p>
<label for="password">密码：</label>
<input id="password" type="password" placeholder="请输入密码" name="psw">
</p>
<p>
<input type="hidden" value="jfksdj" name="pk">
</p>
<p>
<input type="file" name="file" multiple>
</p>
<p>
<!--type属性中的radio只能单选，checked是默认按了一次-->
男<input type="radio" value="male" name="gender" checked>
女<input type="radio" value="female" name="gender">
</p>
<p>
<!-- checkbox可以多选-->
男<input type="checkbox" value="male" name="gender" checked>
女<input type="checkbox" value="female" name="gender" checked>
其他<input type="checkbox" value="other" name="gender">
</p>
<p>
<!--button标签可以生成按钮-->
<!--button：普通按钮；reset：重置按钮；submit：提交按钮-->
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
</p>
<p>
<!--input标签中用type属性可以生成按钮-->
<input type="button" value="按钮" />
<input type="reset" value="重置" />
<input type="submit" value="登录" />
</p>
<p>
<!--文本区域标签可以生成一个可供输入文本的框-->
<textarea cols="30" rows="20">文本区域</textarea>
</p>
</form>
</body>
</html>
5.标签的分类：
按是否自带换行分类：
1.带换行：h1、p、div、table、form、tr、ul、li
2.不带换行：span、i、b、a、img、input、button、label、textarea
按单双标签分类（也即是有的标签既是开始也是结束，斜杠可以省略）：
1.单标签（主功能）：br、hr、input、img、link
2.双标签（主内容）：html、head、body、h1、p、span、div、a、label、button
注意：斜杠/ 代表标签的结尾，但是单标签可以省略，比如<br/>可以直接写成<br>
按简单标签或组合标签（复杂标签）分类：
1.组合：ul>li table>tr>td|th form>input
2.简单标签：其他
4.w3c页面架构分析
重点是将整个页面分成若干个版块，这些版块之间有明显的分区差别，然后再将各个版块细分成更小的结构，直至能够细化到具体的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面架构</title>
</head>
<body>
<!--
html学习目的：(什么时候用什么标签)
最内层：h1~h6、p、a、img、input
外层：ul>li、form、table
架构：div
-->
<!--页面头-->
<div class="header">
<!--一级标题-->
<h1>
<a href=""></a>
</h1>
<!--搜索框-->
<form action="">
<input type="text">
<button></button>
</form>
</div>
<!--导航栏-->
<ul class="nav">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</ul>
<!--页面主体-->
<div class="main">
<!--.main-left+.main-center+.main-right-->
<div class="main-left"></div>
<div class="main-center">
<div class="main-box box1">
<h2>领先的 Web 技术教程 - 全部免费</h2>
<p>在 W3School，你可以找到你所需要的所有的网站建设教程。</p>
<p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
<p>
<b>从左侧的菜单选择你需要的教程！</b>
</p>
</div>
<div class="main-box box2">
<img src="" alt="">
<div>
<h2></h2>
<p></p>
<p></p>
</div>
</div>
</div>
<div class="main-right"></div>
</div>
<!--页面尾部-->
<div class="footer"></div>
</body>
</html>
三、CSS
1.css导读
1、css是什么：级联样式表 （Cascading Style Sheet）。属于标记语言，没有逻辑
2、css作用：设置页面样式(长什么样)与页面布局(标签位置)
3、学习的内容：
3.1 css如何控制html标签 - 通过给HTML的标签添加属性，来建立联系 - css选择器
3.2css可以控制的样式(样式与布局)
3.3css如何导入到html文件中
4、学习目的：完成页面的样式
2.css三种引入方式
1.css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种
2.行间式：css样式书写在标签的style全局属性中，一条样式格式为 style="样式名: 样式值 单位; 样式名: 样式值 单位;"，可以同时出现多条样式
3.内联式：css样式书写在head标签内的style标签中，样式格式为：
<style>
css选择器 {
样式块
}
</style>
样式块由一条条样式组成
4.外联式：css样式的写法同内联式，但样式书写在css文件中，在html页面中用link标签引入css文件（建议在head标签中引入）
1.行间式：在标签的style属性中书写样式；优点是可以直接书写；缺点是可读性较差、没有复用性
2.内联式：在head标签中的style标签内书写样式；优点是可读性强，有复用性；缺点是样式被HTML绑定，不能提供给其他HTML页面使用
3.外联式：在外部css文件中（CSS Stylesheet文件）书写样式，在HTML文件中通过link标签引入css文件；优点是可读性强，有复用性，适合团队开发（文件级的复用性）
# html文件中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的引入</title>
<!--2、内联式-->
<!--书写位置:在head标签中的style标签内-->
<!--css语法：css选择器 { 样式1; 样式2; } -->
<!--优缺点: 可读性强，有复用性，样式被html页面绑定了，不能提供给其它html页面使用-->
<style>
h2 {
color: red;
font-size: 100px;
text-align: center;
}
</style>
<!--3、外联式-->
<!--书写位置:在外部css文件中，在html文件中通过link标签引入css文件-->
<!--css语法：css选择器 { 样式1; 样式2; } -->
<!--优缺点: 可读性强，有复用性，适合团队开发(文件级别的复用性)-->
<link rel="stylesheet" href="css/样式引入.css">
</head>
<body>
<!--1、行间式-->
<!--书写位置:在标签的style属性中书写样式-->
<!--优缺点: 可读性差，没有复用性，书写直接-->
<h1 style="color: red; font-size: 100px; text-align: center;">css的引入</h1>
<h1>h1标签</h1>
<h2>h2标签</h2>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h4>h4标签</h4>
</body>
</html>
# 外部css文件中
/* css/样式引入.css */
h3 {
color: green;
}
h4 {
font-size: 50px;
text-align: center;
}
3.三种css引入方法的优先级
1.内联与外联之间没有优先级区别，由于HTML属于解释型语言，书写一行执行一行，因此书写在下方的会覆盖掉上方的样式
2.行间式的优先级高于一切
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的引入</title>
<!--优先级：
1、内联与外联之间没有优先级区别，由于html属于解释性语言，书写在下方的会覆盖上方的样式
2、行间式的优先级要高于一切
-->
</head>
<body>
<h3>h3标签</h3>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h4 style="font-size: 100px">h4标签</h4>
</body>
<style>
h4 {
color: #ff7800;
font-size: 20px;
}
</style>
<link rel="stylesheet" href="css/样式引入.css">
</html>
4.css基础选择器
1.css选择器的本质就是css与HTML两种语法建立关联的特定标识符
2.就是在CSS语法中，通过HTML中标签的某种名字，与HTML具体的标签建立关联，从而使写在对应CSS选择器后的CSS样式能控制HTML中关联的标签或标签们
3.而表示标签名字的方式有多种，每一种名字在CSS语法中都对应着一种特定标识符
4.基础选择器有：通配选择器、标签选择器、class选择器（推荐）、id选择器
5.优先级：!important > 行间式 > id选择器> 类选择器 > 标签选择器 > 通配选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css基础选择器</title>
<style>
/*优先级：可以从作用范围来判断 - 作用范围越精确，优先级越高 */
/*1、统配选择器*/
* {
color: pink;
font-size: 12px;
}
/*2、标签选择器*/
h1 {
font-size: 20px;
}
/*3、类选择器*/
.h {
font-size: 30px!important;
}
.h2 {
font-size: 40px;
}
.h.h2 {
font-size: 50px;
}
/*4、id选择器*/
#hhh {
font-size: 100px;
}
/*优先级：!important > 行间式 > id > class > 标签 > 统配 */
</style>
</head>
<body>
<h1 class="h">1标题</h1>
<h2 id="hhh" class="h h2" style="font-size: 12px">2标题</h2>
</body>
</html>
<!-- #id值，然后Tab键，可以直接打印id-->
<!-- .类名，然后Tab键，可以直接打印类-->