HTML、CSS、JS浅浅浅浅浅解

初识Web

web标准

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

HTML

HTML：超文本标记语言

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

快速入门：

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

CSS

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

CSS引入方式：
- 行内样式：
  css 复制代码
```
<h1 style ="...">
```
- 内嵌样式
  css 复制代码
```
<style>_</style>
```
- 外联样式
  css 复制代码
```
xxx.css	<link href="...">
```

颜色表示形式：

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

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

元素选择器

css 复制代码

元素名称{
	color:red;
}

h1{
	color:red;
}
<h1> Hello CSS</h1>

id选择器

css 复制代码

#id属性值{
	color:red;
}

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

类选择器

css 复制代码

.class属性值{
	color:red;
}

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

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

超链接

html 复制代码

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

CSS属性

css 复制代码

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

音频视频标签
html 复制代码
```
<audio> <video>
```
换行、段落标签
html 复制代码
```
换行：<br>;段落：<p>
```
文本加粗标签
html 复制代码
```
<b><strong>
```

CSS样式

css 复制代码

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

注意：

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

页面布局

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

盒子模型

CSS盒子模型

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

CSS属性

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运算符可以获取数据类型。
javascript 复制代码
```
var a = 20;
alert(typeof a);
```
运算符

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

和=

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

函数

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

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

javascript 复制代码

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

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

注意：
- 形参不需要类型，因为js是弱类型语言
- 返回值也不需要定义，可以在函数内部直接使用return返回
调用：函数名称（实际参数列表）

js对象

Array

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

js 复制代码

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

访问:
js 复制代码
```
arr[索引] = 值;
arr[10] = "hello";
```
注意：数组为可变长，类型可变

常见方法

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

String

常见方法

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

JSON

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

定义

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.可以省略，
js 复制代码
```
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对象
  js 复制代码
```
var h1 = doucment.getELemnetById('h1');
```
- 根据标签名称获取，返回Element对象数组
  js 复制代码
```
var divs = document.getElementsByTarName('div');
```
- 根据name属性值获取，返回Element对象数组
  js 复制代码
```
var hobbys = document.getElemnetsByName('hobby');
```
- 根据class属性值获取，返回Element对象数组。
  js 复制代码
```
var cls = dcument.getElementsByClassName('cls');
```

事件监听

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

事件绑定

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

js 复制代码

<input type = "button" onclick="on()" value="按钮1">

<script>
	function(){
		alert("我被点击了");
	}
</script>

通过DOM元素属性绑定

js 复制代码

<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文件
js 复制代码
```
<script src = "js/vue.js"</script>>
```

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

js 复制代码

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

编写视图

vue 复制代码

<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可以给服务器发送请求，并获取服务器响应的数据
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想，用户名是否可用的校验。