雖然這次作業(yè)僅僅只用到了ul和ol若债，對大部分大佬來說都十分簡單，但作為大一的一個(gè)萌新本今，感覺有必要練習(xí)和學(xué)習(xí)拆座，同時(shí)也當(dāng)練習(xí)學(xué)寫簡書.若有不足之處請多多指教.
第一步 準(zhǔn)備工作
在做第一個(gè)作業(yè)時(shí)，首先要下一個(gè)webstorm用來以后的學(xué)習(xí)和練習(xí)冠息，我是在ubuntu下安裝
1.下載一個(gè)webstorm壓縮包
官方網(wǎng)址：http://www.jetbrains.com/webstorm/index.html
2.找到下載文件的地址返回上一個(gè)文件進(jìn)行右鍵打開終端輸入
sudo tar -zxvf WebStorm-17.0.2.tar.gz（你的版本號）
進(jìn)行解壓文件
3.打開文件夾找到bin文件，右鍵bin文件打開終端輸入
./webstorm.sh
進(jìn)行安裝
4.注冊時(shí)選擇“License server”輸入“http://idea.imsxm.com/” （我使用的是2017版本孕索，不同版本可能有不同的激活方式逛艰。不對的話，直接搜索引擎webstorm license就可以查到相關(guān)信息）點(diǎn)擊“OK”快速激活搞旭。
‘http://idea.iteblog.com/key.php’這個(gè)好像也可以
（版本越新的散怖，自己查查就好了，不懂就搜索就ok）~
第二步 建立工作界面
在webstorm中選擇file然后new之后HTML file便可以新建一個(gè)html界面
我們寫的程序就在第八行<body></body>之間
首先是第一題
下面這個(gè)列表是如何實(shí)現(xiàn)的
會(huì)用到有序排列元素ol和無序排列元素ul肄渗，所以接下來先介紹
有序排列元素ol的用法
而無序元素ul用法也一樣
所以只需要重復(fù)使用ol和ul便可以完成
先建立兩個(gè)大的標(biāo)題
<ul>
<li>JavaScript</li>
<li>Java</li>
</ul>
緊接著在大標(biāo)題下建立子標(biāo)題
<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>
最后完成
第二題
這個(gè)表格是如何實(shí)現(xiàn)的
這里將用到<table>標(biāo)簽镇眷，既然是表格，那肯定有邊框翎嫡，所以先設(shè)置表格邊框?yàn)橐?（border="1"）如果不加這句話欠动，則表格沒有邊框.
用到table就必須提t(yī)r，td和th.在我的理解中惑申，tr指的是一大塊我覺得是一行具伍，td和th都是被包含在tr之間的一個(gè)個(gè)小塊，但是th的文字會(huì)比td中的文字粗一些.
首先看此表格的第一行:有三個(gè)小塊圈驼，分別是 / 名稱 / 2016-11-22 / 小計(jì) /其中/名稱/占了兩行人芽，/2016-11-22/占了幾個(gè)單元格，最后的/小計(jì)/也占了兩行绩脆，這個(gè)時(shí)候怎么做呢萤厅？就需給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">
小計(jì)
</td>
</tr>
</table>
但這樣只用到一組tr顯示出來的還是只有一行赦拘，并不能看出rowspan的作用（仿佛可有可無）這個(gè)時(shí)候再做第二行
<tr>
<td >重量</td>
<td colspan="2" >單價(jià)</td>
</tr>
這個(gè)時(shí)候就能看出rowspan 的作用了慌随，接著用tr，td同時(shí)添加rowspan和colspan（屬性）完成全部
<table border="1">
<tr>
<td rowspan="2”">
名稱
</td>
<th colspan="3">2016-11-22</th>
<td rowspan="2">
小計(jì)
</td>
</tr>
<tr>
<td >重量</td>
<td colspan="2" >單價(jià)</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" >總價(jià)</td>
<td>27元</td>
</tr>
</table>
這樣就做完了嗎躺同？仔細(xì)看題就會(huì)發(fā)現(xiàn)
這是原題：
這是輸出的結(jié)果：
[圖片上傳失敗...(image-945bd0-1523066528552)]
就會(huì)發(fā)現(xiàn)阁猜，還需要在某些td里加入居中的屬性（align="center"）同時(shí)這個(gè)表格上方也是有三個(gè)字：購物車
如果直接它會(huì)居左，如果加入段落標(biāo)簽<p></p>進(jìn)行居中則文字上下會(huì)空出一行并在整個(gè)頁面居中蹋艺，最后才發(fā)現(xiàn)直接有個(gè)標(biāo)題<caption></caption>標(biāo)簽......
所以最終結(jié)果
<table border="1">
<caption align="top">購物車</caption>
<tr>
<td rowspan="2”">
名稱
</td>
<th colspan="3">2016-11-22</th>
<td rowspan="2">
小計(jì)
</td>
</tr>
<tr>
<td align="center">重量</td>
<td colspan="2" align="center">單價(jià)</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">總價(jià)</td>
<td>27元</td>
</tr>
</table>
就和題目一模一樣啦剃袍，但還沒完
總結(jié)一下用到了<table></table>,<tr></tr>,<td></td>,<th></th>,<caption></caption>和rowspan，colspan捎谨，border民效，align一共五個(gè)標(biāo)簽，四個(gè)屬性涛救。
既然用到了表格標(biāo)簽畏邢，那就順便看看關(guān)于表格標(biāo)簽的其他屬性
<table border="1" bgcolor="#00FF00">
改變表格的背景顏色
<table border="8" cellpadding="10">
規(guī)定單元邊沿與其內(nèi)容之間的空白。
<table border="8" cellspacing="10">
規(guī)定單元格之間的空白检吆。
<table frame="box">
規(guī)定外側(cè)邊框的哪個(gè)部分是可見的舒萎。(附其他屬性值及其意義)
[圖片上傳失敗...(image-b8f3c5-1523066528552)]
<table rules="rows">
規(guī)定內(nèi)側(cè)邊框的哪個(gè)部分是可見的。(附其他屬性值及其意義)
[圖片上傳失敗...(image-ffe6e-1523066528552)]
<table border="1" summary="定義了表格的摘要">
定義的內(nèi)容不會(huì)顯示在網(wǎng)頁上
<table border="1" width="400">
規(guī)定了表格的寬度（即一個(gè)格橫向有多長）
第三題
看到這道題的時(shí)候蹭沛，開頭部分/統(tǒng)一建模理論考試/既可以用段落<p><b></b></p>標(biāo)簽加粗臂寝，也可以用h1~h6(我選擇了使用標(biāo)題標(biāo)簽即h1～h6，同時(shí)下面的一二三四五道題我也是用了標(biāo)題標(biāo)簽)
第二行到第四行的摊灭？考試時(shí)間～得分咆贬，一開始我用段落標(biāo)簽<p></p>導(dǎo)致每一行之間都會(huì)有空行，最后直接輸入文字帚呼，用</br>換行掏缎。下面的三個(gè)則需要用到輸入框，即<input>的萝挤，用到了input就先得說說<form></form>,但還是先講講<input>
<input>的用法有很多御毅，單單用屬性type來定義input 的類型就有很多種
[站外圖片上傳中...(image-19b11e-1523066528552)]
舉個(gè)栗子：
<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>
