HTML 制作一个通讯录
生活随笔
收集整理的這篇文章主要介紹了
HTML 制作一个通讯录
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
1.HTML
?1.1?HTML的結構
?1.2?常用標簽
2.代碼展示
3.結果演示
1.HTML
?1.1?HTML的結構? ? ? ? ? ? ? ? ?
<!DOCTYPE HTML> <HTML> <HEAD></HEAD> <BODY></BODY> </HTML> <!DOCTYPE HTML>?1.2 常用標簽
標題標簽:指定特定樣式字體的一組標簽?<h1>一級標簽</h1><h2>二級標簽</h2><h3>三級標簽</h3><h4>四級標簽</h4><h5>五級標簽</h5><h6>六級標簽</h6>屬性:align:指定文本的排列left 靠左center 居中right 靠右 列表標簽 無序列表<ul> 定義一個無序列表<li> 定義列表中的項 屬性:type:定義項目符號的類型disc square circle 有序列表 <ol> <li></li> </ol> img標簽?-- 圖像標簽 <img src="圖片的路徑" alt="代替圖像顯示的文本"/> 必選屬性: src:圖片的路徑 alt:代替圖像顯示的文本 可選屬性: width:寬度?px % height:高度?px % border:邊框的寬度?px表格標簽?-- <table> <table> 定義一個HTML表格 <tr>????????定義表格中的行 <td>????????定義表格中的單元格 <th>????????定義表格中的表頭 table的重要屬性: border 邊框寬度 cellspacing 單元格之間的空白距離 cellpadding 邊框與單元格內容之間的距離 bgcolor 背景顏色 bordercolor 邊框顏色 width 寬度 align 對齊方式 tr重要屬性: align 對齊方式 bgcolor 背景顏色 align 對齊方式 bgcolor 背景顏色 width 寬度 height 高度 colspan 可橫跨的列數 rowspan 可豎跨的行數 <caption> 定義表格的標題2.代碼展示
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>這是一個通訊錄</title></head><body><!-- tr表示行，td表示列，border表示邊框，width寬度，height高度,cellspacing單元格之間的舉例 --><!-- bgcolor表示背景顏色，background表示背景圖片 --><!-- 表格的數據寫在td之間 align=center表示居中，如果放在table標簽讓整個表格居中，如果放在tr讓當前行內容居中 --><table align="center" border="1" width="1000" height="300" cellspacing="0"><!-- h1標題標簽 --><h1 align="center">通訊錄</h1><!-- tr表示行 --><tr bgcolor="blanchedalmond" height="2.5" align="center"><!-- td表示列 --><td width="100">編號</td><td width="100">姓名</td><td width="100">姓別</td><td width="100">年齡</td><td width="100">電話</td><td width="100">郵箱</td></tr><tr bgcolor="azure" height="2.5" align="center"><td width="100">01</td><td width="100">寶貝</td><td width="100">女</td><td width="100">18</td><td width="100">17829918499</td><td width="100">2762077649@qq.com</td></tr><tr bgcolor="azure" height="2.5" align="center"><td width="100">02</td><td width="100">張飛</td><td width="100">男</td><td width="100">19</td><td width="100">18729918499</td><td width="100">2762066649@qq.com</td></tr><tr bgcolor="azure" height="2.5" align="center"><td width="100">03</td><td width="100">李四</td><td width="100">男</td><td width="100">20</td><td width="100">17829918477</td><td width="100">2762033649@qq.com</td></tr><tr bgcolor="azure" height="2.5" align="center"><td width="100">04</td><td width="100">小高</td><td width="100">女</td><td width="100">17</td><td width="100">17799189499</td><td width="100">2762077656@qq.com</td></tr><tr bgcolor="azure" height="2.5" align="center"><td width="100">05</td><td width="100">可愛</td><td width="100">女</td><td width="100">18</td><td width="100">17825218499</td><td width="100">2752077649@qq.com</td></tr></table></body> </html>3.結果演示
總結
以上是生活随笔為你收集整理的HTML 制作一个通讯录的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： STMF4x 固件库V1.25.0
- 下一篇： 前端第一天 HTML基础