HTML、CSS、JS浅浅浅浅浅解

初识Web

web标准

• web标准也被称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Cnsortium，万维网联盟）负责制定。
• 三个组成部分
  • HTML:负责网页的结构（页面元素和内容）。
  • CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）。
  • JavaScript：负责网页的行为（交互效果）。

HTML

HTML：超文本标记语言

• 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。
• 标记语言：由标签构成的语言。
  • HTML标签都是预定义好的。例如：使用展示超链接，使用展示图片，展示时评。
  • HYML代码直接在浏览器中运行，HTMl标签由浏览器解析。

快速入门：

1. 新建文本文件，后缀名改为.html。
2. 编写HTML结构标签
3. 在中填写内容。

CSS

CSS:层叠样式表，用于控制页面的样式（表现）

• CSS引入方式：

  • 行内样式：

    <h1 style ="…">
    

  • 内嵌样式

    <style>_</style>
    

  • 外联样式

    xxx.css	<link href="…">
    

颜色表示形式：

表示方式	表示含义	取值
关键字	预定义的颜色名	red，green，blue…
rgb表示法	红绿蓝三原色，每项取值范围：0~255	rgb（0，0，，0）、rgb(255,255,255)
十六进制表示法	#开头，将数字转换成十六进制表示	#000000、#ff0000#cccccc,简写：#000、#ccc

• CSS选择器：用来选取需要设置样式的元素（标签）

  • 元素选择器

    元素名称{
    	color:red;
    }
    
    h1{
    	color:red;
    }
    <h1> Hello CSS</h1>
    

  • id选择器

    #id属性值{
    	color:red;
    }
    
    #hid{
    	color:red;
    }
    <h1 id="hid"> CSS id Selectop</h1>
    

  • 类选择器

    .class属性值{
    	color:red;
    }
    
    .cls{
    	color:red;
    }
    <h1 class="cls">CSS class
    

  • 优先级：id选择器 > 类选择器 > 元素选择器

超链接

标签<a>
属性：
	href：指定资源访问的url
	target：指定在何处打开资源
	_self：默认值，在当前页面打开
	_blank：在空白页面打开

CSS属性

text-decoration:对丁添加到文本的修饰，none表示定义标准的文本
color：定义文本的颜色

• 音频视频标签

  <audio> <video>
  

• 换行、段落标签

  换行：<br>;段落：<p>
  

• 文本加粗标签

  <b><strong>
  

• CSS样式

  line-height:设置行高
  text-indent:定义第一个行内容的缩进
  text-align:规定元素中的文本的对齐方式
  

• 注意：

  在html中无论输入多少个空格，只会显示一个。可以使用空格占位符： 

页面布局

• 布局标签：实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签
• 标签：
• 特点：
  • div标签:
    • 一行只显示一个（独占一行）
    • 宽度默认是父元素的宽度，高度默认由内容撑开
    • 可以设置宽高（width\height）
  • span标签：
    • 一行可以显示多个
    • 宽度和高度默认由内容撑开
    • 不可以设置宽高（width,height）

盒子模型

• CSS盒子模型

  组成：内容（Content）、内边距（padding）、边框（border）、外边距（margin）
  

• CSS属性

  width：设置宽度
  height；设置高度
  border：设置边框的属性
  padding：内边距
  margin：外边距
  注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 -位置，如：padding-top、padding-left、padding-right。
  

表格标签

• 场景：在网页中以表格（行列）形式整齐展示数据，如：班级表。

• 标签：

• • 标签	描述	属性/备注
    	定义表格整体，可以包裹多个
    border：规定表格边框的宽度 width：规定表格的宽度 cellspacing：规定单元之间的空间
    表格的行，可以包裹多个
    		表示表头单元格，具有加粗居中效果
    		表格单元格（普通），可以包裹内容	如果是表头单元格，可以替换为	表单标签

表单标签

• 场景：在网页中主要负责数据采集功能，如，注册、登录等数据采集。
• 标签：
• 表单项：不同类型的input元素、下拉列表、文本域等。
  • :定义表单项，通过type属性控制输入形式
  • < select> :定义下拉列表。
  • < textarea>:定义文本域 。
• 属性：
  • action：规定当提交表单时向何处发送表单数据，URL
  • method：规定用于发送表单数据的方式。GET，POST。
• 注意：表单项必须有name属性才可以提交。

type取值	描述
text	默认值，定义单行输入的字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/时间日期
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit/reset/button	定义提交按钮/重置按钮/可点击按钮

JS

• js引入方式
• js基础语法
• js函数
• js对象
• js事件监听

js引入方式

• 内部脚本：将js代码定义在HTML页面中
  • js代码必须位于标签之间
  • 在HTML文档中，可以在任意地方，放置任意数量的

js基础语法

• 区分大小写：与java一样，变量名、函数名以及其他一切东西都是区分大小写的
• 每行结尾分号可有可无
• 注释:同Java
• 大括号表示代码块。

输出：

• 使用window.alert()写入警告框
• 使用document.write()写入HTML输出
• 使用console.log()写入浏览器控制台。

变量

• js中使用var关键字来声明变量（var作用域比较大，全局变量，并且重复定义）
• js是一门弱类型语言，变量可以存放不同类型的值。（感觉类似Object）
• 变量名命名规则
  • 组成的字符可以是任何字母，数字，下划线，或者是美元符号￥
  • 数字不能开头
  • 建议使用驼峰命名

数据类型

js中分为原始数据类型和引用数据类型

• 原始类型

  • number：数字（整数、小数、NaN（Not啊、 Number））
  • string：字符串，单双引都行
  • boolean：布尔。
  • null：对象为空
  • undefined;dang:当声明的变量未初始化时，该变量的默认值是undefined

• 使用typeof运算符可以获取数据类型。

  var a = 20;
  alert(typeof a);
  

• 运算符

  大部分和Java都一样，只有一个

  和=

  双等于号比较前会进行类型转换，===不会，如果类型不统一直接返回false。

函数

• 函数是被设计为执行特定任务的代码块

• js函数通过function关键字进行定义，语法为：

  function functionName(形参列表){
  	//代码
  }
  
  var funcationName = function(形参列表){
      //代码
  }
  

• 注意：

  • 形参不需要类型，因为js是弱类型语言
  • 返回值也不需要定义，可以在函数内部直接使用return返回

• 调用：函数名称（实际参数列表）

js对象

Array

• js中array对象用于定义数组

• 定义：

• var 变量名 = new Array(元素列表)；
  var arr = new Array(1,2,3,4);
  var 变量名 = [元素列表];
  var arr = [1,2,3,4];
  

• 访问:

  arr[索引] = 值;
  arr[10] = "hello";
  

• 注意：数组为可变长，类型可变

常见方法

• foreach（）遍历数组中每个有值的函数，并调用一次传入的函数。
• push（）将新元素添加到数组末尾，并返回新的长度。
• splice（）从数组中删除元素。

String

常见方法

• charAt（）返回在指定位置的字符
• indexof（）检索字符串
• trim（）去除字符串两边的空格
• substring（）提取字符串两个指定的索引号之间的字符

JSON

• 概念：JavaScript object nation
• json是通过js对象标记法书写的对象
• 由于语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

定义

var 变量名:'{"key":value1,"key2":value2}';

常用方法：

• parse（）将json转换为js对象
• stringify将js对象转换为json字符串

BOM

• 概念：Browser Object Model浏览器对象模型，允许js与浏览器对话，js将浏览器的各个组成部分封装为对象。
• 组成
  • Window：浏览器窗口对象
  • Navigator：浏览器对象
  • Screen：屏幕对象
  • History：历史记录对象
  • Location：地址栏对象

window

• 介绍：浏览器窗口对象

• 获取：直接使用window，其中window.可以省略，

  window.alert("Hello,World");
  alert("Hello,World");
  

• 属性

  • histor：对history对象的只读引用
  • location：对于窗口或框架的location对象
  • navigator：对navigator对象的只读引用

• 方法：

  • alert（）：显示带有一段消息和一个确认按钮的警告框。
  • confirmI():显示带有一段消息以及确认按钮和取消按钮的对话框
  • setlnterval（）：按照指定的周期（以毫秒计）来调用函数或者计算表达式
  • serTimeout（）：在指定的毫秒数后调用函数或计算表达式。

location

• 介绍;地址栏对象
• 获取;使用window.location互殴去，其中window可以省略
• 属性;
  • href：设置或返回完整的URL。

DOM

• 概念：Document Object Model，文档对象模型。

• 将标记语言的各个组成部分封装为对应的对象。

  • Documen;整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment:注释对象

• HTML中Element对象可以通过Document对象获取，而Document对象是通过window对象获取的

• Document对象中提供了一下获取Element对象的函数：

  • 根据id属性值获取，返回单个Element对象

    var h1 = doucment.getELemnetById('h1');
    

  • 根据标签名称获取，返回Element对象数组

    var divs = document.getElementsByTarName('div');
    

  • 根据name属性值获取，返回Element对象数组

    var hobbys = document.getElemnetsByName('hobby');
    

  • 根据class属性值获取，返回Element对象数组。

    var cls = dcument.getElementsByClassName('cls');
    

事件监听

• 事件：HTML事件是发生在HTML元素上的事情。如：
  • 按钮被点击
  • 鼠标移动到元素上
  • 按下鼠标按键
• 事件监听：js可以在事件被侦测到时执行代码。

事件绑定

• 通过HTML标签中的事件属性进行绑定

  <input type = "button" onclick="on()" value="按钮1">
  
  <script>
  	function(){
  		alert("我被点击了");
  	}
  </script>
  

• 通过DOM元素属性绑定

  <input type="button" id="btn" value="按钮2">
  <script>
      doucment.getElementById('btn').onclick = function
  </script>
  

常见事件

时间名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

Vue

• vue是一套前端框架，免除原生js中dom操作，简化书写
• 基于MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上

快速入门

• 新建html文件，引入vue.js文件

  <script src = "js/vue.js"</script>>
  

• 在js代码区域，创建Vue核心对象，定义数据模型

  <script>
  	new Vue({
  		el:'#app',
  		data:{
  			message:"hello,Vue"
  		}
  	})
  </script>
  

• 编写视图

  <div id = "app">
  	<input type = "text" v-model = "message">
  	{{message}}
  </div>
  

• 插值表达式

  • 形式：{{表达式}}
  • 内容可以是
    • 变量
    • 三元运算符
    • 函数调用
    • 算数运算

常用指令

指令	作用
v-bind	为html标签绑定属性值，如设置href，css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为html标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else-if	同上
v-showe	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

Ajax

• 概念：Asynchronous JavaScript And XML，异步的js和xml
• 作用
  • 数据交换：通过ajax可以给服务器发送请求，并获取服务器响应的数据
  • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想，用户名是否可用的校验。