亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 6
粉絲 0
評(píng)論 1
訪問量 5592
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
table課程表，用戶注冊模板，內(nèi)聯(lián)框架實(shí)現(xiàn)后臺(tái)
超的php學(xué)習(xí)歷程
原創(chuàng)
796人瀏覽過

1.Table課程表

圖片：

<img>標(biāo)簽的alt屬性作用：當(dāng)src引用資源不可用時(shí)，會(huì)以文本方式顯示，同時(shí)更利用搜索引擎抓取，利于SEO。

  1. <img src="https://img.php.cn/upload/course/000/000/015/61a0a9014ed91862.jpg" alt="第十八期前端開發(fā)">第十八期前端開發(fā)封面</img>

鏈接

<a>標(biāo)簽href屬性鏈接跳轉(zhuǎn)地址，target屬性跳轉(zhuǎn)打開頁面的位置，默認(rèn)值是_self

列表

ul+li 無序列表，前面的小黑點(diǎn)可以用css來處理。
ol+li 有序列表，不常用。
dl+dt+dd 自定義列表，dl是自定義列表，dt+dd組合==標(biāo)題+名詞解釋。
hr 水平分割線
html標(biāo)簽大全（html5標(biāo)準(zhǔn)）
https://www.runoob.com/tags/html-reference.html

鐘老師推薦
HTML（超文本標(biāo)記語言）初學(xué)者教程
https://developer.mozilla.org/zh-CN/docs/Web/HTML

table表格

由table+caption+thead+tbody+tfoot 組成。
table 表格標(biāo)簽。
caption 表格標(biāo)題，不要用h2來做，h2是劃分頁面布局時(shí)使用。
thead 表格標(biāo)頭，可省略。
tbody 表格內(nèi)容體，不可省略，避免選擇表格時(shí)選中thead中的tr
tfoot 表格底部，可省略。
tr 代表行
td 代表列，原則是，先行后列。
colspan 表格同行列合并，會(huì)把同行其他列單元格擠出去，直接刪除td即可。
rowspan 表格同列行合并，會(huì)把同列被合并行單元格擠出，需要?jiǎng)h除其他行的td。

課標(biāo)作業(yè)

效果
課程表
代碼：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=table, initial-scale=1.0" />
  7.     <title>課程表作業(yè)</title>
  8.   </head>
  9.   <body>
  10.     <table
  11.       border="1"
  12.       align="center"
  13.       cellspacing="0"
  14.       cellpadding="5"
  15.       width="500"
  16.     >
  17.       <caption>
  18.         <h2>小學(xué)生課程表</h2>
  19.       </caption>
  20.       <thead bgcolor="green">
  21.         <tr>
  22.           <th>時(shí)間</th>
  23.           <th>周一</th>
  24.           <th>周二</th>
  25.           <th>周三</th>
  26.           <th>周四</th>
  27.           <th>周五</th>
  28.         </tr>
  29.       </thead>
  30.       <tbody align="center">
  31.         <tr>
  32.           <td rowspan="4" bgcolor="#e7f7f7">上午</td>
  33.           <td>語文</td>
  34.           <td>數(shù)學(xué)</td>
  35.           <td>英語</td>
  36.           <td>道法</td>
  37.           <td>體育</td>
  38.         </tr>
  39.         <tr>
  40.           <td>語文</td>
  41.           <td>數(shù)學(xué)</td>
  42.           <td>英語</td>
  43.           <td>道法</td>
  44.           <td>體育</td>
  45.         </tr>
  46.         <tr>
  47.           <td>語文</td>
  48.           <td>數(shù)學(xué)</td>
  49.           <td>英語</td>
  50.           <td>道法</td>
  51.           <td>體育</td>
  52.         </tr>
  53.         <tr>
  54.           <td>語文</td>
  55.           <td>數(shù)學(xué)</td>
  56.           <td>英語</td>
  57.           <td>道法</td>
  58.           <td>體育</td>
  59.         </tr>
  60.         <tr>
  61.           <td colspan="6">午休</td>
  62.         </tr>
  63.         <tr>
  64.           <td rowspan="3" bgcolor="#e7f7f7">下午</td>
  65.           <td>語文</td>
  66.           <td>數(shù)學(xué)</td>
  67.           <td>英語</td>
  68.           <td>道法</td>
  69.           <td>體育</td>
  70.         </tr>
  71.         <tr>
  72.           <td>語文</td>
  73.           <td>數(shù)學(xué)</td>
  74.           <td>英語</td>
  75.           <td>道法</td>
  76.           <td>體育</td>
  77.         </tr>
  78.         <tr>
  79.           <td>語文</td>
  80.           <td>數(shù)學(xué)</td>
  81.           <td>英語</td>
  82.           <td>道法</td>
  83.           <td>體育</td>
  84.         </tr>
  85.       </tbody>
  86.       <tfoot align="center" bgcolor="green">
  87.         <tr>
  88.           <td>備注</td>
  89.           <td colspan="5">每天下午15:30-17:30在校寫完作業(yè)才可回家</td>
  90.         </tr>
  91.       </tfoot>
  92.     </table>
  93.   </body>
  94. </html>

2.用戶注冊表單模板

lable標(biāo)簽通過for屬性和input的id屬性進(jìn)行綁定，只要兩個(gè)值一樣就完成綁定，實(shí)現(xiàn)點(diǎn)擊lable中的文本后聚焦到input文本框。
required 強(qiáng)制必填項(xiàng)
autofocus 自動(dòng)聚焦
placeholder 提示信息
checked 默認(rèn)選中狀態(tài)，多選的時(shí)候多個(gè)lable的name值要相同，從而實(shí)現(xiàn)多選。
效果：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=table, initial-scale=1.0" />
  7.     <title>用戶登錄</title>
  8.   </head>
  9.   <body>
  10.     <style>
  11.       body {
  12.         text-align: center;
  13.         background-color: rgb(48, 153, 48);
  14.       }
  15.       .login {
  16.         display: inline-block;
  17.         margin-top: 2em;
  18.       }
  19.       .login .group {
  20.         border: 1px solid #ccc;
  21.         box-shadow: 0 0 5px #888;
  22.         padding: 1em 3em;
  23.         background-color: rgb(147, 211, 147);
  24.         border-radius: 0.5em;
  25.         display: grid;
  26.       }
  28.       .login .group .title {
  29.         padding: 0.5em 1.5em;
  30.         background-color: rgb(147, 211, 147);
  31.         text-align: center;
  32.         box-shadow: 3px 3px 3px #888;
  33.         border-top-left-radius: 1em;
  34.         border-bottom-right-radius: 1em;
  35.       }
  36.       .login .group .userinfo {
  37.         display: grid;
  38.         gap: 1em;
  39.       }
  41.       .login .group input {
  42.         border: none;
  43.         border-bottom: 1px solid;
  44.         background-color:rgb(147, 211, 147);
  45.         outline: none;
  46.       }
  48.       .login .group .submit {
  49.         border: none;
  50.         outline: none;
  51.         height: 2.2em;
  52.         background-color: seagreen;
  53.         color: white;
  54.         color: black
  55.         width: 81%;
  56.         margin-top: 1em;
  57.         margin-left: auto;
  58.       }
  59.       .login .group .submit:hover {
  60.         cursor: pointer;
  61.         background-color: coral;
  62.         box-shadow: 0 0 3px #888;
  63.         transition: 0.3s;
  64.       }
  65.     </style>
  66.     <form action="login.php" method="post" class="login">
  67.       <fieldset class="group">
  68.         <legend for="" class="title">用戶登錄</legend>
  69.         <div class="userinfo">
  70.           <div>
  71.             <label for="email"
  72.               >郵箱:
  73.               <input
  74.                 type="email"
  75.                 value="admin@php.cn"
  76.                 placeholder="請?zhí)顚懹脩羿]箱"
  77.                 id="email"
  78.                 required
  79.                 name="email"
  80.                 autofocus
  81.               />
  82.             </label>
  83.           </div>
  84.           <div>
  85.             <label for="password"
  86.               >密碼:
  87.               <input
  88.                 type="password"
  89.                 placeholder="請?zhí)顚懹脩裘艽a"
  90.                 id="password"
  91.                 required
  92.                 name="password"
  93.               />
  94.             </label>
  95.           </div>
  96.         </div>
  97.         <div>
  98.           <button class="submit">提交</button>
  99.         </div>
  100.       </fieldset>
  101.     </form>
  102.   </body>
  103. </html>

3.內(nèi)聯(lián)框架實(shí)現(xiàn)后臺(tái)

抄寫記錄

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>內(nèi)聯(lián)框架元素的小應(yīng)用:后臺(tái)</title>
  8.     <style>
  9.       body {
  10.         height: 100vh;
  11.         width: 100vw;
  12.         display: grid;
  13.         grid-template-columns: 10em 1fr;
  14.         grid-template-rows: 6em 1fr;
  15.         margin: 0;
  16.       }
  18.       body .header {
  19.         grid-column-end: span 2;
  20.         border-bottom: 1px solid currentColor;
  21.         background-color: #efe;
  22.         padding: 2em;
  23.         display: flex;
  24.         align-items: center;
  25.       }
  26.       body .header div {
  27.         margin-left: auto;
  28.       }
  29.       body .nav {
  30.         background-color: #efc;
  31.         margin: 0;
  32.         padding-top: 1em;
  33.         list-style: none;
  34.       }
  35.       body iframe {
  36.         width: calc(100vw - 10em);
  37.         height: calc(100vh - 6em);
  38.         border-left: 1px solid currentColor;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <!-- 后臺(tái)頂部 -->
  44.     <div class="header">
  45.       <h1>網(wǎng)站后臺(tái)管理</h1>
  46.       <div>
  47.         <span>admin</span>
  48.         <a href="logout.php">退出</a>
  49.       </div>
  50.     </div>
  52.     <!-- 左側(cè)導(dǎo)航 -->
  53.     <ul class="nav">
  54.       <li><a href="demo1.html" target="content">菜單項(xiàng)1</a></li>
  55.       <li><a href="demo2.html" target="content">菜單項(xiàng)2</a></li>
  56.       <li><a href="demo3.html" target="content">菜單項(xiàng)3</a></li>
  57.       <li><a href="demo4.html" target="content">菜單項(xiàng)4</a></li>
  58.       <li><a href="demo5.html" target="content">菜單項(xiàng)5</a></li>
  59.     </ul>
  61.     <!-- 右側(cè)內(nèi)容 -->
  62.     <iframe src="" frameborder="0" name="content"></iframe>
  63.   </body>
  64. </html>
批改老師：PHPzPHPz

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請遵守新聞評(píng)論服務(wù)協(xié)議
1條評(píng)論
超 2022-01-14 11:26:15
html參考教程已經(jīng)更新到文檔中
1樓
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)