首页 > Web开发 > 详细

前端之HTML标签等相关内容-51

时间:2020-09-16 21:15:55      阅读:22      评论:0      收藏:0      [点我收藏+]

标签:fence   rop   block   sel   val   led   

1.列表标签

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
?
   <style>
       ul {
           list-style: none;
      }
   </style>
</head>
<body>
<!--无序列表-->
<ul>
   <li>
       <h2>标题栏</h2>
   </li>
   <li>1.秒杀</li>
   <li>2.优惠券</li>
   <li>3.PLUS会员</li>
</ul>
<!--无序列表-->
?
<!--有序列表-->
<ol>
   <li>秒杀</li>
   <li>优惠券</li>
   <li>PLUS会员</li>
</ol>
<!--有序列表-->
?
<!--自定义列表-->
<dl>
   <dt>智商排名</dt>
   <dd>1、egon</dd>
   <dd>2、lxx</dd>
   <dd>3、alex</dd>
   <dd>4、hxx</dd>
?
   <dt>颜值排名</dt>
   <dd>egon</dd>
   <dd>lxx</dd>
   <dd>hxx</dd>
   <dd>alex</dd>
</dl>
<!--自定义列表-->
?
<!--练习题-->
<dl>
   <dt>购物流程</dt>
   <dd>1111</dd>
   <dd>1111</dd>
   <dd>1111</dd>
?
   <dt>配送方式</dt>
   <dd>1111</dd>
   <dd>1111</dd>
   <dd>1111</dd>
?
   <dt>支付方式</dt>
   <dd>1111</dd>
   <dd>1111</dd>
   <dd>1111</dd>
</dl>
?
<hr>
<h1>物品清单</h1>
<ul>
   <li>
       <h2>蔬菜</h2>
       <ul>
           <li>黄瓜</li>
           <li>茄子</li>
           <li>萝卜</li>
       </ul>
   </li>
   <li>
       <h2>水果</h2>
       <ul>
           <li>西红柿</li>
           <li>香蕉</li>
           <li>苹果</li>
       </ul>
   </li>
</ul>
?
</body>
</html>

2.table标签

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<!--
<table border="1px" width="300px" height="300px">
   <tr>
       <td width="500px" height="500px">名字</td>
       <td>年龄</td>
       <td>性别</td>
   </tr>
   <tr>
       <td>egon</td>
       <td>18</td>
       <td>male</td>
   </tr>
   <tr>
       <td>egon2</td>
       <td>28</td>
       <td>male</td>
   </tr>
   <tr>
       <td>egon3</td>
       <td>38</td>
       <td>male</td>
   </tr>
</table>
?
?
<table border="1px" align="center" width="500px" height="500px">
   <tr align="center" valign="top">
       <td align="left" valign="bottom">名字</td>
       <td>年龄</td>
       <td>性别</td>
   </tr>
   <tr align="center" valign="bottom">
       <td>egon</td>
       <td>18</td>
       <td>male</td>
   </tr>
   <tr align="right" valign="center">
       <td>egon2</td>
       <td>28</td>
       <td>male</td>
   </tr>
   <tr>
       <td>egon3</td>
       <td>38</td>
       <td>male</td>
   </tr>
</table>
?
<table border="1px" align="center" width="500px" height="500px" cellspacing="20px" cellpadding="20px">
   <tr >
       <td >名字</td>
       <td>年龄</td>
       <td>性别</td>
   </tr>
   <tr >
       <td>egon</td>
       <td>18</td>
       <td>male</td>
   </tr>
   <tr >
       <td>egon2</td>
       <td>28</td>
       <td>male</td>
   </tr>
   <tr>
       <td>egon3</td>
       <td>38</td>
       <td>male</td>
   </tr>
</table>
-->
?
<!--细线表格的实现方式一-->
<table border="1px" align="center" width="500px" height="500px" cellspacing="0px">
   <tr>
       <td>名字</td>
       <td>年龄</td>
       <td>性别</td>
   </tr>
   <tr>
       <td>egon</td>
       <td>18</td>
       <td>male</td>
   </tr>
   <tr>
       <td>egon2</td>
       <td>28</td>
       <td>male</td>
   </tr>
   <tr>
       <td>egon3</td>
       <td>38</td>
       <td>male</td>
   </tr>
</table>
<hr>
<!--细线表格的实现方式二-->
<table bgcolor="red" border="0px" align="center" width="500px" height="500px" cellspacing="1px">
   <tr bgcolor="white">
       <td>名字</td>
       <td>年龄</td>
       <td>性别</td>
   </tr>
   <tr bgcolor="white">
       <td>egon</td>
       <td>18</td>
       <td>male</td>
   </tr>
   <tr bgcolor="white">
       <td>egon2</td>
       <td>28</td>
       <td>male</td>
   </tr>
   <tr bgcolor="white">
       <td>egon3</td>
       <td>38</td>
       <td>male</td>
   </tr>
</table>
<hr>
<table border="1px" align="center" width="500px" height="500px"
      style="border-collapse: collapse;border: 1px solid green">
   <tr>
       <td>名字</td>
       <td>年龄</td>
       <td>性别</td>
   </tr>
   <tr>
       <td>egon</td>
       <td>18</td>
       <td>male</td>
   </tr>
   <tr>
       <td>egon2</td>
       <td>28</td>
       <td>male</td>
   </tr>
   <tr>
       <td>egon3</td>
       <td>38</td>
       <td>male</td>
   </tr>
</table>
?
?
</body>
</html>

3.table表格合并

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<table border="1px" align="center" width="500px" height="500px"
      style="border-collapse: collapse;border: 1px solid green">
   <caption>老爷们培训学员信息统计</caption>
   <thead>
   <th>姓名</th>
   <th>年龄</th>
   <th>智商</th>
   </thead>
?
   <tbody>
   <tr>
       <td>艾莉克斯</td>
       <td>73</td>
       <td>70</td>
   </tr>
   <tr>
       <td>egon</td>
       <td>18</td>
       <td>70</td>
   </tr>
?
   <tr>
       <td>艾莉克斯</td>
       <td>73</td>
       <td>70</td>
   </tr>
?
?
   </tbody>
?
   <tfoot>
   <td>统计</td>
   <td>43.6</td>
   <td>90</td>
   </tfoot>
</table>
?
?
</body>
</html>

4.form表单

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8080/" method="post">
   <p>
       <label for="inp1">用户名:</label>
       <input id="inp1" type="text" name="username" placeholder="请输入用户名">
   </p>
?
   <p>
       <label for="inp2">密码:</label>
       <input id="inp2" type="password" name="password" placeholder="请输入密码">
   </p>
?
   <p>
       <input type="radio" name="gender" value="male">男
       <input type="radio" name="gender" value="female" checked>女
       <input type="radio" name="gender" value="null">保密
   </p>
?
   <p>
       <input type="checkbox" name="hobbies" value="打篮球">打篮球
       <input type="checkbox" name="hobbies" value="female" checked value="踢足球">踢足球
       <input type="checkbox" name="hobbies" value="null" value="羽毛球" checked>羽毛球
   </p>
?
   <p>
       <input type="text" disabled name="k" value="1111">
   </p>
?
?
   <p>
       <textarea name="comment" id="" cols="30" rows="30" style="resize: none">
      这是评论信息
       </textarea>
   </p>
?
   <p>
       <select name="籍贯" size="2">
           <option value="北京111">北京</option>
           <option value="上海222">上海</option>
           <option value="深圳333" selected>深圳</option>
       </select>
   </p>
?
   <p>
       <select name="籍贯">
           <optgroup label="一线城市">
               <option value="北京111">北京</option>
               <option value="上海222">上海</option>
               <option value="深圳333" selected>深圳</option>
           </optgroup>
           <optgroup label="二线城市">
               <option value="杭州">杭州</option>
               <option value="烟台">烟台</option>
               <option value="德州" selected>德州</option>
           </optgroup>
       </select>
   </p>
   <p>
       <input type="submit" value="登录">
   </p>
</form>
?
</body>
</html>

 

前端之HTML标签等相关内容-51

标签:fence   rop   block   sel   val   led   

原文:https://www.cnblogs.com/usherwang/p/13680736.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号