search

博客列表 >HTML基本元素(二)

HTML基本元素(二)

葵花宝典
葵花宝典原创
2020年12月10日 14:29:09566浏览

标签元素总结

元素标签说明

  • 列表元素(当容器用,里面可以放任何元素)
    • 无序列表
    • 有序列表
    • 自定义列表
      示例
      1.  <ol>
      2.  <h3>语义化标签</h3>
      3.     <li>header头部标记</li>
      4.     <li>main主区域</li>
      5.     <li>nav导航标记</li>
      6.     <li>footer底部标记</li>
      7.     <li>time日期时间标记</li>
      8.     <li>abbr以缩写显示</li>
      9.     <li>pre按源码格式显示</li>
      10.     <li>br换行</li>
      11.     <li>sub下标</li>
      12.     <li>sup上标</li>
      13.     <li>address地址标记,以斜体显示,通常用在footer中</li>
      14.     <li>del删除线</li>
      15.     <li>progress进度条</li>
      16.     <li>b或strong字体加粗</li>
      17.     <li>i或em斜体</li>
      18.     <li>s或del删除线</li>
      19.     <li>br换行</li>
      20.     <li>mark高亮标记,默认黄色背景</li>
      21.     <li>q或blockquote引用,内容加双引号</li>
      22.     <li>span和div一样无语义,用作样式钩子</li>
      23. </ol>
      24. <q>这是引用</q>
      25. <i>这是斜体</i>
      26. <mark>这是高亮</mark>
      27. <tel>电话行不行</tel>
      28. <time>这是日期</time>
      29. <date>这个浏览器也可以识别</date>
      30. <div>
      31.     <h4>列表元素</h4>
      32.     <h5>无序列表,用于做导航</h5>
      33.     <ul>
      34.         <li>第一课</li>
      35.         <li>第二课</li>
      36.         <li>第三课</li>
      37.         <li>第四课</li>
      38.     </ul>
      39.     <h5>有序列表,用于事务</h5>
      40.     <ol start="5">
      41.         <li>周一</li>
      42.         <li>周二</li>
      43.         <li>周三</li>
      44.         <li>周四</li>
      45.     </ol>
      46.     <h5>自定义列表</h5>
      47.     <dl>
      48.         <dt>测试
      49.             <dd>测试1</dd>
      50.         </dt>
      51.         <dt>测试2
      52.             <dd>测试2</dd>
      53.         </dt>
      54.     </dl>
      55. </div>
      56. <h3>图片元素,图文样式排列</h3>
      57. <div>
      58.     <a href="https://www.php.cn/jishu/php/" target="_blank">
      59.     <img src="https://www.php.cn/static/images/index_php_item2_.png?1" alt="当图片显示失败时显示此文字">
      60.     </a>
      61.     <a href="https://www.php.cn/jishu/php/" target="_blank">php实现斗鱼弹幕，一起来欣赏弹幕吧~</a>
      62. </div>

  • 表格元素(table为复合元素,里面分层级别标签如下)

    • table
      • caption 标题,在表格线外显示
      • thead 表头区
        • tr
          • td
          • th 自动加粗距中
      • tbody 表体
        • tr
          • td
      • tfoot 表底部
        • tr
          • td

  • 表单元素(form可以理解为页面中数据提交的作用域)

    • form属性有 action,methode=”默认get”
    • input标签说明(label的for属性与它的ID配合使用,用来获取焦点)
属性 值 说明
type text,文本<br>radio,单选<br>checkbox,复选<br>button,按钮<br>password,密文<br>file,文件上传<br>email,邮件格式<br>hidden,隐藏域 每个值的显示效果都不一样
id 前端使用,可以用用中杠做ID如:user-name 通用属性
name 后端识别使用,要符合后台语言命名规则,如:user_name 与后台交互的数据
required 不用赋值 使当前文本框不能为空
placeholder 文本值 用来提示用户输入
value 文本值 数据内容

  • 隐藏域

    • 示例
    1.   <input type="hidden" name="MAX-FILE_SIZE" value="8000">
    2.   <input type="file" name="file" id="file">
  • 文本域
    1. <textarea name="text-area" id="" cols="30" rows="10"></textarea>

表格练习(课程表)

  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>课程表学习</title>
  7.   </head>
  8.   <body>
  9.     <!-- 表格学习 -->
  10.     <table
  11.       border="1"
  12.       align="center"
  13.       cellspacing="0"
  14.       cellpadding="10"
  15.       width="600"
  16.     >
  17.       <!-- <caption>表格标题,显示在表格边线外</caption> -->
  18.       <caption style="font-size: 1.5em">
  19.         课程表
  20.       </caption>
  21.       <thead>
  22.         <tr align="center" bgcolor="#1fa67a">
  23.           <th></th>
  24.           <th colspan="3">上午</th>
  25.           <th colspan="2">下午</th>
  26.         </tr>
  27.       </thead>
  28.       <!-- <tbody></tbody> 流浏览器自动生成-->
  29.       <tbody>
  30.         <tr align="center">
  31.           <td>周一</td>
  32.           <td>语文</td>
  33.           <td>数学</td>
  34.           <td>英语</td>
  35.           <td>地理</td>
  36.           <td>体育</td>
  37.         </tr>
  38.         <tr align="center">
  39.           <td>周二</td>
  40.           <td>语文</td>
  41.           <td>数学</td>
  42.           <td>英语</td>
  43.           <td>地理</td>
  44.           <td>体育</td>
  45.         </tr>
  46.         <tr align="center">
  47.           <td>周三</td>
  48.           <td>语文</td>
  49.           <td>数学</td>
  50.           <td>英语</td>
  51.           <td>地理</td>
  52.           <td>体育</td>
  53.         </tr>
  54.         <tr align="center">
  55.           <td>周四</td>
  56.           <td>语文</td>
  57.           <td>数学</td>
  58.           <td>英语</td>
  59.           <td>地理</td>
  60.           <td>体育</td>
  61.         </tr>
  62.         <tr align="center">
  63.           <td>周五</td>
  64.           <td>语文</td>
  65.           <td>数学</td>
  66.           <td>英语</td>
  67.           <td>地理</td>
  68.           <td>体育</td>
  69.         </tr>
  70.       </tbody>
  71.       <tfoot>
  72.         <tr>
  73.           <td colspan="6">这里是tfoot表格底部区域</td>
  74.         </tr>
  75.       </tfoot>
  76.     </table>
  77.   </body>
  78. </html>

课程表示例

课程表

注册页面(select radio checkbox table练习)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>注册页面</title>
  6. </head>
  7. <body style="background-color:bisque;">
  8.     <table width="500px" height="600px" cellspacing="0" align="center" background="img/1.jpg">
  9.         <tr>
  10.             <td>
  11.                 <form action="" method="post">
  12.                     <table width="400px" height="500px" cellspacing="0" align="center" cellpadding="10px">
  13.                         <tr>
  14.                             <th>用户注册信息</th>
  15.                         </tr>
  16.                         <tr>
  17.                             <td>姓名:<input type="text" name="username" placeholder="请输入中文" maxlength="8">
  18.                             </td>
  19.                         </tr>
  20.                         <tr>
  21.                             <td>密码:<input type="password" name="password" placeholder="这里是密码" maxlength="8">
  22.                             </td>
  23.                         </tr>
  24.                         <tr>
  25.                             <td>性别:<input type="radio" name="sex" value="man">男
  26.                                     <input type="radio" name="sex" value="wman">女
  27.                                     <input type="radio" name="sex" value="other" checked="">保密
  28.                             </td>
  29.                         </tr>
  30.                         <tr>
  31.                             <td>生日:<input type="date" name="">
  32.                             </td>
  33.                         </tr>
  34.                         <tr>
  35.                             <td>爱好:<input type="checkbox" name="">旅游
  36.                                     <input type="checkbox" name="">游戏
  37.                                     <input type="checkbox" name="">音乐
  38.                                     <input type="checkbox" name="">看书
  39.                                     <input type="checkbox" name="">代码
  40.                             </td>
  41.                         </tr>
  42.                         <tr>
  43.                             <td>星座:<select>
  44.                                         <option>天蝎座</option>
  45.                                         <option>天蝎座</option>
  46.                                         <option>天蝎座</option>
  47.                                         <option>天蝎座</option>
  48.                                         <option>天蝎座</option>
  49.                                         <option>天蝎座</option>
  50.                                     </select>
  51.                             </td>
  52.                         </tr>
  53.                         <tr>
  54.                             <td>邮箱:<input type="email" name="">
  55.                             </td>
  56.                         </tr>
  57.                         <tr>
  58.                             <td>我说:<textarea cols="50" rows="4" placeholder="简单介绍下自...."></textarea>
  59.                             </td>
  60.                         </tr>
  61.                         <tr>
  62.                             <td align="center"><input type="submit" name="" value="提交">
  63.                             </td>
  64.                         </tr>
  66.                     </table>
  67.                 </form>
  68.             </td>
  69.         </tr>
  70.     </table>
  71. </body>
  72. </html>

注册页面示例

注册页面

上一条：巧记Table与Form，代码其实很简单。下一条：基于layui和thinkphp数据表格的数据接口
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多