实验一：建立一个网站，包含计算机科学与技术相关领域的内容。
<!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>Computer Science</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Computer Science And Technology</h1>
</div>
<nav>
<ul>
<li><a href="#1">April 2023 programming language leaderboard</a></li>
<li><a href="#2">Subdisciplines</a></li>
<li><a href="#3">What's Computer Science</a></li>
<li><a href="#4">Development of Computer Science</a></li>
</ul>
</nav>
<div class="headimg">
<img src="images/Big-Tent-Computer-Science.jpg" alt="Big-Tent">
</div>
<container>
<div class="aside1">
<p id="2" class="styleleft">Subdisciplines</p>
<div class="bigbox">
<div class="titlebox">
<p>算法和复杂性<br>Algorithms and complexity</p>
<br>
<p>算法是解决明确定义的计算问题的特定过程。算法的开发和分析是计算机科学各个方面的基础：人工智能、数据库、图形、网络、操作系统、安全性等。算法开发不仅仅是编程。它需要了解可用于解决计算问题的替代方案，包括任何特定解决方案附带的硬件、网络、编程语言和性能约束。它还需要理解算法“正确”意味着什么，因为它完全有效地解决了手头的问题。</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>体系结构和组织<br>Architecture and organization</p>
<br>
<p>计算机体系结构涉及计算机、数据存储设备和网络组件的设计，这些组件存储和运行程序、传输数据以及驱动计算机之间、跨网络以及与用户的交互。计算机架构师使用并行性和各种内存组织策略来设计具有非常高性能的计算系统。计算机体系结构需要计算机科学家和计算机工程师之间的强大沟通，因为他们都从根本上关注硬件设计。</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>计算科学<br>Computational science</p>
<br>
<p>计算科学应用计算机模拟、科学可视化、数学建模、算法、数据结构、网络、数据库设计、符号计算和高性能计算来帮助推进各个学科的目标。这些学科包括生物学、化学、流体动力学、考古学、金融学、社会学和法医学。计算科学发展迅速，特别是因为科学仪器传输的数据量急剧增长。这种现象被称为“大数据”问题。</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>图形和视觉计算<br>Graphics and visual computing</p>
<br>
<p>图形和视觉计算是处理计算机屏幕上图像的显示和控制的领域。该领域包含四个相互关联的计算任务的有效实现：渲染、建模、动画和可视化。图形技术结合了线性代数、数值积分、计算几何、专用硬件、文件格式和图形用户界面 （GUI） 的原理来完成这些复杂的任务。</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>人机交互<br>Human-computer interaction</p>
<br>
<p>人机交互（HCI）涉及设计用户和计算机之间的有效交互以及支持这种交互的界面的构建。HCI 发生在包含软件和硬件的接口上。用户界面设计会影响软件的生命周期，因此应在设计过程的早期进行。由于用户界面必须适应各种用户风格和功能，因此HCI研究借鉴了多个学科，包括心理学，社会学，人类学和工程学。在 1960 年代，用户界面由计算机控制台组成，允许操作员直接键入可以立即执行或将来某个时间执行的命令。随着 1980 年代更用户友好的个人计算机的出现，用户界面变得更加复杂，因此用户可以“指向并单击”以向操作系统发送命令。</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>信息管理<br>Information management</p>
<br>
<p>信息管理 （IM） 主要涉及信息的捕获、数字化、表示、组织、转换和呈现。由于计算机的主内存仅提供临时存储，因此计算机配备了永久存储数据的辅助磁盘存储设备。这些设备的特点是具有比主存储器高得多的容量，但读/写（访问）速度较慢。存储在磁盘上的数据必须先读入主内存，然后才能进行处理。因此，IM系统的一个主要目标是开发有效的算法来存储和检索特定数据以进行处理。</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>智能系统<br>Intelligent systems</p>
<br>
<p>人工智能（AI）是一个可以追溯到计算机科学开端的研究领域。建造一台可以执行被认为需要人类智能的任务的机器的想法很有吸引力。从这个角度研究的任务包括玩游戏、语言翻译、自然语言理解、故障诊断、机器人和提供专家建议。</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>网络和通信<br>Networking and communication</p>
<br>
<p>网络和通信领域包括将计算机连接在一起的本地、广域和移动网络的分析、设计、实现和使用。互联网本身是一个网络，使世界上几乎所有计算机都可以进行通信。</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>操作系统<br>Operating systems</p>
<br>
<p>操作系统是介于计算机硬件体系结构及其应用程序之间的专用软件集合。它执行许多基本活动，例如文件系统管理、进程调度、内存分配、网络接口和计算机用户之间的资源共享。随着时间的推移，操作系统的复杂性不断发展，从 1960 年代最早的计算机开始。</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>平行和分布式计算<br>Parallel and distributed computing</p>
<br>
<p>大数据可用性和互联网上同时用户数量的同时增长，给“并行”或同时执行计算任务的需求带来了特别的压力。并行和分布式计算发生在计算机科学的许多不同主题领域，包括算法、计算机体系结构、网络、操作系统和软件工程。在21世纪初，多处理器设计和其他复杂应用程序运行速度更快的策略呈爆炸式增长。并行和分布式计算建立在基本系统概念之上，例如并发、互斥、状态/内存操作一致性、消息传递和共享内存模型。</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>基于平台的开发<br>Platform-based development</p>
<br>
<p>基于平台的开发涉及针对特定类型的计算机和操作系统（“平台”）的应用程序的设计和开发。基于平台的开发考虑了系统特定的特征，例如 Web 编程、多媒体开发、移动应用程序开发和机器人技术中的特征。互联网或 Android 平板电脑等平台使学生能够在受特定硬件、应用程序编程接口 （API） 和特殊服务约束的环境中学习。这些环境与“通用”编程有很大不同，因此需要单独的研究和开发工作。</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>编程语言<br>Programming languages</p>
<br>
<p>编程语言是程序员实现软件以在计算机上运行的语言。最早的编程语言是汇编语言，与计算机直接执行的二进制编码指令相去不远。到1950年代中期，程序员开始使用高级语言。</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>安全和信息保障<br>Security and information assurance</p>
<br>
<p>安全和信息保障是指通过确保信息系统的可用性、完整性、身份验证和适当的机密性来保护信息系统的策略和技术元素。信息安全概念出现在计算机科学的许多领域，包括操作系统、计算机网络、数据库和软件。</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>软件工程<br>Software engineering</p>
<br>
<p>软件工程是一门涉及应用理论、知识和实践来构建满足客户和用户计算要求的可靠软件系统的学科。它适用于小型、中型和大型计算系统和组织。软件工程使用工程方法、流程、技术和测量。软件开发，无论是由个人还是团队完成，都需要为给定环境选择最合适的工具、方法和方法。</p>
</div>
</div>
</div>
<aside>
<br>
<hr>
<br>
<div id="3">
<h2>什么是计算机科学？</h2>
<p><strong>计算机科学</strong>计算机和计算的研究，包括它们的理论和算法基础，硬件和软件，以及它们在处理信息中的用途。计算机科学学科包括算法和数据结构的研究，计算机和网络设计，建模数据和信息过程以及人工智能。计算机科学从数学和工程学中汲取了一些基础，因此结合了排队理论、概率和统计以及电子电路设计等领域的技术。计算机科学还在概念化、设计、测量和改进新算法、信息结构和计算机体系结构的过程中大量使用假设测试和实验。
<img src="images/Xerox-Alto-icons-mouse-graphical-user-interface.webp" alt="Xa">
<p>计算机科学被认为是五个独立但相互关联的学科家族的一部分：计算机工程，计算机科学，信息系统，信息技术和软件工程。这个家族已被统称为计算机学科。这五个学科是相互关联的，因为计算是他们的研究对象，但它们是分开的，因为每个学科都有自己的研究视角和课程重点。（自1991年以来，计算机协会[ACM]，IEEE计算机协会[IEEE-CS]和信息系统协会[AIS]合作开发和更新了这五个相互关联的学科的分类法以及全球教育机构用于其本科，研究生和研究计划的指南。</p>
<p>计算机科学的主要子领域包括计算机体系结构，编程语言和软件开发的传统研究。但是，它们还包括计算科学（使用算法技术对科学数据进行建模），图形和可视化，人机交互，数据库和信息系统，网络以及计算机科学实践中特有的社会和专业问题。显而易见，其中一些子领域的活动与其他现代领域重叠，例如生物信息学和计算化学。这些重叠是计算机科学家倾向于识别并采取行动其领域的许多跨学科联系的结果。
</p>
</div>
<hr>
<div id="4">
<h2>计算机科学的发展</h2>
<p><strong>计算机科学</strong>在 1960 年代初期成为一门独立的学科，尽管作为其研究对象的电子数字计算机是在大约二十年前发明的。计算机科学的根源主要在于数学、电气工程、物理学和管理信息系统的相关领域。数学是计算机发展中两个关键概念的来源——所有信息都可以表示为零和一序列的想法和“存储程序”的抽象概念。在二进制数系统中，数字由二进制数字 0 和 1 的序列表示，其方式与熟悉的十进制系统中的数字使用数字 0 到 9 表示的方式相同。在电气和电子设备中实现两种状态（例如，高电压和低压）的相对容易程度自然导致二进制数字或位成为计算机系统中数据存储和传输的基本单位。</p>
<img src="images/Moore's Law.webp" alt="Moore's Law">
<p><strong>1970 年代和 80 年代</strong>出现了功能强大的计算机图形设备，用于科学建模和其他视觉活动。（计算机化的图形设备是在1950年代早期引入的，在纸质绘图和阴极射线管[CRT]屏幕上显示粗糙的图像。昂贵的硬件和有限的软件可用性使该领域一直持续到1980年代初，当时位图图形（其中图像由小矩形像素组成）所需的计算机内存变得更加实惠。位图技术，加上高分辨率显示屏和图形标准的发展，使软件对机器的依赖性降低，导致了该领域的爆炸性增长。对所有这些活动的支持演变成被称为图形和视觉计算的计算机科学领域。</p>
<p><strong>21世纪初</strong>计算的三个发展——移动计算、客户端-服务器计算和计算机黑客——促成了计算机科学中三个新领域的出现：基于平台的开发、并行和分布式计算以及安全和信息保障。基于平台的开发是对移动设备、其操作系统和应用程序的特殊需求的研究。并行和分布式计算涉及架构和编程语言的开发，这些架构和编程语言支持算法的开发，其组件可以同时和异步（而不是顺序）运行，以便更好地利用时间和空间。安全和信息保障涉及计算系统和软件的设计，以保护数据的完整性和安全性，以及以该数据为特征的个人的隐私。
最后，计算机科学在其整个历史中特别关注的是伴随计算机科学研究和技术进步而来的独特社会影响。例如，随着 1980 年代互联网的出现，软件开发人员需要解决与信息安全、个人隐私和系统可靠性相关的重要问题。此外，计算机软件是否构成知识产权的问题以及相关的问题“谁拥有它？”产生了一个全新的法律领域，即适用于软件和相关工件的许可和许可标准。这些问题和其他问题构成了计算机科学社会和专业问题的基础，它们几乎出现在上述所有其他领域。</p>
</div>
</aside>
<div class="aside2">
<div id="1" class="box">
<h3>2023年编程语言排行榜</h3>
<br>
<div class="box2">
<div class="rank">
<ul>
<li>Python</li>
<li>C</li>
<li>Java</li>
<li>C++</li>
</ul>
</div>
</div>
</div>
<div class="box">
<h3>谁是最知名的计算机科学家？</h3>
<br>
<div class="box2">
<img src="images/Alan-M-Turing-1951.webp" alt="Turing">
<p>最有影响力的计算机科学家包括艾伦·图灵，二战密码破译者，通常被认为是“现代计算之父”; 蒂姆·伯纳斯-李，万维网的发明者;John McCarthy，编程语言LISP的发明者和人工智能先驱;格蕾丝·霍珀（Grace Hopper），美国海军军官，也是早期计算机（如UNIVAC I）开发以及计算机语言编译器开发的关键人物。</p>
</div>
</div>
<div class="box">
<h3>你能拿计算机科学做什么？</h3>
<br>
<div class="box2">
<p>计算机科学应用于广泛的学科，包括模拟建模，如气候变化和埃博拉病毒的影响，通过图形渲染创建艺术和可视化，以及通过人工智能和机器学习模拟人机界面。</p>
</div>
</div>
<div class="box">
<h3>如何学习计算机科学？</h3>
<br>
<div class="box2">
<p>世界各地的许多大学都提供学位，教授学生计算机科学理论的基础知识和计算机编程的应用。此外，在线资源和课程的普及使许多人可以自学计算机科学的更实用方面（例如编码，视频游戏开发和应用程序设计）。</p>
</div>
</div>
</div>
</container>
<footer>
<ul>
<li>Contact with us!!!</li>
<li><a href="http://127.0.0.1:5500/index.html">返回顶部</a></li>
</ul>
</footer>
</div>
</body>
</html>*{
margin: 0;
padding: 0;
}
.container{
margin: 0 auto;
}
container{
display: flex;
flex-direction: row;
align-items: stretch;
}
.header{
padding: 20px;
height: 100px;
font-size: 20px;
line-height: 100px;
margin-bottom: 10px;
background-image: url(images/computer.png);
background-size: cover;
}
.headimg img{
position: absolute;
top: 50px;
right: 15px;
width: 300px;
height: 250px;
}
h1{
color: aliceblue;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
h3{
font-size: 15px;
color: blue;
}
nav li{
display: inline-block;
padding: 10px;
}
nav a{
text-decoration: none;
}
nav a:hover{
color: gray;
text-decoration: underline;
}
.styleleft{
font-size: 18px;
font-weight: bold;
}
div li{
padding: 12px;
}
.aside1{
float: left;
width: 15%;
margin: 32px 10px 10px 10px;
padding: 10px 5px 10px 10px;
list-style-position: inside;
font-size: 15px;
line-height: 20px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background-color: rgb(80, 65, 169);
color: white;
box-shadow: 0 0 50px rgb(255, 255, 255) inset;
}
/* 左边栏hover文字显示 */
.bigbox{
margin-top: 25px;
width: 100%;
height: 43px;
overflow: hidden;
}
.bigbox:hover{
height: auto;
}
aside{
float: left;
line-height: 2em;
width:55%;
margin: 0 20px 5px 0;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
aside img{
float: right;
width: 280px;
height: 330px;
}
aside p,.aside2 p{
text-indent: 2em;
}
strong{
font-size: 21px;
}
.aside2{
margin: 20px 10px 10px 5px;
float: right;
width: 20%;
position: relative;
top: 150px;
right: -120px;
}
/* 排名 */
.rank{
line-height: 2em;
font-size: 15px;
font-weight: bold;
border-radius: 10px 10px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
list-style-position: inside;
}
.rank li:nth-child(1){
list-style-image: url(images/Python.png);
}
.rank li:nth-child(2){
list-style-image: url(images/C.png);
}
.rank li:nth-child(3){
list-style-image: url(images/Java.png);
}
.rank li:nth-child(4){
list-style-image: url(images/C++.png);
}
/* aside2设计 */
.box{
position: relative;
right: 50px;
padding: 5px;
margin-bottom: 50px;
}
.aside2 .box{
border-radius: 10px 10px;
position: relative;
flex: 0 0 20%;
background-color: rgb(156, 71, 235);
}
.aside2 .box h3{
text-decoration: none;
color: aliceblue;
background-color: rgba(156, 71, 235, 0.623);
}
.aside2 .box:hover{
box-shadow: 5px 5px 10px #000;
transition: 0.5s;
transform: translate(-80px,0) scale(1.2,1.2);
}
.aside2 .box2 p{
color: antiquewhite;
}
.box img{
width: 100px;
height: 150px;
float: right;
}
/* 页尾 */
footer{
clear: both;
font-size: 15px;
height: 50px;
background-color: rgb(112, 10, 207);
color: aliceblue;
background-image: url(images/computer.png);
background-size: cover;
}
footer li{
display: inline-block;
margin: 0 auto;
line-height: 30px;
}
footer a{
color: white;
text-decoration: none;
}
footer a:hover{
color: gray;
text-decoration: underline;
}图片文件夹名为"images"
扫一扫
1271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
