Web前端設計入門示例，含原始碼
阿新 • • 發佈：2019-01-27
一:Table
<html> <head> <title>菜譜</title> </head> <body> <table width="100%" align="center" border=1 bordercolor=#ff0000 cellspacing=0 width=400px height=200px> <tr align="center"><td colspan=3>星期一菜譜</td></tr> <tr align="center"><td rowspan=2>素菜</td><td>清炒茄子</td><td>花椒扁豆</td></tr> <tr align="center"><td>小蔥豆腐</td><td>炒白菜</td></tr> <tr align="center"><td rowspan=2>葷菜</td><td>油燜大蝦</td><td>海蔘魚翅 </td></tr> <tr align="center"><td>紅燒肉 <img src="1.jpg" width=50px></img></td><td>烤全羊</td></tr>
<tr><td> </td></tr> <!-- 表示用空格填充-->
</table>
</body>
</html>二：超連結
<!--預設的是本視窗--> <a href="url" target=_blank>新視窗 </a> <a href="url" target=_self>本視窗 </a> <a href="url" target=_parent>父視窗 </a> <a href="url" target=_top>整個瀏覽器視窗 </a> <a href="url" target=指向frame的名字>要替換的視窗 </a>
三：圖片
<img src="1.jpg" width=50px border=1></img>
<img src="http://www.baidu.com/img/bd_logo1.png"></img>四：標尺線
<hr size=9 width=50% align=left color=#FF0000 />
五：字型
<h1>標題1</h1> <h2>標題2</h2> <h3>標題3</h3> <h4>標題4</h4> <h5>標題5</h5> <h6>標題6</h6> <!--font的size可以設定 1 到 7 號，再想大就不能用size了--> <font size=7 face="華文新魏" color=#FFDD00>字型</font><br /> <font style="font-size:100px">大字型</font><br /> <sub>胡帆</sub> <s>刪除1</s> <strike>刪除2</strike> <b>加粗</b> <i>斜體</i> <u>下劃線</u> <b><u><i>組合</i></u></b>
六：有序/無序 列表
<!--type:square,disc,circle,-->
<ul type="circle">
<li>無序列表1</li>
<li>無序列表2</li>
<li>無序列表3</li>
</ul>
<!--預設按1,2,3編序,type可以是：數字(1)，字母(a/A)，羅馬字母（i/I）-->
<ol type="I" start=13 >
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>七：Frame(不能在body標籤下)
<frameset rows="20%,*" >
<frame src="p3_1.html" />
<frameset cols="15%,*" frameborder=0 >
<frame src="left.html" />
<frame src="right.html" name="right" />
</frameset>
</frameset>