前端

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

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

HTML
CSS
JS
jQuery
Bootstrap

HTML

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

HTML是所有网页的骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

HTML标签类型

1.双标签
	<title>Title</title>
2.自闭和标签
	<meta charset="UTF-8">

标签重要的属性

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

HTML注释

<!--单行-->

<!--
多行注释1
多行注释2
-->

head内常用标签

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

标签	意义
<title></title>	定义网页标题
<style></style>	定义内部样式表
<script></script>	定义JS代码或引入外部JS文件
<link/>	引入外部样式表文件或网站图标
<meta/>	定义网页原信息

body内常用标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签1</p>
<p>段落标签2</p>
<!--换行--><br>
<p>段落标签3</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<!--水平线--><hr>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p>撒旦好看的&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;卡刷道具卡手机打开</p>
<p>大于号&gt;</p>
<p>小于号&lt;</p>
<p>&符号&amp;</p>
<p>人民币&yen;</p>
<p>版权&copy;</p>
<p>商标&reg;</p>

div标签与span标签

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

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

img标签

<img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1376127766,1954361621&fm=26&gp=0.jpg" alt="这是个妹纸" title="不是我喜欢的类型" width="1000" height="200">

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

a标签

<!--<a href="https://www.sogo.com" target="_self">选我</a>-->
<!--<a href="https://www.meizitu.com" target="_blank">选我</a>-->
<a href="" id="d1">头部</a>
<div style="height: 1000px;background-color: red"></div>
<div style="height: 1000px;background-color: greenyellow"></div>
<div style="height: 1000px;background-color: yellow"></div>
<a href="#d1">尾部</a>

列表与表格

# 无须列表
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
页面有规则排列的文字等基本上用的都是无序列表

# 有序列表
<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

# 标题列表
<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

# 表格标签
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>jason</td>
            <td>18</td>
        </tr>
    <tr>
            <td>2</td>
            <td>frank</td>
            <td>28</td>
        </tr>
    <tr>
            <td>3</td>
            <td>egon</td>
            <td>84</td>
        </tr>
    </tbody>
</table>


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

form表单

# form能够获取用户数据并发送到后端服务器
'''获取用户数据的标签一般都需要有name属性 类似于字典的key'''
<h1>注册功能</h1>
<form action="">
    <p>username:
        <input type="text" name="username">
    </p>
    <p>password:
        <input type="password" name="password">
    </p>
    <p>birthday:
        <input type="date" name="birthday">
    </p>
    <p>gender:
        <input type="radio" name="gender">男
        <input type="radio" name="gender" checked>女
        <input type="radio" name="gender">其他
    </p>
    <p>hobby:
        <input type="checkbox" checked>篮球
        <input type="checkbox">足球
        <input type="checkbox" checked>双色球
    </p>
    <p>省份:
        <select name="" id="">
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">深圳</option>
        </select>
    </p>
    <p>前女友:
        <select name="" id="" multiple>
            <option value="">新垣结衣</option>
            <option value="">斯嘉丽</option>
            <option value="">凤姐</option>
        </select>
    </p>
    <p>附件:
        <input type="file">
        <input type="file" multiple>
    </p>
    <p>个人简介:
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </p>
    <input type="submit" value="注册">
    <input type="button" value="按钮">
    <input type="reset" value="重置">
    <button>注册</button>
</form>



# 能够出发form表达提交动作的按钮有两个
	<input type="submit" value="注册">
    <button>注册</button>
    
# 获取用户数据的标签都一个有name属性
	name属性类似于字典的key
    用户输入的数据会被存放到标签的value属性中
    
# <form action="" method="" enctype="">
	action用来控制数据提交的路径
    method用来控制数据的提交的方式
    	get请求
        	朝别人要数据
            eg:访问百度首页
        post请求
        	朝别人提交数据
            eg:提交用户名和密码
    enctype用来控制数据的编码格式
    	multipart/form-data 该格式支持提交文件
        application/x-www-form-urlencoded 不支持文件

CSS

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

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

# 三种引入css的方式
<link rel="stylesheet" href="mycss.css">
   
<style>
        h1 {
            color: red;
        }
</style>
    
 <h1 style="color: yellow">

如何查找标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*id选择器*/
    /*    #d1 {*/
    /*        color: red;*/
    /*    }*/
        /*类选择器*/
        /*.c1 {*/
        /*    color: blue;*/
        /*}*/
        /*标签选择器*/
        /*div {*/
        /*    color: orange;*/
        /*}*/
        /*通用选择器*/
        /** {*/
        /*    color: pink;*/
        /*}*/

        /*后代选择器*/
        /*div span {*/
        /*    color: red;*/
        /*}*/
        /*儿子选择器*/
        /*div>span {*/
        /*    color: greenyellow;*/
        /*}*/
        /*毗邻选择器 紧挨着的下一个*/
        /*div+span {*/
        /*    color: blue;*/
        /*}*/
        /*弟弟选择器*/
        /*div~span {*/
        /*    color: pink;*/
        /*}*/

        /*属性*/
        /*[name] {*/
        /*    color: greenyellow;*/
        /*}*/
        /*[name='jason'] {*/
        /*    color: blue;*/
        /*}*/
        /*p[name='jason'] {*/
        /*    color: gold;*/
        /*}*/
        /*div {*/
        /*    color: red;*/
        /*}*/
        /*span {*/
        /*    color: red;*/
        /*}*/
        /*p {*/
        /*    color: red;*/
        /*}*/
        /*div,*/
        /*span,*/
        /*p {*/
        /*    color: red;*/
        /*}*/
        /*#d1,.c1,span {*/
        /*    color: red;*/
        /*}*/
        /*body {*/
        /*    background-color: black;*/
        /*}*/
        /*a {*/
        /*    color: darkgrey;*/
        /*}*/
        /*伪类选择器  鼠标悬浮上去之后出现的效果*/
        /*a:hover {*/
        /*    color: white;*/
        /*}*/
    </style>
</head>
<body>
<a href="https://www.mzitu.com">选择</a>
<!--<h1 class="c1">一上午又快过去了</h1>-->
<!--<p class="c1">何处望神州，满眼风光北鼓楼</p>-->
<!--<span class="c2">圣诞节安徽的哈萨克的</span>-->
<!--<div id="d1">div1</div>-->
<!--<div id="d2">div2</div>-->
<!--<span>div上面的span</span>-->
<!--<div name="haoda">div-->
<!--    <span>div>span</span>-->
<!--    <p>div>p-->
<!--        <span>div>p>span</span>-->
<!--    </p>-->
<!--    <span>div>span</span>-->
<!--</div>-->
<!--<p name="jason">div下面的p</p>-->
<!--<span name="frank">div下面的span</span>-->
<!--<span name="jason">div下面的span</span>-->
<!--<span>div下面的span</span>-->

<!--<div id="d1">div</div>-->
<!--<p class="c1">p</p>-->
<!--<span>span</span>-->
</body>
</html>

选择器优先级

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

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

如何设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div {*/
        /*    height: 400px;*/
        /*     400px;*/
        /*}*/
        /*span {*/
        /*    height: 400px;*/
        /*     400px;*/
        /*}*/
        p {
            font-size: 48px;
            font-weight: lighter;
            /*font-weight: bolder;*/
            /*color: red;*/
            /*color: #ffffff;*/
            /*color:rgb(128,2,128);*/
            text-align: center;
            text-indent: 34px;
        }
        a {
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<div>div</div>
<p>还是答案是</p>
<a href="">的撒结婚登记ask的</a>
</body>
</html>

浮动

是页面布局必备的
但是浮动的元素会脱离文档流造成父标签塌陷的问题
需要你用清除浮动带来的影响 
.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属性值来操作的

布局容器

<div class="container c1">
    左右两边有留白
</div>
<div class="container-fluid c2">
    左右两边没有留白
</div>

栅格系统

<div class="container">
    <div class="row">
        <div class="col-md-6 c1">
            <div class="row">
                <div class="col-md-3 c1">
                    <div></div>
                </div>
                <div class="col-md-9 c1"></div>
            </div>
        </div>
        <div class="col-md-6 c1"></div>
        <br>
        <div class="col-md-3 c1"></div>
        <div class="col-md-9 c1"></div>
        <br>
        <div class="col-md-3 c1"></div>
        <div class="col-md-3 c1"></div>
        <div class="col-md-3 c1"></div>
        <div class="col-md-3 c1"></div>
        <br>
         <!--<div class="col-md-3 c1"></div>-->
         <!--<div class="col-md-10 c1"></div>-->
        <br>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
    </div>
</div>

获取用户数据的标签

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

额外的图标

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

相关阅读:
django目录
 django之form表单验证
 django操作数据库之查询F，Q操作和 seach搜索功能
 django的序列化
 三目运算
 【转】做有生命力的接口测试
 【转】浅谈反应测试
 【转】jmeter 进行java request测试
 【转】探索式测试：基本概念
 【转】测试职业思考：如何成为一名优秀的软件测试工程师
原文地址：https://www.cnblogs.com/tcy1/p/13519482.html