虽然这次作业仅仅只用到了ul和ol，对大部分大佬来说都十分简单，但作为大一的一个萌新，感觉有必要练习和学习，同时也当练习学写简书.若有不足之处请多多指教.
第一步 准备工作
在做第一个作业时，首先要下一个webstorm用来以后的学习和练习，我是在ubuntu下安装
1.下载一个webstorm压缩包
官方网址：http://www.jetbrains.com/webstorm/index.html
2.找到下载文件的地址返回上一个文件进行右键打开终端输入
sudo tar -zxvf WebStorm-17.0.2.tar.gz（你的版本号）
进行解压文件
3.打开文件夹找到bin文件，右键bin文件打开终端输入
./webstorm.sh
进行安装
4.注册时选择“License server”输入“http://idea.imsxm.com/” （我使用的是2017版本，不同版本可能有不同的激活方式。不对的话，直接搜索引擎webstorm license就可以查到相关信息）点击“OK”快速激活。
‘http://idea.iteblog.com/key.php’这个好像也可以
（版本越新的，自己查查就好了，不懂就搜索就ok）~
第二步 建立工作界面
在webstorm中选择file然后new之后HTML file便可以新建一个html界面
我们写的程序就在第八行<body></body>之间
首先是第一题
下面这个列表是如何实现的
会用到有序排列元素ol和无序排列元素ul，所以接下来先介绍
有序排列元素ol的用法
而无序元素ul用法也一样
所以只需要重复使用ol和ul便可以完成
先建立两个大的标题
<ul>
<li>JavaScript</li>
<li>Java</li>
</ul>
紧接着在大标题下建立子标题
<ul>
<li>JavaScript</li>
<ol>
<li>第一章</li>
<li>第二章</li>
</ol>
<li>Java</li>
<ol>
<li>第一章</li>
<li>第二章</li>
</ol>
</ul>
然后逐步建立完成
<ul>
<li>JavaScript</li>
<ol>
<li>第一章</li>
<ul>
<li>const</li>
<li>let</li>
</ul>
<li>第二章</li>
<ul>
<li>function</li>
<li>object</li>
</ul>
</ol>
<li>Java</li>
<ol>
<li>第一章</li>
<ul>
<li>class</li>
<li>package</li>
</ul>
<li>第二章</li>
<ul>
<li>private</li>
<li>public</li>
</ul>
</ol>
</ul>
最后完成
第二题
这个表格是如何实现的
这里将用到<table>标签，既然是表格，那肯定有边框，所以先设置表格边框为一 （border="1"）如果不加这句话，则表格没有边框.
用到table就必须提tr，td和th.在我的理解中，tr指的是一大块我觉得是一行，td和th都是被包含在tr之间的一个个小块，但是th的文字会比td中的文字粗一些.
首先看此表格的第一行:有三个小块，分别是 / 名称 / 2016-11-22 / 小计 /其中/名称/占了两行，/2016-11-22/占了几个单元格，最后的/小计/也占了两行，这个时候怎么做呢？就需给td或th附加属性rowspan或colspan，我是这样理解的，rowspan是指能占几行（竖的方向）colspan是指能占几格（横向），另外/2016-11-22/还得加粗，所以用th，所以第一行就是
<table border="1">
<tr>
<td rowspan="2”">
名称
</td>
<th colspan="3">2016-11-22</th>
<td rowspan="2">
小计
</td>
</tr>
</table>
但这样只用到一组tr显示出来的还是只有一行，并不能看出rowspan的作用（仿佛可有可无）这个时候再做第二行
<tr>
<td >重量</td>
<td colspan="2" >单价</td>
</tr>
这个时候就能看出rowspan 的作用了，接着用tr，td同时添加rowspan和colspan（属性）完成全部
<table border="1">
<tr>
<td rowspan="2”">
名称
</td>
<th colspan="3">2016-11-22</th>
<td rowspan="2">
小计
</td>
</tr>
<tr>
<td >重量</td>
<td colspan="2" >单价</td>
</tr>
<tr>
<td>苹果</td>
<td>3公斤</td>
<td colspan="2">5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<td>香蕉</td>
<td>2公斤</td>
<td colspan="2">6元/公斤</td>
<td>12元</td>
</tr>
<tr>
<td colspan="4" >总价</td>
<td>27元</td>
</tr>
</table>
这样就做完了吗？仔细看题就会发现
这是原题：
这是输出的结果：
[图片上传失败...(image-945bd0-1523066528552)]
就会发现，还需要在某些td里加入居中的属性（align="center"）同时这个表格上方也是有三个字：购物车
如果直接它会居左，如果加入段落标签<p></p>进行居中则文字上下会空出一行并在整个页面居中，最后才发现直接有个标题<caption></caption>标签......
所以最终结果
<table border="1">
<caption align="top">购物车</caption>
<tr>
<td rowspan="2”">
名称
</td>
<th colspan="3">2016-11-22</th>
<td rowspan="2">
小计
</td>
</tr>
<tr>
<td align="center">重量</td>
<td colspan="2" align="center">单价</td>
</tr>
<tr>
<td>苹果</td>
<td>3公斤</td>
<td colspan="2">5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<td>香蕉</td>
<td>2公斤</td>
<td colspan="2">6元/公斤</td>
<td>12元</td>
</tr>
<tr>
<td colspan="4" align="center">总价</td>
<td>27元</td>
</tr>
</table>
就和题目一模一样啦，但还没完
总结一下用到了<table></table>,<tr></tr>,<td></td>,<th></th>,<caption></caption>和rowspan，colspan，border，align一共五个标签，四个属性。
既然用到了表格标签，那就顺便看看关于表格标签的其他属性
<table border="1" bgcolor="#00FF00">
改变表格的背景颜色
<table border="8" cellpadding="10">
规定单元边沿与其内容之间的空白。
<table border="8" cellspacing="10">
规定单元格之间的空白。
<table frame="box">
规定外侧边框的哪个部分是可见的。(附其他属性值及其意义)
[图片上传失败...(image-b8f3c5-1523066528552)]
<table rules="rows">
规定内侧边框的哪个部分是可见的。(附其他属性值及其意义)
[图片上传失败...(image-ffe6e-1523066528552)]
<table border="1" summary="定义了表格的摘要">
定义的内容不会显示在网页上
<table border="1" width="400">
规定了表格的宽度（即一个格横向有多长）
第三题
看到这道题的时候，开头部分/统一建模理论考试/既可以用段落<p><b></b></p>标签加粗，也可以用h1~h6(我选择了使用标题标签即h1～h6，同时下面的一二三四五道题我也是用了标题标签)
第二行到第四行的？考试时间～得分，一开始我用段落标签<p></p>导致每一行之间都会有空行，最后直接输入文字，用</br>换行。下面的三个则需要用到输入框，即<input>的，用到了input就先得说说<form></form>,但还是先讲讲<input>
<input>的用法有很多，单单用属性type来定义input 的类型就有很多种
[站外图片上传中...(image-19b11e-1523066528552)]
举个栗子：
<form>
<input type="file" name="pic" accept="image/gif" />
<input type="text" name="email" />
<input type="button" value="Click me" onclick="msg()" />
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike
<input type="hidden" name="country" value="China" />
<input type="image" src="/i/eg_submit.jpg" alt="Submit" />
<input type="password" name="pwd" maxlength="8" />
<input type="radio" name="sex" value="male" /> Male
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</form>
[图片上传失败...(image-d6ac1-1523066528552)]
<p><b>这是加粗的字体</b></p>
<p><i>这是倾斜的字体</i></p>
<p><u>这是加下划线的字体</u></p>
<p><s>这是加删除线的字体1</s></p>
<p><strike>这是加删除线的字体2</strike></p>
效果如下：
<p><b>这是加粗的字体</b></p>
<p><i>这是倾斜的字体</i></p>
<p><u>这是加下划线的字体</u></p>
<p><s>这是加删除线的字体1</s></p>
<p><strike>这是加删除线的字体2</strike></p>
FireShot Capture 9 - Title_ - http___localhost_63342_webstorm_boring_qwq.html.png
网友评论