前端学习笔记HTML/CSS/JS

前端

一、day01

1、资源分类`

• 静态资源：使用静态网页开发技术发布的资源。
  特点：所有用户访问，得到的结果是一样的。
  如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态支援的解析引擎，可以展示静态资源。
• 动态资源：使用动态网站开发技术发布的资源。
  特点： 所有用户访问，得到的结果可能不一样。
  如：jsp/servlet,php,asp…
  如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

2、HTML

2.1、概念：

是最基础的网页开发语言，超文本标记语言（有标签构成的语言，标记语言不是编程语言）

2.2、快速入门

• html文档后缀名.html或者.tml
• 标签分类：围堵标签、自闭和标签：开始标签和结束标签在一起
• 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
  • html的标签不区分大小写，但是建议使用小写。

2.3、标签学习

1. 文件标签：构成html最基本的标签

   • html:html文档的根标签
     • head：头标签。用于指定html文档的一些属性。引入外部的资源
     • title：标题标签。
     • body：体标签
     • ：html5中定义该文档是html文档

2. 文本标签：和文本有关的标签

   • 注释：

   • to

     ：标题标签 - h1~h6:字体大小逐渐递减

   • ：段落标签

   • 
     ：换行标签

   • ---

     ：展示一条水平线 - 属性： - color：颜色 - width：宽度 - size：高度 - align：对其方式 - center：居中 - left：左对齐 - right：右对齐
   • ：字体加粗
   • ：字体斜体
   • :字体标签
   • :文本居中 - 属性： - color：颜色 - size：大小 - face：字体
   • 属性定义：
     • color：
       1. 英文单词：red,green,blue
       2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
       3. .# 值1值2值3：值的范围：00~FF之间。如： #FF00FF
     • width：
       1. 数值：width=‘20’ ,数值的单位，默认是 px(像素)
       2. 数值%：占比相对于父元素的比例

3. 图片标签
   img：展示图片
   * 属性：
   * src：指定图片的位置

   	* 代码：
   		 
   
   	    
   	
   	    
   	
   	    
   	
   	    
   

4. 列表标签：
   

   
   
   1. 
      有序列表
      
   
   
   
   
   
   
   
   • 
     无序列表
     
   
   

5. 链接标签
   点我
   * herf ：指定访问资源的URL（统一为资源定位符）
   * target：指定打开资源的方式：_self,当前页面打开。_blank，在空白页打开。

6. div和span：

   • div:每一个div占满一整行。块级标签
   • span：文本信息在一行展示，行内标签 内联标签

7. 表格标签：
   * table：定义表格
   * width：宽度
   * border：边框
   * cellpadding：定义内容和单元格的距离
   * cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
   * bgcolor：背景色
   * align：对齐方式
   * tr：定义行
   * bgcolor：背景色
   * align：对齐方式
   * td：定义单元格
   * colspan：合并列
   * rowspan：合并行
   * th：定义表头单元格
   * ：表格标题
   * ：表示表格的头部分
   * ：表示表格的体部分
   * ：表示表格的脚部分

day02 HTML/CSS

1、HTML表单

• input：可以通过type属性值，改变元素展示的样式
• label：指定输入项的文字描述信息
• textarea：文本域
• select: 下拉列表

1.1 . 表单标签定义

用于从采集用户输入的数据，用于和服务器进行数据交互。

   

     
   
    * action：指定提交数据的URL
               * method:指定提交方式
                   * 分类：一共7种，2种比较常用
                      * get：
                           1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
                           2. 请求参数大小是有限制的。
                           3. 不太安全。
                      * post：
                           2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
                           2. 请求参数的大小没有限制。
                           3. 较为安全。
   > 表单项中的数据要想被提交：必须指定其name属性

1.2 input属性：

• text：文本输入框，默认值；

• password：密码输入框；

• radio:单选框：
  1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
  2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
  3. checked属性，可以指定默认值

• checkbox：复选框
  1、一般会给每一个单选框提供value属性，指定其被选中后提交的值
  2. checked属性，可以指定默认值

• file：文件选择框；

• hidden：隐藏域，用于提交一些信息。

• 按钮：
  * submit：提交按钮。可以提交表单
  * button：普通按钮
  * image：图片提交按钮

• 表单练习

   
   
   
       
       
   
   
   
  
        用户名 ：
  
       密码：
  
       性别：  男
              女 
  
       爱好： 逛街
            Java
            游戏
  
       图片：
  
       隐藏域： 
  
       取色器：
  
       生日： 
  
       生日： 
  
       邮箱： 
  
       年龄： 
  
       省份：
               --请选择--
               北京
               上海
               陕西
            
  
       自我描述：
           
       
  
       
       
  
       
   
   
   
  

1.3 label：指定输入项的文字描述信息

label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。

1.4 select: 下拉列表

子元素：option，指定列表项

选择国家：
             -- 选择国家--
    		中国
    		美国
    		英国
		

1.5 textarea：文本域

• cols：指定列数，每一行有多少个字符

• rows：默认多少行。

2、CSS样式

2.1 css概念：

• Cascading Style Sheets 层叠样式表。多个样式可以作用在同一个html的元素上，同时生效。
  • 1、功能强大
  • 2、将内容展示和样式控制分离
    • 降低耦合度。解耦
    • 让分工协作更容易
    • 提高开发效率

2.2 CSS内联样式

在标签内使用style属性指定css代码，通过style属性来实现对内容样式的控制

hello css

2.3 CSS内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码

-- 定义style样式
hello css
  通过div调用

2.4 CSS外部样式

• 1、首先定义css资源文件。

• 2、在head标签内，定义link标签，引入外部的资源文件。

  – 定义css资源文件
  div{
  color:green;
  }
  在html文件中定义link标签
  
  引入外部资源
  

  hello css
  
  
  hello css

3、CSS选择器的使用

选择器：筛选具有相似特征的元素

每一对属性需要使用；隔开，最后一对属性可以不加；

一般定义方式：

选择器 {
			属性名1:属性值1;
			属性名2:属性值2;
			...
		}

3.1 基础选择器

1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
   • 语法：#id属性值{}
2. 元素选择器：选择具有相同标签名称的元素
   • 语法： 标签名称{}

注意：id选择器优先级高于元素选择器

1. 类选择器：选择具有相同的class属性值的元素。
   • 语法：.class属性值{}

注意：类选择器选择器优先级高于元素选择器

3.2 扩展选择器

1. 选择所有元素：
			* 语法： *{}
		2. 并集选择器：
			* 选择器1,选择器2{}
		
		3. 子选择器：筛选选择器1元素下的选择器2元素
			* 语法：  选择器1 选择器2{}
		4. 父选择器：筛选选择器2的父元素选择器1
			* 语法：  选择器1 > 选择器2{}

		5. 属性选择器：选择元素名称，属性名=属性值的元素
			* 语法：  元素名称[属性名="属性值"]{}

		6. 伪类选择器：选择一些元素具有的状态
			* 语法： 元素:状态{}
			* 如： 
				* 状态：
					* link：初始化的状态
					* visited：被访问过的状态
					* active：正在访问状态
					* hover：鼠标悬浮状态

3.2 盒子模型

用来页面控制布局

• margin：外边距
• padding： 内边距-> 默认情况下内边距的大小会影响整个盒子的大小
• box-sizing：border-box；设置盒子的属性，让width和height就是最终盒子的大小
• float：浮动·
  • left
  • right

day03 JavaScript基础知识

1、JavaScript概述

概念：一门脚本语言，运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎，不需要编译，就可以直接被浏览器解析执行。

作用：用来增强用户和html页面的交互过程，可以用来控制html元素，让页面有一些动态的效果，增强用户的体验。

console.log打印在浏览器的控制台

2、JavaScript基本语法

1. 内部JS：

   • 定义

3、数据类型

1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
   . string：字符串。 字符串 “abc” “a” ‘abc’
2. boolean: true和false
3. null：一个对象为空的占位符
4. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

4、变量

* var 变量名 = 初始化值;
*  typeof运算符：获取变量的类型。注：null运算后得到的是object

5、运算符

算数运算符、 赋值运算符、三元运算符和java相同，再次不做介绍

• 比较运算符：> < >= <= == ===(全等于)。
  在进行数据比较时，先进行数据类型转换，在进行值的比较。简单来说，在比较时，不考虑数据类型，直接判断数值是否相等。

  ===全等于，先进行类型的比较，在进行比较。如果不一样，则返回false。

• 逻辑运算符 && || !
  当数据为0、NaN、空、null、undefined为false，其余为全ture。
  6、流程控制语句

3、JavaScript 基本对象

1. Function：函数（方法）对象
   方法的定义格式：
   * var fun= new Function(形式参数列表，方法体)；
   * function 方法名称（形式参数列表）{
   方法体
   }；
   * var 方法名称 = function（形式参数列表）{
   参数列表
   }
   特点：length代表形式参数的个数。定义方法是不需要类型和返回值。如果方法名称相同则会覆盖原有的方法。在方法中有一个隐藏的内置对象。
   内置对象的使用：
   function 方法名称（）{
   arguments.length:获取传递的参数长度。
   arguments[0],arguments[1]：类似于数组，获取传递的参数。
   }

2. Array：数组对象
   数组的创建
   var arr = new Array(元素列表)；
   var arr= new Array(默认长度)；
   var arr= [元素列表]；
   方法：join(),将数组中的元素按照指定的参数参数分隔符拼接字符串
   push()，向数组的末尾添加一个或更多的元素，并返回新的长度。

4、RegExp：正则表达式对象

定义字符串的组成规则

1. 创建
   1. var reg = new RegExp(“正则表达式”)；
   2. var reg = /正则表达式/；
   3. 方法
   4. test(参数):验证指定的字符串是否符合正则定义的规范

4、Global

全局对象，这个Global中封装的方法不需要对象就可以直接调用

方法：

• encodeURI():url编码
• decodeURI():url解码
• encodeURIComponent():url编码,编码的字符更多
• decodeURIComponent():url解码
• parseInt():将字符串转为数字：逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
• isNaN():判断一个值是否是NaN
• eval():将 JavaScript 字符串，并把它作为脚本代码来执行。

day04 JavaScript高级

1、BOM

Browser Object Model 浏览器对象模型，将浏览器的各个组成部分封装成对象。

组成：

• Window：窗口对象
• Navigator：浏览器对象
• Screen：显示器屏幕对象
• History：历史记录对象
• Location：地址栏对象

1.1 Window：窗口对象

1. 与弹出框有关的方法：
   alert() 显示带有一段消息和一个确认按钮的警告框。
   confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
   * 如果用户点击确定按钮，则方法返回true
   * 如果用户点击取消按钮，则方法返回false
   prompt() 显示可提示用户输入的对话框。
   * 返回值：获取用户输入的值
2. 与打开关闭有关的方法：
   close() 关闭浏览器窗口。
   * 谁调用我 ，我关谁
   open() 打开一个新的浏览器窗口
   * 返回新的Window对象
3. 与定时器有关的方式
   setTimeout() 在指定的毫秒数后调用函数或计算表达式。单次执行
   * 参数：
   1. js代码或者方法对象
   2. 毫秒值
   * 返回值：唯一标识，用于取消定时器
   clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
   setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。循环执行
   clearInterval() 取消由 setInterval() 设置的 timeout。
4. 属性：
   1. 获取其他BOM对象：
   history
   location
   Navigator
   Screen:
   2. 获取DOM对象
   document

1.2 Location和History对象

1. 创建(获取)：window.location或者直接使用location；
2. 方法：relodoad（）重新加在当前文档。
3. 设置属性：href，设置url地址值。
4. 创建或获取history对象值。window.history、history。
5. 方法：back，加载history列表中的的前一个url，意思就是返回上一步。forward()前进。go(参数)，加载指定的某个历史记录。
6. length 返回当前窗口历史列表中的 URL 数量

2、DOM

概念：Document Object Model 文档对象模型.

将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作.。CRUD增删改查

控制html文档的内容，获取页面标签（元素）对象：Element使用方法：

doccument.getElementById(“id值”)：通过元素的id值获取元素对象。在html中定义了元素的id值。

//获取 img对象

作用：修改获取到的对象的属性值、修改标签的具体内容。

 light2.onclick = fun2;
 title.innerText="我怎么知道你-是谁？"

innerHTML获取标签体之间的内容：什么是标签体，围堵标签之间的内容。不能够获取自闭和标签之间的内容。

创建其他DOM对象

      createAttribute(name)；
      createComment()；
      createElement()；
      createTextNode()；

3、事件

某些组建被执行了某些操作之后，出发这些代码。

• 事件源：组件。如： 按钮 文本输入框…:比如：汽车

• 监听器：代码。：报警器

• 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。比如：将报警器安装在汽车上

• 绑定事件：在html代码上指定事件的属性。onclick–单击事件。通过js代码获取元素对象，指定事件属性，设置一个函数。比如：触发报警器，踢一脚汽车。

   var img=document.getElementById("img");
   img.onclick = fun;
  function fun() {
       alert("别点我")
   }
   funct
  

常用事件：

• 点击事件
• 鼠标事件
• 焦点事件
• 加载事件
• 表单提交事件