专升本第七讲（做一个自己网页，了解黑客）-优快云博客

本文详细介绍网页设计的基础知识，包括HTML、CSS布局、脚本语言应用，以及如何使用各种标签进行网页元素的设置。同时，深入探讨网络安全基础，分析网络病毒的类型、传播途径与防范措施，以及黑客攻击方式和防御策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、基本概念

　　网站是多个网页的集合，各个网页通过超级链接构成一个网站整体。网页可以分为动态网页和静态网页，网页构成要素包括站标、导航条、广告条、标题栏和按钮等，可由文字、图像、动画及脚本语言组成。

　　站标也叫作LOGO，是网站的标志。如企业的LOGO，一般放在左上角。

　　导航栏是网站内的多个页面的超级链接组合，引导浏览者轻松找到网站中的各个页面，放置在LOGO的下面或者右侧。

　　广告栏又称Banner，其功能是宣传网站或替其他企业做广告。根据版面具体安排。

　　标题栏是指网页内部各个板块的标题栏，是各板块内容的概括，而不是整个网页的标题栏。

　　按钮是启动某些装置或机关的开关

2、脚本语言

　　（一）HTML(HyperText Markup Language)超文本标记语言，是一种制作Web网页的标准语言，由万维网协会（w3c）制定。

　　下图为HTML基本形式：

3、head标签极其meta标签

　　　　<meta>主要是定义页面中的信息，这些信息不会显示的浏览器中。主要标记能提供文档的关键字/作者/网站描述等信息

　　<head>
　　　　<meta charset = "UTF-8">
　　　　<meta name ="keywords" content="学而精 专升本 计算机">
　　　　<meta auther="乡村教师胡劲">
　　　　<title>一个伟大的网站</title>
　</head>

　　charset 描述页面编码方式

　　name标签的名字

　　content指里面的内容

　 title标签显示网页的标题

4、p/h/span/div/br/hr 系列标签，完成对格式的操作

　　（一）符号表示，我们的代码就是用这些符号写出来的，但是问题来了我们想显示符号，计算机怎么知道是要执行的代码还是要输出的符号呢？那么办法来了！一般的符号那么我们就认为是代码，想要输出符号就给符号另外一种形式，完美解决！　　　

  代表空格

　　 > 大于号

　　　< 小于号

　　（二）p段落标签，自动添加一些空白区域，很美观，块级标签

　　（三）h系列标签，标题标签，适用于各种文档的标题从h1-h6，字体大小从大到小，默认加粗，块级标签

　　（四）span白板标签，什么也没有，但是控制格式，其实就是什么也没有控制，显示完毕不换行，内联标签

　　（五）div白板标签，还是什么都没有，控制格式，显示完毕换行，块级标签

　　（六）br标签换行

　　（七）hr标签水平分割线

（八）段落对齐属性align ，left 左对齐 right右对齐 center 居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <title>胡劲</title>
</head>
<body>
   <p>我爱北京天安门我爱<br/>的祖国</p>  <!--br/代表换行-->
   <p>我爱重庆的太阳</p> <!--p标签代表段落，段落之间有间距-->
   <h1>学而精</h1>       <!--H系列加大加粗-->
   <h2>学而精</h2>
   <h3>学而精</h3>
   <h4>学而精</h4>
   <h5>学而精</h5>
   <h6>学而精</h6>
   <hr/ size="7" color="#00ff00">
   <span>学而精</span>   <!--白板-->
   <span>学而精</span>   <!--块级标签：h系列 p标签 内联（行内）标签：span-->
   <span>学而精</span>
   <span>学而精</span>
　 <div>小胡</div>
   <div>小胡</div>
   <div>小胡</div>
</body>
</html>

5、font标签，设置字体样式、颜色、大小等属性，b、u、i标签，完成对字体的操作

　　（一）属性face设置字体样式：<font face="字体样式">.......</font>

　　（二）属性size设置字体大小：<font face="字体大小">.......</font>

　　size属性有1~7个等级，1最小，7最大，默认是3

　　（三）属性color设置字体颜色：<font color="颜色">.......</font>

　　颜色可以用浏览器承认的颜色名或者十六进制数表示，例如：#RRGGBB #663322

　　（四）<b>加粗</b> <u>加下划线</u> <i>倾斜</i>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体的设置</title>
</head>
<body>
    <br/>
    <h1>一、字体的设置</h1>
    <h2>1、设置字体的样式</h2>
    <p>
        <div>
            <font face="宋体">
                <b>宋体加粗显示</b>
            </font>
        </div>
         <div>
            <font face="黑体">
               <u><i>黑体倾斜加下划线显示</i></u>
            </font>
        </div>
        <div>
            <font face="仿宋" size="7" color="#ff0000">
               超大号仿宋红色的字
            </font>
        </div>
    </p>
</body>
</html>

6、marquee标签，实现滚动文字的效果

　　<marquee>滚动的文字</marquee>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体的设置</title>
</head>
<body>
    <p>
       <marquee>
           <font size="6" color="#00ff00">
               欢迎领导指导工作，很飞旋
           </font>
       </marquee>
    </p>
</body>
</html>

7、img标签，插入图片

　　（一）src属性:图像的源文件地址，可以是相对路径或者绝对路径

　　（二）alt属性：提示文字，当图片无法打开的时候回显示提示文字

　　（三）width，height 宽度和高度，单位都是像素点

　　（四）border 边框 <img src="图像文件的地址" border="图像边框的宽度">

　　（五）vspace、hspace 垂直间距和水平间距

　　（六）align 排列方式：bottom 底部对齐 top顶部对齐 middle中央对齐 left左对齐 right 右对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体的设置</title>
</head>
<body>
    <p>
        <img src="http://5b0988e595225.cdn.sohucs.com/images/20170802/b113f5935d1d4e2888f2d6648425fc59.jpeg" alt="范冰冰的美图" border="3" align="middle">
    </p>
</body>
</html>

8、a标签，网页跳转

　　（一）href属性：链接页面的地址

　　（二）target属性：目标窗口的打开方式

　　　　self 当前页面打开

　　　　blank全新也面打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体的设置</title>
</head>
<body>
    <p>
       <a href="http://www.cqxej.cn">
           学而精官网
       </a>
    </p>
    <p>
       <a href="http://www.cqxej.cn">
           <img src="http://p0.so.qhimgs1.com/t01921dff582aa3c430.jpg">
       </a>
    </p>
</body>
</html>

9、table、tr、rd表格标签设置强大的表格

　　<table> ......</table>标记表个的开始和结束

　　<tr> ................</tr> 标记行的开始结束

　　<td>.................</td>标记列的开始结束

　　<caption> ........</caption>标记表格的标题

　　<th>........</th> 标记表格的头

　　（一）table属性align设置整个表格对齐方式：left center right

　　（二）table属性border设置边框的宽度

　　（三）table属性bordercolor设置边框的颜色

　　（四）我们还可以通过thead tbody tfoot三种标签分别对表头，表体，表尾分别进行样式设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体的设置</title>
</head>
<body>
  <table align="center"  border="3">
      <caption>学员信息表</caption>
      <tr>
          <th>姓名</th>
          <th>学校</th>
          <th>专业</th>
      </tr>
      <tbody align="center" >
          <tr>
              <td>张三</td>
              <td>移通</td>
              <td>通信</td>
          </tr>
          <tr>
              <td>李四</td>
              <td>工商</td>
              <td>会计</td>
          </tr>
      </tbody>
  </table>
</body>
</html>

10、创建交互式页面

　　（一）<form>标签用来提交数据的标签（目前不学开发简单了解）

　　基本语法：<form action="表单的处理程序，处理地址">...................</form>

　　　　属性action用于指定表单数据提交到那个地址进行处理

　　（二）<input>表单的控件

　　基本语法：<input type="表单对象" name="表单对象的名称">

　　type是确定不同表单对象，name给对象取一个名字，主要给程序区分.例如：首富王健林，首富是type，王健林是name

　　tpye的属性：

　　　　text：文本字段 <input name="字段名称" type="text" value="文字字段默认值" size="显示字段长度" maxlength="最多字符数">

　　　　password：密码域 <input name="字段名称" type="password" value="密码字段默认值" size="显示字段长度" maxlength="最多字符数">

　　　　radio：单选按钮 <input name="单选按钮的名称" type="radio" value=" 单选按钮的取值" checked="checked">

　　　　checkbox：复选框<input name="复选框按钮名称" type="checkbox" value="按钮取值" />

　　　　buttom：普通按钮能激发提交，一般是配合脚本语言搞更牛的事情，暂时是一个空白按钮

　　　　submit：提交按钮 <input type="submit" name="buttom" value="提交">

　　　　reset：重置复位按钮<input type="reset" name="buttom2" value="重置">

　　（三）下拉列表

　　　基本语法：

　　..........

　　</select>

　　ps:属性 multiple 可以设置多选

　　（四）文本区域标记

　　基本语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体的设置</title>
</head>
<body>
   <form action="http:www.baidu.com">
       <div>
       <h1>各种表单</h1>
        姓名：<input type="text" name="text1" value="请输入名字">
        <br/>
        密码：<input type="password" name="password1" >
        <br/>
        <p><b>选择性别：</b></p>
        男<input type="radio" name="choice1" value="男" checked="checked">
        女<input type="radio" name="choice1" value="女">
        <p><b>选择爱好：</b></p>
        计算机<input type="checkbox" name="checkbox1">
        语文<input type="checkbox" name="checkbox2">
        英语<input type="checkbox" name="checkbox3">
        <p><b>选择学校：</b></p>
        <select  name="sel1">
            <option>移通学院</option>
            <option>工商学院</option>
            <option>应用职业学院</option>
        </select>
       <p><b>留言：</b></p>
       <textarea name="textarea1" cols="800" rows="5" >留言区</textarea>
       </div>
        <input type="reset" name="buttom" value="复位">
        <input type="submit" name="buttom" value="提交">
   </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>胡劲</title>
</head>
<body>
    <form action="https://www.baidu.com/s?">
        <input type="text" name = "wd" value = "乡村教师胡劲"/>
        <input type ="submit" value = "我自己的新搜索厉害了"/>
    </form>
</body>
</html>
<!--input系列-->
    <!--input type ="text"  文本输入-->
    <!--input type ="password" 隐藏输入，密码-->
    <!--input type ="button"   空按钮-->
    <!--input type ="submit"   提交按钮-->

二、网络安全基础

　　网络安全威胁主要四个方面：自然灾害、系统故障、操作失误、人为蓄意破坏

　　前三种我们可以通过加强管理采用各种技术来防范，对于病毒破坏和黑客攻击需要进行综合防范。

1、网络病毒概述

　　1988年11月美国康奈尔大学罗伯特·莫里斯利用UNIX 操作系统的一个漏洞，制造一种蠕虫病毒，造成连接美国国防部、美军军事基地、宇航局和研究机构的6000 多台计算机瘫痪，这是第一个在网络上传染设计的病毒。

　　计算机病毒：值编制或在计算机程序中插入的破坏计算机功能或者数据，影响计算机使用并且能够自我复制的一组计算机指令或者程序代码。

　　传统计算机病毒目的：破坏软、硬件

　　计算机病毒特点：破坏性、传染性、隐蔽性、可触发性

　　网络病毒：主要通过计算机网络传播的病毒

　　网络病毒传播途径：邮件附件、恶意网络浏览

　　网络病毒分类：蠕虫病毒、木马病毒

　　　　蠕虫病毒：通过网络不断传播自我复制，大量消耗本机资源和网络带宽，导致网络堵塞从而使网络服务拒绝，最终造成整个网络系统瘫痪。

　　　　蠕虫病毒传播途径：系统漏洞、电子邮件、在线聊天、局域网下的文件夹共享

　　　　木马病毒：木马病毒实质是一段计算机程序，由两部分组成：客户端（黑客电脑）+服务端（隐藏感染木马的计算机上）

　　　　服务端（隐藏感染木马的计算机上）：会在用户的电脑上打开一个和多个端口和客户端（黑客电脑）通信，这样黑客就能窃取用户计算机上的账号密码等机密信息，不仅如此，黑客还可以远程控制用户的计算机，如：删除文件、修改注册表、更改系统配置等

　　　　木马病毒传播途径：电子邮件、在线聊天（QQ/MSN等）、恶意网页，多数是利用操作系统的漏洞

2、网络病毒防范　　

　　方针：“预防为主，防治结合”

　　常见的病毒入侵手段

　　（一）通过安装插件：浏览网页，部分网页会提示是否安装插件，有些木马病毒就影藏其中，对于不明插件来源就禁止安装

　　（二）通过浏览恶意网页：由于恶意网页中嵌入了恶意代码和病毒，用户在不知情的情况下浏览这种恶意网页就会感染病毒，随意不要去浏览来路不明的网站。360安全卫士、Windows清理助手可以清除恶意软件，修复被更改的浏览器地址

　　（三）通过在线聊天：例如“MSN”病毒就是利用MSN向所有在线好友发病毒文件，一旦中毒就可能导致用户信息泄露。对于通过聊天软件发送来的任何文件，都要确认安全后再打开运行，不要随意单击聊天软件发送来的超级链接。

　　（四）通过电子邮件：邮件中的附件包含病毒软件，防治：不要轻易打开带有附件的电子邮件，其次要安装杀毒软件并启用“邮件发送监控”和“邮件接受监控”功能。

　　（五）局域网的文件共享：关闭局域网下的不必要的文件共享，防止病毒通过局域网传播

3、网络攻击与防范

　　（一）黑客攻击方式

　　黑客（hacker）：一般指计算机非法入侵者，他们大都是程序员，对计算机基础和网络技术非常精通，了解系统漏洞及其原因所在，喜欢非法闯入并以此作为一种智力挑战而沉醉其中。

　　　　a、密码破解

　　　　　对应方式：设置复杂密码，采用动态密码，模拟键盘

　　　　b、IP嗅探（网络监听）

　　　　对应方式：对传输数据加密

　　　　c、钓鱼网站

　　　　　对应方式：不要轻易打开来路不明超链接

　　　　d、端口扫描

　　　　　对应方式：有需要时打开端口，不为未识别的程序打开端口，端口不需要时关闭，不需要上网的时候断开网络连接

　　（二）防止黑客攻击的策略

　　　　a、身份认证: 通过密码、指纹、面部特征、视网膜图案等特征信息来确认用户的身份真实性，只给确认了的用户给访问权限

　　　　b、访问控制：设置入网访问权限、网络共享资源的访问权限、目录安全等级控制、防火墙的安全控制等

　　　　c、审计：记录网络上用户的注册信息，如注册来源、注册失败的次数，记录用户的访问的网络资源。当遭到黑客攻击，这些数据就可用来帮助调查黑客的来源。

　　　　d、保护ip地址：通过路由器只将带外部IP地址的信息发送出去，其他数据都限制在局域网内，对外屏蔽内部IP地址，从而保护计算机。

　　（三）防火墙

　　　　a、防火墙的功能：

　　　　监控键入内部网络或计算机的信息

　　　　保护内部网络或计算机的信息不被非授权访问、非法窃取或破坏

　　　　过滤不安全的服务

　　　　提高企业内部网的安全

　　　　记录内部网与外部网通信的安全日志

　　　　不启用防火墙：Inernet explorer 浏览网页、outlook express 收发电子邮件、windows messenger 及时通信这些通信数据就能畅通无阻的进出内部网络或用户的计算机

　　　　启用防火墙：通信数据会根据防火墙设置的访问规则受到限制

　　　　b、windows 防火墙

　　　　windows自带了一个防火墙，用于阻止未授权用户通过internet或网络访问用户计算机

　　　　windows防火墙能做到　　　

　　　　阻止计算机病毒和蠕虫到达用户的计算机

　　　　请求用户的允许，以阻止或取消阻止某些连接请求

　　　　创建安全日志，记录计算机成功连接尝试和不成功连接尝试

　　　　windows防火墙不能做到

　　　　检测计算机是否感染了病毒或清除已有的病毒

　　阻止用户打开带有危险附件的电子邮件

　　　阻止垃圾邮件或未经请求的电子邮件

转载于:https://www.cnblogs.com/chengtou/p/8671173.html