前端

跟用户直接打交道的页面都可以称之为是前端

• HTML
• CSS
• JS
• jQuery
• Bootstrap

HTML

超文本标记语言(前端页面基本上都是有HTML组成的)

HTML是所有网页的骨架

HTML标签类型

1.双标签
    
2.自闭和标签
    

标签重要的属性

id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)

HTML注释

head内常用标签

# head内书写的标签不是给人看的 主要是给浏览器看的

标签  意义
 定义网页标题
 定义内部样式表
   定义JS代码或引入外部JS文件
 引入外部样式表文件或网站图标
 定义网页原信息

body内常用标签

加粗
斜体
下划线
删除
段落标签1
段落标签2


段落标签3
标题1
标题2
标题3

标题4
标题5
标题6
撒旦好看的        卡刷道具卡手机打开
大于号>
小于号

div标签与span标签

div是用来做页面的前期布局
span主要用来写局部文字

块儿级标签       div
    独占浏览器一整行
行内标签        span
    自身文本多大就占多大

img标签

src放图片的路径可以是本地也可以是网上的
alt图片加载不出来的时候提示信息
title鼠标悬浮上去之后显示的信息
width、height调一个另外一个自动调节

a标签

头部



尾部

列表与表格

# 无须列表

1
    
2
    
3
    
4
    
5

页面有规则排列的文字等基本上用的都是无序列表

# 有序列表

第一项
  
第二项


# 标题列表

标题1
  
内容1
  
标题2
  
内容1
  
内容2


# 表格标签


ID
            
姓名
            
年龄
        


1
            
jason
            
18
        

2
            
frank
            
28
        

3
            
egon
            
84
        



tr表示一行
th和td都是普通文本

form表单

# form能够获取用户数据并发送到后端服务器
'''获取用户数据的标签一般都需要有name属性 类似于字典的key'''
注册功能

    username:
        

    password:
        

    birthday:
        

    gender:
        男
        女
        其他

    hobby:
        篮球
        足球
        双色球

    省份:
        北京
上海
深圳

    前女友:
        新垣结衣
斯嘉丽
凤姐

    附件:
        

    个人简介:
        注册


# 能够出发form表达提交动作的按钮有两个
    注册

# 获取用户数据的标签都一个有name属性
    name属性类似于字典的key
    用户输入的数据会被存放到标签的value属性中

# 

    action用来控制数据提交的路径
    method用来控制数据的提交的方式
        get请求
            朝别人要数据
            eg:访问百度首页
        post请求
            朝别人提交数据
            eg:提交用户名和密码
    enctype用来控制数据的编码格式
        multipart/form-data 该格式支持提交文件
        application/x-www-form-urlencoded 不支持文件

CSS

# 就是用来给HTML标签添加好看的样式的

# 注释
/*单行注释*/
/*
多行注释1
多行注释2
*/

# 三种引入css的方式

如何查找标签

    


选择

选择器优先级

1.当选择器相同的时候
    采用的是就近原则

2.当选择器不同的时候
    内联选择器 >  id选择器  >  类选择器  >  标签选择器

如何设置样式

    


div
还是答案是
的撒结婚登记ask的

浮动

是页面布局必备的
但是浮动的元素会脱离文档流造成父标签塌陷的问题
需要你用清除浮动带来的影响 
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
谁塌陷就给谁加上clearfix类属性即可

JavaScript

# js也是一门编程语言
// 这是单行注释

/*
这是
多行注释
*/

变量

再js中定义变量需要使用关键字
var name = 'jason';
es6新语法
let name = 'jason';

常量

const pi = 3.14

数值类型

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

字符类型

var res = 'jason';
var res1 = "jason";
var res2 = `
hahah
hahh
`
// 模板字符串
var name = 'jason';
var age = 18;
undefined
var res = `
my name is {name} and my age is{age} 
`
undefined
res
"
my name is jason and my age is 18 
"

布尔值(Boolean)

var a = true;
var b = false;

函数

// python中的函数
def index(a,b):
    print(a,b)

// js中的函数
function index(a,b){
    console.log(a,b)
    return 666
}

// 箭头函数
var f = v => v;
// 等同于
var f = function(v){
  return v;
}

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

自定义对象

// js中创建自定义对象的方式
// 方式1
var obj1 = {'username':'jason','password':123}
undefined
obj1.username
"jason"
// 方式2
var obj2 = new Object();
obj2.name = 'frank'
obj2.age = 66

JSON对象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象     json.loads()
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串     json.dumps()
var str = JSON.stringify(obj1);

jQuery

# 需要提前下载才能使用或者使用网上提供的CDN服务

js与jQuery绑定事件的区别

// js
var pEle = document.getElementById('d1');
pEle.onclick = function(){
    alert('123')
}

// jQuery
('#d1').click(function(){
    alert('123')
})('#d1').on('click',function(){
    alert(123)
})

Bootstrap

需要提前下载或者使用CDN
Bootstrap里面的动态效果是基于jQuery实现的
也就意味着你再使用Boostrap的时候也需要导入jQuery

使用前端框架所有的标签样式你都可以不用自己写css代码
都是通过书写class属性值来操作的

布局容器

    左右两边有留白


    左右两边没有留白

栅格系统

获取用户数据的标签

添加样式就用
class='form-control'

额外的图标

也是需要提前下载才能用
http://www.fontawesome.com.cn/icons/qq/

基础参考文档:https://www.cnblogs.com/Dominic-Ji/p/10864457.html