Android Studio开发:简单的登录注册界面_android studio 登录注册页面-程序员宅基地

技术标签: Android开发  

Android开发:编写简单的登录界面与注册界面

在这里插入图片描述
在这里插入图片描述
1.登录界面布局
1.1主布局的布局方式是垂直布局,第一个TextView控件在顶部居中布置,显示“用户登录
”字样

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_gravity="center"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:background="#00FF00"
        android:textSize="35dp"
        android:text="@string/login_text" />

第二个ImageView控件位于TextView控件下方

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:src="@mipmap/school4"/>

1.2添加第一个子布局,布局方式是水平布局,包含一个TextView控件和一个EditView控件,显示“用户”,和获取用户账号信息。

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:layout_marginLeft="50dp"
            android:text="@string/username_text"
            android:textSize="28dp" />

        <EditText
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:id="@+id/input_user_text"
            android:layout_marginTop="50dp"
            android:layout_marginLeft="5dp"
            android:maxLines="1"
            android:textSize="28dp"
            android:hint="@string/input_user_text"
            />

    </LinearLayout>

1.3第二个子布局和第一个子布局类似,稍微改一下.xml文件就可以,用于显示“密码”和获取密码信息

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:text="@string/key_text"
            android:textSize="28dp" />

        <EditText
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:id="@+id/input_key_text"
            android:layout_marginLeft="5dp"
            android:maxLines="1"
            android:textSize="28dp"
            android:hint="@string/input_key_text"
            />

    </LinearLayout>

1.4第三个子布局是加入一个CheckBox控件,用于记住账号和密码信息

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/checkbox_text"
            android:orientation="vertical"
            android:layout_marginLeft="45dp"
            android:checked="true"
            android:textSize="20dp"
            android:text="@string/checkbox_text"/>

    </LinearLayout>

1.5最后一个子布局是两个Button控件,用于显示“注册”按钮和“登录”按钮

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/register_button"
            android:layout_marginLeft="30dp"
            android:background="#00FF00"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:textSize="30dp"
            android:text="@string/register_button" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/login_button"
            android:layout_marginLeft="40dp"
            android:background="#00FF00"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:textSize="30dp"
            android:text="@string/login_button"/>

    </LinearLayout>

1.6 背景图片都是我自己从网上找的,这个不重要
1.7 activity_main.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"


    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@mipmap/bgj">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_gravity="center"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:background="#00FF00"
        android:textSize="35dp"
        android:text="@string/login_text" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:src="@mipmap/school4"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:layout_marginLeft="50dp"
            android:text="@string/username_text"
            android:textSize="28dp" />

        <EditText
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:id="@+id/input_user_text"
            android:layout_marginTop="50dp"
            android:layout_marginLeft="5dp"
            android:maxLines="1"
            android:textSize="28dp"
            android:hint="@string/input_user_text"
            />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:text="@string/key_text"
            android:textSize="28dp" />

        <EditText
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:id="@+id/input_key_text"
            android:layout_marginLeft="5dp"
            android:maxLines="1"
            android:textSize="28dp"
            android:hint="@string/input_key_text"
            />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/checkbox_text"
            android:orientation="vertical"
            android:layout_marginLeft="45dp"
            android:checked="true"
            android:textSize="20dp"
            android:text="@string/checkbox_text"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/register_button"
            android:layout_marginLeft="30dp"
            android:background="#00FF00"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:textSize="30dp"
            android:text="@string/register_button" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/login_button"
            android:layout_marginLeft="40dp"
            android:background="#00FF00"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:textSize="30dp"
            android:text="@string/login_button"/>

    </LinearLayout>

</LinearLayout>

2.注册界面布局
2.1主布局为垂直布局,第一个TextView控件在顶部居中布置,显示“用户注册”字样

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/register_surface"
        android:textSize="40dp"
        android:background="#00FF00"
        android:layout_gravity="center"
        />

2.2第一个LinearLayout控件,包含一个TextView控件和EditView控件,用于提醒用户输入和获取账号信息

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/identity_text"
            android:textSize="30dp"
            android:layout_marginTop="50dp"
            android:layout_marginLeft="30dp"/>

        <EditText
            android:id="@+id/input_identity_text"
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:layout_marginLeft="5dp"
            android:textSize="30dp"
            android:maxLines="1"
            android:hint="******"/>
    </LinearLayout>

2.2 第二个、第三个以及第四个LinearLayout控件,组件和第一个LinearLayout控件是相同的,分别用于提醒用户输入和系统获取密码、邮箱、电话等信息

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/password_text"
            android:textSize="30dp"
            android:layout_marginLeft="30dp"/>

        <EditText
            android:id="@+id/input_password_text"
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:textSize="30dp"
            android:maxLines="1"
            android:hint="******"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/mailbox_text"
            android:textSize="30dp"
            android:layout_marginLeft="30dp"/>

        <EditText
            android:id="@+id/input_mailbox_text"
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:textSize="30dp"
            android:maxLines="1"
            android:hint="******"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/phonenumber_text"
            android:textSize="30dp"
            android:layout_marginLeft="30dp"/>

        <EditText
            android:id="@+id/input_phonenumber_text"
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:textSize="30dp"
            android:maxLines="1"
            android:hint="******"/>
    </LinearLayout>

2.3 最后一个LinearLayout控件只有Button这一个控件,显示“注册”,用于点击注册

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
    <Button
        android:id="@+id/surface2_register_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40dp"
        android:background="#00FF00"
        android:layout_marginLeft="150dp"
        android:layout_marginTop="20dp"
        android:text="@string/surface2_register_button"
        />

    </LinearLayout>

3.代码
3.1 项目结构
在这里插入图片描述
3.2 activity_surface2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@mipmap/bgh">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/register_surface"
        android:textSize="40dp"
        android:background="#00FF00"
        android:layout_gravity="center"
        />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/identity_text"
            android:textSize="30dp"
            android:layout_marginTop="50dp"
            android:layout_marginLeft="30dp"/>

        <EditText
            android:id="@+id/input_identity_text"
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:layout_marginLeft="5dp"
            android:textSize="30dp"
            android:maxLines="1"
            android:hint="******"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/password_text"
            android:textSize="30dp"
            android:layout_marginLeft="30dp"/>

        <EditText
            android:id="@+id/input_password_text"
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:textSize="30dp"
            android:maxLines="1"
            android:hint="******"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/mailbox_text"
            android:textSize="30dp"
            android:layout_marginLeft="30dp"/>

        <EditText
            android:id="@+id/input_mailbox_text"
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:textSize="30dp"
            android:maxLines="1"
            android:hint="******"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/phonenumber_text"
            android:textSize="30dp"
            android:layout_marginLeft="30dp"/>

        <EditText
            android:id="@+id/input_phonenumber_text"
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:textSize="30dp"
            android:maxLines="1"
            android:hint="******"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
    <Button
        android:id="@+id/surface2_register_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40dp"
        android:background="#00FF00"
        android:layout_marginLeft="150dp"
        android:layout_marginTop="20dp"
        android:text="@string/surface2_register_button"
        />

    </LinearLayout>

</LinearLayout>

3.3 strings.xml

<resources>
    <string name="app_name">QuanApplication</string>
    <string name="login_text">用户登录</string>
    <string name="checkbox_text">记住密码</string>
    <string name="username_text">用 户:</string>
    <string name="input_user_text">******</string>
    <string name="key_text">密 码:</string>
    <string name="input_key_text">******</string>
    <string name="register_button">注册</string>
    <string name="login_button">登录</string>

    <string name="message1">账号或者密码不能为空</string>
    <string name="message2">保存成功</string>

    <string name="press_login_button1">欢迎登录!</string>
    <string name="press_login_button2">登录失败!</string>
    <string name="press_register_button">欢迎注册!</string>

    <string name="register_surface">用户注册</string>
    <string name="identity_text">账 号:</string>
    <string name="input_identity_text">******</string>
    <string name="password_text">密 码:</string>
    <string name="input_password_text"></string>
    <string name="mailbox_text">邮 箱:</string>
    <string name="input_mailbox_text"></string>
    <string name="phonenumber_text">电 话:</string>
    <string name="input_phonenumber_text"></string>
    <string name="surface2_register_button">注册</string>
    <string name="register_message">注册成功!</string>
    <string name="surface2_message">不能为空!</string>
</resources>

3.4 MainActivity.java

package com.bignerdranch.android.quanapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import android.app.Activity;
import android.app.Service;
import android.text.TextUtils;
import android.view.Menu;
import android.view.View;
import android.widget.CheckBox;
import java.util.Map;
import android.content.Intent;


public class MainActivity extends AppCompatActivity {

    private CheckBox mCheckBox;
    private Button mRegisterButton;//注册按钮
    private Button mLoginButton;//登录按钮

    private EditText mUser;
    private EditText mKey;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mUser=(EditText)findViewById(R.id.input_user_text);
        mKey=(EditText)findViewById(R.id.input_key_text);
        mRegisterButton=(Button)findViewById(R.id.register_button);
        mLoginButton=(Button)findViewById(R.id.login_button);
        mCheckBox=(CheckBox)findViewById(R.id.checkbox_text);
        //检查是否有账号密码,如果有,需要回显
        Map<String, String> map=SavePath.Get(this);
        if(map!=null){
            mUser.setText(map.get("user"));
            mKey.setText(map.get("key"));
        }



        mLoginButton.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v)  //给登录按钮设置监听器
            {
                String username = mUser.getText().toString();
                String userpassword = mKey.getText().toString();
                String username1=Surface2Activity.Getusername();//获取注册值
                String userpassword1=Surface2Activity.Getuserpassword();//获取注册值

                //if(!username.equals(username1))//验证
                //{Toast.makeText(MainActivity.this, username1,
                       // Toast.LENGTH_SHORT).show();}


                if(TextUtils.isEmpty(username)||TextUtils.isEmpty(userpassword)){
                    Toast.makeText(MainActivity.this, R.string.message1,
                            Toast.LENGTH_SHORT).show();
                }
                if(mCheckBox.isChecked()){
                    boolean result=SavePath.Save(MainActivity.this,username,userpassword);
                    if(result){
                        Toast.makeText(MainActivity.this, R.string.message2,
                                Toast.LENGTH_SHORT).show();
                    }
                }

                if(username.equals(username1)&&userpassword.equals(userpassword1)) {
                    Toast.makeText(MainActivity.this, R.string.press_login_button1,
                            Toast.LENGTH_SHORT).show();//事件触发,显示欢迎信息
                    //下面跳转问卷界面
                }
                else {
                    Toast.makeText(MainActivity.this,R.string.press_login_button2,
                            Toast.LENGTH_SHORT).show();//事件触发,显示登录失败
                }

            }
        });

        mRegisterButton.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v)
            {
                Intent intent = new Intent();
                intent.setClass(MainActivity.this, Surface2Activity.class);
                startActivity(intent);//跳转注册界面

                finish();
            }
        });

    }
}

3.5 Surface2Activity.java

package com.bignerdranch.android.quanapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import android.app.Activity;
import android.app.Service;
import android.text.TextUtils;
import android.view.Menu;
import android.view.View;
import android.widget.CheckBox;
import java.util.Map;
import android.content.Intent;


public class MainActivity extends AppCompatActivity {

    private CheckBox mCheckBox;
    private Button mRegisterButton;//注册按钮
    private Button mLoginButton;//登录按钮

    private EditText mUser;
    private EditText mKey;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mUser=(EditText)findViewById(R.id.input_user_text);
        mKey=(EditText)findViewById(R.id.input_key_text);
        mRegisterButton=(Button)findViewById(R.id.register_button);
        mLoginButton=(Button)findViewById(R.id.login_button);
        mCheckBox=(CheckBox)findViewById(R.id.checkbox_text);
        //检查是否有账号密码,如果有,需要回显
        Map<String, String> map=SavePath.Get(this);
        if(map!=null){
            mUser.setText(map.get("user"));
            mKey.setText(map.get("key"));
        }



        mLoginButton.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v)  //给登录按钮设置监听器
            {
                String username = mUser.getText().toString();
                String userpassword = mKey.getText().toString();
                String username1=Surface2Activity.Getusername();//获取注册值
                String userpassword1=Surface2Activity.Getuserpassword();//获取注册值

                //if(!username.equals(username1))//验证
                //{Toast.makeText(MainActivity.this, username1,
                       // Toast.LENGTH_SHORT).show();}


                if(TextUtils.isEmpty(username)||TextUtils.isEmpty(userpassword)){
                    Toast.makeText(MainActivity.this, R.string.message1,
                            Toast.LENGTH_SHORT).show();
                }
                if(mCheckBox.isChecked()){
                    boolean result=SavePath.Save(MainActivity.this,username,userpassword);
                    if(result){
                        Toast.makeText(MainActivity.this, R.string.message2,
                                Toast.LENGTH_SHORT).show();
                    }
                }

                if(username.equals(username1)&&userpassword.equals(userpassword1)) {
                    Toast.makeText(MainActivity.this, R.string.press_login_button1,
                            Toast.LENGTH_SHORT).show();//事件触发,显示欢迎信息
                    //下面跳转问卷界面
                }
                else {
                    Toast.makeText(MainActivity.this,R.string.press_login_button2,
                            Toast.LENGTH_SHORT).show();//事件触发,显示登录失败
                }

            }
        });

        mRegisterButton.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v)
            {
                Intent intent = new Intent();
                intent.setClass(MainActivity.this, Surface2Activity.class);
                startActivity(intent);//跳转注册界面

                finish();
            }
        });

    }
}

3.6 SavePath.java

package com.bignerdranch.android.quanapplication;

import java.io.BufferedReader;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.HashMap;
import java.util.Map;

import android.content.Context;
import android.os.Environment;

public class SavePath {
    public static boolean Save(Context context,String user,String key){

        try {

            File f= new File(context.getFilesDir(),"info.txt");
            FileOutputStream fs=new FileOutputStream(f);
            fs.write((user+"#####"+key).getBytes());
            fs.close();
            return true;
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return false;
        }
    }
    public static Map<String,String> Get(Context context){
        File f= new File(context.getFilesDir(),"info.txt");
        try {
            BufferedReader br= new BufferedReader(new InputStreamReader(new FileInputStream(f)));
            String s=br.readLine();
            String[] srinfo=s.split("#####");
            Map<String,String> map=new HashMap<String, String>();
            map.put("user",srinfo[0]);
            map.put("key",srinfo[1]);
            return map;
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return null;
        }


    }

}

4.代码运行截图
在这里插入图片描述
在这里插入图片描述
5.参考博客地址
https://blog.csdn.net/lx144630/article/details/82768759

https://blog.csdn.net/as4061218/article/details/50295673

https://blog.csdn.net/mjyy10181103/article/details/78261500

欢迎使用Markdown编辑器

你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:

  1. 全新的界面设计 ,将会带来全新的写作体验;
  2. 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
  3. 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
  4. 全新的 KaTeX数学公式 语法;
  5. 增加了支持甘特图的mermaid语法1 功能;
  6. 增加了 多屏幕编辑 Markdown文章功能;
  7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能,功能按钮位于编辑区域与预览区域中间;
  8. 增加了 检查列表 功能。

功能快捷键

撤销:Ctrl/Command + Z
重做:Ctrl/Command + Y
加粗:Ctrl/Command + B
斜体:Ctrl/Command + I
标题:Ctrl/Command + Shift + H
无序列表:Ctrl/Command + Shift + U
有序列表:Ctrl/Command + Shift + O
检查列表:Ctrl/Command + Shift + C
插入代码:Ctrl/Command + Shift + K
插入链接:Ctrl/Command + Shift + L
插入图片:Ctrl/Command + Shift + G

合理的创建标题,有助于目录的生成

直接输入1次#,并按下space后,将生成1级标题。
输入2次#,并按下space后,将生成2级标题。
以此类推,我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H2O is是液体。

210 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片: Alt

居中的图片: Alt

居中并且带尺寸的图片: Alt

当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

  • 项目
    • 项目
      • 项目
  1. 项目1
  2. 项目2
  3. 项目3
  • 计划任务
  • 完成任务

创建一个表格

一个简单的表格是这么创建的:

项目 Value
电脑 $1600
手机 $12
导管 $1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列 第二列 第三列
第一列文本居中 第二列文本居右 第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:

TYPE ASCII HTML
Single backticks 'Isn't this fun?' ‘Isn’t this fun?’
Quotes "Isn't this fun?" “Isn’t this fun?”
Dashes -- is en-dash, --- is em-dash – is en-dash, — is em-dash

创建一个自定义列表

Markdown
Text-to- HTML conversion tool
Authors
John
Luke

如何创建一个注脚

一个具有注脚的文本。2

注释也是必不可少的

Markdown将文本转换为 HTML

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n1)!nN 是通过欧拉积分

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t &ThinSpace; . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=0tz1etdt.

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能,丰富你的文章

Mon 06 Mon 13 Mon 20 已完成 进行中 计划一 计划二 现有任务 Adding GANTT diagram functionality to mermaid
  • 关于 甘特图 语法,参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图::

张三 李四 王五 你好!李四, 最近怎么样? 你最近怎么样,王五? 我很好,谢谢! 我很好,谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

这将产生一个流程图。:

链接
长方形
圆角长方形
菱形
  • 关于 Mermaid 语法,参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图:

Created with Raphaël 2.2.0 开始 我的操作 确认? 结束 yes no
  • 关于 Flowchart流程图 语法,参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ,生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件或者.html文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
继续你的创作。


  1. mermaid语法说明

  2. 注脚的解释

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42665285/article/details/90809443

智能推荐

leetcode 172. 阶乘后的零-程序员宅基地

文章浏览阅读63次。题目给定一个整数 n,返回 n! 结果尾数中零的数量。解题思路每个0都是由2 * 5得来的,相当于要求n!分解成质因子后2 * 5的数目,由于n中2的数目肯定是要大于5的数目,所以我们只需要求出n!中5的数目。C++代码class Solution {public: int trailingZeroes(int n) { ...

Day15-【Java SE进阶】IO流(一):File、IO流概述、File文件对象的创建、字节输入输出流FileInputStream FileoutputStream、释放资源。_outputstream释放-程序员宅基地

文章浏览阅读992次,点赞27次,收藏15次。UTF-8是Unicode字符集的一种编码方案,采取可变长编码方案,共分四个长度区:1个字节,2个字节,3个字节,4个字节。文件字节输入流:每次读取多个字节到字节数组中去,返回读取的字节数量,读取完毕会返回-1。注意1:字符编码时使用的字符集,和解码时使用的字符集必须一致,否则会出现乱码。定义一个与文件一样大的字节数组,一次性读取完文件的全部字节。UTF-8字符集:汉字占3个字节,英文、数字占1个字节。GBK字符集:汉字占2个字节,英文、数字占1个字节。GBK规定:汉字的第一个字节的第一位必须是1。_outputstream释放

jeecgboot重新登录_jeecg 登录自动退出-程序员宅基地

文章浏览阅读1.8k次,点赞3次,收藏3次。解决jeecgboot每次登录进去都会弹出请重新登录问题,在utils文件下找到request.js文件注释这段代码即可_jeecg 登录自动退出

数据中心供配电系统负荷计算实例分析-程序员宅基地

文章浏览阅读3.4k次。我国目前普遍采用需要系数法和二项式系数法确定用电设备的负荷,其中需要系数法是国际上普遍采用的确定计算负荷的方法,最为简便;而二项式系数法在确定设备台数较少且各台设备容量差..._数据中心用电负荷统计变压器

HTML5期末大作业:网页制作代码 网站设计——人电影网站(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 dreamweaver作业静态HTML网页设计模板_网页设计成品百度网盘-程序员宅基地

文章浏览阅读7k次,点赞4次,收藏46次。HTML5期末大作业:网页制作代码 网站设计——人电影网站(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 dreamweaver作业静态HTML网页设计模板常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业_网页设计成品百度网盘

【Jailhouse 文章】Look Mum, no VM Exits_jailhouse sr-iov-程序员宅基地

文章浏览阅读392次。jailhouse 文章翻译,Look Mum, no VM Exits!_jailhouse sr-iov

随便推点

chatgpt赋能python:Python怎么删除文件中的某一行_python 删除文件特定几行-程序员宅基地

文章浏览阅读751次。本文由chatgpt生成,文章没有在chatgpt生成的基础上进行任何的修改。以上只是chatgpt能力的冰山一角。作为通用的Aigc大模型,只是展现它原本的实力。对于颠覆工作方式的ChatGPT,应该选择拥抱而不是抗拒,未来属于“会用”AI的人。AI职场汇报智能办公文案写作效率提升教程 专注于AI+职场+办公方向。下图是课程的整体大纲下图是AI职场汇报智能办公文案写作效率提升教程中用到的ai工具。_python 删除文件特定几行

Java过滤特殊字符的正则表达式_java正则表达式过滤特殊字符-程序员宅基地

文章浏览阅读2.1k次。【代码】Java过滤特殊字符的正则表达式。_java正则表达式过滤特殊字符

CSS中设置背景的7个属性及简写background注意点_background设置背景图片-程序员宅基地

文章浏览阅读5.7k次,点赞4次,收藏17次。css中背景的设置至关重要,也是一个难点,因为属性众多,对应的属性值也比较多,这里详细的列举了背景相关的7个属性及对应的属性值,并附上演示代码,后期要用的话,可以随时查看,那我们坐稳开车了······1: background-color 设置背景颜色2:background-image来设置背景图片- 语法:background-image:url(相对路径);-可以同时为一个元素指定背景颜色和背景图片,这样背景颜色将会作为背景图片的底色,一般情况下设置背景..._background设置背景图片

Win10 安装系统跳过创建用户,直接启用 Administrator_windows10msoobe进程-程序员宅基地

文章浏览阅读2.6k次,点赞2次,收藏8次。Win10 安装系统跳过创建用户,直接启用 Administrator_windows10msoobe进程

PyCharm2021安装教程-程序员宅基地

文章浏览阅读10w+次,点赞653次,收藏3k次。Windows安装pycharm教程新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入下载安装PyCharm1、进入官网PyCharm的下载地址:http://www.jetbrains.com/pycharm/downl_pycharm2021

《跨境电商——速卖通搜索排名规则解析与SEO技术》一一1.1 初识速卖通的搜索引擎...-程序员宅基地

文章浏览阅读835次。本节书摘来自异步社区出版社《跨境电商——速卖通搜索排名规则解析与SEO技术》一书中的第1章,第1.1节,作者: 冯晓宁,更多章节内容可以访问云栖社区“异步社区”公众号查看。1.1 初识速卖通的搜索引擎1.1.1 初识速卖通搜索作为速卖通卖家都应该知道,速卖通经常被视为“国际版的淘宝”。那么请想一下,普通消费者在淘宝网上购买商品的时候,他的行为应该..._跨境电商 速卖通搜索排名规则解析与seo技术 pdf

推荐文章

热门文章

相关标签