【前端学习日志】HTML表格表单注册页面案例+CSS选择器
生活随笔
收集整理的這篇文章主要介紹了
【前端学习日志】HTML表格表单注册页面案例+CSS选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今日學習
- 一、HTML部分
- 1.表格的基本語法
- 2.表頭單元格標簽
- 3.還是表頭單元格標簽
- 4.小說排行榜案例
- 5.合并單元格
- 6.無序列表
- 7.有序列表
- 8.自定義列表
- 9.表單域
- 10.Input表單元素
- 11.lable標簽
- 12.下拉表單
- 13.文本域
- 14.注冊頁面案例
- 二、CSS部分
- 1.CSS標簽選擇器
- 2.類選擇器
- 3.利用類畫三個盒子
- 4.類選擇器的多命名使用
- 5.id選擇器
- 6.通配符選擇器
- 7.文字屬性
- 8.新聞案例
- 三、寫在最后
一、HTML部分
1.表格的基本語法
<tr> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr><tr> <td>甲</td> <td>男</td> <td>18</td> </tr><tr> <td>乙</td> <td>女</td> <td>20</td> </tr><tr> <td>丙</td> <td>男</td> <td>19</td> </tr>2.表頭單元格標簽
<tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr><tr> <td>甲</td> <td>男</td> <td>18</td> </tr><tr> <td>乙</td> <td>女</td> <td>20</td> </tr><tr> <td>丙</td> <td>男</td> <td>19</td> </tr>3.還是表頭單元格標簽
<table align="center" border="1" cellpadding="20" cellspacing="0" width="2s"><tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr><tr> <td>甲</td> <td>男</td> <td>18</td> </tr><tr> <td>乙</td> <td>女</td> <td>20</td> </tr><tr> <td>丙</td> <td>男</td> <td>19</td> </tr></table>效果如下：
4.小說排行榜案例
代碼太長了我直接放結果圖了
效果如下：
5.合并單元格
<table width="500" height="249" border="1" cellpadding="0" cellspacing="0"><tr><td> </td> <td colspan="2"> </td> </tr><tr> <td> </td> <td> </td> <td> </td> </tr><tr> <td> </td> <td rowspan="2"> </td> <td> </td> </tr><tr> <td> </td> <td> </td> </tr>效果如下：
6.無序列表
<body><h4>您喜歡的食物？</h4><ul><li>榴蓮</li><li>臭豆腐</li><li>鯡魚罐頭</li></ul>效果如下：
7.有序列表
<h4>您喜歡的食物？</h4><ol><li>榴蓮</li><li>臭豆腐</li><li>鯡魚罐頭</li></ol>效果如下：
8.自定義列表
<dl><dt>關注我們</dt><dd>新浪微博</dd><dd>官方微信</dd><dd>聯系我們</dd></dl>效果如下：
9.表單域
<form action="demo.php" method="post" name="name1"><!-- 學習基礎時暫時不用表單域提交數據，協商from標簽即可 --><!-- action傳數據 method傳輸方法 name區分姓名 --></form>10.Input表單元素
<form action="demo.php" method="post" name="name1"><!-- text文本框，用戶可以在里面輸入任何字 --><!-- maxlength設置最大值 -->用戶名：<input type="text" name="username" value="請輸入用戶名" maxlength="6"> <br /><!-- password密碼框，用戶看不見輸入的密碼 -->密碼： <input type="password" name="password"> <br /><!-- radio單選按鈕，實現選擇 --><!-- name是表單元素名字 這里性別單選按鈕必須有相同的名字name才可以實現多選1 --><!-- 單選按鈕和復選框可以設置checked，當頁面打開的時候默認選中 -->性別：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"> <br /><!-- checkbox多選按鈕，實現多選 -->愛好：吃飯<input type="checkbox" name="hobby"> 睡覺<input type="checkbox" name="hobby"> 打豆豆<input type="checkbox" name="hobby"> <br /><input type="radio" name="agree" value="agree" checked="checked">我同意此條款 <br /><!-- submit提交按鈕/reset重置 --><input type="submit" value="免費注冊"> <input type="reset" value="重置"><!-- button普通按鈕 后期結合JS一起使用 --><input type="button" value="獲取短信驗證碼"> <br /><!-- file文件上傳 --><input type="file" value="上傳頭像"></form>效果如下：
11.lable標簽
<label for="text">用戶名：</label><input type="text" id="text" > <br />性別：<label for="nan">男</label><input type="radio" id="nan"><label for="nv">女</label><input type="radio" id="nv">lable標簽效果如下：
光標挪到字體時也能選中radio
12.下拉表單
籍貫：<select><option>山東</option><option>北京</option><option>天津</option><option selected="selected">貴州</option></select>效果如下：
13.文本域
<form >留言：<textarea cols="50" rows="5">請留言</textarea></form>效果如下：
14.注冊頁面案例
<h3>青春不常在，抓緊談戀愛</h3><form action="demo.php" method="post" name="name1">姓名：<input type="text" value="請輸入姓名" maxlength="6" name="username"> <br />性別：<input type="radio" value="男" name="sex" id="man"><label for="man">男</label><input type="radio" value="女" name="sex" id="woman"><label for="woman">女</label> <br />生日：<select><option>2000</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option></select><select><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option> </select><select><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option> </select><br />所在地區：<input type="text" name="adress" value="請填寫地址"><br />婚姻狀況：<input type="radio" value="未婚" name="option" id="wei"><label for="wei">未婚</label><input type="radio" value="已婚" name="option" id="yi"><label for="yi">已婚</label><input type="radio" value="離婚" name="option" id="li"><label for="li">離婚</label> <br />學歷：<input type="text" name="xueli" value="請填寫學歷"><br />喜歡的類型：<input type="checkbox" name="hobby" id="wumei"><label for="wumei">嫵媚的</label><input type="checkbox" name="hobby" id="keai"><label for="keai">可愛的</label><input type="checkbox" name="hobby" id="xianrou"><label for="xianrou">小鮮肉的</label><input type="checkbox" name="hobby" id="all"><label for="all">都喜歡</label><br />自我介紹<textarea>自我介紹</textarea><br /><input type="submit" value="免費注冊"><input type="radio" name="agree" checked="checked" >我同意注冊條款和會員加入標準<br /><a href="https://www.bilibili.com/video/BV1uT4y1P7CX/?spm_id_from=333.788.videocard.0.com" target="_blank">我是會員，立即登錄</a><h5>我承諾</h5><ul><li>已滿十八歲，單身</li><li>抱著嚴肅的態度</li> <li>真誠尋找另一半</li></ul></form>效果如下：
以上，html部分學完
開始進入css的學習
二、CSS部分
1.CSS標簽選擇器
<style>/* 標簽選擇器：寫上標簽名 */p{color: rgb(146, 188, 103);}</style> </head> <body><div>我是div</div><div>我是div</div><p>我是段落</p><ul><li>我是ul里面的li</li></ul><ol><li>我是ol里面的ol</li></ol>效果如下：
2.類選擇器
<style>.bule{color: deepskyblue;}.red{color: brown;}</style> </head> <body><!-- .類名{屬性1，屬性值1} --><ul><li class="bule">冰雨</li><li class="red">來生緣</li><li>李香蘭</li><li>生僻字</li><li>江南</li></ul>效果如下：
3.利用類畫三個盒子
<style>.one{width: 100px;height: 100px;background-color: crimson;}.two{width: 100px;height: 100px;background-color: darkgreen;}</style> </head> <body><div class="one"></div><div class="two"></div><div class="one"></div>效果如下：
4.類選擇器的多命名使用
<style>.red{color: firebrick;}.font35{font-size: 35px;}</style> </head> <body><div class="red font35">劉德華 </div>5.id選擇器
<style>/* 只能調用一次 */#pink{color:pink;}</style> </head> <body><div id="pink">邁克爾—杰克遜</div>6.通配符選擇器
<style>*{color:darkmagenta;}</style> </head> <body><div>我的</div><span>我的</span><ul><li>還是我的</li></ul>7.文字屬性
在這里插入代碼片 <style>p{/* 字體 */font-family: '宋體';/* 粗細 */font-weight: 400;/* 大小 */font-size: 30px;/* 樣式 （正常Or傾斜）*/font-style:italic;/* 復合屬性：簡寫的方式 *//* font: font-style font-weight font-sizw/line-height font-family; *//* font:italic 700 16px/20px '微軟雅黑' *//* 文字對齊 */text-align: center;/* 裝飾文本 */text-decoration: underline;/* 文字縮進 */text-indent: 2em;/* 文本間距 */line-height: 26px;}</style>8.新聞案例
效果如下：
三、寫在最后
今天明顯比昨天學的多了
省略了很多做詳細筆記的時間（。）
目前是覺得沒有什么難度的，只是標簽太多容易忘
明天見朋友們~
總結
以上是生活随笔為你收集整理的【前端学习日志】HTML表格表单注册页面案例+CSS选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 利用openVuln API自动化查询思
- 下一篇： 20 个超棒的免费的响应式 Joomla