一篇文章带你全面认识 static 关键字

tatic 是我们日常生活中经常用到的关键字，也是 Java 中非常重要的一个关键字，static 可以修饰变量、方法、做静态代码块、静态导包等，下面我们就来具体聊一聊这个关键字，我们先从基础开始，从基本用法入手，然后分析其原理、优化等。

初识 static 关键字

static 修饰变量

static 关键字表示的概念是全局的、静态的，用它修饰的变量被称为静态变量。

public class TestStatic {
    
    static int i = 10; // 定义了一个静态变量 i 
}

静态变量也被称为类变量，静态变量是属于这个类所有的。什么意思呢？这其实就是说，static 关键字只能定义在类的 {} 中，而不能定义在任何方法中。

就算把方法中的 static 关键字去掉也是一样的。

static 属于类所有，由类来直接调用 static 修饰的变量，它不需要手动实例化类进行调用

public class TestStatic {

    static int i = 10;

    public static void main(String[] args) {
        System.out.println(TestStatic.i);
    }
}

这里你需要理解几个变量的概念

定义在构造方法、代码块、方法外的变量被称为实例变量，实例变量的副本数量和实例的数量一样。
定义在方法、构造方法、代码块内的变量被称为局部变量；
定义在方法参数中的变量被称为参数。

详情参考

static 修饰方法

static 可以修饰方法，被 static 修饰的方法被称为静态方法，其实就是在一个方法定义中加上 static 关键字进行修饰，例如下面这样

static void sayHello(){}

《Java 编程思想》在 P86 页有一句经典的描述

static 方法就是没有 this 的方法，在 static 内部不能调用非静态方法，反过来是可以的。而且可以在没有创建任何对象的前提下，仅仅通过类本身来调用 static 方法，这实际上是 static 方法的主要用途。

其中有一句非常重要的话就是 static 方法就是没有 this 的方法，也就是说，可以在不用创建对象的前提下就能够访问 static 方法，如何做到呢？看下面一段代码

在上面的例子中，由于 staticMethod 是静态方法，所以能够使用类名.变量名进行调用。

因此，如果说想在不创建对象的情况下调用某个方法，就可以将这个方法设置为 static。平常我们见的最多的 static 方法就是 main方法，至于为什么 main 方法必须是 static 的，现在应该很清楚了。因为程序在执行 main 方法的时候没有创建任何对象，因此只有通过类名来访问。

static 修饰方法的注意事项

首先第一点就是最常用的，不用创建对象，直接类名.变量名即可访问；
static 修饰的方法内部不能调用非静态方法；

非静态方法内部可以调用 static 静态方法。

static 修饰代码块

static 关键字可以用来修饰代码块，代码块分为两种，一种是使用 {} 代码块；一种是 static {} 静态代码块。static 修饰的代码块被称为静态代码块。静态代码块可以置于类中的任何地方，类中可以有多个 static 块，在类初次被加载的时候，会按照 static 代码块的顺序来执行，每个 static 修饰的代码块只能执行一次。我们会面会说一下代码块的加载顺序。下面是静态代码块的例子

static 代码块可以用来优化程序执行顺序，是因为它的特性：只会在类加载的时候执行一次。

static 用作静态内部类

内部类的使用场景比较少，但是内部类还有具有一些比较有用的。在了解静态内部类前，我们先看一下内部类的分类

普通内部类
局部内部类
静态内部类
匿名内部类

静态内部类就是用 static 修饰的内部类，静态内部类可以包含静态成员，也可以包含非静态成员，但是在非静态内部类中不可以声明静态成员。

静态内部类有许多作用，由于非静态内部类的实例创建需要有外部类对象的引用，所以非静态内部类对象的创建必须依托于外部类的实例；而静态内部类的实例创建只需依托外部类；

并且由于非静态内部类对象持有了外部类对象的引用，因此非静态内部类可以访问外部类的非静态成员；而静态内部类只能访问外部类的静态成员；

内部类需要脱离外部类对象来创建实例
避免内部类使用过程中出现内存溢出

public class ClassDemo {
  
    private int a = 10;
    private static int b = 20;

    static class StaticClass{
        public static int c = 30;
        public int d = 40;
      
        public static void print(){
            //下面代码会报错，静态内部类不能访问外部类实例成员
            //System.out.println(a);
     
            //静态内部类只可以访问外部类类成员
            System.out.println("b = "+b);
            
        }
      
        public void print01(){
            //静态内部内所处的类中的方法，调用静态内部类的实例方法，属于外部类中调用静态内部类的实例方法
            StaticClass sc = new StaticClass();
            sc.print();
        }   
    }
}

静态导包

不知道你注意到这种现象没有，比如你使用了 java.util 内的工具类时，你需要导入 java.util 包，才能使用其内部的工具类，如下

但是还有一种导包方式是使用静态导包，静态导入就是使用 import static 用来导入某个类或者某个包中的静态方法或者静态变量。

import static java.lang.Integer.*;

public class StaticTest {

    public static void main(String[] args) {
        System.out.println(MAX_VALUE);
        System.out.println(toHexString(111));
    }
}

static 进阶知识

我们在了解了 static 关键字的用法之后，来看一下 static 深入的用法，也就是由浅入深，慢慢来，前戏要够～

关于 static 的所属类

static 所修饰的属性和方法都属于类的，不会属于任何对象；它们的调用方式都是类名.属性名/方法名，而实例变量和局部变量都是属于具体的对象实例。

static 修饰变量的存储位置

首先，先来认识一下 JVM 的不同存储区域。

虚拟机栈 : Java 虚拟机栈是线程私有的数据区，Java 虚拟机栈的生命周期与线程相同，虚拟机栈也是局部变量的存储位置。方法在执行过程中，会在虚拟机栈种创建一个栈帧(stack frame)。
本地方法栈: 本地方法栈也是线程私有的数据区，本地方法栈存储的区域主要是 Java 中使用 native 关键字修饰的方法所存储的区域
程序计数器：程序计数器也是线程私有的数据区，这部分区域用于存储线程的指令地址，用于判断线程的分支、循环、跳转、异常、线程切换和恢复等功能，这些都通过程序计数器来完成。
方法区：方法区是各个线程共享的内存区域，它用于存储虚拟机加载的类信息、常量、静态变量、即时编译器编译后的代码等数据，也就是说，static 修饰的变量存储在方法区中
堆：堆是线程共享的数据区，堆是 JVM 中最大的一块存储区域，所有的对象实例，包括实例变量都在堆上进行相应的分配。

static 变量的生命周期

static 变量的生命周期与类的生命周期相同，随类的加载而创建，随类的销毁而销毁；普通成员变量和其所属的生命周期相同。

static 序列化

我们知道，序列化的目的就是为了 把 Java 对象转换为字节序列。对象转换为有序字节流，以便其能够在网络上传输或者保存在本地文件中。

声明为 static 和 transient 类型的变量不能被序列化，因为 static 修饰的变量保存在方法区中，只有堆内存才会被序列化。而 transient 关键字的作用就是防止对象进行序列化操作。

类加载顺序

我们前面提到了类加载顺序这么一个概念，static 修饰的变量和静态代码块在使用前已经被初始化好了，类的初始化顺序依次是

加载父类的静态字段 -> 父类的静态代码块 -> 子类静态字段 -> 子类静态代码块 -> 父类成员变量（非静态字段）

-> 父类非静态代码块 -> 父类构造器 -> 子类成员变量 -> 子类非静态代码块 -> 子类构造器

static 经常用作日志打印

我们在开发过程中，经常会使用 static 关键字作为日志打印，下面这行代码你应该经常看到

private static final Logger LOGGER = LogFactory.getLoggger(StaticTest.class);

然而把 static 和 final 去掉都可以打印日志

private final Logger LOGGER = LogFactory.getLoggger(StaticTest.class);
private Logger LOGGER = LogFactory.getLoggger(StaticTest.class);

但是这种打印日志的方式存在问题

对于每个 StaticTest 的实例化对象都会拥有一个 LOGGER，如果创建了1000个 StaticTest 对象，则会多出1000个Logger 对象，造成资源的浪费，因此通常会将 Logger 对象声明为 static 变量，这样一来，能够减少对内存资源的占用。

static 经常用作单例模式

由于单例模式指的就是对于不同的类来说，它的副本只有一个，因此 static 可以和单例模式完全匹配。

下面是一个经典的双重校验锁实现单例模式的场景

public class Singleton {
  
    private static volatile Singleton singleton;
 
    private Singleton() {}
 
    public static Singleton getInstance() {
        if (singleton == null) {
            synchronized (Singleton.class) {
                if (singleton == null) {
                    singleton = new Singleton();
                }
            }
        }
        return singleton;
    }
}

来对上面代码做一个简单的描述

使用 static 保证 singleton 变量是静态的，使用 volatile 保证 singleton 变量的可见性，使用私有构造器确保 Singleton 不能被 new 实例化。

使用 Singleton.getInstance() 获取 singleton 对象，首先会进行判断，如果 singleton 为空，会锁住 Singletion 类对象，这里有一些小伙伴们可能不知道为什么需要两次判断，这里来解释下

如果线程 t1 执行到 singleton == null 后，判断对象为 null，此时线程把执行权交给了 t2，t2 判断对象为 null，锁住 Singleton 类对象，进行下面的判断和实例化过程。如果不进行第二次判断的话，那么 t1 在进行第一次判空后，也会进行实例化过程，此时仍然会创建多个对象。

类的构造器是否是 static 的

这个问题我相信大部分小伙伴都没有考虑过，在 Java 编程思想中有这么一句话 类的构造器虽然没有用 static 修饰，但是实际上是 static 方法，但是并没有给出实际的解释，但是这个问题可以从下面几个方面来回答

static 最简单、最方便记忆的规则就是没有 this 引用。而在类的构造器中，是有隐含的 this 绑定的，因为构造方法是和类绑定的，从这个角度来看，构造器不是静态的。
从类的方法这个角度来看，因为类.方法名不需要新创建对象就能够访问，所以从这个角度来看，构造器也不是静态的
从 JVM 指令角度去看，我们来看一个例子

public class StaticTest {

    public StaticTest(){}

    public static void test(){

    }

    public static void main(String[] args) {
        StaticTest.test();
        StaticTest staticTest = new StaticTest();
    }
}

我们使用 javap -c 生成 StaticTest 的字节码看一下

public class test.StaticTest {
  public test.StaticTest();
    Code:
       0: aload_0
       1: invokespecial #1                  // Method java/lang/Object."<init>":()V
       4: return

  public static void test();
    Code:
       0: return

  public static void main(java.lang.String[]);
    Code:
       0: invokestatic  #2                  // Method test:()V
       3: new           #3                  // class test/StaticTest
       6: dup
       7: invokespecial #4                  // Method "<init>":()V
      10: astore_1
      11: return
}

我们发现，在调用 static 方法时是使用的 invokestatic 指令，new 对象调用的是 invokespecial 指令，而且在 JVM 规范中 https://docs.oracle.com/javase/specs/jvms/se7/html/jvms-6.html#jvms-6.5.invokestatic 说到

从这个角度来讲，invokestatic 指令是专门用来执行 static 方法的指令；invokespecial 是专门用来执行实例方法的指令；从这个角度来讲，构造器也不是静态的。

成	语言	描述
结构	HTML	网页元素和内容
表现	CSS	网页元素页面样式
行为	JavaScript	网页交互

1 HTML概念

HTML，超文本标记语言（Hyper Text Markup Language），是一门描述性语言。标记，标签，元素，叫法不同，意思相同。HTML超文本标记语言主要通过标签的方式，对网页页面的文本、图片、音频、视频等内容进行描述。学习HTML，就是学习各种标签，来搭建网页的结构。

2 HTML结构

结构：!DOCTYPE

说明：作用是告诉浏览器用哪个文档规范来解析文档

标签：html

说明：用于搭建HTML网页文档结构和网页布局

标签：head

说明：用于定义HTML网页文档的头部,它是所有头部元素的容器

标签：body

说明：用来定义HTML网页文档的主体区域

标签：meta

说明：用来描述HTML网页文档的属性

标签：title

说明：用来放到HTML网页文档的头部，是搜索引擎首要抓取的目标代码

2.1 标签

标签，也叫作标记，是由一对尖括号<>，里面包含单词组成

2.1.1 双标签

<html></html>

2.1.2 单标签

<br>

2.1.3 标签关系

嵌套关系

<html>
    <head>
    </head>
</html>

并列关系

<head>
</head>
<body>    
</body>

3 注释

注释用来帮助程序员记录程序设计方法，辅助程序阅读

4 head标签

4.1 title标签

双标签，定义网页的标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道了</title>
</head>
<body>

</body>
</html>

4.2 meta标签

是单标签，用来描述HTML网页文档的属性

4.2.1 name属性

属性值	说明
keywords	网页关键字，多个逗号隔开
description	网页描述
author	作者
copyright	版权信息

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 网页关键字 -->
    <meta name="keywords" content="html,css,javascript">
    <!-- 网页描述 -->
    <meta name="description" content="基础前端知识">
    <!-- 网页作者 -->
    <meta name="author" content="buddha">
    <!-- 网页版权信息 -->
    <meta name="copyright" content="版权所有，翻版必究">
</head>
<body>

</body>
</html>

标签属性：

1、标签的属性写在开始标签内部

2、标签名与属性之间要有空格隔开

3、一个标签可以同时存在多个属性

4、属性之间以空格隔开

5、属性没有先后顺序之分

4.2.2 http-equiv属性

属性值	说明
Content-Type	定义网页所使用编码
refresh	定义网页自动刷新跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 设置网页编码完整写法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 设置网页编码简写写法 -->
    <meta charset="UTF-8">
    <!-- 网页打开3秒后跳去百度 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>

</body>
</html>

4.3 style标签

是双标签，用来定义标签的css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        /* css内联样式写这里 */
    </style>
</head>
<body>

</body>
</html>

4.4 link标签

是单标签，是用来引入外部css样式文件

<link rel="stylesheet" href="css/index.css" type="text/css">

4.5 script标签

是双标签，是用来写JavaScript代码的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 这里写JavaScript代码 */
    </script>

</head>
<body>

</body>
</html>

4.6 base标签

是单标签，是用来设置整个网页的基础路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://pic.rmb.bdstatic.com">

</head>
<body>
    <img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>

开发中很少用到，有人使用知道就行

上面所述标签是放在head标签里的，接下来接触的标签都是放在body标签内的

5 文本标签

5.1 标题标签

是双标签，h是header的缩写

<h1>h1标签：一级标题</h1>
<h2>h2标签：二级标题</h2>
<h3>h3标签：三级标题</h3>
<h4>h4标签：四级标题</h4>
<h5>h5标签：五级标题</h5>
<h6>h6标签：六级标题</h6>

特点：

1、字体加粗

2、独占一行

3、从h1到h6，字体逐渐减小

4、使用<h>标签的主要意义是告诉搜索引擎这是一段文字的标题

5、<h1>在一个页面最多只能有一个，不要用多个

5.2 段落标签

是双标签，p是paragraph的缩写

<p>这是一段文字</p>
<p>这是一段文字</p>
<p>这是一段文字</p>

特点：

1、独占一行

2、段落与段落之间，存在间隙

5.3 换行标签

是单标签，br是break的缩写

<p>这是一段<br>文字</p>

特点：

1、强制换行

2、单标签

5.4 水平线标签

是单标签，hr是horizon地平线的缩写

<p>这是一段文字</p>
<hr>
<p>这是一段文字</p>

特点：

1、在页面中显示一条水平线

2、单标签

6 文本格式化标签

标签1	标签2	说明
b	strong	加粗
u	ins	下划线
i	em	倾斜
s	del	删除线

<b>这是一段文字</b>
<strong>这是一段文字</strong>
<br>
<u>这是一段文字</u>
<ins>这是一段文字</ins>
<br>
<i>这是一段文字</i>
<em>这是一段文字</em>
<br>
<s>这是一段文字</s>
<del>这是一段文字</del>

特点：

1、不会独占一行

2、推荐使用标签2所在列标签

6.1 上标标签

sup是superscripted这个单词的缩写

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    a<sup>2</sup>
</body>
</html>

6.2 下标标签

sub是subscripted这个单词的缩写

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    H<sub>2</sub>O
</body>
</html>

6.3 字符实体

在网页中展示特殊符号效果时，需要使用字符实体替代

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
&	与	&
"	双引号	"
x	乘号	×
÷	除号	÷
-	长破折号	—
\|	竖线	\|
‘	左单引号	‘
‘	右单引号	’
©	版权符	©
®	注册商标	®
™	商标	™
°	度	°

7 媒体标签

7.1 图片标签

<img src="./001.jpg" alt="">

img标签常见属性：

属性名	说明
src	图片路径（绝对路径、相对路径）
alt	图片加载失败时，显示的文字
title	鼠标悬停时，显示的文字
width	图片宽度
height	图片高度

只设置宽或高，会自动等比缩放，宽高只需要数字，不需要'px'

<img src="./001.jpg" alt="图片加载失败" title="这是程序兔" width="200" height="200">

绝对路径：指目录下的绝对位置，比如从根目录开始的路径，或完整的网络地址
相对路径：从当前文件开始出发找目标文件的过程

7.2 音频标签

<audio src="music.mp3" controls autoplay loop></audio>

audio标签常见属性：

属性名	说明
src	音频路径
controls	显示播放控件
autoplay	自动播放
loop	循环播放

支持mp3、wav、ogg三种音频格式

7.3 视频标签

<video src="video.mp4" controls loop autoplay></video>

属性名	说明
src	视频路径
controls	显示播放控件
autoplay	自动播放
loop	循环播放

支持mp4、webm、ogg三种视频格式

7.4 超链接标签

超链接，是双标签，实现各个独立页面之间进行跳转，可以跳去站外也可以在站内之间跳转

<a href="链接地址">文本或图片</a>

站外跳转，采用绝对路径

<a href="http://www.baidu.com" target="_blank">百度</a>

站内跳转，采用相对路径

<!-- a页面 -->
<a href="b.html">跳去b页面</a>

<!-- b页面 -->
<p>b页面</p>

页面内跳转

<a href="#ms">美食</a>
<a href="#jd">景点</a>
<h3 id="ms">推荐美食</h3>
<!-- 省略n个br标签 -->
<br>
<h3 id="jd">推荐景点</h3>

属性名	说明
href	跳转链接
target	链接打开方式

target属性值

属性值	说明
_self	默认，原窗口打开链接
_blank	在新窗口打开链接
_parent	在父窗口打开链接
_top	在顶层窗口打开超链接

target属性值一般使用_self（默认）和_blank

8 列表标签

8.1 无序列表

<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

解释：

1、ul，unordered lists，无序列表，li，list item，列表项

2、ul标签子标签只允许是li标签

3、li标签可以包含任意内容

type属性值

属性值	说明
disc	默认，实心圆
circle	空心圆
square	实心方型

<ul>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ul>

8.2 有序列表

<ol type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

解释：

1、ol，ordered lists，有序列表，li，list item，列表项

2、ol标签子标签只允许是li标签

3、li标签可以包含任意内容

type属性值

属性值	说明
1	默认，阿拉伯数字，1,2,3......
a	小写英文字母，a,b,c......
A	大写英文字母，A,B,C......
i	小写罗马数字,i,ii,iii......
I	大写罗马数字,I,II,III......

<ol>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ol>

8.3 自定义列表

<dl>
    <dt>名词</dt>
    <dd>描述</dd>
    ……
</dl>

解释：

1、dl，definition lists，自定义列表；dt，definition term，自定义列表组；dd，definition description，自定义列表描述

<dl>
    <dt>称呼</dt>
    <dd>你</dd>
    <dd>我</dd>
    <dd>他</dd>
</dl>

9 表格标签

9.1 表格基本结构

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

解释：

1、tr，table row，表格行；td，table data cell，表行单元格

<table>
    <tr>
        <td>1</td>
    </tr>
</table>

9.2 表格标签属性

属性名	属性值	描述
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

<table border="1" width="200" height="50">
    <tr>
        <td>1</td>
    </tr>
</table>

9.3 表格标题标签

<caption>标题内容</caption>，位于表格内第一行

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <tr>
        <td>1</td>
    </tr>
</table>

9.4 表格表头单元格标签

<th></th>，th，table header cell，表头单元格

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <tr>
        <th>序号</th>
    </tr>
    <tr>
        <td>1</td>
    </tr>
</table>

9.5 表格语义化结构标签

thead、tbody、tfoot

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <thead>
        <tr>
            <th>序号</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>汇总</td>
        </tr>
    </tfoot>
</table>

9.6 合并单元格

属性名	属性值	说明
rowspan	合并单元格个数	合并行，单元格垂直合并
colspan	合并单元格个数	合并列，单元格水平合并

<td rowspan="跨越的行数"></td>

<td colspan="跨越的列数"></td>

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <thead>
        <tr>
            <th>序号</th>
            <th>金额</th>
            <th>金额</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td rowspan="2">20</td>
            <td rowspan="2">20</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>汇总</td>
            <td colspan="2">40</td>
        </tr>
    </tfoot>
</table>

10 表单标签

10.1 form标签

双标签，包裹其它表单标签

<form>
    // 表单
</form>

form标签的常用属性

属性	说明
name	表单名称
method	提交方式
action	提交地址
target	打开方式
enctype	编码方式

name属性

一个页面中，表单可能不止一个。name属性，用来区分不同的表单

<form name="myForm"></form>

method属性

用来指定表单数据使用哪种提交方式给后端

属性值	说明
get	get方式
post	post方式

<form method="get"></form>

action属性

用来指定表单数据提交到哪个地址

<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>

target属性

该属性跟a标签的target属性一样，其属性值也是四个，一般情况只用到_blank属性值，默认也是这个值

<form target="_blank"></form>

enctype属性

属性值	说明
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码，在使用包含文件上传控件的表单时，必须使用该值
text/plain	空格转换为 "+" 加号，但不对特殊字符编码

<form enctype="multipart/form-data"></form>

10.2 input标签

input是单标签

<input type="表单类型">

属性值	说明
text	单行文本框
password	密码文本框
radio	单选框
checkbox	多选框
button	普通按钮
submit	提交按钮
reset	重置按钮
file	文件上传

单行文本框常用属性

属性	说明
value	设置文本框的默认值
size	设置文本框的长度
maxlength	设置最多可输入字符

<form>
    <input type="text" value="默认值" size="长度" maxlength="可输入字符">
</form>

<form>
    <label>姓名：<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>

密码文本框常用属性

密码文本框常用属性和单行文本框常用属性相同

<input type="password" value="默认值" size="长度" maxlength="可输入字符">

<form>
    <label>密码：<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>

单选框

属性	说明
name	组名，同组单选框，组名要相同，必要属性
value	单选框选项取值，必要属性
checked	默认选中项，同组单选框，可以有一个默认选中项

<input type="radio" name="组名" value="取值" checked="checked">

<form>
    性别：
    <input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
</form>

复选框

复选框和单选框的属性都相同，区别复选框可以多选

<form>
    爱好：
    <input type="checkbox" name="hobby" value="篮球" checked>篮球
    <input type="checkbox" name="hobby" value="足球" checked>足球
    <input type="checkbox" name="hobby" value="台球">台球
</form>

普通按钮

<input type="button" value="取值">

<form>
    <input type="button" value="普通按钮">
</form>

<button>普通按钮</button>

区别：

1、input是单标签，button是双标签

2、button标签的信息除了文本，还可以是图像、其它标签等

3、button有type属性，属性值可以是button、submit、reset等

提交按钮

<input type="submit" value="取值">

<form>
    <input type="submit" value="提交">
</form>

把对应表单数据提交给后端服务器

重置按钮

<input type="reset" value="取值">

<form>
    <input type="reset" value="重置">
</form>

点击重置后，所在form表单里所有内容被清空了

文件上传

<input type="file">

<form>
    <input type="file">
</form>

10.3 多行文本框

<textarea name="文本名称" cols="列数" rows="行数"></textarea>

<form>
    <textarea name="文本名称" cols="1" rows="2"></textarea>
</form>

10.4 下拉列表

<select>
    <option>选项内容</option>
    <option>选项内容</option>
</select>

下拉列表标签是为了节省页面空间

select标签属性

属性名	说明
name	数据提交后端所需字段
size	下拉选项显示个数
multiple	默认只允许选一个，选多个得加这个属性
disabled	所有下拉选项禁止选中

<form>
    <select name="age" size="4" multiple="multiple" disabled="disabled">
        <option>18岁以下</option>
        <option>18-28岁</option>
        <option>28-38岁</option>
        <option>38岁以上</option>
    </select>
</form>

option标签属性

属性名	说明
selected	默认选中
value	被选中，数据提交后端的值
disabled	该下拉选项禁止选中

<form>
    <select name="age" size="5">
        <option value="1">18岁以下</option>
        <option value="2" disabled="disabled">18-28岁</option>
        <option value="3" selected="selected">28-38岁</option>
        <option value="4">38岁以上</option>
    </select>
</form>

11 框架标签

<iframe src="URL" width="数值" height="数值"></iframe>

框架标签常用属性

属性名	说明
src	嵌入的文档地址
width	标签宽度
height	标签高度

<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>

有些文档禁止被嵌入

12 标签类型

HTML标签分为三种，行内标签、块级标签和行内块级标签。

12.1 行内标签

特点：

1、在页面内只占据刚好能包裹自己内容的空间

2、没有宽高，内容多大就多大，行内标签不能嵌套块级标签（a标签除外）

3、行内标签设置宽高无效，可以对行高line-height进行设置

4、可以设置外边距margin和内边距padding，但只对左右边距有效果，上下无效

5、常见行内标签span、a、strong、ins、del、br等

span标签

双标签，行内标签，本身没有固定样式

<p>我是<span>中国人</span></p>

12.2 块级标签

特点：

1、独占一行

2、高度、宽度、外边距、内边距都可以设置生效

3、宽度默认是父级宽度的100%

4、是一个容器盒子，可以嵌套多层子级行内标签、块级标签，文本类块级标签除外

5、常见块级标签div、p、h1~h6、ol、ul、li等

div标签

双标签，块级标签，本身没有固定样式

<!-- 头部区域 -->
<div></div>
<!-- 内容区域 -->
<div></div>

12.3 行内块级标签

特点

1、在页面内只占据刚好能包裹自己内容的空间

2、高度、宽度、外边距、内边距都可以设置生效

3、常见块级标签img、input、td

12.4 标签类型转换

通过css样式display属性转换，这是css的内容

文出处：

Stack Overflow

https://stackoverflow.com/questions/2053258/how-do-i-output-html-in-a-message-in-the-new-django-messages-framework

原文标题：

How do I output HTML in a message in the new Django messages framework?

问题：

我正在尝试通过Django的消息框架显示一条信息，这条信息中包含了一些HTML内容。具体来说，我使用ModelAdmin.message_user方法发送消息，这个方法仅仅是对messages()的薄封装：

到目前为止，我尝试了很多方法，但最后都显示转义后的HTML。

上面的这段代码行不通，下面的代码也不行。

base.html模板里的代码非常简单：

所以我不太确定我做错了什么。

非常感谢您的意见或指导，谢谢！

回答：

该回答获得最多的59个赞。

另一种选择是使用extra_tags关键字参数，用以表明该信息是安全的。例如：

然后利用模板逻辑来使用safe filter。

By Django的那些事儿

何谓转义？就是把html语言的关键字过滤掉。例如，<div>就是html的关键字，如果要在html页面上呈现<div>，其源代码就必须是<div>

Django在默认情况下会自动转义html关键字。如果不想转义可以使用safe filter，还有autoescape tag。

在线咨询

上一篇：HTML5 的调用摄像头拍照和获取视频流的方法
下一篇：SpringBootWeb容器配置：JAX-RS和Jersey框架、内嵌容器的配置

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

一篇文章带你全面认识 static 关键字

初识 static 关键字

static 修饰变量

static 修饰方法

static 修饰代码块

static 用作静态内部类

静态导包

static 进阶知识

关于 static 的所属类

static 修饰变量的存储位置

static 变量的生命周期

static 序列化

类加载顺序

static 经常用作日志打印

static 经常用作单例模式

类的构造器是否是 static 的

1 HTML概念

2 HTML结构

​2.1 标签

2.1.1 双标签

2.1.2 单标签

2.1.3 标签关系

3 注释

4 head标签

4.1 title标签

4.2 meta标签

4.2.1 name属性

4.2.2 http-equiv属性

4.3 style标签

4.4 link标签

4.5 script标签

4.6 base标签

5 文本标签

5.1 标题标签

5.2 段落标签

5.3 换行标签

5.4 水平线标签

6 文本格式化标签

6.1 上标标签

6.2 下标标签

6.3 字符实体

7 媒体标签

7.1 图片标签

7.2 音频标签

7.3 视频标签

7.4 超链接标签

8 列表标签

8.1 无序列表

8.2 有序列表

8.3 自定义列表

9 表格标签

9.1 表格基本结构

9.2 表格标签属性

9.3 表格标题标签

9.4 表格表头单元格标签

9.5 表格语义化结构标签

9.6 合并单元格

10 表单标签

10.1 form标签

10.2 input标签

10.3 多行文本框

10.4 下拉列表

11 框架标签

12 标签类型

12.1 行内标签

12.2 块级标签

12.3 行内块级标签

12.4 标签类型转换

问题：

回答：

By Django的那些事儿

您的项目需求

2.1 标签