Web基础

一、HTML

1.介绍

Hyper Text Markup Language ,超文本标记语言

HTML 不是一种编程语言,而是一种标记语言

浏览器通过解析相应标签来展现内容

相关教程:W3cSchool 菜鸟教程

速查:https://www.runoob.com/html/html-quicklist.html

标签分类

  • 双标签
<标签名>内容</标签名>
  • 单标签
<标签名 />

2、常用HTML标签

标题标签-h1~h6

<h1>This is h1 tag</h1>
<h2>This is h2 tag</h2>
<h3>This is h3 tag</h3>
<h4>This is h4 tag</h4>
<h5>This is h5 tag</h5>
<h6>This is h6 tag</h6>

段落标签-p

<p>段落内容</p>

水平线标签-hr

<hr />

换行标签-br

<br />

分割标签-div span

<div> </div>
<span> </span>

字体样式

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

注释标签

<!-- 要注释的内容  -->

链接标签-a

<a href="https://www.tigeru.cn" target="_blank">Tiger's blog</a>

图像标签-img

<img src="/images/logo.png" width="258" height="39" alt="img" />

表格

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

列表

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>
<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

表单

<form action=“” method="">
    ...
</form>

input

<input type="text" name="user">

文本输入

<textarea cols="每行中的字符数" rows="显示的行数">
    文本内容
</textarea>

下拉列表

<select>
    <option>选项1</option
    <option>选项2</option>
    ...
</select>

二、CSS

1.介绍

CSS 指层叠样式表 (Cascading Style Sheets)

用于定义如何显示HTML标签内容

相关教程:菜鸟教程

2.定义样式位置

  • 内联样式(Inline style)
<标签名 style="属性1:属性值1; 属性2:属性值2; ...."> 内容 </标签名>
  • 内部样式(Internal style sheet)
<head>
    <style type="text/CSS">
          选择器 {属性1:属性值1; 属性2:属性值2; ....}
    </style>
</head>
  • 外部样式表(External style sheet)
<head>
    <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>

优先级:内联>外部=内部

注意:外部和内部的优先级取决于写的位置,下边的优先级高。

3.CSS 选择器

选择器用于寻找特定标签

  • 标签选择器
标签名 {属性1:属性值; 属性1:属性值; .....}
  • id选择器
#id {属性1:属性值; 属性1:属性值; .....}
  • 类选择器
.类名称 {属性1:属性值; 属性1:属性值; .....}

优先级:id>class>tag

三、JavaScript

1.介绍

相关教程:菜鸟教程

2.js声明方式

  • 写在行内
<input type="button" value="Button" onclick="alert('Hello World')" />
  • 写在script标签中
<boby>
    <script>
        alert('Hello World!');
    </script>
</body>
  • 引入外部文件
<script src="main.js"></script>

3.基础语法

变量

var name="Tiger"
var age=21
name="Tiger"
age=21

注释

// 要注释的内容
/*  要注释的内容 */

逻辑判断

if (...){
   ...
} else if(...){
   ...
} else {
   ...
}

switch

switch(n)
{ 
    case 1:
    //执行代码块 1
    break;
    case 2:
    //执行代码块 2
    break;
    default:
    //n 与 case 1 和 case 2 不同时执行的代码
}

循环

  • for
for (初始化表达式1; 判断表达式2; 自增表达式3) {
    // 循环体
}
  • while
while (循环条件) {
    //循环体
}
  • do while
do {
    // 循环体;
} while (循环条件);

数组

var arr = [];
var arr1 = [1,2,3,4,5];
var arr2 = [‘linux’,’centos’,’redhat’];

//遍历
//1
for(i=0;i<arr1.length;i++){
    console.log(arr1[i])
}
//2
for(i in arr1){
    console.log(arr1[i])
}
//3
arr1.forEach(value=>{
    console.log(value)
})
//4
arr1.map(value=>{
    console.log(value)
})
//5
arr1.map(function(value){
    console.log(value)
})

函数声明

function add(a, b) {
    return a + b
}
console.log(add(1, 2))

var add2=function(a,b){
    return a + b
}
console.log(add2(1, 2))

对象

var person = {
    id2: 1,
    name: "Tiger",
    age: 21,
    info: function () {
          return "My name is " + this.name + ". I am " + this.age + " years old."
    }
}

console.log(person.info())
console.log(person.name)

4.DOM

获取元素

document.querySelector()
document.querySelectorAll()

注册事件

document.querySelector("#btn2").onclick = function () {
    alert(this.innerHTML)
}

改变元素样式

element.style.color = 'red';
...

四、JQuery

JQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

官网:https://jquery.com/

中文:https://www.jquery123.com/

相关教程:菜鸟教程

更多可参考:https://www.runoob.com/js/js-tutorial.html

1.使用

使用前需要导入,可以是本地文件,也可以是网络文件

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

2.基本使用

注册事件

$('#btn').click(function() {
//执行代码
});

五、Bootstrap

可以快速搭建响应式的网页 ,而不需要书写大量的 css

官网:https://v3.bootcss.com/

六、Ajax

Ajax 即“ Asynchronous Javascript And XML ”

异步发送请求

1.基本使用

可参考:https://cloud.tencent.com/developer/article/1199253

  • 发送GET请求
$.ajax({
    type: 'get',
    url: 'xxxxx',
    success: function (res) {
    //成功后执行的代码
    }
})
  • 发送POST请求
$.ajax({
    type: 'post',
    url: 'xxxxx',
    data: data,
    success: function (res) {
    //成功执行的代码
    }
});

七、Web框架-Django

Django是一个由Python写成的Web应用框架,采用MTV架构

官方网站:https://www.djangoproject.com/

中文文档(2.2):https://docs.djangoproject.com/zh-hans/2.2/

中文社区:https://www.django.cn/

虚拟环境

#创建环境
python -m venv mydjango_venv
#开启关闭
cd mydjango_venv/Scripts
activate.bat
deactivate.bat

Django基本使用

安装Django

pip install django==1.11.18

创建项目

django-admin startproject mydjango

创建应用

python manage.py startapp app01

启动Django项目

python manage.py runserver
Last modification:February 20th, 2020 at 03:54 pm