前端初识
Posted huanghongzheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端初识相关的知识，希望对你有一定的参考价值。
接下来我们进入前端知识的学习，前端的学习目的就是为我们开发的应用程序提供一个与用户进行交互的界面，前端分为html5、CSS3、javascript三大部分，我们学习内容共分为HTML5、CSS3、JavaScript、jQuery前端框架及Bootstrap前端框架五个课程内容来介绍。
一、HTML5
HTML5是什么
HTML5就是html语言，数字5是该语言的版本号；html语言开发的文件是以.html为后缀，制作运行在浏览器上展现给用户使用的前端界面，采用的语言是超文本标记语言(HyperText Mark-up Language)。
注：.html文件可以双击直接在浏览器中打开，被浏览器解析被显示给用户查看
标记语言不同于我们熟知的编程语言，下面我们就一起来学习一下HTML5这门超文本标记语言。
HTML5如何学习
学习方向：掌握转义字符、指令和标签三大组成部分
学习目的：通过标签知识完成搭建页面整体架构
1、转义字符（了解）
像后台开发语言的特殊字符\n一样，会被解析为换行，html5中也有很多特殊字符数字的组合，会被解析为特殊的含义
1. 空格：
2. 字符"："
3. 字符&：&
4. 字符<：<
5. 字符>：>
2、指令
被<>包裹，以!开头的特殊符号，称之为指令。
指令中不区分大小写，前端需要掌握文档指令和注释指令两个即可。
1. 文档指令：<!DOCTYPE html>
-- 需要出现在一个html文件的最上方，代表该文件采用html5语法进行编写文件的
2. 注释指令：<!-- -->
-- <!-- 这里书写的就是html5语法下的注释，不会被浏览器解析展现给用户看 -->
3、标签（重点）
被<>包裹，以字母开头，可以结合数字、-连接符等合法字符的特殊字符，称之为标签（重点）。
标签中不区分大小写，帮助我们来更好的显示页面内容，标签有系统标签与自定义标签两种，html5中建议使用系统标签，标签名都采用小写即可。
提倡规范命名的合法自定义标签
<num></num>
<my-tag><my-tag>
<student1></student1>
页面结构相关的系统标签
1. 页面根标签：<html></html>
2. 页面头标签：<head></head>
3. 页面体标签：<body></body>
4. 页面标题标签：<title></tile>
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>
7. 加粗标签：<b></b>
8. 图片标签：<img />
9. 超链接标签：<a></a>
7. "架构"标签：<div></div>
?
复杂的系统标签
1. 无需列表标签：<ul><li></li></ul>
2. 表格标签：<table><!-- 包含大量的表格子标签 --></table>
3. 表单标签：<form><!-- 包含大量的表单子标签 --></form>
案例一：页面结构相关的系统标签的使用
-
无注释版
-
有注释版
<!--文档指令，建议出现在html文件的最上方，一个html文件只出现一次，html表示该文件采用html5语法进行编写-->
-
案例一补充（了解）
<!-- 关键词元元标签，让该页面更容易被百度这样的搜索引擎通过关键词搜索到 -->
<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" />
案例二：简单的系统标签的使用
-
只用关注显示效果的简单系统标签
<!-- 简单的系统标签及控制的内容都应该出现在body标签中，以下写的内容都可以直接书写在body标签中，然后可以在浏览器中打开该html文件查看显示效果 -->
<h1>
在页面上显示的大字加粗的一级标题标签
</h1>
<h2>
在页面上显示的二级标题标签
</h2>
<!-- 省略h3~h5的案例 -->
<h6>
六级标题标签
</h6>
?
<p>
一个页面显示的文本段落放在一个p标签中
</p>
?
直接写在页面中的手动敲的换行不会被浏览器解析为换行，换行符采用br标签
<br /><!-- 可以注释掉br标签查看上下两句话前后的显示效果 -->
用了br标签，浏览器就会解析出一个换行
?
<hr />
在这行文本上下各书写一个hr标签，浏览器打开显示时，这行文本上下均有一个分割线
<hr />
?
<span>在页面中的显示文本除了可以写在标题标签(h1~h6)和段落标签(p)中，其他都建议写在span标签中</span>
<span>不同于标题标签和段落标签的是两个span标签之间不会换行显示，而是在一行显示，一行显示不下时会自动换行(可以缩放浏览器宽度查看效果)</span>
?
<span><i>斜体显示的文本，建议被span标签嵌套</i><b>加粗显示的文本，建议被span标签嵌套</b></span>
?
8. 图片标签：<img />
9. 超链接标签：<a></a>
7. "架构"标签：<div></div>
-
功能是显示图片的简单系统标签
<!-- 加载显示网络图片 --> <img src="http://www.baidu.com/favicon.ico" /> <!-- 图片加载失败是，标签alt全局属性中的文本将显示出来作为图片资源加载失败的文本解释 --> <img src="http://www.baidu.com/favicon.ico_error" alt="百度图标" /> <!-- 通过相对路径加载本地图片，title中的文本会在鼠标先显示的图片上悬浮时，显示出来作为图片显示的文本解释 --> <img src="img/bd_logo.png" title="百度logo" />
-
功能是完成超链接的简单系统标签
<!-- 全局属性href中写超链接的目标地址，点击页面中显示的 前往百度，会在当前页面转跳到百度的首页 --> <a href="https://www.baidu.com">前往百度</a> <!-- 点击页面中显示的 "前往百度"，标签target全局属性中值为_blank时会新开一个标签页面转跳到百度的首页，默认值是_self，效果同第一种 --> <a href="https://www.baidu.com" target="_blank">前往百度</a> <!-- 锚点的使用(了解)，来完成一个浏览网页，返回网页顶部的案例 --> <!-- 种下锚点：该a标签不能在页面中显示文本，用全局属性name来种下一个叫top的锚点 --> <a name="top"></a> <!-- 许许多多页面中其他的显示内容，也可以用一堆br标签来让页面可以滚动起来 --> <!-- 返回锚点：href中用 #锚点名 来表示要前往的锚点，点击 "返回top" 会自动回到页面顶 --> <a href="#top">返回top</a>
-
功能是专门用来搭建页面架构的简单系统标签
1. div标签没有特殊的显示效果，也没有特殊的功能，所以是最常用的标签 2. 通过建立标签的嵌套关系专门用来为页面搭建架构，在有层次架构下，我们的页面才会分块分级的更好的展现给用户 3. 根据页面的设计稿能很好的构思页面架构，并用div很好的还原页面架构，就是我们学习html语言的重点 4. 还原页面架构后，具体用来显示图片、文本还是其他内容，我们就选取具体的标签来显示这些内容
<div> <h2>领先的 Web 技术教程 - 全部免费</h2> <p>在 w3school，你可以找到你所需要的所有的网站建设教程。</p> <p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、php 和 ASP.NET。</p> <p> <b>从左侧的菜单选择你需要的教程！</b> </p> </div> <div> <img src="" > <div> <h2>完整的网站技术参考手册</h2> <p>我们的参考手册涵盖了网站技术的方方面面。</p> <p>其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。</p> </div> </div>
上面的案例来源于http://www.w3school.com.cn/（同学们可以再拿该页面的其他结构来锻炼自己的页面层级结构分析能力与用代码来还原层级结构的能力），HTML5学习阶段重点考虑页面的层级架构与标签的选取，不用考虑页面的显示效果，页面的显示效果是CSS3学习阶段考虑的问题，我们学习完HTML5马上就进入CSS3的学习。
案例三：复杂的系统标签的使用
-
无序列表
<ul>
<li>列表项</li>
<!-- 多少列表项就可以出现多少个li标签 -->
<li>列表项</li>
</ul>
<!-- 无需列表只需要掌握ul与li的嵌套关系，样式的调整会在CSS3详细介绍 -->
-
表格标签（了解）
<table border="1" cellspacing="0" cellpadding="10"> <caption>表格标题</caption> <thead> <tr> <th>标题</th> <th>标题</th> <th>标题</th> <th>标题</th> </tr> </thead> <tbody> <tr> <td rowspan="2">单元格</td><!-- 合并2行单元格 --> <td colspan="2">单元格</td><!-- 合并2列单元格 --> <!-- <td>单元格</td> --><!-- 该列单元格被合并 --> <td>单元格</td> </tr> <tr> <!-- <td>单元格</td> --><!-- 该行单元格被合并 --> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tbody> <tfoot> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tfoot> </table> <!-- 标签部分： 1. table表格标签 2. caption表格标题标签 3. thead表格头部区域标签，tbody表格主体区域标签，tfoot表格尾部区域标签，均可以省略别写 4. tr表格行标签 4. th表格标题单元格标签，td表格普通单元格标签 全局属性部分： 1. border表格的边框宽度 2. cellspacing单元格直接的间距 3. cellpadding单元格内部的间距 4. rowspan合并行单元格 5. colspan合列行单元格 -->
-
表单标签（重点，后期前后台交互时重点讲）
<form actio="" method="" enctype="">
<label></label>
<input type="text" name="user">
<input type="password" name="pwd">
<select name="list">
<option value="val1">列表项</option>
<option value="val2">列表项</option>
</select>
<textarea></textarea>
<button type="button">按钮</button>
<input type="submit" value="提交">
</form>
<!--
标签部分：
1. from表单标签
2. 普通文本标签
3. input输入标签，通过全局属性type的值来确定具体是什么类型的输入标签
4. select表单中的列表标签，option列表项标签
5. textarea文本域标签
6. button按钮标签
form全局属性
1. action：提交表单数据给后台的地址
2. method：提交数据的方式(get或post)
3. enctype：提交数据的编码格式
form子标签全局属性
1. type：标签的类型
2. name：将该标签提交给后台标识数据的key (不设置name的标签的内容无法提交给后台)
3. value：该标签提交给后台的数据或是该标签的显示内容
input标签tpye属性值与分类
1. text：普通文本输入框
2. password：密文文本输入框
3. radio：单选框，该类型input标签有个全局属性checked，属性值省略，代表单选框默认选中状态
4. checkbox：复选框，该类型input标签也有个全局属性checke用同单选框，多个复选框用name值来标识属于同一组复选框，如都代表爱好的复选框的name都应该叫hobby
5. file：文件输入，该类型input标签有个全局属性multiple，属性值省略，代表同时可以选取多文件提交给后台
6. submit：提交表单信息给后台，用value设置提交按钮的显示内容
button标签tpye属性值与分类
1. button：不同按钮，默认点击后无任何操作
2. reset：重置按钮，默认点击后会还原表单的所有操作
3. submit：提交按钮，和type为submit的input标签功能一样，将表单信息提交给后台
-->
二、CSS3
CSS3是什么
CSS3就是css语言，数字3是该语言的版本号；css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中），采用的语言是级联样式表 （Cascading Style Sheet），也属于标记语言。
CSS3如何学习
学习方向：从css代码书写位置、css选择器和css具体样式设置三部分进行学习
学习目的：完成页面样式布局和位置布局
1、css代码书写位置
css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。
① 行间式
css样式书写在标签的style全局属性中，一条样式格式为 样式名: 样式值 单位;，可以同时出现多条样式
<!-- 关键代码 --> <!-- 给div标签设置宽高背景颜色 --> <div style="width: 200px; height: 200px; "></div>
② 内联式
css样式书写在head标签内的style标签中，样式格式为 css选择器 样式块 ，样式块由一条条样式组成
<!-- 关键代码 -->
<head>
<style>
/* css语法下的注释语法 */
/* 设置页面中所有h2标签宽高背景颜色 */
h2
width: 50px;
height: 50px;
background-color: orange;
/* 设置页面中所有h3标签宽高背景颜色 */
h3
width: 100px;
height: 100px;
background-color: red;
</style>
</head>
<body>
<h2></h2>
<h2></h2>
<h3></h3>
<h3></h3>
</body>
③ 外联式
css样式的写法同内联式，但样式书写在css文件中，在html页面中用link标签引入css文件（建议在head标签中引入）
-
css文件夹下的my.css
/* html文件会引入该css文件，设置所有引入了html文件中的所有p标签宽高背景颜色 */
p
width: 50px;
height: 50px;
background-color: orange;
-
根目录下的first.html
<!-- 关键代码 -->
<head>
<!--
rel="stylesheet"：引入的是层级样式表，也就是css文件
type="text/css"：引入文件采用的是css语法书写文本类型代码
href="css/my.css"：采用相当路径引入目标css文件
-->
<link rel="stylesheet" type="text/css" href="css/my.css">
</head>
<body>
<!-- 该页面中的p标签样式都被my.css文件控制 -->
<p></p>
<p></p>
</body>
-
根目录下的second.html
<head>
<link rel="stylesheet" type="text/css" href="css/my.css">
</head>
<body>
<!-- 该页面中的p标签样式也都被my.css文件控制 -->
<p></p>
<p></p>
</body>
总结：
行间式控制样式最直接，但是样式多了直接导致页面可读性变差，且样式相同的标签样式也需要各自设置，复用性差；
内联式可以用一套样式块同时控制多个标签，具有样式的复用性，但是css样式代码还是写在html文件中，在项目开发下，代码量剧增，导致html文件变得臃肿，不利于代码维护；
外联式将css样式移到外部css文件中，不仅避免项目开发下html文件的臃肿问题，同时具有一套代码块控制多个标签，一个css样式文件服务于多个html两种复用性的好处，但是在学习阶段代码量不大时，样式不需要服务于多个html页面时，前面两种方式显然显得更便利。
在行间式中，写在标签内部的样式自然是用来控制该标签的样式，那写在内联式和外联式中的样式又是通过什么样的联系来控制对应页面中标签的样式呢？答案就是用于建立css与html之间联系的css选择器。
2、css选择器
css选择器本质就是css与html两种语法建立关联的特定标识符：
就是在css语法中，通过html中标签的某种名字，与html具体的标签建立关联，从而使写在对应css选择器后的css样式能控制html中关联的标签或标签们
而表示标签名字的方式有多种，每一种名字在css语法中都对应这一种特定标识符，下面我们就来详细介绍：
① 基础选择器
-
通配选择器
/* 特定标识符 星号(*) -- 可以表示页面所有标签的名字 */
/* 通配选择器控制页面中所有的标签(不建议使用) */
*
/* 样式块 */
<!-- 页面中所有标签都能被匹配 --> <html></html> <body></body> <div></div> <p></p> <i></i>
-
标签选择器
/* 特定标识符 标签名 */
/* 标签选择器控制页面中标签名为标签选择器名的所有标签*/
div /* 控制页面中所有div标签的样式 */
/* 样式块 */
<!-- 页面中所有的div标签都能被匹配 --> <div></div> <div class="sup"> <div id=‘inner‘></div> </div>
-
class选择器（提倡使用）
/* 特定标识符 点(.) */
/* class选择器控制页面中标签全局属性class值为class择器名的所有标签*/
.box /* 控制页面中所有标签全局属性class值为box标签的样式 */
/* 样式块 */
<!-- 页面中class属性值为box的标签都能被匹配 --> <div class="box"></div> <p class="box"> <i class="box"></i> </p>
-
id选择器
/* 特定标识符 井号(#) */
/* id选择器控制页面中标签全局属性id值为id择器名的唯一标签*/
#box /* 控制页面中唯一标签全局属性id值为box标签的样式 */
/* 样式块 */
<!-- 页面中id属性值为box的唯一标签备匹配，id具有唯一性：一个页面中所有标签的id属性值不能重名 --> <div id="box"></div>
补充：基础选择器优先级
在一个页面中，难免会出现页面中的某一个标签的某一个样式被不同的选择器下的样式同时控制，也就是出现了多种方式下对目标标签的同一样式出现了重复控制，那到底是哪种选择器下的样式最终控制了目标标签，一定会有一套由弱到强的控制级别规则，这种规则就叫做优先级，下面的例子就很好的解释了各种基础选择器的优先级关系：
<head>
<style>
*
width: 50px;
height: 50px;
background-color: red;
color: pink;
div
width: 60px;
height: 60px;
background-color: orange;
.box
width: 70px;
height: 70px;
#ele
width: 80px;
</style>
</head>
<body>
<div class="box" id="ele">文字内容</div>
</body>
<!--
1. 四种选择器都控制目标标签的宽度，最终目标标签宽度为80px，所以id选择器优先级最高
2. 三种选择器都控制目标标签的高度，最终目标标签宽度为70px，所以class选择器优先级其次
3. 二种选择器都控制目标标签的背景颜色，最终目标标签背景颜色为orange，所以标签选择器优先级再次
4. 只有一种选择器控制目标标签的字体颜色，目标标签字体颜色一定为pink
优先级：通配选择器 < 标签选择器 < class选择器 < id选择器
-->
② 复杂选择器
-
群组选择器
/* 连接标识符 逗号(,) */
/* 群组选择器就是一套样式块同时控制用逗号连接(,)的所有目标标签 */
div, p, .box, #ele
/* 样式块 */
<!-- 页面中所有div标签、所有p标签、所有class属性值为box、唯一id属性值为ele的标签都能被匹配 --> <div> <div></div> </div> <p></p> <p></p> <i class="box"></i> <span class="box"></span> <b id="ele"></b>
-
后代选择器
/* 连接标识符 空格( ) */
/* 后代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
body .box i /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/
/* 样式块 */
<!-- body标签内部的class属性值为box内部的i标签们都能被匹配，所以只匹配i标签，其他都是修饰 -->
<body>
<div class=‘box‘>
<span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，能被匹配 -->
</div>
<div>
<span class=‘box‘><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，能被匹配 -->
</div>
</body>
<!-- 标签的嵌套结构形成父子代标签，后代选择器可以匹配直接父子关系或间距父子关系形成的层次，所以两个i标签均能被匹配 -->
-
子代选择器
/* 连接标识符 大于号(>) */
/* 子代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
body>.box>i /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/
/* 样式块 */
<!-- body>.box>i：同理body和.box都是修饰位，i才是目标匹配位 -->
<body>
<div class=‘box‘>
<span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，不能被匹配 -->
</div>
<div>
<span class=‘box‘><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，不能被匹配 -->
</div>
<div class=‘box‘>
<i></i><!-- body与.box是直接父子关系，.box与i是直接父子关系，能被匹配 -->
</div>
</body>
<!-- 子代选择器只能匹配直接父子关系，所以只能匹配最后一个i标签 -->
-
兄弟选择器
/* 连接标识符 波浪号(~) */
/* 兄弟选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
#ele~div~i /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/
/* 样式块 */
<!-- #ele~div~i：同理#ele和div都是修饰位，i才是目标匹配位 --> <h3 id="ele"></h3> <div></div><!-- #ele与div是直接兄弟关系 --> <i></i><!-- div与i是直接兄弟关系，能被匹配 --> <div></div><!-- #ele与div是间距兄弟关系 --> <i></i><!-- div与i是直接兄弟关系，能被匹配 --> <!-- 标签的上下结构形成兄弟标签，兄弟选择器可以匹配直接兄弟关系或间距兄弟关系形成的层次，所以两个i标签均能被匹配 -->
-
相邻选择器
/* 连接标识符 加号(+) */
/* 相邻选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
#ele+div+i /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/
/* 样式块 */
<!-- #ele+div+i：同理#ele和div都是修饰位，i才是目标匹配位 --> <h3 id="ele"></h3> <div></div><!-- #ele与div是直接兄弟关系 --> <i></i><!-- div与i是直接兄弟关系，能被匹配 --> <div></div><!-- #ele与div是间距兄弟关系 --> <i></i><!-- div与i是直接兄弟关系，不能被匹配 --> <!-- 相邻选择器只能匹配直接兄弟关系，所以只能匹配第一个i标签 -->
-
交叉选择器
/* 连接标识符 紧挨着(没有任何连接符) */
/* 交叉选择器本质上是对一个目标标签的多个名字的同时表示 */
div.box#ele.tag /*div是标签名，box和tag都是class属性值，ele是id属性值*/
/* 样式块 */
<!-- 标签名div、class名box及tag和id名ele都是对一个目标标签的修饰空格隔开 <!-- class属性拥有多个值时，多个值之间用空格隔开 --> <div class="box tag" id="ele"></div>
补充：基础选择器优先级
简单选择器存在优先级，优先级的前提就是不同选择器同时控制同一标签的同一属性，那么在复杂选择器下，一定会出现这种同时控制同一标签的同一属性情况，那复杂选择器的优先级又是如何来规定的呢？
1. 复杂选择器的种类并不会影响优先级 -- 后代：div #ele | 兄弟：div~#ele | 交叉：div#ele 优先级一样 2. 复杂选择器本质是通过同类型(简单选择器)的个数来确定优先级 -- 三层标签选择器后代：body div i 大于 两层标签选择器后代：div i | body i 3. 简单选择器的优先级起关键性作用，也就是一个id选择器要大于无限个class选择器，一个class选择器要大于无限个标签选择器 -- id选择器：#i 大于 n层class选择器：.box .i -- class选择器：.box 大于 n层标签选择器：body div
总结：
选择器是一个庞大的家族，还有很多css选择器等待大家自己去挖掘，掌握已上选择器也已足够帮助我们完成简单前端开发了
我们有了css与html建立联系的选择器基础，那么建立联系后，css语言除了控制标签的宽高背景颜色字体颜色外，还有哪些丰富的样式控制呢？下面我们就一起来学习一下具体的样式设置。
3、具体的样式设置
① 文字样式
文字样式是用来控制字体或文本的显示方式的。
/*字族：STSong作为首选字体, 微软雅黑作为备用字体*/ font-family: "STSong", "微软雅黑"; /*字体大小*/ font-size: 40px; /*字重：100、200、300、400、500、600、700、800、900，值越大字越粗*/ font-weight: 900; /*行高: 字体文本默认在行高中垂直居中显示*/ line-height: 200px; /*字划线: overline(上划线) | line-through(中划线) | underline(下划线) | none(取消划线) */ text-decoration: overline; /*字间距*/ letter-spacing: 2px; /*词间距*/ word-spacing: 5px; /*首行缩进：1em相当于一个字的宽度*/ text-indent: 2em; /*字体颜色*/ color: red; /* 文本水平排列方式：left(水平居左) | center(水平居中) | right(水平居右) */ text-align: center;
② 背景样式
标签的背景除了背景颜色还可以有背景图片，而背景图片又有很多相关设置。
/*背景图片：url函数可以链接网络或本地图片*/ background-image: url(‘https://www.baidu.com/favicon.ico‘); /*平铺:repeat-x(x轴平铺) | repeat-y(y轴平铺) | repeat(双轴平铺) | no-repeat*/(不平铺) background-repeat: no-repeat; /*x轴背景图片位置偏移：正值往右偏移，负值往左偏移*/ background-position-x: 10px; /*y轴背景图片位置偏移：正值往下偏移，负值往上偏移*/ background-position-y: 10px;
③ 显示样式
HTML5预定义了很多系统标签，大家学习了html标签部分的时候，肯定注意到了，不同的标签在页面中的显示效果是不一样的，比如两个div之间默认会换行显示，而两个span标签却在一行来显示，到底是什么样式控制着标签这种显示效果呢，那就是显示样式display来控制的。
-
display: block;
<div style="display: block;"></div> <span style="display: block;"></span> <i style="display: block;"></i> <!-- 1. 任意标签的display样式值均可以设置为block，那么该标签就会以block方式来显示 2. block方式显示的标签，默认会换行 3. block方式显示的标签，支持所有的css样式 4. block方式显示的标签，可以嵌套所有显示方式的标签 注：标题标签和段落标签虽然也是block显示类标签，但不建议嵌套block显示类标签 -->
-
display: inline;
<div style="display: inline;"></div> <span style="display: inline;"></span> <i style="display: inline;"></i> <!-- 1. 任意标签的display样式值均可以设置为inline，那么该标签就会以inline方式来显示 2. inline方式显示的标签，默认不会换行 3. inline方式显示的标签，不支持所有css样式(如：不支持手动设置该标签的宽高) 4. inline方式显示的标签，建议只用来嵌套所有inline显示方式的标签 -->
-
display: inline-block;
<div style="display: inline-block;"></div> <span style="display: inline-block;"></span> <i style="display: inline-block;"></i> <!-- 1. 任意标签的display样式值均可以设置为inline-block，那么该标签就会以inline-block方式来显示 2. inline-block方式显示的标签，具有inline特性，默认不换行 3. inline-block方式显示的标签，也具备block特征，支持所有css样式 4. inline-block方式显示的标签，不建议嵌套任意显示方式的标签 -->
④ 盒模型
我们学习完display属性后，知道了标签在页面中都是有显示方式的，虽然display属性值决定了标签的不同显示方式（inline显示方式下标签的宽高不能手动设置），但是标签还是可以拥有宽高的（内容多宽多高，标签就会有多宽多高），所以显示的标签都具有宽和高。
那么标签其实除了宽(width)和高(height)，还拥有内边距(padding)、边框(border)以及外边局(margin)的，这些由内到外组件在一起，就相当于一个盒子，所以我们有把页面中显示的标签称之为盒模型。
创建一个新的box.html页面来学习盒模型的四个区域部分
<!doctype html>
<html>
<head>
<meta charset=‘utf-8‘ />
<title>盒模型</title>
<style>
/* 去除系统默认样式对我们学习的干扰，body标签系统默认提供了外边局，且外边局的上右下左四个方位的值都是默认8px，我们写margin: 0;的意思是同时将四个方位的初始值都设置为0，这样我们可以只用关心class值为box的div盒模型的变化，从而更好的学习盒模型的四个区域 */
body
margin: 0;
/* 填写盒模型四个区域的样式代码块 */
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
-
content区域
/* 效果：在最左上角显示一个100*100区域面积的橘色正方形 */
.box
width: 100px;
height: 100px;
background-color: orange;
/* content区域就是width x height的面积区域，是用来显示标签内容的区域 */
-
padding区域
/* 效果：在content区域设置的基础上，再设置padding的四个方位值，就会在最左上角显示一个200*200区域面积的橘色正方形 */
.box
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
/* padding区域控制着盒模型的内边距，是内容显示区域往外的留白区域，同样可以显示背景颜色的 */
-
border区域
/* 效果：在padding区域设置的基础上，再设置border的样式、颜色及宽度，最左上角显示一个橘色正方形外会接着多出20px宽度的红色区域 */
.box
/*solid:实线 | dashed:虚线 | dotted:点状线*/
border-style: solid;
border-color: red;
border-width: 20px;
/* padding区域控制着盒模型的内边距，是内容显示区域往外的留白区域，同样可以显示背景颜色的 */
-
margin区域
/* 效果：在至少所有设置的基础上，再设置margin的四个方位值，橘色正方形就会出现在居屏幕上方150px，屏幕左侧150px地方显示 */
/* 而且修改margin-top的值，盒模型就会上下改变位置，修改margin-left的值，盒模型就会左右改变位置，当出现负值时，盒子会溢出屏幕边缘 */
.box
margin-top: 150px;
margin-right: 150px;
margin-bottom: 150px;
margin-left: 150px;
/* padding区域控制着盒模型的内边距，是内容显示区域往外的留白区域，同样可以显示背景颜色的 */
问题：
在盒模型除了修改margin-right与margin-bottom的值时，盒模型都会出现显示效果的上的改变，而修改margin-right与margin-bottom的值时，盒模型的并没有任何改变，那margin-right与margin-bottom又是怎样控制着盒模型的呢？
-
margin-bottom是控制默认上下显示的两个盒模型之间的间距
<!doctype html>
<html>
<head>
<meta charset=‘utf-8‘ />
<title>margin-bottom案例</title>
</head>
<body>
<div style="margin-bottom: 100px">上下显示的【上】盒模型</div>
<div>上下显示的【下】盒模型</div>
<!-- 显示效果：两个div上下间距100px -->
</body>
</html>
-
margin-right是控制默认zzu左右示的两个盒模型之间的间距
<!doctype html>
<html>
<head>
<meta charset=‘utf-8‘ />
<title>margin-right</title>
</head>
<body>
<span style="margin-right: 100px">左右显示的【左】盒模型</div>
<span>上下显示的【右】盒模型</span>
<!-- 显示效果：两个span默认初始左右是有间距的，增加margin-right后，间距在原来基础上扩大了100px -->
</body>
</html>
⑤ 浮动
我们学习完了display与盒模型后，仍然不方便处理以下这个问题：多个可以手动设置宽高的盒模型如何快速的左右排列显示？
我们一起来看看：
display：inline;下的盒模型，不支持手动设置宽高，pass
display: inline-block;下的盒模型，支持手动设置宽高，且左右排列显示，但是之间有默认间距，且这个间距存在浏览器间的适配问题，不可控，pass
display: block;下的盒模型，支持手动设置宽高，但默认上下排列显示，于是我们想到了采用margin-left与margin-top两个可以改变位置的盒模型属性帮我们完成，显然是可以达到左右排列显示的，但是很明显是一个非常庞大的布局任务量
那有没有一种可以快速帮助block显示的盒模型左右排列显示的样式布局方式呢，有的，就是我们马上学习的浮动
<!doctype html>
<html>
<head>
<meta charset=‘utf-8‘ />
<title>盒模型</title>
<style>
/* 清除body默认外边距带来的影响 */
body margin: 0
/* 浮动布局的开始 */
.red background-color: red
.blue background-color: blue
.box
width: 50px;
height: 50px;
/* 以上设置后，红蓝正方形从左上角依次上下排列显示 */
.box
float: right;
/* 以上设置后，红蓝正方形依次从右上角(从右往左)左右排列显示 */
.box
float: left;
/* 以上设置后，红蓝正方形依次从左上角(从左往右)左右排列显示 */
.wrapper
width: 150px;
/* 以上设置后，父级提供的显示宽度为150px，所以一行最多能显示三个box，所以从左往右依次排列成了两行 */
</style>
</head>
<body>
<div class="wrapper">
<div class="box red">1</div>
<div class="box blue">2</div>
<div class="box red">3</div>
<div class="box blue">4</div>
<div class="box red">5</div>
<div class="box blue">6</div>
</div>
</body>
</html>
<!--
总结：
1. 浮动样式布局就是设置float属性的值，可以快速让默认上下显示的盒模型左右排列显示
2. float可以设置left与fight两个值，决定了起始排列的位置与方向
3. 父标签的宽度决定了一行可以排列的子标签个数
-->
-
清浮动
我们学习了浮动样式布局，很明显感觉其给我们带来的布局便利，但是大家先写出下面的列子，看会出现什么样的布局问题？
<!doctype html>
<html>
<head>
<meta charset=‘utf-8‘ />
<title>盒模型</title>
<style>
body margin: 0
.red background-color: red
.blue background-color: blue
.box
width: 50px;
height: 50px;
float: left;
.wrapper
width: 300px;
/* 层级关系上，wrapper与ele属于同一层级的上下兄弟标签 */
.ele
width: 100px;
height: 100px;
background-color: orange;
/* 设置ele的样式后，很明显会发现ele与wrapper的子标签发生了显示区域的重叠，并没有出现在wrapper子标签显示区域的下方，且ele显示区域被遮盖(具体原因可以搜索学习 浮动布局不完全脱离文档流 ) */
</style>
</head>
<body>
<div class="wrapper">
<div class="box red">1</div>
<div class="box blue">2</div>
<div class="box red">3</div>
<div class="box blue">4</div>
<div class="box red">5</div>
<div class="box blue">6</div>
</div>
<div class="ele"></div>
</body>
</html>
很显然，上面案例中的情况在实际开发过程中非常常见：一个标签的所有子标签采用浮动布局，该标签的下方兄弟标签会与子标签出现显示重叠问题，那么清浮动就是用来解决这样的问题的。
清浮动：就是让父标签在子标签浮动的情况下，根据子标签整体所需最大的显示高度，为父级设置固定格式的样式属性，系统就会默认提供给父标签这个所需最大的显示高度，具体格式如下：
/*清浮动固定格式样式代码*/
.wrapper:after
content: "";
display: block;
clear: both;
/* 测试修改父级标签的宽度，让子标签以不同行数来显示，查看子标签与ele标签之间还会不会出现显示区域的重叠？显然不会了 */
.wrapper
width: 150px; /* 子标签两行显示 */
width: 100px; /* 子标签三行显示 */
width: 50px; /* 子标签六行显示 */
/*总结：以后哪个标签的子标签采用了浮动样式布局，一定要为该标签提供清浮动操作*/
⑥ 定位
学习完盒模型样式后，可以完成盒模型位置的改变，学习了浮动样式布局后，又能让默认上下排列显示的盒模型快速左右排列，但是仍然不好或不能完成一下两种样式布局需求：
需求1：在页面可以发生滚动的时候，盒模型能不能相当页面窗口是静止的，不会随着页面滚动而滚动（页面小广告）
需求2：父标签已经规定死了宽和高，多个子标签之间不相互影响位置布局，每个子标签自身相对于父级宽高提供的显示区域进行独立的位置布局
-
固定定位：解决需求1
<!doctype html>
<html>
<head>
<meta charset=‘utf-8‘ />
<title>固定定位</title>
<style>
/* 页面滚动的样式准备 */
body
height: 3000px;
.tag
width: 120px;
height: 240px;
background-color: orange;
/* position: fixed; 代表采用固定样式定位进行对tag位置的布局操作 */
/* 设置完成后，tag就相对于页面屏幕左侧30px屏幕上侧200px位置静止，不会随着屏幕的滚动而滚动 */
/* 定位样式布局下，不仅可以采用top、left进行布局的位置调整，还可以采用bottom、right进行布局的位置调整，大家可以自我尝试一下，进入固定定位布局总结 */
.tag
position: fixed;
top: 200px;
left: 30px;
</style>
</head>
<body>
<div class="tag"></div>
</body>
</html>
<!--
总结：
1. 固定定位的盒模型参照页面屏幕四个边缘进行位置布局，top、right、bottom、left分别控制着距离页面屏幕上右下左四个边缘的距离
2. top与bottom两个方位布局同时存在时，只有top属性值有布局效果，同理left与right同时出现，只有left属性值有布局效果
3. 固定定位的盒模型可能会与页面上其他的盒模型发生显示区域重叠（因为页面滚动，固定定位盒子的位置相对于页面永远是静止的），固定定位的盒模型会在上方显示
-->
-
绝对定位（重点）：与相当定位一同解决需求2
<!doctype html>
<html>
<head>
<meta charset=‘utf-8‘ />
<title>绝对定位</title>
<style>
/* 清除body默认外边距带来的影响 */
body margin: 0
/* 根据需求2，优先设置好outer的显示区域 */
.outer
width: 400px;
height: 400px;
background-color: yellow;
/* 所有的inner采用一样的大小，绝对样式定位进行布局 */
.inner
width: 150px;
height: 150px;
position: absolute;
/* 想让box1在outer的左上角显示 */
.box1
background-color: red;
top: 0px;
left: 0px;
/* 想让box2在outer的正中央显示 */
.box2
background-color: green;
top: 125px;
left: 125px;
/* 想让box3在outer的右下角显示 */
.box3
background-color: green;
bottom: 0px;
right: 0px;
</style>
</head>
<body>
<div class="outer">
<div class="inner box1"></div>
<div class="inner box2"></div>
<div class="inner box3"></div>
</div>
</body>
</html>
<!--
结果：
进行上方布局设置后，并没有达到预期的显示效果，子标签我们已经采用了绝对样式定位完成了指定的布局，那么父标签又需要做什么样的定位样式布局处理呢？
-->
-
相对定位（了解）：辅助绝对定位解决需求2
.outer
/* 父标签设置完相对样式布局后，再观察绝对定位中的案例显示效果 */
position: relative;
/* 如果父标签也需要改变自身位置，也可以修改left、top或是margin-left、margin-top来完成 */
/*
总结：
1. 父标签采用相对定位(relative)来辅助于子标签绝对定位(absolute)布局，这样每一个子标签都独立参考父标签的四个边缘进行位置布局，top、right、bottom、left分别控制着距离父标签的上右下左四个边缘的距离
2. top与bottom两个方位布局同时存在时，只有top属性值有布局效果，同理left与right同时出现，只有left属性值有布局效果
3. 绝对定位的盒模型可能会与页面上其他的盒模型发生显示区域重叠，一般都是布局所需，不用处理；但是同时采用绝对定位的标签们之间也可能发生重叠，此时往往需要处理谁在上在下显示，z-index属性就是解决这样的问题
*/
-
z-index：接着需求2的案例
z-index的属性值为大于0的任意正整数，值大的标签显示区域就会覆盖值小的标签显示区域来显示
.box1
/* 显示层级中等 */
z-index: 10;
.box2
/* 显示层级最高 */
z-index: 100;
.box3
/* 显示层级最低 */
z-index: 1;
/*
总结：
1. z-index属性值不需要从1依次叠加，随意设置
2. z-index属性值越大显示层级越高，显示层级不同的发生显示区域重叠时，显示层级高的显示区域覆盖显示层级低的显示区域
*/
三、JavaScript
JavaScript是什么
JavaScript（下文我们会用简称JS来代替）是脚本编程语言，JS语言开发的文件是以.js为后缀，通过在html文件中引入该js文件来控制html代码的交互功能以及前台数据处理的业务逻辑（js语言代码也可以直接写在html文件中），采用的ECMAScript语法，属于编程语言。
ECMAScript目前普遍使用的存在ES5与ES6两个版本，我们也会基于这两个版本来介绍JS这么应用的学习
JavaScript如何学习
学习方向：从JS代码书写位置、JS基础语法、JS选择器和JS页面操作四部分进行学习
学习目的：完成页面标签与用户的人机交互及前台数据处理的业务逻辑
1、JS代码书写位置
JS属于脚本(可以以代码片段的方式内嵌到其他语言中)编程语言，可以内嵌到html代码中，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。
① 行间式
JS代码书写在标签的事件全局属性中，采用的是JS编程语言的语法
<!-- 关键代码 --> <!-- 给div标签添加点击事件的交互逻辑：弹出文本提示框 --> <div onclick="alert(‘点击我完成页面交互‘)">点我</div>
② 内联式
JS代码书写在script标签中，script标签可以出现在页面中的任意位置，建议放在body标签的最后(html代码是自上而下进行解析加载，放在body标签的最下方，会保证页面所有标签都加载完毕，html再去加载js文件，那么js脚步文件就会更好的控制页面标签的人机交互了)，采用的是JS编程语言的语法
<!-- 关键代码 -->
<!-- 页面被加载打开时，就会触发事件的交互逻辑：弹出文本提示框 -->
<body>
<!-- body标签中的所有子标签位置 -->
<!-- script标签出现在body标签的最下方 -->
<script>
alert(‘该页面被加载！‘)
</script>
</body>
③ 外联式
JS代码书在外部js文件中，在html页面中用script标签引入js文件（建议在body标签最下方引入，理由同上）
-
js文件夹下的my.js
alert(‘外联式js文件弹出框‘)
-
根目录下的first.html
<!-- 关键代码 -->
<!-- 页面被加载打开时，就会触发事件的交互逻辑：弹出文本提示框 -->
<body>
<!-- body标签中的所有子标签位置 -->
<!-- script标签出现在body标签的最下方 -->
<script src="js/my.js">
/* 不要在此写JS代码，原因是用来引入外部js文件的script标签，标签内部书写的JS代码不在起作用 */
</script>
</body>
-
根目录下的second.html
<!-- 关键代码 -->
<!-- 页面被加载打开时，就会触发事件的交互逻辑：弹出文本提示框 -->
<body>
<!-- body标签中的所有子标签位置 -->
<!-- script标签出现在body标签的最下方 -->
<script src="js/my.js">
/* 不要在此写JS代码，原因是用来引入外部js文件的script标签，标签内部书写的JS代码不在起作用 */
</script>
</body>
总结：
行间式控制交互最直接，但是交互逻辑多了直接导致页面可读性变差，且交互逻辑相同的标签样式也需要各自设置，复用性差，不建议使用；
内联式可以同时为多个标签提供交互逻辑（课程后面会详细介绍），学习阶段代码量不大的情况下，也不需要分文件处理的，这时候建议使用内联式；
外联式是分文件管理不同的页面存在的相同与不同的数据处理的业务逻辑与人机交互，可以极大提高开发效率，项目开发时一定要采用外联式来处理JS代码。
通过上面的介绍，大家很清楚JS是一门脚本编程语言，那么我们一定先要了解一下这门编程语言的基础语法，才可以慢慢的展开学。
2、JavaScript基础语法
我们前期已经学习了Python这门编程语言，也知道了一门编程语言的基础如何来学习，我们JS的基础和Python大致相同，只是存在一些语法上的差异而已。
下面我们就从：
1、变量的定义
2、基本数据类型
3、运算符
4、分支结构
5、循环结构
6、JS中对象的运用
7、函数
七个方向来学习JS这门语言。
① 变量的定义
JS中定义变量，不同于Python，我们需要像Python定义函数那样，也需要用特定的关键词来定义变量：
ES5语法，我们采用var关键词定义变量，并且没有常量的概念
ES6语法，我们采用let关键词定义变量，用const关键词定义常量
注：我们不需要像Python那样切换解释器版本来区别到底该书写什么版本语法的代码，在一个JS文件中我们可以同时书写两种语法的JS代码，浏览器都可以自动帮我们解析并运行。
// ES5定义变量：var是关键词、num是变量名、=为赋值符、10为变量值、;为JS语言语句的结束标识符 var num = 10; // ES6定义变量 let count = 100; const PI = 3.14;
补充：变量的命名规范
/* 1. 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符） 2. 区分大小写 3. 不能出现关键字及保留字 */
| abstract | arguments | boolean | break | byte |
| case | catch | char | class* | const |
| continue | debugger | default | delete | do |
| double | else | enum* | eval | export* |
| extends* | false | final | finally | float |
| for | function | goto | if | implements |
| import* | in | instanceof | int | interface |
| let | long | native | new | null |
| package | private | protected | public | return |
| short | static | super* | switch | synchronized |
| this | throw | throws | transient | true |
| try | typeof | var | void | volatile |
| while | with | yield |
② 基本数据类型
JS语言中基本数据类型分值类型与引用类型两部分。
-
值类型
// 数字类型：number var num = 10; const PI = 3.14; console.log(typeof(num), num); // 结果：number 10 // 字符串类型：string var s1 = "双引号可以表示字符串"; var s2 = ‘单引号可以表示字符串‘; console.log(typeof(s1), s1); // 结果：string 双引号可以表示字符串 // 布尔类型：boolean var b1 = true; var b2 = false; console.log(typeof(b1), b1); // 结果：string 双引号可以表示字符串 // 未定义类型：undefined var u1; var u2 = undefined; console.log(typeof(u1), u1); // 结果：undefined undefined
-
引用类型
// 函数类型：function function fn1() var fn2 = function() ; console.log(typeof(fn1), fn1); // 结果：function ƒ fn1() // 对象类型：object var obj1 = console.log(typeof(obj1), obj1); // 结果：function // Array对象类型： var arr1 = [1, 2, 3, 4, 5] console.log(typeof(arr1), arr1); // 结果：object (5) [1, 2, 3, 4, 5]
③ 运算符
-
算数运算符
前提：n = 5
?
?
| 运算符 | 描述 | 例子 | x结果 | n结果 |
|---|---|---|---|---|
| + | 加法 | x=n+2 | 7 | 5 |
| - | 减法 | x=n-2 | 3 | 5 |
| * | 乘法 | x=n*2 | 10 | 5 |
| / | 除法 | x=n/2 | 2.5 | 5 |
| % | 取模(余数) | x=n/2 | 1 | 5 |
| ++ | 自增 | x=++n | 6 | 6 |
| x=n++ | 5 | 6 | ||
| -- | 自减 | x=--n | 4 | 4 |
| x=n-- | 5 | 4 |
-
赋值运算符
前提：x=5，y=5
| 运算符 | 例子 | 等同于 | 运算结果 |
|---|---|---|---|
| = | x=y | 5 | |
| += | x+=y | x=x+y | 10 |
| -= | x-=y | x=x-y | 0 |
| *= | x*=y | x=x*y | 25 |
| /= | x/=y | x=x/y | 1 |
| %= | x%=y | x=x%y | 0 |
-
比较运算符
前提：x=5
| 运算符 | 描述 | 比较 | 结果 |
|---|---|---|---|
| == | 等于 | x=="5" | true |
| === | 绝对等于 | x==="5" | false |
| != | 不等于 | x!="5" | fales |
| !== | 不绝对等于 | x!=="5" | true |
| > | 大于 | x>5 | false |
| < | 小于 | x<5 | false |
| >= | 大于等于 | x>=5 | true |
| <= | 小于等于 | x<=5 | true |
-
逻辑运算符
前提：n=5
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
| && | 与 | x=n>10&&++n | x=false,n=5（短路） |
| || | 或 | x=n<10||n-- | x=true,n=5（短路） |
| ! | 非 | x=!n | x=false,x=5 |
-
三目运算符
// 结果 = 条件表达式 ? 结果1 : 结果2;
// 语法规则：条件表达式成立，将结果1赋值给结果，反正赋值结果2
// 案例：
var weather = prompt("天气(晴|雨)"); // 文本输入弹出框
var res = tq == ‘晴‘ ? "今天天气挺好" : "请假回家收衣服";
console.log(res); // 今天天气挺好
④ 分支结构
-
if 基础语法
if (条件表达式)
代码块;
// 1. 当条件表达式结果为true，会执行代码块；反之不执行
// 2. 条件表达式可以为普通表达式
// 3. 0、undefined、null、""、NaN为假，其他均为真
-
if 复杂语法
// 1.双分支
if (表达式1)
代码块1;
else
代码块2;
// 2.多分支
if (表达式1)
else if (表达式2)
...
else if (表达式2)
else
-
if 嵌套
if (表达式1)
if (表达式2)
-
案例：
var weather = prompt("天气(晴|雨)"); // 文本输入弹出框
if (weather == "晴")
alert("今天是晴天")
else if (weather == "雨")
alert("今天是雨天")
else
alert("输入信息有误")
⑤ 循环结构
-
for循环
for (循环变量①; 条件表达式②; 循环变量增量③)
代码块④;
// for循环执行的顺序：① ②④③ ... ②④③ ②，入口为①，出口为②，②④③就是循环过程
// 案例：
for (var i = 0; i < 5; i++)
console.log(i);
// 结果：
0
1
2
3
4
-
while循环
while (条件表达式)
代码块;
// 条件满足执行代码块，条件不满足跳出循环
// 案例：
var i = 0;
while (i < 5)
console.log(i);
i++;
// 结果：
0
1
2
3
4
-
for…in迭代器
var arr = [1, 2, 3, 4, 5] for (num in arr) console.log(num); // 结果： 0 1 2 3 4
-
break，continue关键词
// 1. break：结束本层循环 // 2. continue：结束本次循环进入下一次循环
⑥ JS中对象的运用
JS语言中没有字典类型的存在，但是JS对象可以很好的来表示Python语法中dict类型表示的数据，其使用方式也及其简单。
// 定义对象：可以将对象看做字典来使用 var teacher = name: "Zero", age: 28 // 取值 var res = teacher.name; res = teacher[‘name‘]; // 改值 teacher.name = "Owen"; // 增值 teacher.gender = "男"; // 删值 delete teacher.age
⑦ 函数
-
函数的定义
function 函数名 (参数列表)
函数体;
var 函数名 = function (参数列表)
函数体;
-
函数的调用
函数名(参数列表)
-
函数的参数
// 个数不需要统一
function fn (a, b, c)
console.log(a, b, c) // 结果：100 undefined undefined
fn(100); // 并未给b，c传值
function fn (a)
console.log(a) // 结果：100
fn(100, 200, 300); // 200，300被丢弃
// 可以任意位置具有默认值
function fn (a, b=20, c, d=40)
console.log(a, b, c, d) // 100 200 300 40
fn(100, 200, 300); // 一定按照先后顺序依次传参
// 通过...语法接收多个值
function fn (a, ...b)
console.log(a, b) // 100 [200 300]
fn(100, 200, 300)
// ...变量必须出现在参数列表最后
-
函数的返回值
function fn ()
return 返回值;
// 1.可以空return操作，用来结束函数
// 2.返回值可以为任意js类型数据
// 3.函数最多只能拥有一个返回值
3、JS选择器
想必大家学习完之前的内容，已经知道了css选择器本质就是css与html两种语法建立关联的特定标识符，那在JS语言的语法中，也有特点的方式与html语言编写的表情建立关联，我们就称之为JS选择器。
① getElement系列
// 1.通过id名获取唯一满足条件的页面元素 document.getElementById(‘id名‘); // 该方法只能由document调用 // 2、通过class名获取所有满足条件的页面元素 document.getElementsByClassName(‘class名‘); // 该方法可以由document及任意页面元素对象调用 // 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组) // 没有匹配到任何结果返回空HTMLCollection对象 ([]) // 3.通过tag名获取所有满足条件的页面元素 document.getElementsByTagName(‘tag名‘); // 该方法可以由document及任意页面元素对象调用 // 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组) // 没有匹配到任何结果返回空HTMLCollection对象 ([])
② querySelect系列
// 1.获取第一个匹配到的页面元素 document.querySelector(‘css3语法选择器‘); // 该方法可以由document及任意页面对象调用 // 2.获取所有匹配到的页面元素 document.querySelectorAll(‘css3语法选择器‘); // 该方法可以由document及任意页面对象调用 // 返回值为NodeList (一个类数组结果的对象，使用方式同数组) // 没有匹配到任何结果返回空NodeList对象 ([])
案例：
<body>
<div id="box" class="box"></div>
<script>
var box1 = document.getElementById(‘box‘);
var box2 = document.querySelector(‘.box‘);
// box1 === box2，就代表页面id为box，class为box的div标签
</script>
</body>
4、JS页面操作
我们学习完JS的基本语法后，知道如何简单使用JS语言，有掌握了JS选择器，就可以与页面建立起联系，那我们可以通过哪些方式与页面标记进行交互？有可以在交互的过程中对标签进行哪些具体的操作呢？
① 鼠标事件
我们先来看一下交互的方式，叫做标签对象的事件绑定，可以绑定的事件有：
/* onclick：鼠标点击 ondblclick：鼠标双击 onmousedown：鼠标按下 onmousemove：鼠标移动 onmouseup：鼠标抬起 onmouseover：鼠标悬浮 onmouseout：鼠标移开 oncontextmenu：鼠标右键 */
② 事件的绑定
具体绑定事件的方式：
<body>
<div class="box">绑定点击事件后可以完成点击交互</div>
<script>
var box = document.querySelector(‘.box‘);
// 页面class为box的div被鼠标点击后会有弹出框
box.onclick = function()
alert("box标签被点击了")
</script>
</body>
那么绑定完事件后又可以怎样具体操作页面标签呢？
-
操作行间式样式
<head>
<style>
.box
width: 200px;
height: 200px;
</style>
</head>
<body>
<div class="box" style="background-color: red"></div>
<script>
var box = document.querySelector(‘.box‘);
// 语法：页面对象.全局style属性.具体的样式名
box.onclick = function()
// 读：获取行间式样式值
var bgColor = box.style.backgroundColor;
// 写：对行间式样式进行赋值，初始没有该条行间式样式，相同会自动添加设置好的行间式
box.style.backgroundColor = ‘orange‘; // css3多个单词的属性名采用小驼峰命名法
</script>
</body>
-
只读 计算后 样式
<head>
<style>
.box
width: 200px;
height: 200px;
</style>
</head>
<body>
<div class="box" style="background-color: red"></div>
<script>
var box = document.querySelector(‘.box‘);
// 语法：getComputedStyle(页面元素对象, 伪类).样式名;
// 注：我们不需要考虑伪类的范畴，直接用null填充即可
box.onclick = function()
// 只读：获取计算后样式值
var width = getComputedStyle(box, null).width;
</script>
</body>
-
操作标签class名
<body>
<div class="box">class名操作</div>
<script>
var box = document.querySelector(‘.box‘);
// 查看类名
var cName = box.className;
// 修改类名
box.className = "ele";
// 增加类名
box.className = " tag"; // 添加后的结果class="ele tag"，所以赋值时一定注意tag前有个空格字符串
// 删除所有类名
box.className = "";
</script>
</body>
-
操作标签全局属性值
<body>
<img src="https://www.baidu.com/favicon.ico" class="image" />
<script>
var img = document.querySelector(‘.image‘);
// 查看全局属性值
var imgSrc = img.getAttribute(‘src‘);
// 修改全局属性值
img.setAttribute(‘src‘, ‘img/bg_logo.png‘);
// 删除全局属性值
img.setAttribute = (‘src‘, ‘‘);;
</script>
</body>
以上是关于前端初识的主要内容，如果未能解决你的问题，请参考以下文章