初學HTML，初學十字繡
再把牛腩看完以後對BS感覺還挺好玩的，只是在牛腩中，東西有點雜亂，所以完了以後就發現自己的路任重道遠，但是今天用兩個小時學習了一下基本的HTML，感覺在牛腩中也就這幾個，所以
在這裡總結一下。
HTML又叫超文字標記語言 (HTML)，也是構成網頁文檔的主要語言，大家在頁面上右鍵，單擊查看網頁原始碼，看到的大部分都是咱們所說的HTML語言，HTML可以標題文字，圖形，連結，表格，我們網頁上呈現的靜態畫面就是HTML的功勞，可是對於實現我們該如何呢，其實說到網頁的製作，貌似這個詞很大，其實網頁也就是一個資訊的輸入和輸出，所以我們就把資訊分為修飾和輸入輸出來實現一下HTML。
修飾1、架構2、內容修飾<p align="#"> 表示paragraph，作用是建立一個段，屬性align表示段的對齊，#可是是left、center、right、justtify，分別表示靠左對齊，置中，靠右對齊，兩段對齊。
<br>表示line break，作用換行，我們在一句話的末尾加上<br>，就會讓後邊的語句轉換到下一行。
<hr color="clr"> 表示horizontal rule,作用是插入一條水平下線，color是表示水平線的顏色，可以寫成red，white，yellow,也可以用16進位表示，例如#rrggbb，#ff0000,當然如果自己想要挑顏色，也可專門找相關的工具來找。
<html><body> <center> <h2><font color="red">靜夜思</font></h2> <b>作者：李白</b> <hr color="blue" /> <font color="green" size="3"> 窗前明月光，疑是地上霜。<br /> 舉頭望明月，低頭思故鄉， </font> </center></body></html>
單行文本輸入控制項 (type:"text"）
提交按鈕 (type:"submit")
重設按鈕 (type:"reset")
口 令輸入控制項(type:"password"
選項按鈕 (type:"radio")
複選框 (type:"checkbox")
隱藏控制項 (type:"hidden")
<textarea name="name" rows="number numbger of rows“ cols="number of columns">...</textarea> 表示多行文本當然HTML裡邊還是有一個比較特殊的傢伙，那就是下拉框，他是表示方法是<select>元素建立，各個選項用<option>元素提供，代碼如下
<span style="white-space:pre"></span><select size="1" name="education"><span style="white-space:pre"></span><option value="" selected>...</option><span style="white-space:pre"></span><option value="高中">高中</option><span style="white-space:pre"></span><option value="大學">大學</option><span style="white-space:pre"></span><option value="碩士">碩士</option><span style="white-space:pre"></span><option value="博士">博士</option><span style="white-space:pre"></span></select>輸出當然我們大部分瀏覽網頁都是為了擷取資訊，所以這個貌似也就成了重點，而且運用起來也比較靈活，當然也只是相對於輸入來說。想想我們用來輸出表示都用到了什麼，表格，文字，圖片，連結。貌似也就這麼多了。表格表格：<table border=n align="alignment" gbcolor="clr">...</table>,border用於定義表格框的寬度，n可以是從零開始的整數，如果border=0，表示沒有寬度，align用於表示對齊，屬性值為left，center，right。屬性bgcolor使用者表示背景顏色，全稱是backgroundcolor，方式前邊介紹過了，<capiton><caption>用來定義表頭，<tr></tr>用來再添加一行，<td></td>用來定義表頭。就不多說了，上例子。
<table border="1" align="center" bgcolor="#ffdddd"> <caption>2014年度期末考試成績單</caption> <tr align="center" valign="middle"> <!--新行--> <th>姓名</th> <!--表頭--> <th>語文</th> <!--表頭--> <th>數學</th> <!--表頭--> <th>英語</th> <!--表頭--> </tr> <tr align="center" valign="middle"> <!--新行-->> <th>張三</th> <!--表頭--> <th>65</th> <!--表頭--> <th>89</th> <!--表頭--> <th>98</th> <!--表頭--> </tr> <tr align="center" valign="middle"> <!--新行-->> <th>李四</th> <!--表頭--> <th>12</th> <!--表頭--> <th>43</th> <!--表頭--> <th>45</th> <!--表頭--> </tr> <tr align="center" valign="middle"> <!--新行-->> <th>王五</th> <!--表頭--> <th>44</th> <!--表頭--> <th>76</th> <!--表頭--> <th>88</th> <!--表頭--> </tr> </table>超連結我們在點擊某個網站的logo時經常會串連到我們網站，其實這就用到了超連結，HTML之所以叫超文字標記語言 (HTML)，特殊之處就在這裡。那麼我們就簡單的說一下。<a href="URL">...</a>,屬性href用於指定超連結的目標，目標地址由URL定位在...處的文本作為瀏覽器中顯示的超連結文本。
<span style="white-space:pre"></span><a href="http://blog.csdn.net/lovemenghaibin"> <span style="white-space:pre"></span>孟海濱的部落格 <span style="white-space:pre"></span></a>圖片在網站上我們會看到大量的圖片，大部分格式都是gif的，因為不需要大量的大量的顏色，也有很多高清的圖片，我們會用JPEG格式，所以在網頁中嵌入一副映像要使用<img src="URL" width=n height=n>
<img src="孟海濱.jpg" width="81" height="130" />綜合運用當然我們在編輯網頁的時候就沒有說是單獨用的，所以我們也得總和運用一下，下邊就把我們要的輸入和輸出的一次都為大家表現出來。
<html> <head><title>表單的例子</title></head> <body> <form method="get" action="reg.jsp"> <table> <tr> <td>使用者名稱：</td> <td><input type="text" name="user" value="遊客" size="30" /><br /></td> </tr> <tr> <td>密 碼：</td> <td><input type="password" name="pwd" /></td> </tr> <tr> <td>性別：</td> <td><input type="radio" name="sex" value="1" checked="checked" />男 <input type="radio" name="sex" value="0" />女 </td> </tr> <tr> <td>興趣愛好：</td> <td> <input type="checkbox" name="interest" value="football" /> 足球 <input type="checkbox" name="interest" value="basketball" /> 籃球 <input type="checkbox" name="interest" value="swim" /> 遊泳 <input type="checkbox" name="interest" value="volleyball" /> 排球 </td> </tr> <tr> <td>最高學曆：</td> <td> <select size="1" name="education"> <option value="" selected>...</option> <option value="高中">高中</option> <option value="大學">大學</option> <option value="碩士">碩士</option> <option value="博士">博士</option> </select> </td> </tr> <tr> <td valign="top">簡歷：</td> <td> <textarea name="personal" rows="5" cols="30">簡歷</textarea><br /> </td> </tr> <tr> <td><input type="reset" value="重寫" /></td> <td><input type="submit" value="註冊" /><br /></td> </tr> </table> </form> <a href="http://www.baidu.com"> <img src="孟海濱.jpg" width="81" height="130" /> </a> </body></html>
東西不多，不難，但是卻非常的基礎，所以還是好好的總結了一下，以後好用。因為是剛剛開始的BS，能拿得出來的不多，還請見諒。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
