一、简介
1.介绍
网页就是html文件，前端编写代码->浏览器解析代码->呈现网页
谷歌浏览器Blink内核最好
2.Web标准
让网页设计排版更统一规范
结构：对网页元素进行整理和分类，html
表现：设置网页元素的板式、颜色、大小等外观样式，主要指css
行为：指网页模型的定义及交互的编写，javascript
二、HTML标签
1.语法规范
<html></html>成对出现，双标签，单标签极少
2.标签关系
包含关系，并列关系
<head></head>与<body></body>是并列关系
<head></head>与<title></title>是包含关系
<head>
<title></title>
</head>
<body>
</body>3.基础语法
1.文档类型声明标签
<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页2.lang语言种类（主要是指对网页语言的标记）
<html lang="zh-CN" >定义语言为中文
<html lang="en" >定义语言为英文3.字符集
<meta charset="UTF-8">编码的方式，一定要写，不然就会有乱码4.快捷键
导包：alt+enter
自动创建变量：option + enter（windows是alt + enter）
生成构造，getter，setter：control + enter
选中多个相同的元素：control + G
自动为每行尾部添加分号： command + shift + enter
生成html标签 tab键
4.常用标签
1）标题标签:
<h1></h1> …………<h6></h6>大标题到小标题（2）段落标签:<p></p>段落
特点：1.文本会根据浏览器窗口大小自动换行
2.段落和段落之间有空隙
（3）换行标签：<br />
（4）文本格式化标签：
1.加粗 <strong></strong> or <b></b>
2.倾斜<em></em> or <i></i>
3.删除线<del></del> or<s></s>
4.下划线<ins></ins> or <u></u>
5. 盒子标签，用来装内容，布局
1.<div></div> 大盒子,单独占一行
2.<span></span>小盒子，一行可以有多个
6.图像标签：<img >单标签
<img src="图像URL"/>src是<img>标签的必须属性，它用于指定图像文件的路径和文件名
所谓属性：简单理解就是属于这个图像标签的特性
关键字 | 功能 | 代码 |
|---|---|---|
| alt | 图像显示不出来的时候用文字替换 | <img src="" alt=""/> |
| title | 提示文本，鼠标放到图片上，显示的文字提示 | <img src="" title=""/> |
| width | 给图片设定宽度 | <img src="" width="500"/> |
| height | 给图片设定高度 | <img src="" height="100"/> |
| border | 给图片设定边框 | <img src="" border="15"/> |
注意点：
1.图像标签可以拥有多个属性，必须写在标签名的后面
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
3.属性采取键值对的格式，即key="value"的格式，属性="属性值
目录文件夹：
存放我们制作的网页的所有文件，便于打开网页文件
相对路径
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级 | |
| 下一级路径 | / | " |
| 上一级路径 | ../ |
绝对路径
指目录下的绝对位置，可以直接定位文件
<img src="D:图片"/>还可以直接复制图片的网络绝对地址
7.超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>target:_self是覆盖原页面 _blank是在新窗口中打开
链接分类
1.外部链接
http://www.xxx.com
2.内部链接
网站内部页面之间的相互链接，+文件名
3.空链接 #
4.下载链接：
文件名
5.网页元素都可以链接
6.锚点链接：
点击链接快速定位到页面中的某个位置
1.href属性中，设置属性值为#名字的形式，如第2集
2.找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第二集</h3>
3.命名必须以字母开头
5.注释、字符
1.注释
快捷键：ctrl+/
<!--xxx-->
2.特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格 |   | |
| < | 小于 | < |
| > | 大于 | > |
| & | 和 | & |
| ℃ | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘 | × |
| ÷ | 除 | ÷ |
| ² | 平方 | ² |
6.表格标签
1.表格基本语法
<table>定义表格的标签
<tr>定义表格中的行，必须嵌套在<table>标签内
<td>单元格内的文字</td> 定义单元格，必须嵌套在<tr>标签内
... 字母td指表格数据（table data),即数据单元格的内容
</tr>
...
</table>2.表头单元格标签
<th>区别于<td>:居中、加粗3.表格属性（一般通过css实现，记住英语单词，css会使用）
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left\center\right | 规定表格相对周围元素的对齐方式 |
| border | 1 or "" | 规定表格单元是否拥有边框，默认为"",表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认两像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
小实例
<table align="center" border="1" cellpadding="2" cellspacing="0" width="500">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
<tr><td>张学友</td> <td>男</td> <td>58</td></tr>
<tr><td>郭富城</td> <td>男</td> <td>51</td></tr>
<tr><td>黎明</td> <td>男</td> <td>57</td></tr>
</table> 效果
4.表格结构标签
使用场景：因为表格可能很长，为了更好表示表格语义，可以将表格分割成表格头部和表格主体两大部分
在表格标签中，分别用：
<thead>标签表格的头部区域 <tbody>标签表格的主体区域表示表格结构
5.合并单元格
跨行合并：rowspan="合并单元格的个数"纵向（最上侧为目标单元格） 跨列合并：colspan="合并单元格的个数"横向（最左侧为目标单元格） <td colspan="2">合并完删除多余的单元格
7.列表
表格是用来显示数据的，列表是用来布局的
最大特点：整齐、整洁、有序，布局排版很方
1.无序列表（重点）
<ul>标签
表示HTML页面中项目的无序列表，一般以项目符号呈现列表项，列表项用
<li>标签
基本语法如下
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul><ul>里面只能有<li>
<li>里面可以放任何东西
无序列表的样式属性用css改变
2.有序列表
<ol>
3.自定义列表（重点）
使用场景：
用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
<dl>定义描述列表 <dt>定义项目、名字 <dd>描述每一个项目、名字<dl> <dt>名词</dt> <dd>名词1 解释1</dd> <dd>名词1 解释2</dd> </dl><dl>里面只能包含<dt><dd>
8.表单（用于写注册界面）
使用表单目的是为了收集用户信息
表单：表单域、表单控件（表单元素）、提示信息3部分组
1.表单域：包含表单元素的区域
<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素
</form>2.表单元素
允许用户输入或选择的内容控件
1.input输入表单元素
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（后期结合js使用） |
| checkbox | 定义复选框 |
| file | 定义输入字段和浏览按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| seset | 定义重置按钮，清除表单中所有数据 |
| submit | 定义提交按钮，把所在表单数据发送到服务器 |
| text | 定义单行的输入字段，用户在其中输入文本，默认宽度20字符 |
多选一的实现：给每一个单选按钮设置相同的名字
复选框设置相同的名字便于后台确定选择内容
label标签使用场景：
用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素，用来增加用户体验
<label for="text"> 用户名：</label><input type="text" id="text">核心：<label>标签的for属性应当与相关元素的id属性相同
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载时应当被选中（默认选中） |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
1.name\value是每个表单元素都有的属性值，主要给后台人员使用
2.name表单元素的名字，要求单选按钮和复选框有相同的name值
2.select下拉表单元素
使用场景：
有多个选项让用户选择，并且想要节约页面空间，使用<select>标签控件定义下拉列表
语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>1.<select>至少包含一对<option>
2.<option>中定义selected="selected"，当前选项为默认选中
3. textarea文本域元素
使用场景：用户输入内容较多，不能使用文本框表单，此时可以使用文本域
<textarea rows="3" cols="20">
文本内容
</textarea>三、实例
1.新闻网一角
实现的功能：
1.盒子标签：< div><span>
2.段落标签：<p>
3.图像标签：<img src="url" title=""/>
4.换行标签：<br/>
5.超链接标签：<a href="url" target="">文字或图像</a>
6.空格符： 
7.居中：align="center"
8.加粗：<strong>
9.倾斜：<em>
10.下划线：<ins>
代码
<!doctype html>
<html lang="zh-CN">
<!--表示网页是中文-->
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div><h1 align="center">计算机学院举办2023年度表彰颁奖大会暨2024年迎新春晚会</h1></div>
<span><p> 逐梦正当时，青春向未来，12月23日晚，计算机学院在大学生活动中心二楼报告厅举办2023年度表彰颁奖大会暨2024年迎新春晚会。学院院长梁永全，党委副书记、副院长郝亮，副院长崔焕庆，计算机科学与技术系党支部书记贾瑞生，软件工程系主任倪维健，智能科学与技术系主任崔宾阁，学工办主任（团委书记）王春宇和全体团委老师出席活动。</p>
<p>
此次晚会以<strong>“逐梦正当时，青春向未来”</strong>为主题，分为梦想启航、心灵之旅、共创新篇三个篇章，以丰富多元的节目全方位展现了计算机学子的才艺与风采，表达了大家总结过往、砥砺奋进、共同成长的美好愿望。
</p>
<p> 晚会伊始，校器乐队带来了一曲悠扬动人的开场演奏《拈花笑》。舞蹈《Variety Girls》以拉丁舞与爵士舞为主，充满节奏感的舞步和灵动的动作，引爆了现场的气氛，也扬起了“梦想启航”的帆；学院声乐队带来的歌曲《追光者》《我是如此相信》唱出了追梦者孜孜不倦、追求理想光芒的“心灵之旅”，鼓励大家相信未来，勇敢追梦；<br />小品《时间都去哪了》拟人化了QQ、微博、抖音等，生动模拟了当代大学生的生活学习状态，包袱、笑点、网络热梗不断，引发观众对时间规划与自律的思考；朗诵《觉醒》《如果没有李白》鼓励学子追随先辈脚步，以更加强大与豁达的心态砥砺奋进。学院组策部及融媒体中心视频部合作制作的小剧场《同学的名义》改编自《人民的名义》中的经典桥段，以幽默轻松的表演表达了“拒绝内卷”的核心内涵，赢得在场观众喝彩和掌声。此外还有“slay”全场的舞蹈《出道位争夺战》、传播“树立正确消费观，抵制校园贷款”正能量的小品《你好在吗》以及歌曲《我怀念的》《逆光》，<ins> <em>同学们出色的表演引发了观众的热烈反响，现场掌声、尖叫声此起彼伏。在《稻香》的优美旋律后，全体人员合影留念，打开“共创新篇”的新局面。</em></ins> </p>
<p> 晚会还表彰了计算机学院2023年度“十大优秀学生”“学风建设先进集体”“‘十律伴我行’教育活动先进集体”“新媒体建设先进集体”“优秀志愿者先进个人”“文体之星先进个人”“新闻宣传先进个人”等，与会领导、老师为获奖班集体与个人颁发了荣誉证书。</p>
<p> 奋进，是2023你我的真实写照；奋进，是2024我们的共同约定。在新年到来之际，愿计算机学院全体师生继续踔厉奋发，笃行不怠，齐心协力，乘势而上，用更饱满的热情、更纯粹的热爱逐梦未来，续写计算机学院新辉煌！（通讯员：尹贻娜 姚昊 何麒 刁冠铭 摄影：刘瑞 秦续彪 付雯婷 李兴 邢晓辉 徐敏婷 周南）</p></span>
<!--新闻正文-->
<span>
<img src="picture/img.png" title = "歌曲：追光者" align="center"/>
<img src="picture/img_1.png" align="center"/>
<img src="picture/img_2.png" align="center"/>
<img src="picture/img_3.png" align="center"/>
<img src="http://news.sdust.edu.cn/__local/5/35/92/2C30C1290EDB9E1D23DA9D959CC_2CD84730_1C25E.jpg"/></span>
<!--新闻图片-->
<span>
<br/><a href="http://news.sdust.edu.cn/info/1160/87845.htm" target="_blank">上一条：计算机学院开展就业技能提升培训会</a>
<br/>
<a href="http://news.sdust.edu.cn/info/1160/87615.htm" target="_blank">下一条：山东省新一代信息技术产教融合共同体人才培养与课程建设高端研讨会（院长论坛）成功召开</a>
</span>
<!--跳转链接-->
</body>
</html>
效果
点击最后的超链接可以跳转到对应链接的网页
2.《九章算术》百度百科
实现功能：
1.盒子标签：< div><span>
2.段落标签：<p>
3.图像标签：<img src="url" title=""/>
4.换行标签：<br/>
5.超链接标签：<a href="url" target="">文字或图像</a>
6.空格符： 
7.加粗：<strong>
8.锚点链接
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>九章算术简介</title>
</head>
<body>
<h1>九章算术</h1>
西汉张苍、耿寿昌整理的算学书<br/>
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.02e39c3efd0619102929088213a05f2a?rik=lqOgh73pmZPKbQ&riu=http%3a%2f%2fwww.guoxuemeng.com%2ffiles%2flcover%2f992.jpg&ehk=C%2bzgnbAB1yWF62fe0IGXKfTdC%2fiP49eVQXkqShfmufo%3d&risl=&pid=ImgRaw&r=0" width="250" alt="九章算术图片"/>
<span>
<p> 《九章算术》，算学书。作者不详。西汉早期丞相张苍、耿寿昌等增补删订，三国曹魏时期刘徽注释，唐初李淳风注，<br/>作为通行本。<br/> 全书分9章，246个例题。全书共有方田、粟米、衰分、少广、商功、均输、盈不足、方程、勾股等九个章节，此书<br/>于隋、唐时传入朝鲜和日本，被定为教学书籍，现已译成英、日、俄等国文字。国家图书馆藏有南宋本《九章算术》。</p>
</span><!--简介-->
<span>
<strong>中文名</strong> 九章算术
<strong>外文名</strong> The Nine Chapters on the Mathematical Art<br/>
<strong>作 者</strong> 张苍、耿寿昌
<strong>出版时间</strong> 2011年<br/>
<strong>出版社</strong> 江苏人民出版社
<strong>ISBN</strong> 9787214067296<br/>
<strong>类 别</strong> 数学专著
<strong>创作年代</strong> 公元一世纪左右
</span><!--基本属性-->
<div><h3>目录</h3>
<span>
<h4>1.<a href="#one">内容简介</a> </h4>
<h4>2.<a href="#two">创作背景</a></h4>
<span>
<h4>3.<a href="#three">作品思想</a></h4>
<h5>(1)<a href="#3.1">数形结合</a></h5>
<h5>(2)<a href="#3.2">模型化思想</a></h5>
<h5>(3)<a href="#3.3">相对关系</a></h5>
<h5>(3)<a href="#3.4">逻辑定义</a></h5>
</span>
<span>
<h4>4.<a href="#four">数学成就</a></h4>
<h5>(1)<a href="#4.1">算术</a></h5>
<h5>(2)<a href="#4.2">几何</a></h5>
<h5>(3)<a href="#4.3">代数</a></h5>
</span>
<span>
<h4>5.<a href="#five">后世影响</a></h4>
<h5>(1)<a href="#5.1">古代影响</a></h5>
<h5>(2)<a href="#5.2">现代影响</a></h5>
</span>
<span>
<h4>6.<a href="#six">版本信息</a></h4>
<h5>(1)<a href="#6.1">校注版本</a></h5>
<h5>(2)<a href="#6.2">出版版本</a></h5>
</span>
</span>
</div>
<span>
<h4 id="one">内容简介</h4>
<p>
《九章算术》的内容十分丰富，全书采用问题集的形式，收有246个与生产、生活实践有联系的应用问题，其中每道题有问（题目）、答（答案）、术（解题的步骤，但没有证明），有的是一题一术，有的是多题一术或一题多术。这些问题依照性质和解法分别隶属于方田、粟米、衰（cuī）分、少广、商功、均输、盈不足、方程及勾股。共九章如下所示。原作有插图，今传本已只剩下正文了。<br/>
《九章算术》共收有246个数学问题，分为九章。它们的主要内容分别是：<br/>
<strong>第一章“方田”</strong>： 主要讲述了平面几何图形面积的计算方法。包括长方形、等腰三角形、直角梯形、等腰梯形、圆形、扇形、弓形、圆环这八种图形面积的计算方法。另外还系统地讲述了分数的四则运算法则，以及求分子分母最大公约数等方法。其中例题38个，立术21条。<br/>
<strong>第二章“粟米”</strong>：谷物粮食的按比例折换；提出比例算法，称为今有术；衰分章提出比例分配法则，称为衰分术；其中例题46个，立术33条。<br/>
<strong>第三章“衰分”</strong>：比例分配问题。其中例题20个，立术22条。<br/>
<strong>第四章“少广”</strong>：已知面积、体积，反求其一边长和径长等；介绍了开平方、开立方的方法。其中例题24个，立术16条。<br/>
<strong>第五章“商功”</strong>：土石工程、体积计算；除给出了各种立体体积公式外，还有工程分配方法；其中例题28个，立术24条。<br/>
<strong>第六章“均输”</strong>：合理摊派赋税；用衰分术解决赋役的合理负担问题。今有术、衰分术及其应用方法，构成了包括今天正、反比例、比例分配、复比例、连锁比例在内的整套比例理论。西方直到15世纪末以后才形成类似的全套方法。其中例题28个，立术28条。<br/>
<strong>第七章“盈不足”</strong>：即双设法问题；提出了盈不足、盈适足和不足适足、两盈和两不足三种类型的盈亏问题，以及若干可以通过两次假设化为盈不足问题的一般问题的解法。这也是处于世界领先地位的成果，传到西方后，影响极大。其中例题20个，立术27条。<br/>
<strong>第八章“方程”</strong>：一次方程组问题；采用分离系数的方法表示线性方程组，相当于现在的矩阵；解线性方程组时使用的直除法，与矩阵的初等变换一致。这是世界上最早的完整的线性方程组的解法。在西方，直到17世纪才由莱布尼兹提出完整的线性方程的解法法则。这一章还引进和使用了负数，并提出了正负术——正负数的加减法则，与现今代数中法则完全相同；解线性方程组时实际还施行了正负数的乘除法。这是世界数学史上一项重大的成就，第一次突破了正数的范围，扩展了数系。外国则到7世纪印度的婆罗摩及多才认识负数。其中例题18个，立术19条。<br/>
<strong>第九章“勾股”</strong>：利用勾股定理求解的各种问题。其中的绝大多数内容是与当时的社会生活密切相关的。提出了勾股数问题的通解公式：若a、b、c分别是勾股形的勾、股、弦，则a²+b²=c²。在西方，毕达哥拉斯、欧几里得等仅得到了这个公式的几种特殊情况，直到3世纪的丢番图才取得相近的结果，这已比《九章算术》晚约3个世纪了。勾股章还有些内容，在西方却还是近代的事。例如勾股章最后一题给出的一组公式，在国外到19世纪末才由美国的数论学家迪克森得出。其中例题24个，立术19条。<br/>
《九章算术》是《算经十书》中最重要的一部，成于公元一世纪左右。其作者已不可考，一般认为它是经历代各家的增补修订，而逐渐发展完备成为现今定本的，西汉的张苍、耿寿昌曾经做过增补和整理，其时大体已成定本。最后成书最迟在东汉前期，现今流传的大多是在三国时期魏元帝景元四年（263年），刘徽为《九章》所作的注本。<br/>
《九章算术》内容十分丰富，全书总结了战国、秦、汉时期的数学成就。同时，《九章算术》在数学上还有其独到的成就，不仅最早提到分数问题，也首先记录了盈不足等问题。《方程》章还在世界数学史上首次阐述了负数及其加减运算法则。它是一本综合性的历史著作，是当时世界上最简练有效的应用数学，它的出现标志中国古代数学形成了完整的体系。<br/>
<em>2020年4月，列入《教育部基础教育课程教材发展中心 中小学生阅读指导目录（2020年版）》初中段。</em><br/>
</p>
</span><!--内容简介-->
<span>
<h4 id="two">创作背景</h4>
<p>
《九章算术》早期文本的编纂时间及经过,历代聚讼,众说不一,目前为止,最明确而中肯的论定还是出自刘徽的《九章算术注·原序》：昔在庖牺氏始画八卦,以通神明之德,以类万物之情,作九九之术,以合六爻之变。……按：周公制礼而有九数,九数之流,则《九章》是矣。往者暴秦焚书,经术散坏。自时厥后,汉北平侯张苍、大司农中丞耿寿昌皆以善算命世。苍等因旧文之遗残,各称删补。故校其目则与古或异,而所论者多近语也。<br/>
郭书春认为刘徽关于《九章算术》编纂的论述是完全正确的。他说：“《九章算术》由先秦‘九数’发展而来的,是张苍、耿寿昌在先秦遗文的基础上先后整理、加工、增补而成的,它的最后编定者是耿寿昌,时在公元前一世纪中叶。”但在早期文本的流传过程中书名的确定尚存诸多疑点,据现有史料推测,《九章算术》书名出现应晚于文本的编定,约于公元一世纪后期。<br/>
1984年，在湖北出土了《算数书》书简。据考证，它比《九章算术》要早一个半世纪以上，书中有些内容和《九章算术》非常相似，一些内容的文句也基本相同。有人推测两书具有某些继承关系，但也有不同的看法认为《九章算术》没有直接受到《算数书》影响。<br/>
</p>
</span><!--创作背景-->
<span>
<h4 id="three">作品思想</h4>
<span>
<h5 id="3.1">数形结合</h5>
<p> 数学和形是数学中最基本的原始概念，《九章算术》开创了中国古代数学中数形结合的独特的研方法其现用的计来解的研究论题如“开方”“开立”种种平面图形和立体图形的求积问题，都用数的计算，即着重于考察图形中的数的关系，算出确定的数值.同时亦用形的直观来解释数的算法如对“开方”“开立”等为以图形作解释打下基础（实际的解释是刘徽完成的,在刘徽的注文中,更发展为“析理以释解体用图”的系统方法）。<br/>
数形结合的思想有助于数学的各个领域的融汇贯通,有助于发挥数学思维的整体性,使之更为深刻,灵活,是现代数学教学中强调的基本数学思想之一。</p>
</span><!--3.1-->
<span>
<h5 id="3.2">模型化思想</h5>
<p> 数学模型是为了解决现实世界问题而建立的，数学模型是人们认识原型的方式之一。结合方程，构建数学模型数学应用问题是包含了一个或多个数量关系的具体情节或事件，解决数学应用问题的过程就是从情节中抽象并理顺数量关系的过程，方程是有效地表达、处理、交流和传递信息的工具，是反映客观事物数量变化规律的一种模型。数学应用问题可以以方程为途径，构建数学模型来解决，在这种情况下所构建的就是方程模型。<br/>
《九章算术》做了许多属于建立和使用数学模型的工作。它的“九章”内至少有三章——盈不足、方程、勾股——提供的就是基本的数学模型。</p>
</span><!--3.2-->
<span>
<h5 id="3.3">相对关系 </h5>
<p> 刘徽对数学概念的定义抽象而严谨。他揭示了概念的本质，基本符合现代逻辑学和数学对概念定义的要求。而且他使用概念时亦保持了其同一性。如他提出凡数相与者谓之率，把率定义为数量的相互关系。又如他把正负数定义为今两算得失相反，要令正负以名之，摆脱了正为余，负为欠的原始观念，从本质上揭示了正负数得失相反的相对关系。<br/>
《九章算术》的算法尽管抽象，但相互关系不明显，显得零乱。刘徽大大发展深化了中算中久已使用的率概念和齐同原理，把它们看作运算的纲纪。许多问题，只要找出其中的各种率关系，通过乘以散之，约以聚之，齐同以通之，都可以归结为今有术求解。<br/>
一平面（或立体）图形经过平移或旋转，其面积（或体积）不变。把一个平面（或立体）图形分解成若干部分，各部分面积（或体积）之和与原图形面积（或体积）相等。基于这两条不言自明的前提的出入相补原理，是中国古代数学进行几何推演和证明时最常用的原理。刘徽发展了出入相补原理，成功地证明了许多面积、体积以及可以化为面积、体积问题的勾股、开方的公式和算法的正确性。</p>
</span>
<span>
<h5 id="3.4">逻辑定义</h5>
<p> 刘徽对《九章算术》中的所有数学概念都做了解释或逻辑定义，在解释和定义中，他非常注意数学推理的逻辑性，充分考虑各问题之间的逻辑关系. 在“勾股”章的注释中，明确指出：这一章之所以一开头就提出了勾股定理，是因为“将以施于诸率，故先具此术，以见其源也”. 刘徽用这一精彩的论述，从“逻辑”角度注释了勾股定理出现在“勾股”章开头的必要性. 刘徽认为有些问题不能只限于感性认识，必须在感性认识的基础上提升到理性认识的层面，并在理性认识的基础上形成数学理论. 因而，他从逻辑严谨性出发，对于那些能从逻辑上证明的法则都进行了论证。</p>
</span>
</span><!--作品思想-->
<span>
<h4 id="four">数学成就</h4>
<span>
<h5 id="4.1">算术</h5>
<p> 在算术方面的主要成就有分数运算、比例问题和“盈不足”算法。《九章算术》是世界上最早系统叙述了分数运算的著作，在第二、三、六章中有许多比例问题，在世界上也是比较早的。“盈不足”的算法需要给出两次假设，是一项创造，中世纪欧洲称它为“双设法”，有人认为它是由中国经中世纪阿拉伯国家传去的。<br/>
《九章算术》中有比较完整的分数计算方法，包括四则运算，通分、约分、化带分数为假分数（中国古代称为通分内子，“内”读为纳）等等。其步骤与方法大体与现代的雷同。<br/>
分数加减运算，《九章算术》已明确提出先通分，使两分数的分母相同，然后进行加减。加法的步骤是“母互乘子，并以为实，母相乘为法，实如法而一”这里“实”是分子。“法”是分母，“实如法而一”也就是用法去除实，进行除法运算，《九章算术》还注意到两点：其一是运算结果如出现“不满法者，以法命之”。就是分子小于分母时便以分数形式保留。其二是“其母同者，直相从之”，就是分母相同的分数进行加减，运算时不必通分，使分子直接加减即可。<br/>
《九章算术》中还有求最大公约数和约分的方法。求最大公约数的方法称为“更相减损”法，其具体步骤是“可半者半之，不可半者，副置分母子之数，以少减多，更相减损，求其等也。以等数约之。”这里所说的“等数”就是最大公约数。可半者是指分子分母都是偶数，可以折半的先把它们折半，即可先约去2。不都是偶数了，则另外摆（即副置）分子分母算筹进行计算，从大数中减去小数，辗转相减，减到余数和减数相等，即得等数。<br/>
在《九章算术》的第二、三、六等章内，广泛地使用了各种比例解应用问题。粟米章的开始就列举了各种粮食间互换的比率如下：“粟米之法：粟率五十，粝米三十，粺米二十七，糳米二十四，……”这是说：谷子五斗去皮可得糙米三斗，又可舂得九折米二斗七升，或八拆米二斗四升，……。例如，粟米章第一题：“今有粟米一斗，欲为粝米，问得几何”。它的解法是：“以所有数乘所求率为实，以所有率为法，实如法而一”。<br/>
《九章算术》第七章“盈不足”专讲盈亏问题及其解法其中第一题：“今有（人）共买物，（每）人出八（钱），盈（余）三钱；人出七（钱），不足四（钱），问人数、物价各几何”，“答曰：七人，物价53（钱）。”“盈不足术曰：置所出率，盈、不足各居其下。令维乘（即交错相乘）所出率，并以为实，并盈，不足为法，实如法而一……置所出率，以少减多，余，以约法、实。实为物价，法为人数”。盈不足术是中国数学史上解应用问题的一种别开生面的创造，它在中国古代算法中占有相当重要的地位。盈不足术还经过丝绸之路西传中亚阿拉伯国家，受到特别重视，被称为“契丹算法”，后来又传入欧洲，中世纪时期“双设法”曾长期统治了他们的数学王国。</p>
</span>
<span>
<h5 id="4.2">几何</h5>
<p> 《九章算术》总结了生产、生活实践中大量的几何知识，在方田、商功和勾股章中提出了很多面积、体积的计算公式和勾股定理的应用。<br/>
《九章算术》方田章主要论述平面图形直线形和圆的面积计算方法。《九章算术》方田章第一题“今有田广十五步，从（音纵zong）十六步。问为田几何。”“答曰：一亩”。这里“广”就是宽，“从”即纵，指其长度，“方田术曰：广从步数相乘得积步，（得积步就是得到乘积的平方步数）以亩法二百四十步（实质应为积步）除之，即亩数。百亩为一顷。”当时称长方形为方田或直田。称三角形为圭田，面积公式为“术曰：半广以乘正从”。这里广是指三角形的底边，正从是指底边上的高，刘徽在注文中对这一计算公式实质上作了证明：“半广者，以盈补虚，为直田也。”“亦可以半正从以乘广”（图1－30）。盈是多余，虚乃不足。“以盈补虚”就是以多余部分填补不足的部分，这就是中国古代数学推导平面图形面积公式所用的传统的“出入相补”的方法，由上图“以盈补虚”变圭田为与之等积的直田，于是得到了圭田的面积计算公式。<br/>
方田章第二十七、二十八题把直角梯形称为“邪田”（即斜田）它的面积公式是：“术曰：并两邪（即两斜，应理解为梯形两底）而半之，以乘正从……，又可半正从……以乘并。”刘徽在注中说明他的证法仍是“出入相补”法。在方田章第二十九、三十题把一般梯形称为“箕田”，上、下底分别称为“舌”、“踵”，面积公式是：“术曰：并踵舌而半之，以乘正从”。<br/>
至于圆面积，在《九章算术》方田章第三十一、三十二题中，它的面积计算公式为：“半周半径相乘得积步”。这里“周”是圆周长，“径”是指直径。这个圆面积计算公式是正确的。只是当时取径一周三（即π≈3）。于是由此计算所得的圆面积就不够精密。
《九章算术》商功章收集的都是一些有关体积计算的问题。但是商功章并没有论述长方体或正方体的体积算法。看来《九章算术》是在长方体或正方体体积计算公式：V=abc的基础上来计算其他立体图形体积的。<br/>
《九章算术》商功章提到城、垣、堤、沟、堑、渠，因其功用不同因而名称各异，其实质都是正截面为等腰梯形的直棱柱，他们的体积计算方法：“术曰：并上、下广而半之，以高若深乘之，又以袤乘之，即积尺”。这里上、下广指横截面的上、下底（a，b）高或深（h），袤是指城垣……的长（l）。因此城、垣…的体积计算术公式V=1/2（a+b）h.<br/>
刘徽在注释中把对于平面图形的出入相补原理推广应用到空间图形，成为“损广补狭”以证明几何体体积公式。<br/>
刘徽还用棋验法来推导比较复杂的几何体体积计算公式。所谓棋验法，“棋”是指某些几何体模型即用几何体模型验证的方法，例如长方体本身就是“棋”[图1－32（1）]斜解一个长方体，得两个两底面为直角三角形的直三棱柱，中国古代称为“堑堵”（如图1），所以堑堵的体积是长方体体积的二分之一。<br/>
《九章算术》商功章还有圆锥、圆台（古代称“圆亭”）的体积计算公式。甚至对三个侧面是等腰梯形，其他两面为勾股形的五面体[图1－33（1）]，上、下底为矩形的拟柱体（古代称“刍童”）以及上底为一线段，下底为一矩形的拟柱体（古代称“刍甍”）（“甍”音“梦”）等都可以计算其体积。</p>
</span>
<span>
<h5 id="代数"></h5>
<p> 《九章算术》中的代数内容同样很丰富，具有当时世界的先进水平。<br/>
1．开平方和开立方<br/>
《九章算术》中讲了开平方、开立方的方法，而且计算步骤基本一样。所不同的是古代用筹算进行演算，现以少广章第12题为例，说明古代开平方演算的步骤，“今有积五万五千二百二十五步。问为方几何”。“答曰：二百三十五步”。这里所说的步是中国古代的长度单位。<br/>
“开方（是指开平方，由正方形面积求其一边之长。）术曰：置积为实（即指筹算中把被开方数放置于第二行，称为实）借一算（指借用一算筹放置于最后一行，用以定位）。步之（指所借的算筹一步一步移动）超一等（指所借的算筹由个位越过十位移至百位或由百位越过千位移至万位等等，这与现代笔算开平方中分节相当）。议所得（指议得初商，由于实的万位数字是5，而且2²＜5＜3²，议得初商为2，而借算在万位，因此应在第一行置初商2于百位）。以一乘所借一算为法（指以初商2乘所借算一次为20000，置于“实”下为“法”）而以除（指以初商2乘“法”20000得40000，由“实”减去得：55225-40000=15225）除已，倍法为定法，其复除，折法而下（指将“法”加倍，向右移一位，得4000为“定法”因为要求平方根的十位数字，需要把“借算”移至百位）。复置借算步之如初，以复议一乘之，所得副，以加定法，以除（这一段是指：要求平方根的十位数字，需置借算于百位。因“实”的千位数字为15，且4×3＜15＜4×4，于是再议得次商为3。置3于商的十位。以次商3乘借算得3×100=300，与定法相加为4000+300=4300。再乘以次商，则得：3×4300=12900，由“实”减去得：15225－12900=2325。以所得副从定法，复除折下如前：这一段是指演算如前，即再以300×1+4300=4600向右移一位，得460，是第三位方根的定法，再把借算移到个位；又议得三商应为5，再置5于商的个位，以5+460=465，再乘以三商5，得465×5=2325经计算恰尽，因此得平方根为235。）<br/>
上述由图1－25（1）—（10）是按算筹进行演算的，看起来似乎很繁琐，实际上步骤十分清楚，易于操作。它的开平方原理与现代开平方原理相同。其中“借算”的右移、左移在现代的观点下可以理解为一次变换和代换。《九章算术》时代并没有理解到变换和代换，但是这对以后宋、元时期高次方程的解法是有深远影响的。<br/>
《九章算术》方程章中的“方程”是专指多元一次方程组而言，与“方程”的含义并不相同。《九章算术》中多元一次方程组的解法，是将它们的系数和常数项用算筹摆成“方阵”（所以称之谓“方程”）。消元的过程相当于现代大学课程高等代数中的线性变换。<br/>
由于《九章算术》在用直除法解一次方程组过程中，不可避免地要出现正负数的问题，于是在方程章第三题中明确提出了正负术。刘徽在该术的注文里实质上给出了正、负数的定义：“两算得失相反，要令‘正’、‘负’以名之”。并在计算工具即算筹上加以区别“正算赤，负算黑，否则以邪正为异”。这就是规定正数用红色算筹，负数用黑色算筹。如果只有同色算筹的话，则遇到正数将筹正放，负数时邪（同斜）放。宋代以后出现笔算也相应地用红、黑色数码字以区别正、负数，或在个位数上记斜划以表示负数，如（即—1824），后来这种包括负数写法在内的中国数码字还传到日本。<br/>
关于正、负数的加减运算法则，“正负术曰：同名相益，异名相除，正无入负之，负无入正之。其异名相除，同名相益，正无入正之，负无入负之”。这里所说的“同名”、“异名”分别相当于所说的同号、异号。“相益”、“相除”是指二数相加、相减。术文前四句是减法运算法则：<br/>
（1）如果被减数绝对值大于减数绝对值，即a＞b≥0，<br/>
则同名相益：（±a）-（±b）=±（a-b），<br/>
异名相除：（±a）-（b）=±（a+b）。<br/>
（2）如果被减数绝对值小于减数绝对值，即b＞a≥0。<br/>
①如果两数皆正<br/>
则a-b=a-[a+（b-a）]=-（b-a）。<br/>
中间一式的a和a对消，而（b-a）无可对消，则改“正”为“负”，即“正无入负之”。“无入”就是无对，也就是无可对消（或不够减或对方为零）。<br/>
②如果两数皆负<br/>
则（-a）-（-b）=－a-[（-a）-（b-a）]=+（b-a）。在中间的式子里（-a）和（-a）对消，而-（b-a）无可对消，则改“负”为“正”所以说“负无入正之”。<br/>
③如果两数一正一负。则仍同（1）的异名相益。<br/>
术文的后四句是指正负数加法运算法则。<br/>
（1）同号两数相加，即同名相益，其和的绝对值等于两数绝对值和。<br/>
如果a＞0，b＞0，<br/>
则a+b=a+b，（-a）+（-b）=-（a+b）<br/>
（2）异号两数相加，实为相减，即异名相除。如果正数的绝对值较大，其和为正，即“正无入正之”。如果负数的绝对值较大，其和为负，即“负无入负之”。用符号表示为<br/>
①如果a＞b≥0，<br/>
则 a+（-b）=[b+（a-b）]+（-b）=a-b，<br/>
或 （-a）+b=[（-b）－（a-b）]+b=-（a-b）。<br/>
②如果b＞a≥0，<br/>
则 a+（-b）=a+[（-a）-（b-a）]=-（b-a），<br/>
或 （-a）+b=（-a）+[a+（b-a）]=b-a。<br/>
关于正负数的乘除法则，在《九章算术》时代或许会遇到有关正负数的乘除运算。可惜书中并未论及，直到元代朱世杰于《算学启蒙》（1299年）中才有明确的记载：“同名相乘为正，异名相乘为负”，“同名相除所得为正，异名相除所得为负”，因此至迟于13世纪末中国对有理数四则运算法则已经全面作了总结。至于正负数概念的引入，正负数加减运算法则的形成的历史记录，中国更是遥遥领先。国外首先承认负数的是七世纪印度数学家婆罗门岌多（约598-？）欧洲到16世纪才承认负数。</p>
</span>
</span><!--数学成就-->
<span>
<h4 id="five">后世影响</h4>
<span>
<h5 id="5.1">古代影响</h5>
<p> 《九章算术》是世界上最早系统叙述了分数运算的著作；其中盈不足的算法更是一项令人惊奇的创造；“方程”章还在世界数学史上首次阐述了负数及其加减运算法则。在代数方面，《九章算术》在世界数学史上最早提出负数概念及正负数加减法法则；中学讲授的线性方程组的解法和《九章算术》介绍的方法大体相同。注重实际应用是《九章算术》的一个显着特点。该书的一些知识还传播至印度和阿拉伯，甚至经过这些地区远至欧洲。<br/>
《九章算术》是几代人共同劳动的结晶，它的出现标志着中国古代数学体系的形成．后世的数学家，大都是从《九章算术》开始学习和研究数学知识的。唐宋两代都由国家明令规定为教科书。1084年由当时的北宋朝廷进行刊刻，这是世界上最早的印刷本数学书。可以说，《九章算术》是中国为数学发展做出的又一杰出贡献。<br/>
在九章算术中有许多数学问题都是世界上记载最早的。例如，关于比例算法的问题，它和后来在16世纪西欧出现的三分律的算法一样。关于双设法的问题，在阿拉伯曾称为契丹算法，13世纪以后的欧洲数学著作中也有如此称呼的，这也是中国古代数学知识向西方传播的一个证据。<br/>
《九章算术》对中国古代的数学发展有很大影响，这种影响一直持续到了清朝中叶。《九章算术》的叙述方式以归纳为主，先给出若干例题，再给出解法，不同于西方以演绎为主的叙述方式，中国后来的数学著作也都是采用叙述方式为主。历代数学家有不少人曾经注释过这本书，其中以刘徽和李淳风的注释最有名。<br/>
《九章算术》还流传到了日本和朝鲜，对其古代的数学发展也产生了很大的影响。<br/>
作为一部世界数学名著，《九章算术》早在隋唐时期即已传入朝鲜、日本。它已被译成日、俄、德、法等多种文字版本。</p>
</span>
<span>
<h5 id="5.2">现代影响</h5>
<p> 2020年4月，列入《教育部基础教育课程教材发展中心 中小学生阅读指导目录（2020年版）》初中段。 <br/>[1]
根据新华社在2020年12月4日的报道《最快！我国量子计算机实现算力全球领先》和同日中国科学院量子信息与量子科技创新研究院网站刊载文章《中国科学家实现“量子计算优越性”里程碑》，中国科学技术大学宣布该校潘建伟等人成功构建76个光子的量子计算原型机，该原型机的名字“九章”正是来源于《九章算术》。<br/>
《九章算术》作为我国数学历史上的经典名作，是数学文化中必不可少的史料。苏教版、人教版以及北师大版三种版本的初中数学教材均在相关知识内容介绍了《九章算术》的史料。</p>
</span>
</span><!--后世影响-->
<span>
<h4 id="six">版本信息</h4>
<span>
<h5 id="6.1">校注版本</h5>
<p> 关于对《九章算术》所做的校注主要有：西汉张苍增订、删补，三国时曹魏刘徽注，唐李淳风注，南宋杨辉著《详解九章算法》选用《九章算术》中80道典型的题作过详解并分类，清李潢（？—1811年）所著《九章算术细草图说》对《九章算术》进行了校订、列算草、补插图、加说明，尤其是图文并茂之作。<br/>
现代钱宝琮（1892—1974年）曾对包括《九章算术》在内的《算经十书》进行了校点，用通俗语言、近代数学术语对《九章算术》及刘、李注文详加注释。80年代以来，今人白尚恕、郭书春、李继闵等都有校注本出版。</p>
</span>
<span>
<h5 id="6.2">出版版本</h5>
<p> 唐宋两代，《九章算术》都由国家明令规定为教科书。到了北宋，《九章算术》还曾由政府进行过刊刻（1084），这是世界上最早的印刷本数学书。在现传本《九章算术》中，最早的版本乃是上述北宋本的南宋翻刻本（1213），现藏于上海图书馆（孤本，残，只余前五卷）。清代戴震由《永乐大典》中抄出《九章算术》全书，并作了校勘。此后的《四库全书》本、武英殿聚珍本、孔继涵刻的《算经十书》本（1773）等，大多数都是以戴校本为底本的。</p>
</span>
</span>
</body>
</html>
点击目录中的文字，可以自动跳转到对应章节
3.登录页面、注册信息页面（小实例）
实现功能：
表格：<table><tr><th><td>
无序列表：<ul><li>
有序列表：<ol><li>
自定义列表：<dl><dt><dd>
表单：<input><select><textarea>
<!DOCTYPE html>
<html lang="zh-CN" >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table align="center" border="1" cellspacing="0" width="500">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>↓</td>
<td>345</td>
<td>
<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790" target="_blank">介绍</a>
<a href="https://www.guichuideng.cc/" target="_blank">小说全集</a>
</td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td>↓</td>
<td>124</td>
<td>
<a href="https://baike.baidu.com/item/%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0/21859" target="_blank">介绍</a>
<a href="http://www.daomubiji.org/" target="_blank">小说全集</a>
</td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td>↑</td>
<td>212</td>
<td>
<a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B8%B8%E8%AE%B0/5723" target="_blank">介绍</a>
<a href="https://xiyouji.5000yan.com/" target="_blank">小说全集</a>
</td>
</tr>
<tr>
<td>4</td>
<td>东游记</td>
<td>↑</td>
<td>23</td>
<td>
<a href="https://baike.baidu.com/item/%E4%B8%9C%E6%B8%B8%E8%AE%B0/10461211" target="_blank">介绍</a>
<a href="https://www.zhonghuadiancang.com/wenxueyishu/dongyouji/" target="_blank">小说全集</a>
</td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td>↓</td>
<td>121</td>
<td>
<a href="https://baike.baidu.com/item/%E7%94%84%E5%AC%9B%E4%BC%A0/4701562" target="_blank">介绍</a>
<a href="https://v.ijujitv.cc/detail/23646.html" target="_blank">电视剧全集</a>
</td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td>↓</td>
<td>576576</td>
<td>
<a href="https://baike.baidu.com/item/%E6%B0%B4%E6%B5%92%E4%BC%A0/348" target="_blank">介绍</a>
<a href="https://shuihu.5000yan.com/" target="_blank">小说全集</a>
</td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td>↑</td>
<td>234</td>
<td>
<a href="https://baike.baidu.com/item/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89/5782" target="_blank">介绍</a>
<a href="https://www.zhonghuadiancang.com/wenxueyishu/sanguoyanyi/" target="_blank">小说全集</a>
</td>
</tr>
</tbody>
</table>
<span>
<h4 align="center">您喜欢的食物？</h4>
<ul>
<li>草莓</li>
<li>面条</li>
<li>烤串</li>
</ul>
</span><!--无序列表-->
<span>
<h4>成绩排名</h4>
<ol>
<li>张三 95</li>
<li>李四 94</li>
<li>王五 85</li>
</ol>
</span><!--有序列表-->
<span>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
</span><!--自定义列表-->
<span>
<form action="xxx.php" method="get">
<span>
<!-- 文本框输入文字-->
用户名<input type="text" value="请输入用户名" maxlength="6"><br/>
<!-- 输入密码，看不见-->
密码 <input type="password" maxlength="12">
</span><!--登录-->
<span>
性别：<label for="男">男</label><input type="radio" name="sex" id="男" value="男" checked="checked"> <label for="女">女</label><input type="radio" name="sex" value="女" id="女">
</span><!--性别-->
<span>
爱好：<br/> 篮球<input type="checkbox" name="hobby" value="篮球">
<br/> 唱歌<input type="checkbox" name="hobby" value="唱歌">
<br/> 跳舞<input type="checkbox" name="hobby" value="跳舞">
<br/> RAP<input type="checkbox" name="hobby" value="RAP"><br/>
</span><!--爱好-->
<span>
籍贯：
<select>
<option selected="selected">山东</option>
<option>北京</option>
<option>香港</option>
<option>保加利亚</option>
<br/>
</select>
</span>
<input type="submit" value="提交信息">
<input type="reset" value="重新输入"><br/>
上传头像：<input type="file" value="上传头像"><br/>
今日反馈：<textarea rows="10" cols="50">
</textarea>
</form>
</span><!--表单-->
</body>
</html>
