Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML基本元素(二)
Blogger Information
Blog 19
fans 0
comment 6
visits 19084
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
HTML基本元素(二)
葵花宝典
Original
567 people have browsed it

标签元素总结

元素标签说明

  • 列表元素(当容器用,里面可以放任何元素)
    • 无序列表
    • 有序列表
    • 自定义列表
      示例
      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>

注册页面示例

注册页面

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