Category: Chinese Post (中文帖子)

Posted on

[步骤] MacBook Air （2017） openSUSE Leap 15.1 的安装

硬件准备：

制作一个 openSUSE Leap 15.1 安装 U 盘， openSUSE Leap 15.1 系统景象下载地址：

https://www.opensuse.org/

软件准备：

在第三方 openSUSE Leap 15.1 软件源上下载无线网卡驱动 broadcom-wl 和无线网卡驱动的依赖软件 broadcom-wl-kmp：

https://mirrors.aliyun.com/packman/openSUSE_Leap_15.1/Essentials/x86_64/

正文：

步骤一：在 MacBook Air（2017）上安装 openSUSE Leap 15.1 的前期工作

1.1 将 openSUSE 的安装 U 盘插在 MacBook Air（2017）上

（步骤略）

（注意：U 盘需要是 ufi 模式）

1.2 在 MacBook Air（2017）上插入一根无驱动版 Linux 可识别的网线转 usb 网卡，并连接互联网

（步骤略）

1.3 按 MacBook Air（2017）的开机键后立刻按住 option 键

（步骤略）

1.4 选择从 U 盘进入系统

（步骤略）

步骤二：在 MacBook Air（2017）上安装 openSUSE Leap 15.1版本的 Linux 操作系统

2.1 进入 U 盘界面后选择 “Installation” 并回车

（图：1）

2.2 直接点击 “Next”

（图：2）

2.3 当出现 “Activate online repositories now?” 时直接点击 “No”

（图：3）

2.4 选择 “Server” 并点击 “Next”

（图：4）

2.5 点击 “Guided Setup”

（图：5）

2.6 不设置硬盘密码，直接点击 “Next”

（图：6）

2.7 按图：7 对硬盘进行设置

（图：7）

2.8 点击 “Expert Partitioner” 下的 “Start with Current Proposal”

（图：8）

2.9 按图：9 对硬盘进行分区并点击 “Accept”

（图：9）

（
补充：
1) 要分出一部分硬盘空间用作系统启动
2) 系统分区不设置硬盘加密否则系统开机时会需要输入两次硬盘加密密码
3) 数据分区可以设置硬盘加密
4) 交换分区和内存设置的大小相同
5) 在左侧选择 “Hard Disks”，再在右侧选择对应的分区，再点击 “Delete” 可以将对应的分区删除
6) 在左侧选择 “Hard Disks”，再在右侧选择对应的硬盘，再点击 “Partitions” 可以创建、删除和修改分区
）

2.10 点击 “Next”

（图：10）

2.11 点击对应的地区选择对应的日期并点击 “Next”

（图：11）

2.12 选择 “Skip User Creation” 并点击 “Next”

（图：12）

2.13 给 root 用户设置密码并点击 “Next”

（图：13）

2.14 按图：14 对即将安装的系统进行设置并点击 “Install”

（图：14）

（
补充：
1) 在 “Security” 下开启 “Firewall”
2) 在 “Security” 下关闭 “SSH service”
3) 在 “Security” 下锁住 “SSH port”
4) 在 “Network Configuration” 下使用 “NetworkManager”
）

2.15 此时系统便开始安装，等待系统安装完成

（步骤略）

步骤三：对 openSUSE Leap 15.1 操作系统进行配置

3.1 系统安装完成后使用 root 用户登录系统

（图：15）

3.2 修改电脑名称

# hostnamectl set-hostname linux

3.3 安装无线网卡驱动

3.3.1 安装无线网卡驱动依赖包
# zypper in broadcom-wl-kmp-default-6.30.223.271_k4.12.14_lp151.28.36-pm151.11.61.x86_64.rpm
3.3.2 安装无线网卡驱动
# zypper in broadcom-wl-6.30.223.271-pm151.11.61.x86_64.rpm

3.4 使用 openSUSE Leap 15.1 官方的软件源

3.4.1 进入 yast

# yast

3.4.2 选择 “Software” 下的 “Software Repositoies” 并回车
（图：16）
3.4.3 按图：17 设置系统软件源，之后选择 OK 并回车
（图：17）

（
补充：
1) Enabled “Main Repository”
2) Enabled “Main Update Repository”
3) Enabled “Non-OSS Repository”
4) Enabled “Update Repository（Non-Oss）”
5) 确保其他的软件源没有被 Enabled
）

3.4.4 选择 “Quit” 并回车
（图：18）

3.5 给系统安装最新的补丁

# zypper -n update

3.6 安装中文包

3.6.1 进入 yast
# yast
3.6.2 选择 “System” 下的 “Language” 并回车
（图：19）
3.6.3 在 “Secondary Languages” 下选择 “Simplified Chinese” ，再选择 “OK” 并回车
（图：20）
3.6.4 选择 “Quit” 并回车
（图：21）

3.7 让电脑支持 exfat 格式的 U 盘

# zypper -n install fuse-exfat exfat-utils

3.8 安装虚拟机环境和管理软件

# zypper in -t pattern kvm_server
# zypper in -t pattern kvm_tools

3.9 安装图形化桌面

3.9.1 安装 Gnome 图形桌面
# zypper -n in -t pattern gnome
3.9.2 将系统默认的图形桌面设置为 Gnome 图形桌面
# zypper -n in -t pattern gnome
......
DISPLAYMANAGER_XSERVER="Xorg"

修改为：

......
DISPLAYMANAGER_XSERVER="gdm"
3.9.3 设置系统开机进入图形桌面
# systemctl set-default graphical.target
3.9.4 立刻进入图形桌面
# init 5
3.9.5 输入 root 用户
（图：22）
3.9.6 输入 root 用户的密码
（图：23）
3.9.7 此时便进入图形桌面
（图：24）

3.10 设置中文输入法

3.10.1 点击左上角的 “Activites” 再点击 “Settings”
（图：25）
3.10.2 点击 “Region & Language”
（图：26）
3.10.3 点击 “Input Sources” 下面的 “+” 将 “English（US）” 换成 “Chinese (Intelligent Pinyin)”
（图：27）
（图：28）
（图：29）
（图：30）
3.10.4 点击右上角的 “×” 以退出此界面

（步骤略）

3.11 添加新用户

3.11.1 点击右上角 “root” 下的 “Account Settings”
（图：31）
3.11.2 点击右上角的 “Add User…”
（图：32）
3.11.3 按图：33 设置用户和用户密码并点击 “Add”
（图：33）

（
补充：
1) 设置 “Full Name”
2) 设置 “Username”
3) 选择 “Set a password now”
4) 设置 “Password”
）

3.11.4 关闭此界面
（图：34）

3.12 此时 openSUSE 操作系统配置完成

补充：使用虚拟机环境和管理器的方法

补充一：启用虚拟机环境

# systemctl start libvirtd

补充二：启动虚拟机管理器

# virt-manager
Posted on

[娱乐] HTML 朱明宇的个人网页

English

代码

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<head>

<title>朱明宇</title>

</head>

<body>

<div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;"> 
<img src="https://filedn.eu/ltLpz9YGUS2hi1pJmklNfDb/zh_cn/dimfigure.JPG" height="100%" width="100%" style="position:absolute;left:0; top:0;"> 
</div>

<div style="width:300px;height:50px;float:left"> 
<form action="http://www.google.com/search" method="get"> 
<input type="text" name="q" size="20" maxlength="255" value="" /> 
<input type="submit" name="btnG" value="Google" /> 
</form>
<a href="https://mingyu-zhu.github.io" style="right: 15px; position: absolute; font-size:25px;color:red">English (GitHub)</a>
<a href="https://mingyuzhu.com" style="right: 205px; position: absolute; font-size:25px;color:red">English</a>
</div> 

<div style="left: 8px; position: absolute; top: 75px;font-size:45px;">朱明宇的个人网页</div>

<div style="left: 800px; position: absolute; top: 300px;font-size:15px;">“愿每个人都能公平地实现自我成就和自我幸福。”</div>

<a href="https://eternalcenter.com" target="_blank" style="left: 8px; position: absolute; top: 185px;font-size:20px;color:black">永恒中心（eternalcenter.com），朱明宇的个人网站</a>
<a href="https://e.pcloud.link/publink/show?code=kZukhJZUhQq66Fxs0yg5rL1LsAgrSD3ytMk" target="_blank" style="left: 8px; position: absolute; top: 215px;font-size:20px;color:black">用于克隆朱明宇个人网站的数据</a>
<a href="https://github.com/eternalcenter-now/eternalcenter-now" target="_blank" style="left: 8px; position: absolute; top: 245px;font-size:20px;color:black">用于克隆朱明宇个人网站的代码</a>
<a href="http://static.eternalcenter.com" target="_blank" style="left: 8px; position: absolute; top: 275px;font-size:20px;color:black">朱明宇个人网站的效果展示网页</a>
<a href="https://eternalcenter-now.github.io" target="_blank" style="left: 8px; position: absolute; top: 305px;font-size:20px;color:black">朱明宇个人网站的效果展示网页 （GitHub）</a>
<a href="https://e.pcloud.link/publink/show?code=kZoJhJZDx6DEf6sXYJUK7YxLjWhFRPr3i70" target="_blank" style="left: 8px; position: absolute; top: 335px;font-size:20px;color:black">朱明宇的个人公开资料</a>

</body>

<html/>

背景图片

Posted on

[内容] HTML 的常用结构和常用元素

内容一：HTML 常用结构元素

1.1 HTML 常用结构要素

1) <!DOCTYPE html>

文档是 HTML5 的声明

2) <html>......</html>

HTML 的根

3) <head>......</head>

包含 meta 和 title

4) <title>......</title>

声明文档的标题

5) <body>......</body>

声明文档的可见内容

6) <br/>

声明换行

7) <div>......</div>

声明一个空间

8) <h1>......</h1>

声明第一种标题

9) <h2>......</h2>

声明第二种标题

10) <h3>......</h3>

声明第三种标题

1.2 HTML 常用结构案例

<!DOCTYPE html>
<!- 作者:Mingyu Zhu -> 
<!- 名称:Mingyu Zhu website ->

<html>

 <head>
  <meta charste="utf-8">
  <title>朱明宇 - Zhu Mingyu</title>
 </head>

 <body>
  <div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;"> 
   <img src="dimfigure.JPG" height="100%" width="100%" style="position:absolute;left:0; top:0;"> 
  </div>

  <div style="width:300px;height:50px;float:left"> 
   <form action="http://www.google.com/search" method="get"> 
    <input type="text" name="q" size="20" maxlength="255" value="" /> 
    <input type="submit" name="btnG" value="Google" /> 
   </form> 
  </div> 

  <div style="width:300px;height:50px;float:left"> 
   <form action="http://www.baidu.com/s"> 
    <input type="text" name="wd" id="kw"/> 
    <input type="submit" value="Baidu" /> 
   </form> 
  </div> 

  <div style="left: 600px; position: absolute; top: 300px;font-size:15px;">“When I don't need to do anything, please don't let me do anything. Let me immerse myself in my own thoughts. It's like merging with the profound peace in the vast mountains.”</div>

  <a href="http://eternalcenter.com" style="left: 8px; position: absolute; top: 185px;font-size:20px;color:black">Eternal Center（eternalcenter.com）</a>
 </body>

<html/>

内容二：HTML 常用内容元素

2.1 HTML 文本元素

2.1.1 HTML 文本元素的格式
<p>......</p>

声明一个段落

2.1.2 HTML 文本元素的替换格式
1) <b>......</b>

声明文字加粗

2) <i>......</i>

声明文字倾斜

3) <u>......</u>

声明文字有下划线

4) <s>......</s>

声明文字有删除线

5) <sup>......</sup>

声明文字有上标

6) <sub>......</sub>

声明文字有下标

7) <big>......</big>

声明文字放大

8) <small>......</small>

声明文字缩小

2.2 HTML 链接元素

2.2.1 HTML 链接元素的格式
<a href="<website>"><link description></a>
2.2.2 HTML 链接元素的案例
<a href="eternalcenter.com">Eternal Center</a，target="_blank">

（补充：这里以网址是 eternalcenter.com，介绍是 Eternal Center，新打开一个页面为例）

2.3 HTML 列表元素

2.3.1 HTML 有序列表元素
2.3.1.1 HTML 有序列表元素的格式
1) <ol>......</ol>

声明有序列表

2) <li>......</li>

声明有序列表里的行

3) <ol>......</ol>

里只能有

<li>......</li>
2.3.1.2 有序列表排列方式的属性声明
2.3.1.2.1 有序列表排列方式的属性值名
type
2.3.1.2.2 有序列表排列方式的可选属性值

1) 1 声明按数字排序 （1 也是有序列表的默认值）
2) A 声明按大写英文字母排序
3) a 声明按小谢英文字母排序
4) I 声明按大写罗马字母排序
5) i 声明按小写罗马字母排序

2.3.1.3 有序列表排列方式的使用案例
2.3.1.3.1 数字有序列表排列方式的使用案例
<h4>number list case</h4>
<ol>
 <li>eternalcenter.com</li>
 <li>eternalcentre.com</li>
 <li>ec-x.com</li>
 <li>yhzx-x.com</li>
</ol>
2.3.1.3.2 字母有序列表排列方式的使用案例
<h4>alphabet case</h4>
<ol type="A">
 <li>eternalcenter.com</li>
 <li>eternalcentre.com</li>
 <li>ec-x.com</li>
 <li>yhzx-x.com</li>
</ol>
2.3.2 HTML 无序列表元素
2.3.2.1 HTML 无序列表元素的格式
1) <ol>......</ol>

声明无序列表

2) <li>......</li>

声明无序列表里的行

3) <ol>......</ol>

里只能有

<li>......</li>
2.3.2.2 无序列表排列方式的属性声明
2.3.2.2.1 无序列表排列方式的属性值名
type
2.3.2.2.2 无序列表排列方式的可选属性值
1) disc

声明实心原点（disc 也是无序列表的默认值）

2) circle

声明空心原点

3) square

声明实心方块

4) none

声明无标识

2.3.2.3 有序列表排列方式的使用案例
2.3.2.3.1 有序空心原点列表排列方式的使用案例
<h4>circle list case</h4>
<ul style="list-style-type:circle">
 <li>eternalcenter.com</li>
 <li>eternalcentre.com</li>
 <li>ec-x.com</li>
 <li>yhzx-x.com</li>
</ul>
2.3.2.3.2 有序实心方块列表排列方式的使用案例
<h4>square list case</h4>
<ul style="list-style-type:square">
 <li>eternalcenter.com</li>
 <li>eternalcentre.com</li>
 <li>ec-x.com</li>
 <li>yhzx-x.com</li>
</ul>

2.4 HTML 在列表中再添加列表

2.4.1 HTML 在列表中再添加列表的格式
<li>......</li>

元素里再添加

<li>......</li>
2.4.2 HTML 在列表中再添加列表的案例
<ul>
 <li>eternalcenter.com</li>
  <li>abbreviation
    <ul>
     <li>ec-x.com</li>
     <li>yhzx-x.com</li>
    </ul>
   </li>
  <li>eternalcentre.com</li>
</ul>

2.5 HTML 表格元素

2.5.1 HTML 表格常用元素列表
1) <table>......</table>
2) <tr>......</tr>
3) <td>......</td>
2.5.2 HTML 表格常用元素
2.5.2.1 <table>……<table> 元素
2.5.2.1.1 <table>……<table> 元素的作用

用于声明表格

2.5.2.1.2 <table>……<table> 元素的格式
<table>......</table>
2.5.2.1.3 <table>……<table> 元素的常用属性
1) width

声明表格的宽度

2) height

声明表格的高度

3) align

声明表格的对齐方式，有三个参数：

left center right
4) border

声明表格边框的宽度

5) cellpadding

声明表格内容和边框之间的距离

6) bgcolor

声明表格的背景颜色

2.5.2.2 <tr>……<tr> 元素
2.5.2.2.1 <tr>……<tr> 元素的作用

用于声明行，每有一行就有一组

2.5.2.2.2 <tr>……<tr> 元素的格式
<tr>......</tr>
2.5.2.2.3 <tr>……<tr> 元素的常用属性
1) align

声明表格水平向的对齐方式，有三个参数

left center right

2) valign

声明垂直向的对其方式，有三个参数

top middle bottom
2.5.2.3 <td>……<td> 元素
2.5.2.3.1 <td>……<td> 元素的作用

用于声明列，每有一列就有一组

2.5.2.3.2 <td>……<td> 元素的格式
 <td>......</td>
2.5.2.3.3 <td>……<td> 元素的常用属性
1) align

声明表格水平向的对齐方式，有三个参数：

left center right
2) valign

声明垂直向的对齐方式，有三个参数：

top middle bottom
3) width

声明表格的宽度

4) height

声明表格的高度

5) colspan

声明单元格的横向快列

6) rowspan

声明单元格的众向跨行

2.5.3 HTML 表格元素的案例
2.5.3.1 HTML 表格元素案例一：标准表格
<table border="1">
 <tr>
  <td>first row, first column</td>
  <td>first row, second column</td>
 </tr>
 <tr>
  <td>second row, first column</td>
  <td>second row, second column</td>
 </tr>
</table>
2.5.3.2 HTML 表格元素案例二：横向合并的表格
<body>
 <h4>cell spanning two columns case</h4>
 <table border="1">
  <tr>
   <td>Website</td>
   <td colspan="2">url</td>
  </tr>
  <tr>
   <td>Eternal Center</td>
   <td>eternalcenter.com</td>
   <td>eternalcentre.com</td>
  </tr>
 </table>
2.5.3.3 HTML 表格元素案例三：纵向合并的表格
 <h4>cell crowding across two lines case</h4>
 <table border="1">
  <tr>
   <td>Website</td>
   <td>Eternal Center</td>
  </tr>
  <tr>
   <td rowspan="2">url</td>
   <td>eternalcenter.com</td>
  </tr>
  <tr>
   <td>eternalcentre.com</td>
  </tr>
 </table>
</body>

2.6 HTML 图片元素

2.6.1 HTML 有边框图片的链接案例
<a href="http://www.eternalcenter.com">
<img  border="10" src="eternalcenter.gif" alt="HTML Eternal Center" width="32" height="32">
</a>

（补充：这里以网址是 www.eternalcenter.com，介绍是 HTML Eternal Center，图片是 eternalcenter.gif，宽度是 32，高度是 32 的链接为例）

2.6.2 HTML 无边框图片链接的案例
<a href="http://www.baidu.com">
<img border="0" src="eternalcenter.gif" alt="HTML Eternal Center" width="32" height="32">
</a>

（补充：这里以网址是 www.eternalcenter.com，介绍是 HTML Eternal Center，图片是 eternalcenter.gif，宽度是 32，高度是 32 的链接为例）

2.6.3 HTML 背景图片的案例
<img src="space.JPG" height="100%" width="100%" style="position:absolute;left:0; top:0;">

（补充：这里以设置 space.JPG 作为背景图片）

2.7 HTML 表单元素

2.7.1 HTML 表单元素的作用

1) 接收用户的数据
2) 提交给服务器

2.7.2 HTML 表单元素的结构
2.7.2.1 HTML 表单元素结构的分类
1) <form>......<form>

2) 表单控件

2.7.2.2 HTML 表单元素结构的分类说明
2.7.2.2.1 <form>……<form> 元素的常用属性
1) action

提交给服务器的处理程序的地址

2) method

数据的提交方式，有 get 和 post 两个参数

3) enctype

指定加密方式

4) name

表单的名称

2.7.2.2.2 表单控件的种类

1) 文本域
2) 密码域
3) 选择框（分为单选框和复选框）
4) 按钮
5) 隐藏域和文件选择框

2.7.3 HTML 表单元素的表单控件
2.7.3.1 HTML 表单元素的文本域
2.7.3.1.1 HTML 表单元素的文本域的作用

用于键入字母和数字

2.7.3.1.2 HTML 表单元素的文本域的格式
<input type="text">
2.7.3.1.3 HTML 表单元素的文本域的常用属性
1) name

名称

2) value

值

3) maxlength

最大输入长度

4) readonly

只读

5) placeholder

提示占位符

2.7.3.1.4 HTML 表单元素的文本域的案例
<form>
 First name: <input type="text" name="firstname"><br>
 Last name: <input type="text" name="lastname">
</form>
2.7.3.2 HTML 表单元素的密码域
2.7.3.2.1 HTML 表单元素的密码域的作用

用于输入密码

2.7.3.2.2 HTML 表单元素的密码域的格式
<input type="password">
2.7.3.2.3 HTML 表单元素的密码域的常用属性
1) name

名称

2) value

值

3) maxlength

最大输入长度

4) readonly

只读

5) placeholder

提示占位符

2.7.3.3 HTML 表单元素的选择框
2.7.3.3.1 HTML 表单元素的选择框的作用

用于选择

2.7.3.3.2 HTML 表单元素的选择框的常用属性
1) name

名称

2) value

值

3) checked

预选中的选项，无值

4) type

选择框的模式，有两个参数单选框和多选框两个参数：

radio checkbox
2.7.3.4 HTML 表单元素的选择框的案例
2.7.3.4.1 HTML 表单元素的选择框的案例一：单选框案例
<form>
 <input type="radio" name="vehicle" value="eternalcenter">I click eternalcenter<br>
 <input type="radio" name="vehicle" value="eternalcentre">I click eternalcentre
</form>
2.7.3.4.2 HTML 表单元素的选择框的案例二：多选框案例
<form>
 <input type="checkbox" name="vehicle" value="eternalcenter">I click eternalcenter<br>
 <input type="checkbox" name="vehicle" value="eternalcentre">I click eternalcentre
</form>
2.7.3.5 HTML 表单元素的按钮
2.7.3.5.1 HTML 表单元素的按钮的案例一：普通的按钮
<form action="">
 <input type="button" value="Hello World!">
</form>

（补充：这里以设置一个值为 Hello World 的按钮为例）

2.7.3.5.2 HTML 表单元素的按钮的案例二：提交的按钮
<form name="input" action="html_form_action.php" method="get">
 Username: <input type="text" name="user">
 <input type="submit" value="Submit">
</form>

（补充：这里以设置一个输入用户名的框和提交按钮的页面为例）

2.7.3.5.3 HTML 表单元素的按钮的案例三：重置的按钮
<form name="input" action="html_form_action.php" method="get">
 Username: <input type="text" name="user">
 <input type="submit" value="Submit">
 <input type="reset" value="reset">
</form>

（补充：这里以设置一个输入用户名的框、提交按钮、重置按钮页面为例）

2.7.3.6 HTML 表单元素的隐藏域和文件选择框
2.7.3.6.1 HTML 表单元素的隐藏域
2.7.3.6.1.1 HTML 表单元素的隐藏域的作用

提交给服务器的数据无法被用户看到

2.7.3.6.1.2 HTML 表单元素的隐藏域的格式
<input type=”hidden”>
2.7.3.6.1.3 HTML 表单元素的隐藏域的常用属性

1) name

名称

2) value

值

2.7.3.6.2 HTML 表单元素的文件选择框
2.7.3.6.2.1 HTML 表单元素的文件选择框的作用

点击的同时提交文件

2.7.3.6.2.2 HTML 表单元素的文件选择框的格式
<input type=”file”>
2.7.3.6.2.3 HTML 表单元素的文件选择框的常用属性
name

名称

Posted on

我们的未来

蔚蓝的天空
沐浴着圣洁的阳光
它依旧在作着无忧无虑的梦

如今的大地
已在寂静之中
开始了隐秘却剧烈的翻滚

那些温柔又神圣的祈祷
还未传播到需要的地方
便开始消失匿迹

那些理性又严谨的理想
还未开始深刻的探讨
便被尘封于盲从的大潮

生命的意义
应该如何用本来就矛盾的思想去诠释？
灵魂的价值
又该如何用独一无二的人生去描述？

在纯白的、洁白的、净白的憧憬之后
会创造和邂逅出怎样的未来
在迷惑的、困惑的、迷茫的挣扎之后
是否能在虚空之中真正开始独立思考

那些让人类感到混沌不堪却又欲罢不能的说法
该如何回归到它该有的澄清？
那些充满自我牺牲与博爱却又容易被误解的传奇
又该如何依靠历史的密码去佐证？

在鲜红的、血红的、艳红的青春热情之后
会创造和邂逅出怎样的未来
在努力的、拼命的、穷尽一切的尝试之后
是否能在虚空之中找到真正的路

能够让每一个人都听到公平、包容、理解的歌谣
能够让每一个人都能够公平实现自我价值和自我幸福
能够创造和邂逅出一个属于这个星球上每一个人的未来