课程地址：山东大学生物信息学
文章目录
八、编程基础与网页制作
8.1 Linux 操作系统
-
Linux 操作系统：开源、自由、开放性构架、功能强大、配备低廉（硬件需求低）
-
目前版本：redhat、suse, redflag-linux、ubuntu 等。建议选定一个，彻底了解即可（老师用的是 redhat）
-
详见视频：Linux 操作系统 P134
-
linux 界面：图形界面、命令行界面。
-
Windows 远程连接 Linux:
◆ PuTTY: 命令行操作
◆ WinSCP：窗口操作-文件传输。
8.2 Linux 基本命令
- 详见视频：Linux 基本命令-01 P135
ls 命令
- ls 命令 = Dos 里的 dir 命令
ls列出当前文件夹中的所有内容ls Programs列出 Programs 文件夹中的所有内容ls ls列出当前文件夹中所有内容的详细信息
man 命令
man命令是 Linux 下的帮助指令，通过 man 可以查看 Linux 中的指令帮助、配置文件帮助和编程帮助等信息。man ls查看 ls 命令的帮助文件
最左上角显示 “LS(1)”，"LS"表示手册名称，而"1”表示该手册位于第一节章。
PgDn 向下翻页，PgUp 向上翻页。
q 或 quit 退出。
date 命令
date命令是显示或设置系统时间与日期。date按照默认格式显示当前日期时间date +%Y/%m/%d按照规定的格式显示“年/月/日”date +%H:%M按照规定的格式显示“小时：分钟”
cal 命令
cal显示当前月份的日历cal 10 2016显示指定月份的日历：cal month year
bc 命令
- bc 命令是一种支持任意精度的交互执行的计算器语言。
+加，-减，*乘，/除，^指数，% 余数 bc进入计算器，显示计算版本信息1+2*3输入公式，回车，进行运算scale=3通过 scale=number 设定小数点后位数quit输入 quit, 退出 bc 计算器
重要热键
Tab键 自动补齐。[Tab] 键具有“命令补全”与“文件补齐”的功能。
想不起来完整的文件名或命令名时，输入开头的几个字母再按下 [Tab] 键，会自动帮你补齐或者给你足够的提示。好好利用 [Tab] 键，可以让你避免很多输入错误。
ls .bash输入 ls .bash 后按两次 [Tab] 键，则所有以 .bash 开头的文件都会被显示出来。Ctrl + C终止运行。
如果你在 Linux 下输入了错误的命令或参数，有的时候这个命令或程序会不停的运行，这个时候按 [CtrI]-c 组合键就可以让当前的命令或程序“停下来”。
目录和路径
- 详见视频：Linux 基本命令-02 P136
- 用符号代表特殊的目录
.此层目录（当前目录）
..上一层目录
-前一个工作目录
~“目前用户”所在的主文件夹
/根目录 - 几个处理目录的命令
pwd显示当前目录
cd切换目录
mkdir创建一个新的目录
rmdir删除一个空的目录
-
cp复制命令
cp 命令用来将一个或多个源文件或者目录复制到指定的目的文件或目录。
cp test.txt test/test2将 test.txt 文件复制到当前目录下的 test 文件夹中的 test2 文件夹中，保持名字不变。
cp -r /test test3将 test 文件夹下的所有文件及其子目录复制到当前目录中，更名为 test3 文件夹。
-
rm删除命令
rm 命令可以删除一个目录中的一个或多个文件或目录，也可以将某个目录及其下属的所有文件及其子目录均删除掉。
rm -i test.txt删除 test.txt 文件。删除之前先询问用户，确定删除输入 y, 不删除输入 n。
rmdir test试图用删除目录命令 rmdir 删除 test 文件夹，返回错误信息，删不掉！
rm -r test删除一个非空目录，需要 rm 命令和参数 -r。
mv 移动/更名命令
- mv 命令用来对文件或目录重新命名，或者将文件从一个目录移到另一个目录中。
注意：mv 与 cp 的结果不同，mv 好像文件“搬家”，文件个数并未增加。而 cp 对文件进行复制，文件个数增加了。
移动：mv test.txt test将 test. txt 文件移动到 test 文件夹中。如果目标是到某一个目录，源文件会被移至此，且文件名不变。
更名：mv test.txt test1.txt将 test.txt 文件重命名为 test1.txt。如果目标是文件不是目录，则源文件名会变为此目标文件名，并覆盖己存在的同名文件。
文本文件查阅命令
-
cat = 第一行到最后一行
cat test.pdb将文件的第一行到最后一行连续滚动显示在屏幕上。
Ctrl+S键：停止滚屏；Ctrl+Q键：恢复滚屏；Ctrl+C键：终止命令。参数"-n"打印行号。 -
tac = 最后一行到第一行
tac test.pdb与"cat"相反，将文件的最后一行到第一行连续滚动显示在屏幕上。 -
more = 按页向前/后浏览
more test.pdb一次显示一屏文本，满屏后停下来。
Space键：显示下一屏内容；Enter键：显示下一行内容；B键：显示前一屏内容；Q键：退出。 -
less = 按页向前/后浏览
less test.pdb与 more 命令十分相似。PgDn 键：显示下一屏内容；PgUp 键：显示前一屏内容；Q 键：退出。 -
head = 显示前几行 (10)
head test.pdb -n 6显示文件前 6 行的内容。
在默认情况下，head 命令显示文件的前 10 行内容。加参数 “-n number” 可以显示前 number 行。 -
tail = 显示后几行 (10)
tail test.pdb -n 6显示文件后 6 行的内容。
在默认情况下，tail 命令显示文件的后 10 行内容。加参数 “-n number” 可以显示后 number 行。
创建/修改文本
vi全屏纯文本编辑器
vi 编辑器支持编辑模式和命令模式，编辑模式下可以完成文本的编辑功能，命令模式下可以完成对文件的操作命令。- 常用内置命令:
从编辑模式切换到命令模式：Esc
从命令模式切换到编辑模式：
并在当前字符后添加文本：a
并在行末添加文本：A
并在当前字符前插入文本：i
并在行首插入文本：I
:Wq在命令模式下，执行存盘退出操作
:W在命令模式下，执行存盘操作
:w!在命令模式下，执行强制存盘操作
:q在命令模式下，执行退出 vi 操作 vi mytest.txt创建一个新的纯文本文件，并通过 vi 命令打开编辑器，编辑该文件内容。a默认情况下，打开 vi 编辑器后自动进入命令模式。按"a 键"切换到编辑模式。ESC输入完成后按 Esc 键，从编辑模式切换到命令模式。:Wq输入 :Wq，存盘退出。less mytest.txt通过"less”命令阅读刚刚创建的纯文本文件。q键退出。
8.3 Perl 语言基础入门
8.4 Perl 语言基础高级
8.5 前端开发和 HTML 介绍
● HTML——超文本标记语言
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
● HTML5——下一代的 HTML
发布于 2014 年 10 月，新的特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素
- 新的表单控件
● HTML 标签
- HTML 的标签是由尖括号包围的关键词构成，比如
<html>。 - 标签通常是成对出现的，比如
<b>和</b>。 - 标签对中的第一个标签是开始标签，第二个标签是结束标签。
- 关键词放在开始标签和结束标签之间。
- 标签之间的关键词并不是必须的，有些标签之间可以没有关键词，比如代表换行的标签
<br></br>, 这种情况下可以简写为<br/>。 - 标签之间可以嵌套，即一对标签里可以包含另一对标签。
<Tag1> <Tag2> </Tag2> </Tag1>✔
<Tag1> <Tag2> </Tag1> </Tag2>✖ - 标签可以有属性
<tag attr1="value1" attr2="value2">属性会对标签进行具体的规定说明。 - 写有标签的文件保存为后缀为
.html的文档，可以用记事本或浏览器打开。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。
● HTML 文档的结构
8.6 HTML 常用标签
-
详见视频：HTML 常用标签-01 P144
-
标题标签
<h1></h1>：
六个等级，H 后数字越小，标题字号就越大。<h1>Hello</h1> <h2>Hello</h2> <h3>Hello</h3> -
段落标签
<p></p>：
可通过align属性设置该段落"center（居中）“，“left（居左）”，“right（居右）”。默认情况为"left（居左）”。<p align="center">This is a rubber.</p> <p align="right">This is a pencil.</p> <p>This is a pen.</p> -
换行标签
<br/>
换行标签与段落标签不同，换行标签仅换行，不增加段落间距。
换行标签为空标签，可缩写为<br/>。<p>This is a rubber.</p> <p>This is a pencil.<br/> This is a pen.</p> -
水平线标签
<hr/>
可通过size（高度），width（宽度），align（对齐方式），color（颜色）属性定义水平线的样式。
水平线标签为空标签，可以缩写为<hr/>。
<p>This is a pencil.</p> <hr width="100" color="blue" align="left"/> <p>This is a pen.</p> -
文字格式标签
<font></font>
可通过size（大小），face（字体），color（颜色）属性定义文本的显示格式。
<p> <font size="5" face="Verdana" color="green">This is a pencil.</font> </p> <p>This is a pen.</p> -
文字效果标签
<font></font>
<b></b>加粗，<i></i>斜体，<u></u>加下划线，<tt></tt>打字机字体。
<tt></tt>打字机字体因字符宽度固定，特别适合显示序列。
<b> AIDTLI</b> <br/> <i> AIIDFL </i> <br/> <u> SSDTFY </u> <br/> <tt> AIDTLI <br/> AIIDFL <br/> SSDTEY <br/> </tt> -
项目符号标签
<ul></ul>
<ul></ul>以图形为项目符号，可以通过type属性定义项目符号为"square（方块）“,“circle（圆圈）”， 默认为"disc（圆点）”。 每一个项目用<li></li>子标签表示。
<ul> <li>tea</ 1i> <li> coffee </li> <ul type="square"> <li>mouse</li> <li>dog </li> <li>cat </li> </ul> <li> milk</li> <ul type="circle"> <li>mouse</li> <li>dog </li> <li>cat </li> </ul> </ul> -
项目符号标签
<ol></ol>
<ol></ol>以编号为项目符号，可以通过 type 属性定义项目符号为"1",“a”, "i"等不同编号形式，默认为"1"。每一个项目用<li></li>子标签表示。
<ol> <li>tea</ 1i> <li> coffee </li> <ol type="i"> <li>mouse</li> <li>dog </li> <li>cat </li> </ol> <li> milk</li> <ol type="a"> <li>mouse</li> <li>dog </li> <li>cat </li> </ol> </ol> -
图片标签
<img/>
通过src属性指定图片位置，通过"width（宽度）"和"height（高度）"定义图片的显示尺寸。
图片标签为空标签，可以缩写为<img/>。
<img src="pen.jpg" width="100" height="60"/> <br/> <img src="http://www.view.sdu.edu.cn/images/logo.jpg"/> -
视频标签
<video></video>
通过src属性指定视频位置，通过定义controls="controls"属性向用户显示控件，比如播放按钮，通过定义autoplay="autoplay"属性自动播放视频。<!-- 本地视频或网络视频地址 --> <video src="./movie.ogg" controls="controls" autoplay=" autoplay"> your browser does not support the video tag </video>
-
超链接标签
<a></a>
通过href属性指定链接位置，可以链接到外部网址，也可以连接到本网站的其他网页。通过定义属性target="_blank", 可以让链接在新窗口中打开。<!-- 链接到外部网页 --> <a href="http://www.sdu.edu.cn" target="_blank"> SDU </a> <br/> <!-- 链接到本地网页 --> <a href="menu.html"> menu </a> -
表格标签
<table></table>
◆ 通过<tr></tr>子标签定义一行，通过<td></td>子标签定义一行中的一列，通过<th></th>子标签定义第一行的标题列（自动加粗）。
◆border属性定义线宽，width和height属性定义表格的宽高。
<table border="1" width="300" height="100"> <tr> <th>type</th> <th>name</th> </tr> <tr> <td>dog</td> <td>mike</td> </tr> <tr> <td>cat</td> <td>marry</td> </tr> </table>◆
bgcolor="yellow"属性可定义表格背景色，background="bg.jpg"属性可定义表格背景图片。◆<tr></tr>标签可添加align属性以确定水平对齐方式（默认居左），valign属性以确定垂直对齐方式（默认居中）。
<table border="1" width="300" height="200" bgcolor="yellow"> <tr> <th>type</th> <th>name</th> </tr> <tr align="center"> <td>dog</td> <td>mike</td> </tr> <tr valign="top"> <td>cat</td> <td>marry</td> </tr> </table>◆ 通过给
<td></td>标签添加colspan和rowspan属性，可以实现单元格合并，colspan 为合并列， rowspan 为合并行。colspan 和 rowspan 的属性值为合并行列的个数。被合并的单元格只写一次<td></td>标签。
<table border="1" width="300" height="150" bgcolor="skyblue"> <tr> <th>type</th> <th>name</th> <th>age</th> </tr> <tr align="center"> <td colspan="2">dog</td> <td>3</td> </tr> <tr valign="center"> <td rowspan="2">cat</td> <td>marry</td> <td>2</td> </tr> <tr align="center"> <td>tom</td> <td>1</td> </tr> </table> -
更多内容见：W3school
8.7 设计简单的网页
- 详见视频：设计简单的网页-01 P146
<!DOCTYPE html>
<html>
<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>Homepage</title>
</head>
<body>
<center>
<h1>My Homepage</h1>
<hr size="5" color="skyblue"/>
</center>
<table border="1" width="800" align="center">
<tr>
<td width="400" align="center">
<img width="400" src="https://www.bing.com/th?id=OHR.OkavangoElephant_EN-CN0593145109_tmb.jpg" >
</td>
<td width="400" align="center">
<video width="400" controls="controls" src="https://f.video.weibocdn.com/o0/kP4rMQC0lx07WKUsXgus01041200xtAN0E010.mp4?&Expires=1655143387&ssig=nMEjTVbnRf&KID=unistore,video"></video>
</td>
</tr>
<tr>
<td colspan="2">
<p align="center">
<font size="5" color="green">欢迎来到我的课程中心</font>
</p>
<p><b>课程中心有以下课程：</b></p>
<ol>
<li>生物信息学</li>
<li>大数据与精准医疗</li>
<li>计算机在生命科学中的应用</li>
</ol>
<p>
<b>常用链接：</b>
<i><a href="http://www.sdu.edu.cn" target="_blank">山东大学</a></i>
<i><a href="#">维基百科</a></i>
</p>
<p>
<b>联系我们：</b><br/>
联系人：巩老师<br/>
联系电话：12345678<br/>
<!-- 给邮箱加超链接 -->
联系邮箱：<a href="mailto:[email protected]">[email protected]</a><br/>
联系地址：XXXXXXXXXX
</p>
</td>
</tr>
</table>
</body>
</html>
8.8 HTML 与 CGI 简单交互
-
详见视频：HTML 与 CGI 简单交互 P149
-
交互式网页设计：HTML + perl CGI 程序
-
HTML
<!DOCTYPE html> <html> <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>test</title> </head> <body> <form action="./cig-bin/test.cgi" method="post" encType="multipart/form-data"> <input name="yourname" size="40"/> <input type="submit" name="submitit" value="1"/> </form> </body> </html> -
perl CGI
#!c:/Strawberry/perl/bin/perl.exe use CGI qw(:standard); # 引用 CGI 模块 $cgi = new CGI; $getname = $cgi->param("yourname"); print $cgi->header( -type=> "text/html"); print "<p>Hello $getname!</p>"; -
要实现网页和 CGI 的完美配合，还需要安装 APACHE httpd 服务器主程序，并设置好 public-html 和 cig-bin 文件夹，然后将网页和相应的 CGI 程序放入相应文件夹，同时注意设置 CGI 文件的读写权限，才能通过 APACHE 的外部地址成功运行交互式网页。
-
参考：
Apache（httpd）服务器在 Windows 上安装与配置
Apache（httpd）的简介、安装以及如何使用（linux）