ORACLE11g将数据库内容全部复制，并将其加为本数据库的一个新实例

Posted 2023-05-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ORACLE11g将数据库内容全部复制，并将其加为本数据库的一个新实例相关的知识，希望对你有一定的参考价值。

需要将现有实例的表、表空间、存储过程等进行备份，并将其加为本数据库的一个新实例，如何操作。
希望明白的高手告之。

oracle数据库的数据是按用户来组织的，所以你说的“现有实例的表、表空间、存储过程等”，实际上应该是某个用户的对象；而你只需要将这个用户的对象导出，然后导入到一个新用户下去，就可以实现你的需求。你这里的“实例”实际上应该是用户的概念，而不是一个oracle实例。
做法是：expdp按用户导出数据，然后创建新用户，用impdp导入，导入的时候remap_schema即可。参考技术A oracle数据库有个数据库克隆功能，可以满足你的要求。追问

我肯定加分，您能说的详细点吗？我马上查这个.我是LINUX下RED HAT 2.6

追答

oracle在linux下我没有玩过，只玩过windows。
不过原理是一样的，
一个方法是将原数据库完全备份exp user/password file=test.dmp full=y log=test.log ，新建的一个数据库，以后将test.dmp文件导入到新建的数据库中；
一个是复制设置数据库文件，http://www.cnblogs.com/killkill/archive/2010/10/20/1856224.html 这个是我在网上找的；
希望能够帮到你！

本回答被提问者采纳

全部的笔记

JDBC

JDBC是Java提供的连接数据库的一套接口。

使用JDBC访问数据库的过程

将数据库的驱动文件导入到项目中
- JavaSE项目：将jar文件复制到项目的包中-->jar右键-->Build Path-->Add to Build Path

加载数据库驱动

Class.forName("包名.类名")：创建类的对象，并将对象加载到内存中。

try 
    Class.forName("com.mysql.cj.jdbc.Driver");
    System.out.println("数据库驱动加载成功！！！");
 catch (ClassNotFoundException e) 
    System.out.println("数据库驱动加载失败！！！");

DriverManager.registerDriver(new 数据库驱动())：注册数据库驱动。

try 
	DriverManager.registerDriver(new Driver());
 catch (SQLException e) 
	System.out.println("数据库异常！！！");

创建java.sql.Connection接口的实例，连接数据库。

// 连接对象
Connection conn = null;
try 
    Class.forName("com.mysql.cj.jdbc.Driver");
    // DriverManager.getConnection("url","用户名","密码")
    conn = DriverManager.getConnection(
        "jdbc:mysql://127.0.0.1:3306/test?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&nullCatalogMeansCurrent=true&allowPublicKeyRetrieval=true",
        "root", "123456");
 catch (ClassNotFoundException e) 
    System.out.println("数据库驱动加载失败！！！");
 catch (SQLException e) 
    System.out.println("数据库异常，请稍候再试！！！");

创建java.sql.Statement或java.sql.PreparedStatement接口的实例。将Java的字符串编译为数据库可以解析的SQL语句。

当执行SELECT语句时，需要使用语句对象的executeQuery()方法，此方法的返回类型为java.sql.ResultSet接口类型的实例，用于保存查询的结果。

// 连接对象
Connection conn = null;
// 语句对象
Statement stat = null;
// 结果集
ResultSet rs = null;
try 
    Class.forName("com.mysql.cj.jdbc.Driver");
    // DriverManager.getConnection("url","用户名","密码")
    conn = DriverManager.getConnection(
        "jdbc:mysql://127.0.0.1:3306/test?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&nullCatalogMeansCurrent=true&allowPublicKeyRetrieval=true",
        "root", "123456");
    String sql = "select user_id,user_name,user_password,user_salary,user_birthday from user_message";
    // 使用连接对象，创建语句对象
    stat = conn.createStatement();
    // 使用语句对象执行SELECT语句，并将查询的结果存入到结果集中
    rs = stat.executeQuery(sql);
 catch (ClassNotFoundException e) 
    System.out.println("数据库驱动加载失败！！！");
 catch (SQLException e) 
    System.out.println("数据库异常，请稍候再试！！！");
    e.printStackTrace();

当执行INSERT/DELETE/UPDATE语句时，需要使用语句对象的executeUpdate()方法，此方法返回类型为int类型，表示INSERT/DELETE/UPDATE语句执行后，影响表中数据的行数。

处理结果

ResultSet的next()方法：将结果集的游标向下移动一行，游标移动后找到了数据返回true，否则返回false。

// 连接对象
Connection conn = null;
// 语句对象
Statement stat = null;
// 结果集
ResultSet rs = null;
try 
    Class.forName("com.mysql.cj.jdbc.Driver");
    // DriverManager.getConnection("url","用户名","密码")
    conn = DriverManager.getConnection(
        "jdbc:mysql://127.0.0.1:3306/test?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&nullCatalogMeansCurrent=true&allowPublicKeyRetrieval=true",
        "root", "123456");
    String sql = "select user_id,user_name,user_password,user_salary,user_birthday from user_message";
    // 使用连接对象，创建语句对象
    stat = conn.createStatement();
    // 使用语句对象执行SELECT语句，并将查询的结果存入到结果集中
    rs = stat.executeQuery(sql);
    // 使用循环遍历结果集
    while(rs.next()) 
        System.out.print(rs.getInt("user_id") + "\\t");
        System.out.print(rs.getString("user_name") + "\\t");
        System.out.print(rs.getString("user_password") + "\\t");
        System.out.print(rs.getDouble("user_salary") + "\\t");
        System.out.println(rs.getDate("user_birthday"));
    
 catch (ClassNotFoundException e) 
    System.out.println("数据库驱动加载失败！！！");
 catch (SQLException e) 
    System.out.println("数据库异常，请稍候再试！！！");
    e.printStackTrace();

ResultSet的getXXXX(参数)：获得结果集当前行指定列的数据。参数的类型可以为String，也可以是int类型。

关闭与数据库相关的对象，否则垃圾回收器不会释放相关的内存。

// 连接对象
Connection conn = null;
// 语句对象
Statement stat = null;
// 结果集
ResultSet rs = null;
try 
    Class.forName("com.mysql.cj.jdbc.Driver");
    // DriverManager.getConnection("url","用户名","密码")
    conn = DriverManager.getConnection(
        "jdbc:mysql://127.0.0.1:3306/test?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&nullCatalogMeansCurrent=true&allowPublicKeyRetrieval=true",
        "root", "123456");
    String sql = "select user_id,user_name,user_password,user_salary,user_birthday from user_message";
    // 使用连接对象，创建语句对象
    stat = conn.createStatement();
    // 使用语句对象执行SELECT语句，并将查询的结果存入到结果集中
    rs = stat.executeQuery(sql);
    // 使用循环遍历结果集
    while(rs.next()) 
        System.out.print(rs.getInt("user_id") + "\\t");
        System.out.print(rs.getString("user_name") + "\\t");
        System.out.print(rs.getString("user_password") + "\\t");
        System.out.print(rs.getDouble("user_salary") + "\\t");
        System.out.println(rs.getDate(0));
    
 catch (ClassNotFoundException e) 
    System.out.println("数据库驱动加载失败！！！");
 catch (SQLException e) 
    System.out.println("数据库异常，请稍候再试！！！");
    e.printStackTrace();
 finally 
    if(rs != null) 
        try 
            rs.close();
         catch (SQLException e) 
        
    
    if(stat != null) 
        try 
            stat.close();
         catch (SQLException e) 
        
    
    if(conn != null) 
        try 
            conn.close();
         catch (SQLException e)

java.sql.Statement接口与java.sql.PreparedStatement接口的关系与区别？
- 关系：PreparedStatement是Statement的子接口。
- 区别：
  - 安全性：
    - Statement无法防止SQL注入，安全性低。
    - PreparedStaterment可以防止SQL注入，安全性高。
  - 效率：当需要批量执行同一条SQL语句时。
    - Statement每次执行语句时，都需要先编译语句，再执行语句，效率低。
    - PreparedStatement只在第一次执行语句时编译语句，再执行。从第二次执行开始，不再编译语句，而直接执行，效率高。

添加数据

/**
 * 向USER_MESSAGE表中添加新的用户信息
 * 
 * @param userName     用户名
 * @param userPassword 用户密码
 * @param userSalary   用户工资
 * @param userBirthday 出生日期
 * @return 添加成功返回大于0的整数，否则返回0
 */
public int save(String userName, String userPassword, Double userSalary, Date userBirthday) 
	Connection conn = null;
	PreparedStatement ps = null;
	try 
		Class.forName("com.mysql.cj.jdbc.Driver");
		conn = DriverManager.getConnection(
				"jdbc:mysql://127.0.0.1:3306/test?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&nullCatalogMeansCurrent=true&allowPublicKeyRetrieval=true",
				"root", "123456");
		String sql = "insert into user_message(user_name,user_password,user_salary,user_birthday) values(?,?,?,?)";
		// 关闭数据库自动提交功能，只有insert/delete/update语句需要，select语句不需要
		conn.setAutoCommit(false);
		// 创建准备语句对象，并设置准备语句对象将要执行的insert语句
		ps = conn.prepareStatement(sql);
		// 替换准备语句对象中的问号
		ps.setString(1, userName);
		ps.setString(2, userPassword);
		ps.setDouble(3, userSalary);
		// 将java.util.Date转换为java.sql.Date
		ps.setDate(4, new java.sql.Date(userBirthday.getTime()));
		// 使用准备语句对象执行insert语句，并获得insert语句执行后影响表中数据的行数
		int rows = ps.executeUpdate();
		if (rows > 0) 
			// 添加成功，提交事务
			conn.commit();
			return rows;
		
		// 添加失败，回退事务
		conn.rollback();
	 catch (ClassNotFoundException e) 
		e.printStackTrace();
	 catch (SQLException e) 
		e.printStackTrace();
	 finally 
		if (ps != null) 
			try 
				ps.close();
			 catch (SQLException e) 
			
		
		if (conn != null) 
			try 
				conn.close();
			 catch (SQLException e) 
			
		
	
	return 0;

修改数据

/**
 * 修改USER_MESSAGE表中指定用户的USER_PASSWORD
 * 
 * @param userId       用户编号
 * @param userPassword 新密码
 * @return 修改成功返回大于0的整数，否则返回0
 */
public int updateUserPasswordByUserId(Integer userId, String userPassword) 
	Connection conn = null;
	PreparedStatement ps = null;
	try 
		// 加载数据库驱动
		Class.forName("com.mysql.cj.jdbc.Driver");
		// 创建连接对象，连接数据库
		conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/test?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&nullCatalogMeansCurrent=true&allowPublicKeyRetrieval=true","root","123456");
		// 创建UPDATE语句
		String sql = "update user_message set user_password=? where user_id=?";
		// 关闭数据库自动提交的功能
		conn.setAutoCommit(false);
		// 创建准备语句对象，并设置准备语句对象将要执行的UPDATE语句
		ps = conn.prepareStatement(sql);
		// 替换准备语句对象中的问号
		ps.setString(1, userPassword);
		ps.setInt(2, userId);
		// 使用准备语句对象执行UPDATE语句，并获得UPDATE语句执行后影响表中数据的行数
		int rows = ps.executeUpdate();
		// 如果修改成功，提交事务，返回UPDATE影响数据的行数
		if(rows > 0) 
			conn.commit();
			return rows;
		
		// 如果修改失败，回退事务
		conn.rollback();
	 catch (ClassNotFoundException e) 
		e.printStackTrace();
	 catch (SQLException e) 
		e.printStackTrace();
	 finally 
		// 关闭与数据库相关的对象
		if(ps != null) 
			try 
				ps.close();
			 catch (SQLException e) 
			
		
		if(conn != null) 
			try 
				conn.close();
			 catch (SQLException e) 
			
		
	
	return 0;

封装查询结果

创建实体类：实体类的对象可以封装表中的一行数据。

package com.test.po;

import java.util.Date;

/**
 * 实体类：当前类的“一个”对象可以封装USER_MESSAGE表中的“一行”用户信息
 * 
 * @author M S I
 *
 */
public class UserMessage 

	private Integer userId;
	private String userName;
	private String userPassword;
	private Double userSalary;
	private Date userBirthday;

	public Integer getUserId() 
		return userId;
	

	public void setUserId(Integer userId) 
		this.userId = userId;
	

	public String getUserName() 
		return userName;
	

	public void setUserName(String userName) 
		this.userName = userName;
	

	public String getUserPassword() 
		return userPassword;
	

	public void setUserPassword(String userPassword) 
		this.userPassword = userPassword;
	

	public Double getUserSalary() 
		return userSalary;
	

	public void setUserSalary(Double userSalary) 
		this.userSalary = userSalary;
	

	public Date getUserBirthday() 
		return userBirthday;
	

	public void setUserBirthday(Date userBirthday) 
		this.userBirthday = userBirthday;
	

	@Override
	public String toString() 
		return "UserMessage [userId=" + userId + ", userName=" + userName + ", userPassword=" + userPassword
				+ ", userSalary=" + userSalary + ", userBirthday=" + userBirthday + "]";

封装查询的结果

package com.test.dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.test.po.UserMessage;

/**
 * 实现对USER_MESSAGE表进行操作的方法
 * 
 * @author M S I
 *
 */
public class UserMessageDao 

	/**
	 * 查询USER_MESSAGE表中所有的用户信息
	 * 
	 * @return 查询成功返回java.util.List类型的实例，否则返回null
	 */
	public List<UserMessage> getAll() 
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		try 
			Class.forName("com.mysql.cj.jdbc.Driver");
			conn = DriverManager.getConnection(
					"jdbc:mysql://127.0.0.1:3306/test?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&nullCatalogMeansCurrent=true&allowPublicKeyRetrieval=true",
					"root", "123456");
			String sql = "select user_id,user_name,user_password,user_salary,user_birthday from user_message";
			ps = conn.prepareStatement(sql);
			rs = ps.executeQuery();
			// 在关闭结果集之前将结果集中的数据备份到List集合中
			// 1.创建List集合，用于保存结果集中所有的数据
			List<UserMessage> list = new ArrayList<>();
			// 2.声明实体类的变量，用于保存结果集中的一行数据
			UserMessage user = null;
			// 3.使用循环遍历结果集，将结果集中数据封装到List集合中
			while(rs.next()) 
				// 4.创建实体类的对象，可以保存结果集中的一行数据
				user = new UserMessage();
				// 5.将结果集当前行指定列的数据，添加到实体类对象对应的属性中
				user.setUserId(rs.getInt("user_id"));
				user.setUserName(rs.getString("user_name"));
				user.setUserPassword(rs.getString("user_password"));
				user.setUserSalary(rs.getDouble("user_salary"));
				user.setUserBirthday(rs.getDate("user_birthday"));
				// 6.将实体类的对象添加到List集合中
				list.add(user);
			
			// 7.循环结束后，返回List集合
			return list;
		 catch (ClassNotFoundException e) 
			e.printStackTrace();
		 catch (SQLException e) 
			e.printStackTrace();
		 finally 
			if(rs != null) 
				try 
					rs.close();
				 catch (SQLException e) 
				
			
			if(ps != null) 
				try 
					ps.close();
				 catch (SQLException e) 
				
			
			if(conn != null) 
				try 
					conn.close();
				 catch (SQLException e) 
				
			
		
		return null;

获得自增长主键

@Override
public int saveBusiness(String businessName) 
    try 
        // 获得数据库连接对象
        conn = DbUtil.getConnection();
        // 创建INSERT语句
        String sql = "insert into business(businessName,password) values(?,\'123\')";
        // 创建准备语句对象，并设置准备语句对象将要执行的INSERT语句，同时设置准备语句对象可以获得自增长主键的值
        ps = conn.prepareStatement(sql, PreparedStatement.RETURN_GENERATED_KEYS);
        // 替换准备语句对象中的问号
        ps.setString(1, businessName);
        // 使用准备语句对象执行INSERT语句，并获得INSERT语句执行后向表中添加数据的行数
        int rows = ps.executeUpdate();
        // 如果添加成功，提交事务
        if (rows > 0) 
            conn.commit();
            // 并通过准备语句对象获得自增长的主键，将主键存入结果集中(一行一列)
            rs = ps.getGeneratedKeys();
            // 从结果集中获得主键，并返回
            if (rs.next()) 
                return rs.getInt(1);
            
        
        // 如果添加失败，回退事务
        conn.rollback();
     catch (ClassNotFoundException e) 
        e.printStackTrace();
     catch (SQLException e) 
        e.printStackTrace();
     finally 
        // 关闭与数据库相关的对象
        try 
            DbUtil.close(rs, ps, conn);
         catch (SQLException e) 
        
    
    return 0;

动态拼接SQL语句

@Override
public List<Business> listBusiness(String businessName, String businessAddress) 
    try 
        // 获得数据库连接对象
        conn = DbUtil.getConnection();
        // 创建基本的SELECT语句
        StringBuilder sql = new StringBuilder(
            "select businessId,password,businessName,businessAddress,businessExplain,starPrice,deliveryPrice "
            + " from business where 1=1 ");
        // 根据用户输入的查询条件，拼接SELECT语句
        int num = 0;
        if (businessName != null && !businessName.trim().equals("")) 
            sql.append("and businessName like ? ");
            num = num + 1;
        
        if (businessAddress != null && !businessAddress.trim().equals("")) 
            sql.append("and businessAddress like ?");
            num = num + 2;
        
        // 创建准备语句对象，并设置准备语句对象将要执行的SELECT语句
        ps = conn.prepareStatement(sql.toString());
        // 根据用户输入的查询条件替换准备语句对象中的问号
        if (num == 1) 
            ps.setString(1, "%" + businessName + "%");
         else if (num == 2) 
            ps.setString(1, "%" + businessAddress + "%");
         else if (num == 3) 
            ps.setString(1, "%" + businessName + "%");
            ps.setString(2, "%" + businessAddress + "%");
        
        // 使用准备语句对象执行SELECT语句，并将查询的结果存入到结果集中
        rs = ps.executeQuery();
        // 在关闭结果集之前，将结果集中的数据备份到List集合中
        // 创建List集合，用于保存结果集中的多行数据
        List<Business> list = new ArrayList<>();
        // 声明领域对象变量，用于保存结果集中的一行数据
        Business business = null;
        // 使用循环遍历结果集，将结果集的数据封装到List集合中
        while(rs.next()) 
            // 创建领域对象，可以保存结果集中的一行数据
            business = new Business();
            // 获得结果集当前行指定列的数据，并将数据存入领域对象对应的属性中
            business.setBusinessId(rs.getInt("businessId"));
            business.setBusinessAddress(rs.getString("businessAddress"));
            business.setBusinessExplain(rs.getString("businessExplain"));
            business.setBusinessName(rs.getString("businessName"));
            business.setDeliveryPrice(rs.getDouble("deliveryPrice"));
            business.setPassword(rs.getString("password"));
            business.setStarPrice(rs.getDouble("starPrice"));
            // 将封装数据后的领域对象添加到List中
            list.add(business);
        
        // 循环结束后返回List集合
        return list;
     catch (ClassNotFoundException e) 
        e.printStackTrace();
     catch (SQLException e) 
        e.printStackTrace();
     finally 
        // 关闭与数据库相关的对象
        try 
            DbUtil.close(rs, ps, conn);
         catch (SQLException e) 				
        
    
    return null;

HTML

HTML(超文本标记语言)
HTML文件扩展名：.html/.htm

HTML文件的基本结构

<html>
    <head>
        <!-- 通常用于放置页面的配置，引入的文件，大部分内容为用户不可见的元素 -->
    </head>
    <body>
        <!-- 通常用于存放用户可见的元素 -->
    </body>
</html>

HTML标签：
- <标签>....</标签>
- <标签/>
HTML标签不区分大小写，建议小写。
HTML中常用的标签或属性：
- <meta charset=\'字符集\'>：设置当前页面的字符集。
- <title>：设置页面的标题。
- <link href=\'文件名路径\' rel=\'文件类型\'/>：将指定类型的文件导入到当前页面中。
- bgcolor属性：设置元素的背景颜色。
- background属性：设置元素的背景图片。背景图片会覆盖背景颜色。
- <br>：换行。
- <h1>-<h6>：标题，默认为左对齐。
- align属性：设置水平对齐方式。left/center/reight
- <p>：段落，段落不能嵌套段落。
-  ：空格
- <strong>：粗体
- <em>：斜体
- <a href=\'url\'>文本</a>：超链接
- title属性：当鼠标悬停在元素上时，显示的提示文本。
- <img src="图片路径">：将指定的图片加载到页面中。
- width属性：宽度。
- height属性：高度。
- border属性：设置元素的边框，默认为0.
- <ol>：有序列表
- <ul>：无序列表
- <li>：列表项
- <table>：表格
- <thead>：用于存放表格中的第一行，列标题。
- <tbody>：用于存放表格中的数据。
- <tr>：表格中的行。
- <th>：列标题，默认为居中对齐，默认为粗体。
- <td>：表格中的数据，默认为左对齐。
- valign属性：设置垂直对齐方式。
- colspan属性：跨列。
- 块级元素：独占一行。可以设置宽度与高度。可以包含其它的块级元素与行级元素。
- 行级元素（行内元素，内联元素）：不独占一行，从左到右依次排列，当页面宽度不足时自动换行。不能设置宽度与高度，不能包含其它的块级与行级元素。
- 块级行内元素（块级内联元素）：不独占一行，但可以设置宽度与高度。
- hidden属性：HTML5新出现，隐藏元素。

表单与表单中的控件

<form>：不可见，可以收集用户输入的数据。
action属性：设置表单收集数据后，提交给资源的名称。
method属性：设置表单提交数据的方式。只有get/post，默认为get。
get模式与post模式的区别？
- get模式：get模式提交的数据在浏览器地址栏中可以看到，get模式不能提交大数据。
- post模式：post模式提交的数据在浏览器地址栏中看不到，post模式可以提交大数据。
<input>：根据type属性的值，呈现出不同的控件。
name属性：设置控件的名字，默认情况下如果控件没有设置name属性，表单收集数据时会忽略这些控件中的数据。
value属性：通常情况下用于设置控件的默认值。
placeholder属性：用于设置控件默认显示的提示信息。HTML5中出现。
autofocus属性：控件自动获得焦点。HTML5中出现。
maxlength属性：设置控件最多输入的字符数。
size属性：设置控件的宽度。
readonly属性：设置控件为只读的状态。
disabled属性：设置控件为不可用的状态，控件呈现灰色。

required属性：表单提交时，验证数据是否为空。如果数据为空，则阻止表单提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://www.baidu.com" method="get">
        <!-- 隐藏表单域 -->
        <input type="hidden" name="userId" value="100"/>
        <table>
            <tr>
                <td>用户名：</td>
                <td>
                    <!-- 单行文本框 -->
                    <input type="text" name="userName" autofocus="autofocus"/>
                </td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td>
                    <!-- 密码框 -->
                    <input type="password" name="userPassword1" maxlength="20"/>
                </td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td>
                    <input type="password" name="userPassword2" maxlength="20"/>
                </td>
            </tr>
            <tr>
                <td>用户性别：</td>
                <td>
                    <!-- 单选按钮，name属性一致的为一组单选按钮，同组的单选按钮互斥的 -->
                    <input type="radio" name="userSex" value="0" checked="checked"/>男
                    <input type="radio" name="userSex" value="1"/>女
                </td>
            </tr>
            <tr>
                <td>城市：</td>
                <td>
                    <!-- 复选按钮，name属性一致的为一组复选按钮 -->
                    <input type="checkbox" name="userCity" value="1"/>北京
                    <input type="checkbox" name="userCity" value="2"/>上海
                    <input type="checkbox" name="userCity" value="3" checked="checked"/>大连
                </td>
            </tr>
            <tr>
                <td>用户学历：</td>
                <td>
                    <!-- 下拉列表/列表框：默认为下拉列表控件。添加了size属性时，控件会变为列表控件。 -->
                    <select name="userDegree">
                        <option value="1">小学</option>
                        <option value="2">中学</option>
                        <option value="3" selected="selected">大学</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>上传文件：</td>
                <td>
                    <!-- 上传文件控件 -->
                    <input type="file"/>
                </td>
            </tr>
            <tr>
                <td>教育经历：</td>
                <td>
                    <textarea rows="10" cols="20" placeholder="可以省略……" name="userEdu">abc</textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <!-- 点击提交按钮时，按钮所在的表单会收集用户在控件中输入的数据，并将数据提交到action属性指定的资源 -->
                    <button type="submit">提交按钮</button>
                    <!-- 将所有表单中控件的值还原为默认值 -->
                    <button type="reset">重置按钮</button>
                    <!-- 通常与JS代码配合使用 -->
                    <button type="button">普通按钮</button>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

HTML5中新出现的控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="html1.html" method="post">
        <table>
            <tr>
                <td>非空验证：</td>
                <td>
                    <input type="text" name="notNull" required="required"/>
                </td>
            </tr>
            <tr>
                <td>输入数字：</td>
                <td>
                    <input type="number" min="1" max="100" step="10" value="1" required="required" />
                </td>
            </tr>
            <tr>
                <td>输入邮箱：</td>
                <td>
                    <input type="email" required="required"/>
                </td>
            </tr>
            <tr>
                <td>输入日期：</td>
                <td>
                    <input type="date" required="required"/>
                </td>
            </tr>
            <tr>
                <td>输入时间：</td>
                <td>
                    <input type="time" required="required"/>
                </td>
            </tr>
            <tr>
                <td>输入日期时间：</td>
                <td>
                    <input type="datetime-local" required="required"/>
                </td>
            </tr>
            <tr>
                <td>输入周：</td>
                <td>
                    <input type="week" required="required"/>
                </td>
            </tr>
            <tr>
                <td>查询条件：</td>
                <td>
                    <input type="search" />
                </td>
            </tr>
            <tr>
                <td>DataList:</td>
                <td>
                    <!-- 当下拉列表中数据多时，建议使用 -->
                    <!-- list属性设置DataList控件的id属性的值 -->
                    <input type="text" list="myDataList"/>
                    <!-- id属性在页面中是唯一的 -->
                    <datalist id="myDataList">
                        <option>AAA</option>
                        <option>AAB</option>
                        <option>AAC</option>
                        <option>BAA</option>
                        <option>BAB</option>
                        <option>BAC</option>
                        <option>CAA</option>
                        <option>CAB</option>
                        <option>CAC</option>
                        <option>DAA</option>
                    </datalist>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button type="submit">提交</button>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

CSS

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

CSS的三种使用方式

行内样式(内联样式)：在标签中使用style属性设置当前标签的样式。此方式优先级最高。

格式：<标签 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p >
        这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落。
    </p>
    <p >
        这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落。
    </p>
    <p >
        这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落。
    </p>
    <p >
        这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落。
    </p>
    <p >
        这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落。
    </p>
</body>
</html>

内部样式：在HTML页面中使用style标签设置页面中指定元素的样式。

格式：

元素名

属性:值;

……

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* CSS中的注释 */
        p
            color:#0000AA;
            font-size: 25px;
        
    </style>
</head>

<body>
    <p>
        这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落。
    </p>
    <p>
        这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落。
    </p>
    <p>
        这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落。
    </p>
    <p>
        这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落。
    </p>
    <p >
        这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落。
    </p>
</body>

</html>

外部样式：使用link标签导入外部的CSS文件。

CSS常用的选择器

元素选择器(HTML选择器、标签选择器)：设置指定元素(标签)的样式。

<style>
    input
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom-color: black;
    
</style>

属性选择器：设置当前页面中指定属性元素的样式。
- 格式：元素[属性=‘值’]
- *：表示模糊查询。
- ^：表示以指定的值开头。
- $：表示以指定的值结尾。
```
<style>
    input[type$=\'xt\']
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom-color: black;
    
</style>
```

ID选择器：使用#表示ID选择器。设置指定ID元素的样式。

在HTML页面中id属性的值是唯一的。

ID选择器的效率最高的。

<style>
    #t1
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom-color: black;
    
    #t2
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom-color: black;
    
    #t3
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom-color: black;
    
</style>

群组选择器：同时设置多个元素的样式。

语法：元素1,元素2,……

<style>
    #t1,#t2,#t3
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom-color: black;
    
</style>

类选择器(Class选择器)：元素中class的值可以重复的，并且class属性中可以同时出现多个值，值之间使用空格分隔。使用“.”表示类选择器。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .t
            border-top: none;
            border-right: none;
            border-left: none;
            border-bottom-color: black;
        
        .t1
            color: red;
        
    </style>
</head>
<body>
    面向对象的特征：<input class="t" type="text"/>,<input class="t" type="text"/>,<input class="t t1" type="text"/>。
    <br>
    <input type="button" value="交卷">
</body>
</html>

后代选择器：设置元素中的另一个元素的样式。

语法：元素元素

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div a
            text-decoration: none;
        
    </style>
</head>
<body>
    <div>
        <ul>
            <li><a href="#">国内</a></li>
            <li><a href="#">国际</a></li>
            <li><a href="#">军事</a></li>
            <li><a href="#">体育</a></li>
        </ul>
    </div>
    <a href="">游戏</a>
</body>
</html>

子选择器：设置元素中指定第一级子元素的样式。

语法：元素 > 子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div > a
            color: red;
            text-decoration: none;
        
    </style>
</head>
<body>
    <div>
        <a href="">新闻</a>
        <ul>
            <li><a href="#">国内</a></li>
            <li><a href="#">国际</a></li>
            <li><a href="#">军事</a></li>
            <li><a href="#">体育</a></li>
        </ul>
        <a href="">游戏</a>
    </div>
</body>
</html>

CSS常用样式

背景样式

body
    /* 背景颜色 */
    background-color: bisque;
    /* 背景图片 */
    background-image: url(\'images/2.png\');
    /* 背景图片重复方式 */
    background-repeat: no-repeat;
    /* 背景出现的位置 */
    background-position:center;

文本样式

div 
    width: 600px;
    height: 600px;
    background-color: aliceblue;
    background-image: url(\'./images/qq.ico\');
    background-repeat: no-repeat;
    background-position: center;
    /* 设置水平对齐方式 */
    text-align: center;


div a 
    /* 设置超链接没有下划线 */
    text-decoration: none;
    /* 设置垂直对齐方式 */
    vertical-align: -30px;


div p 
    /* 为文本添加删除线 */
    text-decoration: line-through;


div li 
    /* 设置行高 */
    line-height: 50px;

p
    /* 首行缩进 */
    text-indent: 25px;

字体样式

<style>
    p
        /* 设置字体 */
        font-family: \'华文彩云1\',\'楷体\',\'宋体\';
        /* 字体风格 */
        font-style: italic;
        /* 字体粗细 */
        font-weight: bolder;
        /* 字体大小 */
        font-size: small;
    
</style>

尺寸样式

只有块级元素才可以设置宽度与高度。

<style>
    html,body
        height: 100%;
    
    table
        width: 50%;
        height: 30%;
    
    a
        /* 因为超链接是行级元素(内联元素)，所以不能设置宽度与高度 */
        width:500px;
        height: 500px;
    
</style>

边框样式

table
    width: 50%;
    height: 30%;
    /* 边框宽度 */
    /* border-width: 10px; */
    /* 边框风格 */
    /* border-style: solid; */
    /* 边框颜色 */
    /* border-color: blue; */
    /* 设置边框 */
    border: #000000 solid 2px;

伪类样式

元素名:样式

tr:nth-child(odd)
    /* 设置奇数行背景颜色 */
    background-color: bisque;

tr:nth-child(even)
    /* 设置偶数行背景颜色 */
    background-color: azure;

tr:hover
    /* 设置当鼠标经过元素时 */
    background-color: aquamarine;

鼠标样式

cursor：值。

table
    width: 50%;
    height: 30%;
    /* 设置边框 */
    border: #000000 solid 2px;
    /* 设置鼠标样式 */
    cursor: pointer;

列表样式

<style>
    ul
        /* 取消列表默认的样式 */
        list-style: none;
    
</style>

透明度样式

p
    background-color: red;
    /* 设置透明度：可以使用百分比，也可以使用0-1之间的值 */
    opacity: 0.7;

圆角样式

div
    width: 600px;
    height: 600px;
    background-color: #5b5bc8;
    /* 圆角样式 */
    border-radius: 100px;

盒子模型

外边框(margin)

设置元素与其它元素之间的距离。

div
    width: 300px;
    height: 200px;
    background-color: red;

    border-width: 5px;
    border-style: solid;

    /* 4个值：根据顺时针设置外边框的大小 */
    /* 3个值：上，左右，下外边框的大小 */
    /* 2个值：上下，左右外边框的大小 */
    /* 1个值：设置所有外边框的大小 */
    /* margin: 10px; */
    /* 设置居中 */
    margin: 0 auto;

内边框(padding)

padding的用法与margin是一致的。

用于设置内容与边框之间的距离。

<style>
    div
        width: 300px;
        height: 200px;
        background-color: red;

        border-width: 5px;
        border-style: solid;

        /* 4个值：根据顺时针设置外边框的大小 */
        /* 3个值：上，左右，下外边框的大小 */
        /* 2个值：上下，左右外边框的大小 */
        /* 1个值：设置所有外边框的大小 */
        /* margin: 10px; */
        /* 设置居中 */
        margin: 0 auto;

        padding-top: 10px;
        padding-left: 50px;
    
</style>

盒子模型中元素尺寸的大小：内容 + 内边距 + 边框
盒子模型中元素占用空间：外边框 + 元素尺寸

元素默认的样式与CSS重置

/************************ css 重置 ************************/
html,body,div,span,h1,h2,h3,h4,h5,h6,ul,li,p
	margin: 0;
	padding: 0;

html,body
	width: 100%;
	font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;

ul
	list-style: none;

a
	text-decoration: none;

显示与隐藏

display样式

<style>
    div
        border: 1px #000 solid;
        width: 100px;
        height: 100px;
        /* 将元素转换为行级元素 */
        display: inline;            
    

    span
        /* 将元素转换为块级元素 */
        display: block;
    
    .testSpan
        /* 隐藏元素并回收占用空间 */
        display: none;
    
</style>

overflow样式：当块级元素中的内容超过指定的宽度或高度时，如何处理溢出的内容。

<style>
    div
        width: 200px;
        height: 100px;
        border: 1px #000 solid;
        /* 默认值，不处理超出的内容 */
        /* overflow: visible; */
        /* 超出的内容隐藏 */
        /* overflow: hidden; */
        /* 超出的内容不可见，但会添加滚动条 */
        overflow: auto;
    
</style>

新盒子模型

从CSS3开始出现了新盒子模型。新盒子模型以边框作为元素的大小，此时再设置内边框时，会向内扩展而不会影响元素的大小。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div
            width: 200px;
            height: 100px;
            border: 1px #000 solid;
            padding: 20px; 
            /* 设置使用新盒子模型 */
            box-sizing: border-box;   
        
    </style>
</head>
<body>
    <div></div>
</body>
</html>

元素定位

使用position样式设置元素的位置。

静态定位

position：static
静态定位为默认的定位方式，也称为文档流定位。
以页面左上角为基准，元素在页面中以从上到下，从左到右的方式进行排列。块级元素换行，行级元素不换行。

相对定位

position：rebative
不会脱离文档流，以自身在文档流中的位置为基准。

不回收元素占用的空间。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div
            width: 200px;
            height: 100px;
            border: 1px #000 solid;
            padding: 20px; 
            /* 设置使用新盒子模型 */
            box-sizing: border-box; 
            /* 相对定位 */
            position: relative;  
            left: 50px;
            top: 50px;
        
        a
            display: block;
            text-decoration: none;
            color: #333;
            position: relative;
        
        a:hover
            color: #999;
            left: 1px;
            top: 1px;
        
    </style>
</head>
<body>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <div></div>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <hr>
    <a href="">测试超链接</a>
    <a href="">测试超链接</a>
    <a href="">测试超链接</a>
    <a href="">测试超链接</a>
    <a href="">测试超链接</a>
</body>
</html>

绝对定位

position：absolute
脱离文档流，不受其它元素的影响。
定位后之前占用的空间会被回收。
如果父元素不是rebative或absolute时，以body作为基准。

如果父元素是rebative或absolute时时，以父元素为基准。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1
            /* 当父元素不是relative或absolute时，以body作为基准 */
            width: 600px;
            height: 600px;
            background-color: chocolate;
            position: relative;
        
        .d2
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
            top: 0px;
        
    </style>
</head>
<body>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <div class="d1">
        <div class="d2"></div>
    </div>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    
</body>
</html>

固定定位

position：fixed
以浏览器窗口作为基准。

脱离文档流，不受其它元素的影响。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div
            width: 100%;
            height: 80px;
            position: fixed;
            left: 0px;
            top: 0px;
            background-color: black;
            opacity: 0.5;
        
    </style>
</head>
<body>
    <div></div>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <!-- 省略N个段落-->
</body>
</html>

使用定位进行布局的示例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./css/reset.css" rel="stylesheet"/>
    <style>
        .header
            width: 100%;
            height: 80px;
            background-color: red;
        
        .main
            width: 100%;
            min-height: 300px;
            background-color: green;
        
        .footer
            width: 100%;
            height: 50px;            
            background-color: blue;
        
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="main">
        <p>这是一个段落</p>
        <p>这是一个段落</p>
        <p>这是一个段落</p>
        <p>这是一个段落</p>
        <p>这是一个段落</p>
        <p>这是一个段落</p>
        <p>这是一个段落</p>
        <p>这是一个段落</p>
        <p>这是一个段落</p>
        <p>这是一个段落</p>
    </div>
    <div class="footer"></div>
</body>
</html>

z-index样式

当元素的定位方式为绝对定位或固定定位时，这些元素都会脱离文档流。如果有多个元素都是此种定位方式，可能会出现相互覆盖的效果。可以使用z-index样式设置元素的等级，等级高的元素会覆盖等级低的元素。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .one
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 50px;
            top: 50px;
            z-index: 2;
        
        .two
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
            left: 100px;
            top: 100px;
            z-index: 1;
        
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

弹性布局

display设置为flex，元素变为弹性布局。
当元素变为弹性布局后，元素中的子元素会根据弹性布局的规则自动进行排序，块级与行级的特性将失效。

弹性布局的主轴与侧轴

主轴：水平方向的轴。
侧轴：垂直方向的轴。

默认情况下，子元素根据主轴方向进行排列。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body
            /* 设置为弹性布局 */
            display: flex;
        
        .item
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            background-color: orange;
            border: solid 1px black;
        
    </style>
</head>
<body>    
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</body>
</html>

flex-direction样式

可以通过flex-direction样式修改弹性布局中子元素排列的方向。
row：水平方向排列，默认。

column：垂直方向排列。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body
            /* 设置为弹性布局 */
            display: flex;
            flex-direction: column;
        
        .item
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            background-color: orange;
            border: solid 1px black;
        
    </style>
</head>
<body>    
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</body>
</html>

flex-wrap样式

默认情况下，弹性布局中的子元素不会自动换行。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body
            /* 设置为弹性布局 */
            display: flex;
            /* 设置父元素宽度不足时，子元素自动换行 */
            flex-wrap: wrap;
        
        .item
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            background-color: orange;
            border: solid 1px black;
        
    </style>
</head>
<body>    
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</body>
</html>

justify-content样式

设置弹性布局中主轴方向对齐方式。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body
            /* 设置为弹性布局 */
            display: flex;
            /* 默认值，左对象 */
            /* justify-content: flex-start; */
            /* 右对齐 */
            /* justify-content: flex-end; */
            /* 居中对齐 */
            /* justify-content: center; */
            /* 两端对齐，最左与右的元素在父容器的边缘，其它子元素平均分布 */
            /* justify-content: space-between; */
            /* 平均分布，所以子元素两端的距离相等 */
            justify-content: space-around;
        
        .item
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            background-color: orange;
            border: solid 1px black;
        
    </style>
</head>
<body>    
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</body>
</html>

align-items样式

设置弹性布局中侧轴方向对齐的方式(单行)。

body
    /* 设置为弹性布局 */
    display: flex;
    /* 设置垂直对齐方式 */
    /* 
    flex-start: 上对齐
    center：居中对齐
    flex-end：下对齐
    */
    align-items:center;
    flex-wrap: wrap;

align-content样式

设置弹性布局中侧轴方向对齐的方式(多行)。

flex样式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body
            /* 设置为弹性布局 */
            display: flex;            
        
        .item
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            background-color: orange;
            border: solid 1px black;
        
    </style>
</head>
<body>
    <!-- 将父元素分为3份，每个子元素各占1份 -->
    <div class="item" >1</div>
    <div class="item" >2</div>
    <div class="item" >3</div>
</body>
</html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body
            /* 设置为弹性布局 */
            display: flex;            
        
        .item
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            background-color: orange;
            border: solid 1px black;
        
    </style>
</head>
<body>
    <!-- 将父元素分为6份，每个子元素各占N份 -->
    <div class="item" >1</div>
    <div class="item" >2</div>
    <div class="item" >3</div>
</body>
</html>

经典1-3-1布局 (HTML)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 总容器 -->
    <div class="container">
          <!-- 头部 -->
          <header></header>
          <!-- 导航 -->
          <nav></nav>
          <!-- 主体 -->
          <div class="main">
            <!-- 左侧边框 -->
            <aside></aside>
            <!-- 内容 -->
            <section></section>
            <!-- 右侧边框 -->
            <article></article>
          </div>
          <!-- 页脚 -->
          <footer></footer>
    </d以上是关于ORACLE11g将数据库内容全部复制，并将其加为本数据库的一个新实例的主要内容，如果未能解决你的问题，请参考以下文章 
 使用 ssis 从 SQL Server 表复制到 Oracle 11g
 如何完全卸载Oracle 11g数据库
 在oracle11g中，更新子表数据的时候我把子表的内码全部更新成一个值了，66万多条了，忘了加where条件了
 如何复制 JOB、PROGRAM、SCHEDULE 定义以在另一个 Oracle 11g DB 中运行它？
 卸载oracle 11g数据库
 如何彻底删除oracle 11g