HTML+CSS+JAVASCRIPT基础

系统架构：

​ b（浏览器）/s（服务器）架构

​ c（客户端）/s（服务器）架构

网页内容包含：

​ 文字、图片、超链接、视频等等

什么是html？

• html是超文本标记语言

• 超文本:文字+图片+音视+链接等

• 标记:浏览器根据已定义好的某一对标签来显示对应的内容

• 语言：一门计算机语言

web前端三项技术：

• html：超文本标记语言

• css：设置元素的属性样式

• Js：让元素具有动态效果

• Web开发工具：

• IDE工具：快捷的开发效率、语法提示、语法高亮

• HTML5新特性：

• 引入原生多媒体支持

• 映入可编程内容（例如：画图）

• 引入了语义Web

• 注释快捷键：

• Ctrl+/

html标签：

• HTML标签是由尖括号包围的关键词，比如

• HTML标签一般是成对出现的，比如；

• 标签对中的第一个标签是开始标签，第二个标签是结束标签

• 开始和结束标签也被称为开放标签和闭合标签

• 但也有些标签是单标签或者自关闭标签 如：
  

  ---

  等

html网页的基本结构：

（声明） （头部） （定义字符编码） （网页标题） 你好，蜗牛（主体）

常用标签：

• font标签：设置字体的属性，字体的属性有：size,color,face等

• hr单标签：分割线

• br单标签：换行标签

• p标签：文本段落标签

• h系列标签（h1-h6）:一共六个标签 从 h1 到h6 ，主要应用于文章的标题。效果为文本字体加粗和大小，其中h1字体最粗和字体尺寸最大

• 常用文本标签：b /strong加粗，i /em斜体，u下划线

img标签是单标签：

• 属性：
• src：指定要显示图片的地址可以是网络图片（网络地址一般要有http:// 前缀），也可以是本地的图片。
• 地址分为绝对地址或者相对地址
• 绝对地址：一般以http:// 或者ftp:// 或者系统盘符（c:）开头的地址
• 相对地址：相对于当前目录而言其他文件所在的地址
• 相对地址中上一级目录（…/） ,下一级目录(/)
• width: 宽度
• height: 高度
• alt:图像的替代文字 title:鼠标悬停提示文字

超链接标签：使文本拥有跳转页面的功能

• 属性：
  href ：指定要跳转的页面的地址
• src与href的区别：不同标签使用src与href引用当前网页之外的资源，主要区别如下。
  src（ source ）的值是外部资源的访问路径，在请求src资源时会将其指向的资源下载并应用到当前文档中，此时外部资源作为当前文档的一部分（引入），一般用作非文本引入方式。
  href 表示超文本引用（hypertext reference），在使用href请求外部资源时，会下载外部资源，同时当前网页读取外部资源的内容（引用）。一般用作文本引入方式。

特殊符号：

• &lt :<
• &gt:>
• &reg:注册商标
• &amp:&
• &nbsp: 空格
• &copy:版权符号©
• &trade：商标™

表格：table标签要与tr,td配合使用

• 属性：

Border :表格边框
Width : 表格宽度
Align ：对齐方式
Cellspacing: 单元格之间的距离
Cellspadding : 单元格边框和内容之间的距离

• 跨行跨列属性：

colspan跨列

rowspan跨行

表单：form标签：

名字：

密码：

• 文本框

• 密码框

• 单选框

  男
  女

• 列表框

  … …

• 按钮

CSS基础

目标：

充分理解HTML中CSS样式表的应用
充分理解CSS如何与元素进行关联
熟练运用CSS属性完成网页的布局与美化
熟练运用CSS各种格式化属性
熟练使用CSS来操作文本、图像、表格、超链接等
熟练使用CSS来操作一些常用的特效属性

优点：

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录

CSS：层叠样式表，主要负责对网页的美化

css的三种使用方式：

• 元素内嵌样式表（放在style标签内）
• 文档内嵌样式表（放在head标签内，用style标签包裹）
• 外部样式表（用link标签引用）

使用方法：

• 网站主页一般使用文档内嵌样式表
• 其余页面使用外部样式表
• 元素内嵌样式表一般不使用

选择器：

• 标签选择器：h1{ },body{}
• ID选择器:：#zl{}

• 类选择器：.zl{}

• 组合选择器：h1 #zl .zl{}
• 伪类选择器：对鼠标发生指定动作时设置的样式
  • a:link 打开时超链接默认样式
  • a:hover 鼠标悬停时的样式
  • a:visited 鼠标点击后的样式
  • a:active 鼠标点击后不释放的样式

常用文本CSS属性：

• color:red; 颜色
• text-align:center; 对齐方式
• font-szie:20px; 大小
• font-weight:bold; 粗细
• font-family:宋体；字体
• font-style：italic；风格

容器类CSS属性：

• width 宽度
• height 高度
• border 边框
• background-color 背景色
• background-image 背景图片
• line-height 行高
• text-decoration:none;取消超链接下划线
• margin：0 auto; 外边距

盒模型基础：

• 外边距 margin
• 边框 border
• 内边距 padding
• 内容 content
• 外边距、内边距为组合属性，可以有多种书写模式，但效果是一致的
• 四个(顺时针)：上 右 下 左
• 三个：上 左右 下
• 两个：上下 左右
• 一个：所有四边都一样
• 边框
• border：宽度 样式 颜色

浮动（float）:

• 浮动（本质是一个css属性：float ，值为left 或者right）
• 当需要灵活布局的时候，我们就要使用盒模型的另一个很重要的特性，也就是浮动。
• 当宽度足够时，浏览器会尽可能用一行显示完所有使用浮动的元素
• 如果宽度不足以一行容下所有浮动元素时，不能显示完的浮动元素会显示在下一行，依次类推，直到显示所有浮动元素
• 如果宽度不足以一行容下所有浮动元素时，不能显示完的浮动元素会显示在下一行，依次类推，直到显示所有浮动元素
• 如果宽度不足以一行容下所有浮动元素时，不能显示完的浮动元素会显示在下一行，依次类推，直到显示所有浮动元素

盒模型定位:

• 在盒模型中，我们可以设置div为行级元素，或设置为浮动效果，让其按照文档流顺序进行排序。但有的时候需要让一个div一直固定于页面的某个地方，如蜗牛学院官网
• CSS的position属性来对div重新设置其位置
• 静态定位(static)：HTML元素的默认值，即没有定位，静态定位的元素不会受到top, bottom, left, right影响
• 固定定位(fixed)：元素的位置相对于浏览器窗口是固定位置(在不同的层次进行布局)
• 相对定位(relative)：相对定位元素的定位是相对其原来位置的偏移量
• 绝对定位(absolute)：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于父元素也需要使用绝对定位

JavaScript基础

目标：

• 充分理解JavaScript语法规则，包括输入与输出、变量与数据类型、控制结构等
• 熟练运用JavaScript的数组并能够独立完成一些基础算法的实现
• 熟练运用JavaScript的函数定义、调用和参数传递以及递归调用
• 熟练运用JavaScript来进行可重用的代码开发
• 熟练运用JavaScript的字符串对象处理各种字符串相关问题

JavaScript简介：

• JavaScript是一门编程语言
• 编程语言：能够编写程序的计算机语言
• 常见编程语言：java c c++ JavaScript Python 等等
• 每个编程语言都有不同的应用场景
• 大多数编程语言都支持一些基础特性，比如变量、控制结构（if for ）等，所以学一门编程语言，其实相当于打开了所有编程语言的大门
• 每年网上都会出炉一个编程语言排行榜，用于记录前一年里业界各种编程语言的使用情况
• 为什么学习JavaScript？
• JavaScript是前端的核心技术之一，开发网页必备技能
• 相对于其他编程语言，JavaScript更好入门
• js很多特性借鉴于面向对象（java），为后期学习java和测试的Python打好基础
• js需要借助网页才能使用，实际上我们会在html页面里编写js代码

JavaScript的作用：

• JavaScript的主要职责：负责用户跟网页之间的所有交互，具体来讲，大致包含以下部分：
• 响应鼠标的点击、悬停等动作并实现相应的功能，比如搜索、登录、注册等
• 实现酷炫的动画效果：网页上一些动画也是有js的参与，而跟鼠标有关联的动画会使用了大量js代码来完成
• 提交数据和获取服务器传过来的数据。比如点击登录按钮后会将用户数据发送至服务器并接受服务器传过来的数据

JavaScript的构成：

• JS主要由以下三部分组成：
• 核心（ECMAScript）：它规定了JavaScript这门语言的一些组成部分：语法、类型、语句、关键字、保留字、操作符、对象。它是JavaScript的核心部分
• 文档对象模型（DOM）：专门用于完成和网页之间的交互
• 浏览器对象模型（BOM）：主要用于对浏览器窗口进行一些操作，比如设置窗口大小，回滚上一页、打开新窗口等

JavaScript的基本结构：

• 在html中使用

• 使用

javaScript基础-输入与输出:

• 向网页输出信息
• document.write(“内容”)
• 在js中，用引号包围的一串字符我们称为是字符串，是一种数据类型（String）
• 如果是数字，那么直接输出即可，js里也有数字类型（Number）
• 获取用户输入的信息
• prompt(“提示信息”)
• 执行后会在网页上显示一个输入框，框上面就是圆括号里写的字符串
• prompt()会保存用户输入 的信息。我们可以利用document.write进行输出

JavaScript基础-变量:

• 变量是用于存储信息的"容器"。在JavaScript中使用var关键字来定义变量：
• var 变量名= 值;
• 变量名命名规则
• 变量必须以字母开头
• 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
• 变量名称对大小写敏感（y 和 Y 是不同的变量）
• 注释
• 单行注释：// 注释信息
• 多行注释：/* 注释信息 */

JavaScript基础-数据类型:

• 数据类型：变量对应的存储方式，每一个类型对应的存储空间不同，从而更合理的使用内存

基本数据类型

• 数值类型（Number）：包含整数和浮点数
• 布尔类型（Boolean）：只有true和false两个值 【两个值小写】
• 字符串类型（String）：表示一个字符序列，必须使用单引号（’’）或双引号（""）括起来
• Undefined类型（Undefined）：用来确定一个已经创建但还没有赋初值的变量，只有一个值为：undefined 【小写】
• Null类型：表名某个变量的值为空，只有一个值为：null【小写】

符合数据类型

• Object类型（Object）：该类型的值为对象，对象由一些列属性（变量）和方法（函数）的集合，访问它们时用：. (英文点号)
• 数组（Array)：一系列的变量组成
• 函数（Function）:包含一段可执行的代码

JavaScript基础-运算符:

• JavaScirpt中的运算符主要分为:
• 算术运算符：+ - * /(除) %(取余) ++ –
• 赋值运算符：= += -= *= /= %=
• 关系运算符：== =(绝对等于：值和类型相等) != !(值或类型不相等) > < >= <=
• 逻辑运算符：&& || !
• 三元表达式：variablename=(condition)?value1:value2

JavaScript基础-流程控制:

• 程序的执行流程:
• 程序是按编写的流程从上到下依次执行
• 在JavaScript中提供不同的控制语句来控制程序的执行流程
• 条件结构
• 分支结构
• 循环结构
• break和continue

JavaScript基础-条件语句:

• if条件语句
• else if 和 else部分可以省略

JavaScript基础-分支结构：

• switch case语句

JavaScript基础-循环结构：

• JavaScript 支持不同类型的循环：
• for - 循环代码块一定的次数
• for/in - 循环遍历对象的属性
• while - 当指定的条件为 true 时循环指定的代码块
• do/while - 同样当指定的条件为 true 时循环指定的代码块
• for循环
• while循环
• do/while循环
• while循环和do/while的区别：前者可能一次都不执行，后者至少执行一次
• break 语句用于跳出整个循环
• continue 用于结束当前循环

JavaScript基础-数组：

• 数组
• 数组是JavaScript的数据类型
• 用于保存多个数据
• 数组定义
• var 变量名 = [1,”deng”,true,45];
• 数组基础操作
• 数组通过下标来指示数组中每个元素（数据）的位置。是一个数字，从0开始
• 获取数组某个元素： 数组变量名[下标]
• 获取数组的长度 : 数组变量名.length
• 添加一个数组元素（数组末尾添加） : 数组变量名[数组变量名.length]=新元素
• 获取每一个数组元素： 遍历
• 数组的一些常规操作
• 查找数字数组中的最大值
• 数组如何倒序输出
• 数组如何倒序存放

JavaScript基础-函数：

• 函数(方法)

• 由可重复执行的代码块组成

• unction functionname(a,b){

  ​ 执行代码
  }

• 参数列表

• 不带参数的方法

• 带参数的方法

• 返回值

• 有时，我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现

function myFunction(){
var x=5;
return x;
}

• 使用return整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行后面的代码

function myFunction(a,b){
if (a>b) {
return;
}
x=a+b
}
document.write(“函数后面的语句”)

• 变量的作用域
• 局部变量：在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕，本地变量就会被删除
• 全局变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它
• JavaScript 变量的生存期
• JavaScript 变量的生命期从它们被声明的时间开始
• 局部变量会在函数运行以后被删除
• 全局变量会在页面关闭后被删除

JavaScript基础-DOM简介：

• HTML DOM (文档对象模型)
• 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），形成一个DOM树
• JS操作DOM
• 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML

1. JavaScript 能够改变页面中的所有 HTML 元素
2. JavaScript 能够改变页面中的所有 HTML 属性
3. JavaScript 能够改变页面中的所有 CSS 样式
4. JavaScript 能够对页面中的所有事件做出反应

JavaScript基础-改变 HTML：

• 改变 HTML 输出流
• 在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容

• 绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档

JavaScript基础-获取DOM元素：

• JavaScript提供了三种方法来获取HTML 元素：
• 通过 id 找到 HTML 元素
• 通过标签名找到 HTML 元素
• 通过类名找到 HTML 元素
• 通过 id 查找 HTML 元素
• var x=document.getElementById(“intro”);
• 通过标签名查找 HTML 元素
• var y=document.getElementsByTagName(“p”);
• 通过类名找到 HTML 元素
• var x=document.getElementsByClassName(“intro”);

JavaScript基础-改变 HTML：

• 改变 HTML 内容
• 修改 HTML 内容的最简单的方法时使用 innerHTML 属性

document.getElementById(id).innerHTML=新的 HTML

• 修改 HTML 文本内容的最简单的方法时使用 innerTEXT 属性

document.getElementById(id).innerTEXT=新的TEXT

• 改变 HTML 属性

document.getElementById(id).attribute=新属性值

• 改变 HTML 样式

document.getElementById(id).style.property=新样式

JavaScript基础-事件：

• HTML DOM 允许我们通过触发事件来执行代码

• 元素被点击

• 页面加载完成

• 输入框被修改

• 实例

• 我的标题 1

  点我!

JavaScript基础-DOM 元素(节点)新增删除操作：

• 创建新的 HTML 元素
• document.createElement(元素名);
• 在已有的元素中追加元素
• element.appendChild(创建的新元素);
• 删除已有的 HTML 元素
• parent.removeChild(要删除的元素);