前端三件套

一、HTML

1.HTML 概述

• HTML 是用来写网页的语言，HyperText Markup Language 超文本标记语言。

  • 超文本：超越文本的限制，还可以去定义音频，视频，图片....

  • 标记语言：由标签构成

2.W3C

• W3C:W3C是万维网联盟,定义了网页由三部分组成

  • 结构：HTML 语言，基础框架

  • 表现：CSS 语言，控制界面的美观和排版

  • 行为：JavaScript 语言，相当于是方法可以去做一些跳转

• 先解压我提供的静态文件，双击 index.html

• 使用 css 时的界面
•  没有的时候

  3.标签

• HTML 标记标签通常被称为 HTML 标签 (HTML tag)

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

  • HTML 标签通常是成对出现的，比如 < b > < / b>

  • 标签的第一个元素是开始标签(开放标签)，有斜线的是结束标签（闭合标签）

• 初尝试需求：

 

• 总结

  • html 就是用来定义网页的文档

  • < body> < /body> 定义文档身体

  • < title> < /title> 用来定义html 文档的名称

3.1基础标签

• 基础标签：就是处理文字相关的标签

  • 标题标签：< h1 > < /h1>

    • h1 代表1级

    • h2 代表2级

  • 水平线：

    • < hr/>

  • 段落标签：

    • < p>< /p>

  • 样式标签（官方建议不要使用）

    • 控制颜色 style="color: red"

    • 对齐方式 align

    • 控制大小

  • 字体基本操作

    • 加粗 < b> < /b>

    • 斜体 < i >< /i>

    • 下划线 < u> < /u>

  • 换行 < br >

  • 居中 < center> < /center>

• 图片标签 < img src="路径" >< /img>

• 表格标签

  • table 定义表格

  • th 表示表头

  • tr 代表行

  • td 代表单元格

• 列表

  • 无序列表

    
        
    Coffee
        
    Milk
    

  • 有序列表

    
        
    Coffee
        
    Milk
    

• 布局使用 div

• 媒体

  • 音频

  • 视频

• a 标签 < a href = "http://www.sycoder.cn"> 管理后台地址

• 表单标签

  • 表单属性

    • action 指定数据提交的路径

    • method get post

  • 输入框

    • type 输入类型

      • text 文本

      • radio 单选

      • checkbox 复选框

      • password 密码

      • 文本域

The cat was playing in the garden.

•  输入属性

• value 默认值

• readonly 只读

• disabled 禁用

• size 控制大小

•  提交按钮

• 下拉列表

                信用
                价格
                销量
            

• 按钮

登录！

二、CSS

1.CSS 概述

• CSS 是一门语言，用于控制网页表现。

  • CSS 指的是层叠样式表* (Cascading Style Sheets)

  • CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素

  • CSS 节省了大量工作。它可以同时控制多张网页的布局

2.快速开始

• 定义方式

body {
  background-color: lightblue;
}

•  定义在 style 中

3.CSS 语法

• 语法规则

• 例子  

p {
  color: red;
  text-align: center;
}

• p 是我们选择器，选择段落

• 只要是 p 标签都能够生效

4.CSS 选择器

• 元素选择器：元素选择器根据元素名称来选择 HTML 元素

  • 例子:页面上的所有

    元素都将居中对齐，并带有红色文本颜色  

    p {
      text-align: center;
      color: red;
    }

• id 选择器：id 选择器使用 HTML 元素的 id 属性来选择特定元素

  • id 必须是唯一的

  • 要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id

  • 注意：id 不能以数字开头

  • 例子：这条 CSS 规则将应用于 id="para1" 的 HTML 元素

    #para1 {
      text-align: center;
      color: red;
    }

• 类选择器：类选择器选择有特定 class 属性的 HTML 元素

  • 如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

  • 例子：所有带有 class="center" 的 HTML 元素将为红色且居中对齐

    .center {
      text-align: center;
      color: red;
    }	

  • 注意：定只有特定的 HTML 元素会受类的影响(元素名称.className)

    p.center {
      text-align: center;
      color: red;
    }

•  通用选择器：通用选择器（*）选择页面上的所有的 HTML 元素。

  • 例子：CSS 规则会影响页面上的每个 HTML 元素

    * {
      text-align: center;
      color: blue;
    }

5.CSS 导入

• 外部 CSS

  • 前提是定义一个外部样式表

  • 每张 HTML 页面必须在 head 部分的 元素内包含对外部样式表文件的引用

• 内部 CSS

  • 如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表

  • 内部样式是在 head 部分的

• 行内 CSS

  • 行内样式（也称内联样式）可用于为单个元素应用唯一的样式

  • 如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性

  • 实例：行内样式在相关元素的 "style" 属性中定义

    This is a heading
    This is a paragraph.

• 层叠顺序

  • 行内样式（在 HTML 元素中）

  • 外部和内部样式表（在 head 部分）

  • 浏览器默认样式

6.CSS 颜色

三、JavaScript(后端程序员了解就行了)

1.概述

• avaScript 是属于 HTML 和 Web 的编程语言。

• 主要是去控制页面动态变化的

1.1演示开灯与关灯案例

• 程序代码  

开关灯程序演示
开灯

关灯

 

2.引入

• avaScript 必须位于 标签之内

• 分类

  • 内部脚本

  • 外部脚本

2.1内部脚本

2.1.1放入 head 里面

2.1.2放入 body 里面

    
js 在 body 中
    
没有修改段落前的值
    修改
    

• 注意：把脚本置于 元素的底部，可改善显示速度，因为脚本编译会拖慢显示

2.2外部脚本

• 把所有的脚本文件放到外部文件里面去，在需要使用的地方引用

• 注意：外部文件的扩展名是 js 结尾

• 在需要使用地方通过 < script src="myScript.js"> 引入

• 外部脚本不能包含

  3.基本使用

  1.使用js 输出

  • 分类

    • 使用 window.alert() 写入警告框

    • 使用 document.write() 写入 HTML 输出

    • 使用 innerHTML 写入 HTML 元素

    • 使用 console.log() 写入浏览器控制台

  • 使用 innerHTML

  
      
  使用innerHtml 输出
      
  这是段落的内容
      修改段落值
      
  

  •  使用 document.write()

    • 注意：使用之后会删除所有的 html

    • 该方法测试的时候使用就行

  
      
  使用writer 输出
      
      
  这是段落的内容
  

  •  使用 window.alert()

  
          
  alert 输出
          
          
  这是段落的内容
      

  • 使用 console.log()

    • 先按 F12 代开 console

  2.js 语句

  • 语句的构成：值，运算符，表达式，关键词，注释

  • 使用分号结尾和java一样（建议大家加上；养成良好的习惯）

  • js 的关键字

  

  3.js 语法

  • 变量（和java 一样）使用 var 修饰

  • 运算符（和java一样）

  • 字面量

  • 字符串

  • js 标识符

    • 首字母必须使用字母、下划线、或者 $

    • 数值不可以作为首字符

    • 使用下划线或者驼峰命名

  4.js 注释

  • 单行注释 //

  • 多行注释 ctrl +shift +/

  5.let 关键字

  • 可以用来改变作用域范围

  6.const 关键字

  • 类似于java 的final

  7.运算符

  

  

  

  

  

  8.数据类型

  • 数值

  • 字符串值

  • 数组

  • 对象

  • 注意：空值和 undifiend 不是一回事

  • == 和 === 的区别

  9.函数

  • 语法

    • 使用 function 关键字定义

    • 其后是函数名和括号 (参数 1, 参数 2, ...)

    • 可以有返回值，但是不用定义返回值类型,使用 return

  • 代码

  function name(参数 1, 参数 2, 参数 3) {
      要执行的代码
  }

  10.条件控制

  • if 语法

  if (条件) {
      如果条件为 true 时执行的代码
  } 

  • if else 语法

  if (条件) {
      条件为 true 时执行的代码块
  } else { 
      条件为 false 时执行的代码块
  }

  • if else if语法

  if (条件 1) {
      条件 1 为 true 时执行的代码块
  } else if (条件 2) {
      条件 1 为 false 而条件 2 为 true 时执行的代码块
   } else {
      条件 1 和条件 2 同时为 false 时执行的代码块
  }

  • switch

  switch(表达式) {
       case n:
          代码块
          break;
       case n:
          代码块
          break;
       default:
          默认代码块
  } 

  11.循环

  • for

  for (语句 1; 语句 2; 语句 3) {
       要执行的代码块
  }

  •  while

  while (条件) {
      要执行的代码块
  }

  • do while

  do {
      要执行的代码块
  }
  
  while (条件);

  4.常用对象

  1.字符串

  • 字符串长度使用 length 属性

  • == 和 === 的区别

  2.数组

  • 和java一样

  • 添加

  向数组添加新元素的最佳方法是使用 push() 方法

  3.自定义方法

  var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue",f:function (x) {
                  console.log(x);
              }};
          console.log(person.firstName);
          person.f(100000);

  5.HTML DOM

  • DOM 是文档对象模型HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准

  
  
  
      
      
  
  
      
  标题
      
  段落
  
  

   

  • dom 规范

    • Document 整个文本对象

    • Element 元素对象

    • Text 文本对象

  • dom 方法

    • getElementById 方法

    • innerHTML 属性

  

  6.BOM

  • 浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话

  • 弹框方法

  • window.prompt("sometext","defaultText");
    window.confirm("sometext");
    window.alert("sometext");

  7.事件

  • 常用事件

    • onchange 改变的时候做出操作

    • onClick 点击的时候

    • onmouseover

    • onmouseout