web前端基础
web前端简介
web前端开发是从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。
- HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
- CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
- JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
HTML
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
使用标记标签来描述网页
HTML标签
HTML 标签是由尖括号包围的关键词
HTML 标签通常是成对出现的，标签对中的第一个标签是开始标签，第二个标签是结束标签
HTML 标签由 表标签和行标签组成
行标签 （可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高）
<a href="可以指向跳转路径">超链接标签</a>
<span>无意义标签</span>
<em>一般用来对文字进行强调，使用斜体体现出来</em>
<strong>一般用来对文字进行强调，使用加粗字体体现出来</strong>
<img src="图片的地址">图片引用标签
<br>换行标签，强制换行
<hr>带横线的换行标签
块标签 （独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度）
<p>段落标签，段落文字使用，默认格式：段尾进行换行</p>
<div>无意义标签，划分块的主要使用标签</div>
<ul>无序列表的主标签，后面的标号为圆点（黑色）</ul>
<ol>有序列表的主标签，后面一般跟有序的1,2,3,4,5...</ol>
<li>列表中的主体使用标签</li>
h1~h6 6级标题标签、字体的大小依次变小（h1标签一个页面内只能出现一次）
CSS
CSS的几种引入方式
1.行内样式 （行内式是在标记的style属性中设定CSS样式。缺点：无法复用，不利于更改，不推荐大规模使用）
<p style="color: red">Hello world.</p>
2.内部样式 （嵌入式是将CSS样式集中写在网页的标签对的标签对中）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: red;
}
</style>
</head>
3.外部样式 （外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式）
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
CSS选择器
1.元素选择器 （页面内的标签元素添加样式）
p {color: "red";}
2.ID选择器 （为该ID的标签元素添加样式，id在同一页面内不能重复）
#wrap {
background-color: red;
}
3.类选择器 （为该class的标签元素添加样式，可重复利用）
.c1 {
font-size: 14px;
}
4.通用选择器 （为该页面内所有元素添加）
* {
color: white;
}
5.后代选择器
/*为li后面的所有a标签添加样式*/
li a {
color: green;
}
6.子选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
color: green;
}
选择器的优先级
内联样式>id选择器>类选择器>元素选择器
CSS属性
width：为元素设置宽度，块级标签才能设置宽度，内联标签的宽度由内容来决定。
height：为元素设置高度
font 字体
| 属性名 | 描述 |
|---|---|
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本 |
| font-weight | 指定字体的粗细 |
background 背景
| 属性名 | 描述 |
|---|---|
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 |
| background-color | 设置元素的背景颜色 |
| background-image | 把图像设置为背景 |
| background-position | 设置背景图像的起始位置 |
| background-repeat | 设置背景图像是否及如何重复 |
text 文字
| 属性名 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| text-align | 对齐元素中的文本 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
border 边框
| 属性名 | 描述 |
|---|---|
| border-width | 用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度 |
| border-color | 置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式 |
margin 外边距
| 属性名 | 描述 |
|---|---|
| margin-bottom | 设置元素的下外边距 |
| margin-left | 设置元素的左外边距 |
| margin-right | 设置元素的右外边距 |
| margin-top | 设置元素的上外边距 |
padding 内边距
| 属性名 | 描述 |
|---|---|
| padding-bottom | 设置元素的下内边距 |
| padding-left | 设置元素的左内边距 |
| padding-right | 设置元素的右内边距 |
| padding-top | 设置元素的上内边距 |
Positioning 定位
| 属性名 | 描述 |
|---|---|
| positioning-relative | 相对定位，一般作为定位父级 |
| positioning-absolute | 绝对定位，在定位父级relative内使用，以relative位置进行定位 |
| positioning-fixed | 固定定位，基于浏览器窗口的位置进行定位 |
Float 浮动，使用后元素会脱离文档流，元素只能左右移动而不能上下移动
| 属性名 | 描述 |
|---|---|
| float-left | 左浮动 |
| float-right | 右浮动 |
JavaScript
JavaScript简介
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript引入方式
1.Script标签内写代码
<script>
// 在这里写你的JS代码
</script>
2.引入额外的JS文件
<script src="myscript.js"></script>
变量声明
1.JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
2.声明变量使用 var 变量名; 的格式来进行声明。
3.JavaScript中的语句要以分号（;）为结束符。
var name = "Alex";
var age = 18;
4.ES6新增了let命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令。
for (let i=0;i<arr.length;i++){...}
5.ES6新增const用来声明常量。一旦声明，其值就不能改变。
const PI = 3.1415;
PI // 3.1415
PI = 3
// TypeError: "PI" is read-only
JavaScript数据类型
1.JavaScript拥有动态类型
var x; // 此时x是undefined
var x = 1; // 此时x是数字
var x = "Alex" // 此时x是字符串
2.数值(Number) JavaScript不区分整型和浮点型，就只有一种数字类型。
var a = 12.34;
var b = 20;
var c = 123e5; // 12300000
var d = 123e-5; // 0.00123
3.字符串(String)
var a = "Hello"
var b = "world;
var c = a + b;
console.log(c); // 得到Helloworld
3.1字符串常用方法
| 方法 | 说明 |
|---|---|
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value, …) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根据索引获取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
4.布尔值(Boolean)
区别于Python，true和false都是小写。 “”(空字符串)、0、null、undefined、NaN都是false。
var a = true;
var b = false;
5.null和undefined
null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值
6.对象(Object)
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型
6.1 数组
数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表
var a = [123, "ABC"];
console.log(a[1]); // 输出"ABC"
数组常用方法
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val, …) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素。 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
运算符
1.算数运算符
+ - * / % ++ --
2.比较运算符
> >= < <= != == === !==
3.逻辑运算符
&& || !
4.赋值运算符
= += -= *= /=
流程控制
1.if-else
var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}
2.if-else if-else
var a = 10;
if (a > 5){
console.log("a > 5");
}else if (a < 5) {
console.log("a < 5");
}else {
console.log("a = 5");
}
3.switch
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
4.for
for (var i=0;i<10;i++) {
console.log(i);
}
5.while
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
6.三元运算
var a = 1;
var b = 2;
var c = a > b ? a : b
Break 和 Continue 语句
break 语句用于跳出循环，跳出循环后，会继续执行该循环之后的代码
for (i=0;i<10;i++){
if (i==3){
break;
}
x=x + "The number is " + i + "<br>";
}
continue 用于跳过循环中的一个迭代。
for (i=0;i<=10;i++){
if (i==3){
continue;
}
x=x + "The number is " + i + "<br>";
}
Jquery/ajax
ajax简介
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
ajax方法就是在不重载整个网页的情况下，通过后台加载数据，并在网页上进行显示
方法
1.$.get()
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
第一个参数是我们希望请求的 URL（“demo_test.php”）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
语法
$.get(URL,callback);
2.$.post()
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
第一个参数是必需的 URL 参数规定您希望请求的 URL。
第一个参数是可选的 data 参数规定连同请求发送的数据。
第一个参数是可选的 callback 参数是请求成功后所执行的函数名。
语法
$.post(URL,data,callback);
3.$ajax()
$.ajax({
//请求方式 post 或 get
type : "POST",
//请求的媒体类型，json格式和编码
contentType: "application/json;charset=UTF-8",
//请求地址
url : "http://127.0.0.1/admin/list/",
//参数数据，json字符串
data : JSON.stringify(list),
//请求成功的回调函数，包含接口返回数据result
success : function(result) {
console.log(result);
},
//请求失败的回调函数，包含具体的错误信息e
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
});
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
