前端知识

了解网页的结构、样式、行为；掌握HTML、CSS、JS相关知识。

一、HTML

1. Web介绍
World Wide Web缩写，全球广域网。Web可以理解成为当前的一种互联网，网站服务。Web前端就是来负责一个网站当中前台网页里的内容，包括文字、图片、链接、声音、视频等。

2. HTML介绍（Hyper Text Markup Language，超文本标记语言）

（1）网页是我们通过html语言书写的；
（2）常用开发工具：Hbuilder，VScode，IntelliJ IDEA等；
（3）在我们使用html语言去书写网页的过程中我们发现有一些结构是默认必须存在的，这个结构叫做 网页（html）骨架。

• DocType html：向浏览器声明当前的文档是 Html 类型。 ️
• html ：它是网页当中最大的一个标签，我们称之为根标签 开始 结束 ️
• head ：网页头的部，它里面的内容是写给浏览器看的。 ️meta : 如果有 charset 那就表示在设置当前网页的显示编码
• title：网页的标题，它里面的内容会在浏览器的标签页上显示 ️
• body：网页主体，它里面的内容会显示在浏览器的空白区域内。

（4）HTML标签
我们人为的将HTML标签分为单标签和双标签

<标签名称> [在英文输入法输入] </标签名称>
<标签名称/>

1）标签可设置属性；
2）属性值与属性名之间用等号连接；
3）一个标签可以设置多个属性，之间用空格隔开。

常见的标签：

• 标题标签：在html中人为定义了六种标题h1-h6，都是双标签。在一个当中，我们只允许出现一个h1.

• 段落标签：<p> </p>

• 换行标签：<br/>

• 图片标签：<img src="地址" alt="当图片加载失败时，显示的文字" width = “宽度” height=“高度” title =“当鼠标悬停时，显示的文字”> </img>

• 链接标签：<a href=“目标地址”> 链接标题<a/>
  1）Target 这个属性可以设置新页面在哪个窗口打开，当值为_blank 的时候可以在新窗口打开。打开新的网页
  2）Href 的属性值设置为 # 的时候，可以设置为空链接，它的作用就是当用户点的时候不会发生跳转

• 表单标签：

<form action="" method="">  //表单域
	<input type="text"/>  //文本输入框
	<input type="password"/>  //密码输入框
	<input type="submit"/>  //提交按钮
	<input type="reset"/>  //重置按钮
	<input type="button" vlaue="按钮"/>  //普通按钮
	<input type="radio" name="" checked="设置默认值"/>  //单选框
	<input type="checkbox" name=""/>  //复选框
	<textarea rows="行数" cols="列数"> </textarea>  //文本框
	<select>  
		<option value="" selected="设置默认选项">选项1</option>
	</select>    //下拉框
</form>

（5）路径

• 绝对路径：绝 对 路 径 一 般 是 以 盘 符 为 起 点 来 进 行 查 找 ， 或 者 就 是 一 个 绝 对 URL 地 址
• 相对路径：相对路径就是相对某一个已知的文件为起点进行资源的查找

（6）相对路径法：我们人为的将相对路径分为三种：同级路径、下级路径、上级路径。

• 同级路径：同级指的就是 HTML 网页和目标文件在同一级目录里。对于同级路径的使用，我们只需要写入目标图片的名称即可。
• 下级路径：下级指的就是文件在 html 文件的下级目录中。此时我们需要使用一个 / 来向下进行穿透查找。（…下的…）
• 上级路径：文件在 html 文件的上级目录里，此时我们需要使用 …/ 来向上回退进行查找。

二、CSS

1. 根据web标准，规范网页书写的要求i，由W3C组织制定，及网页的结构、样式、行为三者相分离。

2. 理解

   结构：就是通过HTML标签搭建的网页的结构；
   样式：就是通过CSS对当前的网页结构进行修饰和美化；
   行为：就是通过JS让网页可以理解用户的一些操作。从而用户与网页之间产生交互。

3. CSS基本使用

   （1）定义：CSS再国内被定义为级联样式表、层叠样式表、样式表，作用是修饰当前网页中的HTML元素。
   （2）使用：①建立二者联系 ②在HTML中style标签中书写CSS代码 ③通过CSS选择器找到我哦们想要操作的元素，然后给他设置样式。

4. **选择器：**用于选中我们想要选中设置样式的元素

   分类：简单选择器 + 复合选择器

   （1）简单选择器：

   ①标签选择器：通过具体的 HTML 标签名称来选择元素。【会将当前网页中所有叫该名字的标签都选中】
   ②类名选择器：通过标签类名来选择元素
   ③Id选择器：通过 id 名称选择元素

   （2）复合选择器

   ①后代选择器：以某一个元素为起点，将它做为祖先然后不停的向下进行穿透查找，去选择它下面的后代元素
   ②并列选择器：就是将多个选择器使用 逗号 （英文,）进行连接，表示同时选中这些元素，然后设置相同的样式。

5. CSS文件的存放位置

CSS 代码可以被我们放在很多的地方，习惯性的有三种写法：内嵌 CSS 、外链 CSS、行内CSS

（1）内嵌 CSS 指的就是将 CSS 代码写在 html 网页中。
（2）外链 CSS 指的就是就将 CSS 代码写在外部的独立 CSS 文件中。
（3）行内 CSS 指的就是将 CSS 代码写在具体的 HTML 标签身上 。

6. 元素分类

   （1）转成块元素：display:block;
   （2）转成行内块元素：display:inline-block;
   （3）转成行内块元素：display:inline;

7. 常用的CSS样式

（1）音频标签

<audio autoplay controls loop>  //双标签，用来定义一个声音资源模块
	这是一个音频
	<source src="路径"/>
	...
</audio>

相关参数说明：
①autoplay 用来设置自动播放（有的浏览器都不支持）
②controls 调用当前设备的播放控制
③loop 设置当前音频循环播放
④默认 audio 里的文字不显示，只有在当前浏览器不支持这个标签的时候会显示文字

（2）视频标签：video，特点基本与音频标签相同

（3）常见文字样式设置

①设置行高：line-height:20px;
②水平对齐方式：text-align:left|center|right;
③字体大小：font-size:20px;
④字体粗细：font-weight:[100-900之间]|normal|bold；
⑤字体名称：font-family
⑥字体颜色：；color，可以设置颜色单词，也可以是十六进制的数字。

（4）文字阴影

①字体样式缩写：Font: 文字粗细 大小/行高 字体名称;

Font: bold 20px/200px '微软雅黑'; 

②文字阴影：Text-shadow: x y r color;

Text-shadow: 0px 0px 0px red; 

三、JS

JS是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂语言，是基于对象（Object Based）和事件驱动（Event Driver）的编程语言。

1. 基本数据类型

在JS中四种基本的数据类型：数值（整数和实数）、字符串型、布尔型或空值。

2. 常量

   ①整型常量
   ②实型常量
   ③布尔值
   ④字符串常量
   ⑤字符型常量
   ⑥空值

3. 变量

4. 表达式和运算符

（1）算术运算符

① 单目运算符：-（取反）、~（取补）、++（递加1）、–（递减1）
② 双目运算符：+、- 、* 、/、%（取模）、|（按位或）、&（按位与）、<<（左移）、>>（右移）

（2）比较运算符

<（小于） 、> （大于）、<=（小于等于） 、>=（大于等于）、==（等于）、!=（不等于）

（3）布尔逻辑运算符

!（取反）、&=（与之后赋值）、&（逻辑与）、|=（或之后赋值）、|（逻辑或）、^=（异或之后赋值）、 ^（逻辑异或）、?:三目操作符、||（或）、==（等于）、|=（不等于）
其中，三目操作符格式如下：
操作数？结果1：结果2
若操作数的结果为真，则表达式的结果为结果1，否则为结果2。

6. 程序控制流

（1）if 条件语句

if（表达式）{
	语句段1
}
else{
	语句段2
}

说明：如表达式为true，则执行语句段1，否则执行语句段2。

（2）for条件语句

for(初始化;条件；增量){
	语句集
}

说明：实现条件循环，当条件成立是，执行语句集，否则跳出循环体。

（3）while 条件语句

while(条件){
	语句集
}

说明：该语句和for语句一样，当条件为真是，重复循环，否则退出循环。

（4）break 和 continue语句

break语句使得循环从for或while中跳出，continue使得跳过循环内剩余的语句而进入下一次。

7. 函数

将程序划分为相对独立的部分，每部分编写一个函数。。从而，使各部分充分独立，任务单一、程序清晰、易懂、易读、易于维护。JS函数可以封装那些在程序中可能要多次用到的模块，并可作为事件驱动的结果而调用程序。

function 函数名（参数,变元）{
	函数体;
	retrun 表达式；
}

说明：
（1）当调用函数时，所用变量或字面量均可作为变元传递；
（2）函数名：定义自己函数的名字；
（3）参数表，是传递给函数使用或者操作的值，其值可以是常量，变量或其他表达式
（4）通过指定函数名（实参）来调用函数；
（5）必须使用return将值返回；
（6）函数名对大小写是敏感的。

8. 事件驱动及事件处理

（1）onClick单击事件

当用户点击鼠标按钮时，产生onClick事件，同时onClick指定的事件处理程序或代码将被调用执行。

（2）onChange改变事件

当利用text或textarea元素输入字符值改变时发生该事件，同时挡在select表格项中一个选项状态改变后也会引发该事件。

（3）onSelect选中事件

当Text 或Textarea对象中文字被加亮后，引发该事件。

（4）onFocus获得焦点事件

当用户点击ext 或Textarea对象以及select对象时，发生该事件。此时该对象成为前台对象。

（5）onBlur失去焦点事件

当Text 或Textarea对象以及select对象不在拥有焦点、而退到后台时，引发该事件。

（6）onLoad载入文件事件

当文档载入时，产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值。

（7）onUnload卸载文件事件

当Web页面退出时引发onUnload事件，并可更新cookie的状态。

9. 对象

JS中的对象是由属性（properties）和方法（methods）两个基本的元素构成。

（1）引用对象的途径：引用JS内部对象；有浏览器环境中提供；创建新对象。一个对象在被引用之前必须存在，否则引用将毫无意义。

（2）For…in 语句：For (对象属性名 in 已知对象名)

说明：该语句的功能时用于对一i之对象的所有属性进行操作的控制循环。将一个已知兑现该得所有属性反复置给一个变量；而不是使用计数器来实现的。

（3）with 语句

with object{

}

说明：在该语句体内，任何会变量的引用被认为是这个对象的属性；

（4）this 关键词

this是对当前的引用

（5）NEW 创建对象

Newobject = NEW Object（parameters table）

（6）对象属性的引用

obj.name = "属性值";  //使用 . 运算符
obj[1] = "属性值";   //通过对象的下标实现引用
obj["name"] = "属性值";  //通过字符串的形式实现

（7）对象的方法的引用

略

（8）常用对象的属性和方法

在JS中提供了string（字符串）、math（数值计算）
和Date（日期）三种对象和相关的方法。

JS中对于对象属性和方法的引用，有两种情况：其一是说该对象是静态对象，即在引用该对象的属性或方法是不需要为它创建实例；另一种对象则在引用它的对象或方法是必须为它创建一个实例，则该对象是动态对象。

（9）JS中的系统函数

• eval(字符串表达式)：放回字符串表达式的值；
• unEscape(string)：返回字符串ACI码
• escape(string)：返回字符串的编码
• parseFloat()：返回实数
• ParseInt(numberstring ，rad.X )：返回不同进制的数，其中radix是数的进制，numbs字符串数。

10. 创建新对象

（1）对象的定义：可以为对象指明其属性和方法。
（2）创建对象实例
（3）对象方法的使用
（4）JS中的数组：JS中没有提供像其他语言具有明显的数组类型，但是可以通过function定义一个数组，并使用New对象操作符创建一个具有下标的数组。从而可以实现任何数据类型的存储。

11. 使用内部对象系统

略

12. 窗口及输入输出

略

13. web页面信息的交互

略

14. 实现更复杂的交互

略