search

博客列表 >HTML常见的表现形式

HTML常见的表现形式

华宥为
华宥为原创
2020年12月09日 22:21:321264浏览

VScord 设置小窍门

“editor.lineNumbers”:off 去掉行号 vscord #列表元素

常见的表现形式

任何类型都可放入列表
1、无序列表
2、有序列表
3、自定义列表

无序列表

  1. <h3>购物车</h3>
  2. <ul>
  3.   <li>牛奶一箱</li>
  4.   <li>苹果10斤</li>
  5.   <li>蛋糕一个</li>
  6. </ul>
  • 牛奶一箱
  • 苹果 10 斤
  • 蛋糕一个

有序列表

  1. <h3>购物车</h3>
  2. <ol>
  3.   <li>牛奶一箱</li>
  4.   <li>苹果10斤</li>
  5.   <li>蛋糕一个</li>
  6. </ol>

1、牛奶一箱
2、苹果 10 斤
3、蛋糕一个

自定义列表

dl+dt+dd…

  1. <dl>
  2.     <dt>姓名:</dt>
  3.       <dd>苹果</dd>
  4.     <dt>地址：</dt>
  5.         <dd>蛋糕路草莓街</dd>
  6.     <dt>联系：</dt>
  7.         <dd>电话：<a href ="tel:1999999999">1999999999</a></dd>
  8.         <dd>邮箱：<a href="mailto:php@163.com">PHP@163.com</a>
  9. </dl>

导航

  1. <ul class="menu">
  2.   <li><a href="">首页</a></li>
  3.   <li><a href="">第一</a></li>
  4.   <li><a href="">第二</a></li>
  5.   <li><a href="">第三</a></li>
  6. </ul>

link css 文件
<link rel="stylesheet" href="style2.css">

图文列表

  1. <ul class="list">
  2.   <li>
  3.     <a href=""><img src="https://....." /></a>
  4.     <a href="">web开发入门</a>
  5.   </li>
  6. </ul>

表格

多列列表=表格
表格也是用一组标签表示的：table,thead,tbody,tr,td/th

  1. <table class="product">
  2.   <caption>
  3.     商品标题
  4.   </caption>
  5.   <thead>
  6.     <tr>
  7.       <td>ID</td>
  8.       <td>品名</td>
  9.       <td>单价</td>
  10.       <td>数量</td>
  11.       <td>金额</td>
  12.     </tr>
  13.   </thead>
  15.   <tbody>
  16.     <tr>
  17.       <td>a100</td>
  18.       <td>手机</td>
  19.       <td>9999</td>
  20.       <td>1</td>
  21.       <td>9999</td>
  22.     </tr>
  23.     <tr>
  24.       <td>p100</td>
  25.       <td>手机</td>
  26.       <td>8888</td>
  27.       <td>1</td>
  28.       <td>8888</td>
  29.     </tr>
  30.   </tbody>
  31. </table>

分页的制作

  1. <p class="page">
  2.   <a href="">首页</a>
  3.   <a href="">5</a>
  4.   <a href="">6</a>
  5.   <a href="">7</a>
  6.   <a href="">8</a>
  7.   <a href="">尾页</a>
  8. </p>

所有的数据必须填充到 td/th 中

表格中行和列的合并

列合并 在<td colspan="7"></td>
行合并 <td rowspan="4"></td>
下面的行列要相应减少

  1. <tbody>
  2.   <tr>
  3.     <td colspan="2"></td>
  4.     <td></td>
  5.     <td>星期一</td>
  6.     <td>星期二1</td>
  7.     <td>星期三</td>
  8.     <td>星期四</td>
  9.     <td>星期五</td>
  10.   </tr>
  11.   <tr>
  12.     <td rowspan="4">上午</td>
  13.     <td>1</td>
  14.     <td>语文</td>
  15.     <td>数学</td>
  16.     <td>外语</td>
  17.     <td>物理</td>
  18.     <td>化学</td>
  19.   </tr>
  20.   <tr>
  21.     <td>2</td>
  22.     <td>数学</td>
  23.     <td>物理</td>
  24.     <td>化学</td>
  25.     <td>语文</td>
  26.     <td>外语</td>
  27.   </tr>
  28.   <tr>
  29.     <td>3</td>
  30.     <td>物理</td>
  31.     <td>化学</td>
  32.     <td>数学</td>
  33.     <td>语文</td>
  34.     <td>外语</td>
  35.   </tr>
  36. </tbody>
  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.     <table class="product" border="1" cellspacing="0">
  10.         <caption>
  11.           课程表
  12.         </caption>
  13.     <tbody>
  14.       <tr>
  15.         <td colspan="2"></td>
  17.         <td>星期一</td>
  18.         <td>星期二1</td>
  19.         <td>星期三</td>
  20.         <td>星期四</td>
  21.         <td>星期五</td>
  22.       </tr>
  23.       <tr>
  24.         <td rowspan="4">上午</td>
  25.         <td>1</td>
  26.         <td>语文</td>
  27.         <td>数学</td>
  28.         <td>外语</td>
  29.         <td>物理</td>
  30.         <td>化学</td>
  31.       </tr>
  32.       <tr>
  33.         <td>2</td>
  34.         <td>数学</td>
  35.         <td>物理</td>
  36.         <td>化学</td>
  37.         <td>语文</td>
  38.         <td>外语</td>
  39.       </tr>
  40.       <tr>
  41.         <td>3</td>
  42.         <td>物理</td>
  43.         <td>化学</td>
  44.         <td>数学</td>
  45.         <td>语文</td>
  46.         <td>外语</td>
  47.       </tr>
  48.       <tr>
  49.         <td>4</td>
  50.         <td>物理</td>
  51.         <td>化学</td>
  52.         <td>数学</td>
  53.         <td>语文</td>
  54.         <td>外语</td>
  55.       </tr>
  56.     </tbody>
  57.   </body>
  58. </html>

课程表

表单

from

  • action=”处理表达的程序”
  • method=”提交类型”
    • GET 类型（默认）
    • POST 类型（敏感性数据）
  • class=”register”

文本框

  1. <input type="text" id="username" /> <label for="username">账号：</label>

id 与 for 相一致

type 控件类型

（type,id,name 数据的变量名,value 数据的内容）

  • type=text 通用的文本框
  • type=email 邮箱型文本框
  • type=password 密码型的文本框
  • type=button 按钮

（required 必选的 placeholder=”提示内容”）

单选按钮和复选框

  1. <lable for="">性别：</lable>
  2. <div>
  3.   <input type="radio" name="gender" value="1" id="male" /><label for="male"
  4.     >男</label >
  5.   <input type="radio" name="gendet" value="0" id="female" checked /><label for="male" >女</label >
  6. </div>

checked 默认的

  1. <label for="">兴趣：</label>
  2. <div>
  3.   <input type="checkbox" name="hobby[]" value="game" id="game" /><label
  4.     for="game"
  5.     >游戏</label >
  6.   <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /><label
  7.     for="shoot"
  8.     >摄影</label >
  9. </div>

复选框的 name 属性值应该写与数组的格式名称，这样才能确保服务器接收到一组值。

下拉列表

select 和 option

  1. <label for="">学历：</label>
  2. <select name="ed" id="edu2">
  3.   <option value="1">初中</option>
  4.   <option value="2">高中</option>
  5.   <option value="3">本科</option>
  6.   <option value="4">研究生</option>
  7.   <option value="5" label="英雄">自学成才</option>
  8. </select>

select 默认项 label 属性优先于“自学成才”

文件域与隐藏域

1、请求必须是 POST
2、enctype=表达编码设置

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
  2. <label for="user-pic">头像：</label>
  3. <input type="hidden" name="MAX_FILE_SIZE" value="80000"/>
  4. <input type="file" name="user_pic" id="user-pic"/>
  5. <div class="user-pic" style"grid-column: span 2"></div>
  6. <label for="user-pic">简历：</label>
  7. <input type="hidden" name="MAX_FILE_SIZE" value="100000"/>
  8. <input type="file" name="user_resume" id="user-resume"/>
  9. <div class="user-resume" style"grid-column: span 2"></div>

文本域

多行的文本框

  1. <label for="comment">备注：</label>
  2. <textarea name="comment" id="comment" cols="30" rows="5"></textarea>

表单控件的 from 属性

  1. <!-- <body>
  2.     <form action="">
  3.         <p>用户名<input type="text" name="name"/></p>
  4.     </form>
  5. </body> -->
  7. <form action="check.php" method="get" id="register">
  8.   //使用form属性，将控件与它所属的表单进行关联绑定
  9.   <div class="box">
  10.     <label for="username">账号：</label>
  11.     <input type="text" from="register" name="username" id="username" />
  12.     <button>提交</button>
  13.   </div>
  14. </form>

尽管 form 属性可以实现将控件写到任何地方，但还是建议写到<from>控件里面

上一条：PHP全栈开发VSCode基础配置和HTML入门下一条：PHP全栈开发VSCode基础配置
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多