简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML常见的表现形式
Blogger Information
Blog 13
fans 0
comment 2
visits 14177
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
1249 people have browsed it

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>控件里面

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！