一、实验目的和要求

实验目的：
（1）通过上机实践，熟悉 HTML 和 JavaScript 脚本实现技术。
（2）加深对 Web 编程的认识
实验要求：
1 编写个人主页，要求包含如下信息。
（1）标题“欢迎访问×××的主页”
（2）个人简介，包含照片。
（3）个人经历简介，以有序列表形式显示。
（4）个人最喜欢的 4 本书，以无序列表显示。
（5）个人兴趣简介，以段落文字方式显示，或者以列表显示。
（6）列出 6 门主干课程成绩，以表格形式显示。如下示例
表 3.1：
成绩显示格式
课程名开课学期任课教师分数
高等数学 2012 秋季张三 90
离散数学 2012 春季李四 80
（7）个人的朋友主页链接或者学校主页链接。
（8）其它个人想表达的信息。
备注：
（1）代码要求手工输入，不要用工具自动生成，本题目让大家了解 HTML 文档的基本元素构成。
（2）界面的字体、颜色、样式有大家自己决定。
2 HTML 文件中嵌入 javascript 脚本实现输入 a，b，c 三个系数，计算方程的两个根，并在页面上显示。

二、实验环境(实验设备)

中文五号宋体，英文五号Times new roman字体，1.25倍行距
硬件：微型计算机
软件：Windows 操作系统、浏览器

三、实验原理及内容

中文五号宋体，英文五号Times new roman字体，1.25倍行距
说明：这部分请将实验分解成若干具体的任务步骤。

（一）编写个人主页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>欢迎访问×××的主页</title>
</head>
<body><div><h3>个人简介</h3><img src="/img/1.jpg" alt="" width="120"></div><!--    个人最喜欢的四本书--><div><h3>我最喜欢的四本书</h3><ul><li>book1</li><li>book2</li><li>book3</li><li>book4</li></ul></div><div><h3>个人经历简介</h3><ol><li>教育经历:2018年9月-2022年7月南京大学物流管理主要学习物流管理的专业知识以及与物流相关的计算机基础知识等其他知识包括电子商务，经济学管理学等方面知识</li><li>培训经历:年4月参加全国性物流研讨会的学习。通过与参加会议的一些国内和省内知名企业。同时也包括日本通运、普洛斯中国领导层的交谈，对现代物流中心建设、物流中心装备、物流中心运营规划经验等多个方面进行了学习。认真听取专家对未来物流发展的的一些意见以及物流对我国流通领域中的一些地位和作用。</li><li>工作经验:2020年暑假在_公司进行实习。对货物定单的处理、发货、收取货款等进行了学习。2021年寒假/进行了自主创业，主要销售某一类产品，采购，销售均自己完成。2023年一月到科技公司进行为期一个月的实习，主要学习仓库管理方面的知识。</ol></div><div><h3>个人兴趣简介</h3><p>本人曾在校社团联合会网络信息部和检验学院学生会工作，并担任班干部;培养了我良好的领导、管理、协作、交际沟通和创新能力，使我能客观理智地面对问题，顾全大局，对凡事持寻求解决的态度。</p><p>一年的实习工作更是丰富了我的阅历，培养了我开拓创新的思维和解决问题的能力，更加系统地掌握了临床各项检测的基础理论和基础操作技术，掌握了微生物、病毒的实验检验原理和操作技术，有较强的综合分析能力和动手能力，也具有一定的科研能力。</p><p>我性格开朗、积极上进;具有良好的团队精神和人际关系，对待工作认真负责、勤恳耐劳，耐心细心，在工作中善于到激励他人的作用，同时善于并热爱与人沟通交流;敢于开拓创新有着强烈的事业心与责任感，对人生和事业充满热情和憧憬。</p></div><div><form action=""><table border=""><tr ><th>课程名</th><th>开课学期</th><th>任课教师</th><th>分数</th></tr><tr ><td>高等数学</td><td>2012 春季</td><td>张三</td><td>95</td></tr><tr><td>线性代数</td><td>2012 春季</td><td>李四</td><td>94</td></tr><tr><td>概率论与数理统计</td><td>2012 秋季</td><td>王五</td><td>91</td></tr><tr><td>数据结构</td><td>2012 秋季</td><td>赵六</td><td>93</td></tr><tr><td>计算机组成原理</td><td>2013 春季</td><td>钱七</td><td>98</td></tr><tr><td>操作系统</td><td>2013 春季</td><td>孙八</td><td>99</td></tr></table></form></div><!--个人或者学校的主页地址--><div><a href="www.njupt.edu.cn">南京邮电大学</a></div><div><form action=""><label for="aa">a <input type="text" id = "aa" ></label><br/><label for="aa">b <input type="text" id = "bb"></label><br/><label for="aa">c <input type="text" id = "cc"></label><br/></form><input type="submit" onclick="Submit()" value="提交"></div></body>
</html>

（二）计算方程的两个根

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标题</title>
</head>
<body><div><form action=""><label for="aa">a <input type="text" id = "aa" ></label><br/><label for="aa">b <input type="text" id = "bb"></label><br/><label for="aa">c <input type="text" id = "cc"></label><br/></form><input type="submit" onclick="Submit()" value="提交">
</div><script>function GetRoot(a, b, c){delta = b*b-4*a*c;x1 = "";x2 = "";if(delta < 0){delta = - delta;if (Math.sqrt(delta)/(2*a) === 1){x1 = (-b/(2*a)).toFixed(2) + "i";x2 = (-b/(2*a)).toFixed(2) - "i";}else{x1 = (-b/(2*a) + Math.sqrt(delta)/(2*a)).toFixed(2) +"i";x2 = (-b/(2*a) - Math.sqrt(delta)/(2*a)).toFixed(2) +"i";}}else{x1 = (-b+Math.sqrt(delta))/(2*a).toFixed(2);x2 = (-b-Math.sqrt(delta))/(2*a).toFixed(2);}alert("x1 = " + x1 + "\n" + "x2 = " + x2);}function Submit(){a = document.getElementById("aa").value;b = document.getElementById("bb").value;c = document.getElementById("cc").value;GetRoot(a, b, c);}
</script></body>
</html>