简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > a链接，列表，表格和部分表单
Blogger Information
Blog 8
fans 1
comment 0
visits 10143
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
a链接，列表，表格和部分表单
雷斯提亚
Original
836 people have browsed it

0403作业

a链接元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <!--在新窗口打开-->
  10.     <a href="https://www.php.cn/" target="_block">php中文网</a>
  11.     <!--在本窗口打开-->
  12.     <a href="https://www.php.cn/" target="_self">php中文网</a>
  13.     <!--网页解析不了的会进行下载-->
  14.     <a href="0403.zip" target="_block" download="md文件下载">md下载</a>
  15.     <!--用a链接来转接电话（有电话插件）-->
  16.     <a href="tei:12345678911">咨询热线</a>
  17.     <!--用a链接来发送邮箱（有邮箱插件)-->
  18.     <a href="mailto:123456789@qq.com">邮箱咨询</a>
  19.     <!--用a链接设置锚点-->
  20.     <a href="#anchor">跳转到当前页的锚点</a>
  21.     <h3 id="anchor" style="margin-top: 1000xp;">锚点</h3>
  22. </body>
  23. </html>

列表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.    <!-- 无序列表 -->
  10.    <h1>我的朋友</h1>
  11.    <ul>
  12.        <li>张三</li>
  13.        <li>李四</li>
  14.        <li>王五</li>
  15.    </ul>
  16.    <hr>
  17.    <!-- 有序列表 -->
  18.    <ol>
  19.        <h1>出名的动漫</h1>
  20.     <li>刀剑神域</li>
  21.     <li>overlord</li>
  22.     <li>紫罗兰永恒花园</li>
  23.    </ol>
  24.    <hr>
  25.    <!-- 自定义列表 -->
  26.    <dl>
  27.        <dt>HTML</dt>
  28.        <dd>超文本标记语言</dd>
  29.        <dt>css</dt>
  30.        <dd>层叠样式表</dd>
  31.        <dt>javascript</dt>
  32.        <dd>前端脚本通用语言</dd>
  33.    </dl>
  35. </body>
  36. </html>

表格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=\, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <!--表格-->
  10.     <table border="1" cellpadding="9" cellspacing="0" width="85%" height="200" align="center">
  11.         <colgroup bgcolor="lightpink">
  12.           <col>
  13.           <col bgcolor="lightgreen">
  14.           <col bgcolor="yellow" span="2">
  15.           <col>
  16.           <col>
  17.         </colgroup>
  18.         <caption style="font-size: 20px;margin-bottom: 10px;">《刀剑神域》人物列表</caption>
  19.         <thead>
  20.              <tr bgcolor="lightblue">
  21.             <th>派别</th>
  22.             <th>姓名</th>
  23.             <th>真实名字</th>
  24.             <th>性别</th>
  25.             <th>性格</th>
  26.             <th>其他</th>
  27.         </tr>
  28.         </thead>
  29.         <tbody>
  30.             <tr>
  31.                 <td rowspan="5">正义派</td>
  32.                 <td>桐人</td>
  33.                 <td>桐谷和人</td>
  34.                 <td>男</td>
  35.                 <td>勇敢 坚强 正义</td>
  36.                 <td>男主 亚丝娜的cp 结衣的父亲</td>
  37.             </tr>
  38.             <tr>
  39.                 <td>亚丝娜</td>
  40.                 <td>结城明日奈</td>
  41.                 <td>女</td>
  42.                 <td>善良 坦率 文静</td>
  43.                 <td>女主 桐人的cp 结衣的母亲</td>
  44.             </tr>
  45.             <tr>
  46.                 <td>结衣</td>
  47.                 <td>未知</td>
  48.                 <td>女</td>
  49.                 <td>善良 萌</td>
  50.                 <td>负责维护玩家精神健康咨询的AI，后来成为男女主的第一个女儿</td>
  51.             </tr>
  52.             <tr>
  53.                 <td>幸</td>
  54.                 <td>未知</td>
  55.                 <td>女</td>
  56.                 <td>温和 善良</td>
  57.                 <td>第一个喜欢男主的女生，不料早逝</td>
  58.             </tr>
  59.             <tr>
  60.                 <td>莉法</td>
  61.                 <td>桐谷直叶</td>
  62.                 <td>女</td>
  63.                 <td>温和 亲切</td>
  64.                 <td>男主的妹妹，《妖精之舞》游戏中女主</td>
  65.             </tr>
  67.             </tbody>
  68.             <tbody>
  69.                 <tr>
  70.                 <td rowspan="2">反派</td>
  71.                 <td>克拉帝尔</td>
  72.                 <td>未知</td>
  73.                 <td>男</td>
  74.                 <td>邪恶，丧心病狂 阴险</td>
  75.                 <td>微笑棺木的成员，曾在一次任务中想把男主处死</td>
  76.             </tr>
  77.             <tr>
  78.                 <td>精灵王•奥伯龙</td>
  79.                 <td>须乡伸之</td>
  80.                 <td>男</td>
  81.                 <td>变态 人渣 阴险狡诈</td>
  82.                 <td>平时伪装成和善的青年，本性却是利己主义的野心家</td>
  83.             </tr>
  84.         </tbody>
  85.         <tfoot>
  86.             <tr bgcolor="wheat">
  87.                 <td>备注</td>
  88.                 <td colspan="5" align="center">刀剑赛高!</td>
  89.             </tr>
  90.         </tfoot>
  91.     </table>
  92. </body>
  93. </html>

部分表单的演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <h2></h2>
  10.     <form action="">
  11.         <section>
  12.              <label for="username">用户名：</label>
  13.              <input type="text" id="username" name="username" placeholder="不少于8位" required autofocus maxlength="20"/> 
  14.         </section>
  15.         <section>
  16.             <label for="password">密码：</label>
  17.             <input type="password" id="password" name="password" placeholder="不少于6位" required size="10"/> 
  18.        </section>
  19.        <!-- 单选框 -->
  20.        <section>
  21.            <label for="secret" >性别</label>
  22.            <div class="box">
  23.                <input type="radio" name="gender" id="male" value="male"/>
  24.                <label for="male">男</label>
  25.            </div>
  26.            <div class="box">
  27.             <input type="radio" name="gender" id="female" value="female"/>
  28.             <label for="female">女</label>
  29.             <div class="box">
  30.                 <input type="radio" name="gender" id="secret" value="secret" checked/>
  31.                 <label for="secret">保密</label>
  32.             </div>
  33.         </div>
  34.        </section>
  35.        <!-- 复选框 -->
  36.        <section>
  37.            <label for="drogremme">兴趣</label>
  38.            <div class="box">
  39.                <input type="checkbox" name="" id="game" value="game" checked>
  40.                <label for="">游戏</label>
  41.                <input type="checkbox" name="" id="travel" value="travel">
  42.                <label for="">旅游</label>
  43.                <input type="checkbox" name="" id="shoot" value="shoot">
  44.                <label for="">动漫</label>
  45.                <input type="checkbox" name="" id="progremme" value="grogremme" checked>
  46.                <label for="">编程</label>
  47.            </div>
  48.        </section>
  49.         </form>
  50. </body>
  51. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：很好
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！