今日重點
1.字體與插入
2.超鏈接
3.列表
4.表格
5.實例
6.作業任務
學習心得
今天是作為小白學習的第一天,零基礎的我在學習過程中很艱難,還好有老師的耐心講解和同學們的悉心幫助,希望以后的學習中可以每天都有自己的進步,完成自己的目標!
學習內容
1.字體與插入 (了解)
<b>加粗 </b>沒加粗
<code>代碼</code>
<em>強調文本</em>
<i>斜體</i>
<kbd>鍵盤輸入</kbd>
<pre>預格式
</pre>
<small>更小的字體</small>
<strong>加粗</strong>
<abbr>縮寫
</abbr>
<address>地址</address>
<bdo>文字方向</bdo>文字方向
<blockquote>從另一個源引入</blockquote>
<cite>工作</cite>
log<sub>10</sub>下標文本
m <sup>2</sup>
<ins>插入文本</ins>
<del>刪除文本</del>
2.超鏈接 (了解)(經常使用)
錨機鏈接<a href="#tips">錨機鏈接</a>
普通的鏈接 <a >百度</a><br>
內部<a href="html03.html">3</a><br>
目標<a href="html03.html" target="_blank">3.1</a>新建窗口<br>
目標<a href="html03.html" target="_self">3.2</a>當前窗口<br>
目標<a href="html03.html" target="_parent">3.3</a>直接父容器窗口<br>
目標<a href="html03.html" target="_top">3.4</a>最頂級父容器窗口<br>
標題<a href="html03.html" title="點我">3.4</a><br>
圖片鏈接<a ><img src="img/2.jpg" height="200" alt=""></a>
3.列表 (了解)
無序列表
<ul type="circle">
<li>我是無序列表</li>
</ul>
有序列表
<ol>
<li>我是有序列表</li>
</ol>
自定義列表
<dl>
<dt>項目1</dt>
<dd>描述</dd>
</dl>
4.表格 (理解,運用不熟練)(重要)
生成一個5乘5的表格
快捷方法:tr*5>td*5
<table border="1" cellspacing="0" cellpadding="10" bgcolor="red2" align="left">
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
</table>
5.實例:制作報名表(理解)
代碼:
<!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>Document</title> </head> <body> <form> <table border="10" cellspacing="10" cellpadding="10" align="center"> <tr> <td>用戶名</td> <td><input type="text"></td> </tr> <tr> <td>密碼</td> <td><input type="password"></td> </tr> <tr> <td>性別</td> <td><input type="radio" name="gender" checked>男 <input type="radio" name="gender">女 </td> </tr> <tr> <td>愛好</td> <td><input type="checkbox" checked>游泳 <input type="checkbox">足球 <input type="checkbox">籃球 </td> </tr> <tr> <td>家庭住址</td> <td><select> <option>吉林省</option> <option>遼寧省</option> </select> <select> <option>長春市</option> <option>沈陽市</option> </select> <select> <option>朝陽區</option> <option>皇姑區</option> </select> </td> </tr> <tr> <td>郵箱</td> <td><input type="email"></td> </tr> <tr> <td>生日</td> <td><input type="date"></td> </tr> <tr> <td>薪水</td> <td><input type="number" min="0" max="100"></td> </tr> <tr> <td>頭像</td> <td><input type="file"></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="注冊"> <input type="reset" value="重置"> <input type="button" value="自定義"> </td> </tr> </table> </form> </body> </html>
效果圖:

感受:第一次自己單獨做出一個內容,經歷很多困難,在同學的幫助下完成,不太熟練,仍需努力!
6.作業任務:制作詩詞和歌曲的網頁
第一次:
界面: 分類雜亂,整體雜亂無章,功能十分簡陋,無法達到老師和我自己的要求。
效果圖

回寢室后,在同學指導之下,對HTML有了一點新的理解,重新做出了第二版。
第二次:
界面 學會了文件夾分類設置,和一些簡單界面切換。

效果圖

浙公網安備 33010602011771號