html的实战性介绍
生活随笔
收集整理的這篇文章主要介紹了
html的实战性介绍
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Html 簡介
超文本結構語言
html并非一種編程語言， 而是一種描述超文本文檔的標記語言，用html編寫的超文本文檔成為html文檔。
超文本文檔指的是，可以加入圖片、聲音、動畫、影視等內容，并可以利用超鏈接方便的從一個文件跳轉到網絡上其他主機的另一個文件。
Html標簽結構形態
Html的標簽主要有三種形態，如下所示：
<標簽>元素</標簽>
是開始標簽，中間元素，結束標簽
<標簽 屬性名=“屬性值”>元素</標簽>
屬性表示標簽的信息，其中多個屬性時候，無先后之分，而且需要使用空格分隔，注意是空格分隔
<標簽 屬性名=“屬性值” />
既是開始標簽，也是結束標簽，也成為了單標簽，空標簽，也可以后跟屬性
Html的文檔結構
- Html主要分文檔頭和文檔體兩個，文檔頭是對文檔的必要定義，文檔體才是要顯示的各種文檔信息。
demo：
<html><head>頭部信息，例如標題等等。 是文件頭</head><body>正文部分。 是文件體</body> </html>其中 <html>在最外層，表示中間內容是HTML文檔，一些HTML文檔可忽略<html>標簽
文件頭可以根據需要就行忽略，文件體常常不會被忽略。
Html的常用標簽
<html>標簽
- <html>或者是</html>任意刪除一個或者是全部是允許的，但是在<html>前或者是在</html>后面任意加入一些字符是錯誤的。
<body>標簽
<hn>標簽
- <hn> 標題內容 </hn>, 其中 n 為標題的等級，n 在 1~6之間。
- 可以具有 align 的屬性，用法和 p 的align 一樣
結果展示:
<p>標簽和<br>標簽
- <br>標簽的作用是換行，是一個空標簽，即為<br></br>， 等價于<br />，相當于我們平時的 ‘\n’
- <p>是為了使得文檔排列的整齊，<p>意味著文檔開始，</p>表示文檔的結束。
- <p>便簽有一個屬性 align，對齊一般有ceter, left, right三種
- 有些是時候align在部分瀏覽器上不兼容
顯示效果展示：
-
<p>和<br>標簽的區別
- <br>會強迫調至下一行
- <p>會產生一行空白
- <br>會強制換行，一行， 多個<br>效果會累加，但是<p>會換行，而且多跳一行，但是多個<p>效果同一個<p>是相同的。
運行結果：
- 主要是設置文檔的字體，非常好用，他的屬性如下所示
- size 屬性， 有效值為 1~7，其中default=“3”
- color屬性，可以使"#RRGGBB", 如#1e00ff–>天藍色， 也可以使用顏色的單詞, "red"等等
- face屬性，用來設置問題的字體，如 黑體， 宋體，華文彩云
運行結果
<a>標簽(超文本鏈接) 打開有問題
-
<a>表示連接開始，</a>表示鏈接的結束，他有兩個屬性href和target
-
href 定義了這個鏈接所指的地方， 如 href=“www.baidu.com”
-
target屬性指明了在何處打開鏈接文檔，有兩個屬性值，_blank, _self 一個表示新建標簽頁， 一個表示在當前頁。
運行結果
Html的表格
- 表格就是由行和列組成的柵格，每個單元格可以用來放置 文本或者是圖片
- 表格由 <table>標簽開始，</table>標簽結束，內容由<tr>, <th>, <td>標簽定義，分別表格的行，表格的頭，以及單元格的具體數據
- 其中，<td> 與 <th>標簽類似，但是<th>標簽定義單元格的內容會被 居中加粗顯示?
- tr, th 可以設計 width， height
設置表格的大小、邊框
- 設置表格的大小
- 一般情況下表格的寬度和長度會根據各行各列的總和進行自動調整，倘若固定時格式如下：
- <table width=“w” height=“h”>，需要補上table 的屬性
- 比如<table width=“300” height=“100”> 這里的300,100都指的是像素
- 比如<table width=“50%” height=“10%”>
- 設置表格的邊框
- 表格邊框可以通過 border屬性來調整 0 ~ 多少，自己 可以試試。
- 表格也可以設置居中，不是內容居中，而是總體表格的居中
- align屬性
跨行、列表格的設計（行列同時未成功）
設置表格的大小，邊框用到的是 table上面的屬性 width height border
但是要設計到跨行、跨列的表格需要使用的是單元格的屬性 <th> 或者是 <td>的屬性 colspan 或者 rowspan，屬性值域就是要合并的個數。
表格設計展示
<html><head><title>測試table的使用方法</title></head><body><font size=5 color=#1e00ff> <p align="left"> 表格一 col 合并 </p></font> <table width="300" height="150" border="3"><tr> <th rowspan="4"> 表格測試1</th><th>姓名</th><th>年齡</th></tr><tr> <td>xyg</td><td>21</td></tr><tr> <td>xm</td> <td>20</td></tr><tr> <td>xy</td> <td>50</td></tr></table><font size=6 color=#b22222> <p align="left"> 表格二 row 合并</p></font> <table width="50%" height="25%" border="2"><tr> <th colspan="2"> 表格測試2</th> </tr><tr> <th>姓名</th><th>年齡</th> </tr><tr> <td>xyg</td><td>21</td> </tr><tr> <td>xm</td> <td>20</td> </tr><tr> <td>xy</td> <td>50</td> </tr></table><font size=6 color=#b22222> <p align="left"> 表格三 col row 合并 </p></font> <table width="50%" height="25%" border="1"><tr> <th colspan="2" rowspan="2"> 表格測試3</th> </tr><tr> <th>姓名</th><th>年齡</th> </tr><tr> <td>xyg</td> <td>21</td> </tr><tr> <td>xm</td> <td>20</td> </tr><tr> <td>xy</td> <td>50</td> </tr></table></body> </html>結果展示，可惜行列沒能一塊合并了
Html的表單
- HTML的表單用于收集用戶的輸入，用戶填好信息后通過點擊提交按鈕上傳至服務器。
| text | 單行文本框 |
| password | 密碼框 |
| radio | 單選按鈕 |
| checkbox | 多選按鈕 |
| textarea | 多行文本框 |
| select | 下拉列表 |
| submit | 提交按鈕 |
| reset | 重置按鈕 |
單行文本框text
- 功能：內容本身較短，只有一行，需要用戶輸入
- 屬性有 size 和 value，size屬性用來設置文本框的顯示長度，默認為20， value 用來設置文本框初始值
- 如果不希望內容被編輯(一直顯示初始值value)，可以使用屬性 readonly = “readonly”
密碼框password
- 輸入的內容是看不到的
- 可以有 size value屬性
結果顯示
單選按鈕radio
- 功能呢就是單項選擇
- 為了實現單選的效果，同一列要求 name 屬性一致
- 想要默認選中需要屬性 checked，可以不加屬性值
- 一定要注意示例中 value = “工人”， 外面又有了個工人
運行結果
復選框checkbox
-
仍舊是需要一組復選框選項 name 屬性一致。
-
感覺除了 checkbox 的type和 radio 不同，其余都差不多
運行結果
多行文本框textarea
-
有兩個常用屬性 rows cols 分別表示文本框的行數和列數
-
文本框初始內容需要寫在標簽體中，而不是value中
-
雖然沒有type，不是上面的 input，也沒有value，但是依舊需要 name
結果展示
下拉列表select 配合optioin
- 為了實現下拉列表的多項選擇可以使用multiple屬性
- 支持多項選擇時候size 需要大于1
- option標簽中selected屬性表明默認被選中，option常常僅僅用value,selected屬性，表示數值和被選中
- 列表select常用屬性為size name，用于表示選項的數量和 服務器端的name
提交按鈕
- 完成表單提交
重置按鈕
- 將表單元素恢復至原始狀態
表單
- 一個包含表單元素的區域
- 主要有兩個屬性method和action，method表示表單的提交方式，分為get和post兩種，默認為get提交， action=“deal.jsp"表明表單元素信息是提交給服務器上面的deal.jsp文件來處理
- 表單元素在<form>和</form>之間
- 一個頁面可以有多個表單，表單之間不可以嵌套重疊
下拉列表、提交按鈕、重置按鈕、表單的綜合演示
<html><head><title>小測試</title></head><body><form method="post" action="deal.jsp"><select size="1" name="mysite"><option value="136" selected> 網易 </option><option value="souhu"> 搜狐 </option><option value="sina"> 新浪 </option></select><br /><input type="submit" value="提交" name="b1"><br /><input type="reset" value="重置" name="b2"><br /></form></body> </html>結果顯示
項目開發1:用戶注冊頁面
目標開發效果
html代碼與運行結果
<html><head><title> 用戶注冊界面test </title></head><body><p align="center"><font face="宋體" size=5> 用戶注冊 </font></p><p align="center"<form><table border="1"><tr><td>姓名</td><td><input type="text" name="username" size="30"></td></tr><tr><td>密碼</td><td><input type="password" name="ps" size="30"></td></tr><tr><td>確認密碼</td><td><input type="password" name="ps2" size="30"></td></tr><tr><td>性別</td><td><input type="radio" name="sex" value="男" checked> 男<input type="radio" name="sex" value="女" > 女</td></tr><tr><td>職業</td><td><select size="1" name="identity"><option value="worker" selected>公司員工</option><option value="student">學生</option><option value="teacher">教師</option></select></td></tr><tr><td>電話號碼</td><td><input type="text" name="tel" size="30"></td></tr><tr><td>電子郵箱</td><td><input type="text" name="email" size="30"></td></tr><tr><td>興趣愛好</td><td><input type="checkbox" name="favor" value="Sport"> sport <br /><input type="checkbox" name="favor" value="Reading"> Reading <br /><input type="checkbox" name="favor" value="Travelling"> Travelling <br /><input type="checkbox" name="favor" value="Eating"> Eating <br /></td></tr><tr><td>自我簡介</td><td><textarea rows="5" cols="30" name="tarea"> </textarea></td></tr><tr><td colspan="2"><input type="submit" name="btn1" value="submit"></td></tr></table></form></p></body> </html>細節上還是差一點，下面我們改進一下
細節修改
- 將表格 table, td, th進行align即可
- 同時hn 標題也是可以 align 的
項目開發2:圖書管理系統靜態頁面
作業
1.定義一個期末考試成績的表格，包括，姓名，學號，成績等列。
2.創建一個登錄表單，輸入用戶名和密碼登錄系統。
作業一：
<html><head><title>期末考試成績表格</title></head><body><p align="center"><font size="5" color="#1e00ff"> 作業一：期末考試成績表格</font><br /></p><p>定義一個期末考試成績的表格,包括姓名，學號，成績等列。<font color="#b22222" size="4">不及格使用紅色標記</font></p><p align="center"><table border="2" width="60%" height="30%"><tr><th rowspan="5">18級計算機成績單</th><th>姓名</th><th>學號</th><th>成績</th><th>班級</th></tr><tr><td>邢佑廣</td><td>2018113</td><td>100</td><td>class_4</td></tr><tr><td>小妖怪</td><td>2018114</td><td>100</td><td>class_4</td></tr><tr><td>luckylight</td><td>2018115</td><td>100</td><td>class_4</td></tr><tr><td><font color="#b22222" size="4">掛科</font></td><td>2018116</td><td>59</td><td>class_4</td></tr></table></p></body> </html>結果展示:
作業二：
<html><head><title>登錄表單</title></head><body><p align="center"><font color="#1e00ff" size="6"> 作業二：創建一個登錄表單</font></p><p>創建一個登錄表單，輸入用戶名和密碼登錄系統。</p><h1>作品如下</h1><br /><form><p align="center"><font size="5" color="#b22222"> 歡迎來到本系統 </font> <br /> <br />賬號:<input type="text" name="UserName" size="20" value="請輸入ID"> <br />密碼:<input type="password" name="ps" size="20"> <br \>身份:<input type="radio" name="ident" value="游客" checked> 游客 <input type="radio" name="ident" value="管理"> 管理 <input type="radio" name="ident" value="學生"> 學生 <input type="radio" name="ident" value="教師"> 教師 <br /><input type="reset" name="reset1" value="重置"><input type="submit" name="submit1" value="提交"> <br /><a href="www.ysuregister.com" target="_blank">沒有賬號？點擊此處馬上進行注冊</a></p></form></body> </html>結果展示
總結
以上是生活随笔為你收集整理的html的实战性介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据分析常用Python库：数值计算、可
- 下一篇： 无连接网络通信程序UDP