微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 UI设计 计算机基础
编程手册
大前端 JavaScript 后端开发 数据库 移动端 运维开发 UI设计 计算机基础 XML Web Services
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > HTML常用元素（链接、列表、表格、表单）-------PHP十一期线上培训班 学号：510251 04月03日作业
博主信息
博文 119
粉丝 3
评论 1
访问量 121261
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
HTML常用元素（链接、列表、表格、表单）-------PHP十一期线上培训班 学号：510251 04月03日作业
赵大叔
原创
848人浏览过

HTML常用元素

1、链接

属性 描述
href="url地址" 跳转的目标地址
href="mailto: 1815810057@qq.com" 发邮件
href="tel:183****9413" 打电话
href="demo3.zip" 下载 浏览器不能解析的文档
href="#a + 设置锚点的id" 锚点
target="__self" 当前窗口打开
target="_blank" 新窗口打开

实例演示代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>链接元素</title>
  6. </head>
  7. <body>
  9. <!--1、链接到网址-->
  10. <!--/*taget属性：-->
  11. <!--* _self: 当前窗口打开-->
  12. <!--* _blank: 新窗口打开-->
  13. <!--*-->
  14. <!--*/-->
  15. <a href="www.dashushu.club/demo1.php" target="_blank">赵大叔的网页</a>
  17. <!--2、下载html不能解析的文件-->
  18. <!--/*-->
  19. <!--* download属性：指定下载文件名-->
  20. <!--*/-->
  21. <a href="DASHU.rar" download="下载大叔文件">下载文件</a>
  23. <!--3、发邮件-->
  24. <a href="mailto:1815810057@qq.com">发邮件</a>
  26. <!--4、打电话-->
  27. <a href="tel:1831445****">打电话</a>
  29. <!--5、锚点-->
  30. <a href="#anchor">锚点</a>
  32. <h3 id="anchor" style="margin-top: 1000px;">锚点</h3>
  33. </body>
  34. </html>

代码效果：
http://www.dashushu.club/homework0403/demo1.html

2、列表

序号 标签 描述
1 <ol>, <li> 无序列表
2 <ul>, <li> 有序列表
3 <dl>, <dt>,<dd> 自定义列表

实例演示代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>列表元素</title>
  6. </head>
  7. <body>
  9. <!--1、有序列表-->
  11. <h3>购物清单</h3>
  12. <!--start="3":设置开始编号-->
  13. <ol start="3">
  14.     <li>苹果1斤</li>
  15.     <li>西瓜3斤</li>
  16.     <li>橘子1斤</li>
  17.     <li>葡萄1斤</li>
  18.     <li>香蕉1斤</li>
  19. </ol>
  20. <hr>
  22. <!--2、无序列表:最重要的使用场景，与链接标签配合，生成导航-->
  23. <h3>导航列表</h3>
  24. <ul>
  25.     <li><a href="">标签1</a></li>
  26.     <li><a href="">标签2</a></li>
  27.     <li><a href="">标签3</a></li>
  28. </ul>
  29. <hr>
  31. <!--3、自定义列表：类似名词解释-->
  32. <dl>
  33.     <!-- dt标题-->
  34.     <dt>联系地址</dt>
  35.     <dd>中国.云南.昆明</dd>
  36. </dl>
  38. </body>
  39. </html>

代码效果：
http://www.dashushu.club/homework0403/demo2.html

3、表格

3.1 表格元素

序号 标签 描述
1 <table> 声明表格, 必选
2 <caption> 定义表格标题,可选
3 <thead> 定义表格头格, 只需定义一次, 可选
4 <tbody> 定义表格主体, 允许定义多次 ，必选
5 <th> 定义表格头部中的单元格, 必选
6 <tr> 定义表格中的行, 必选
7 <td> 定义表格主体中的单元格, 必选
8 <tfoot> 定义表格底, 只需定义一次, 可选

3.3 常用属性

序号 属性 所属标签 描述
1 border <table> 添加表格框
2 cellpadding <table> 设置单元格内边距
3 cellspacing <table> 设置单元格边框间隙
4 align 不限 设置单元格内容水平居中
5 bgcolor 不限 设置背景色
6 width 不限 设置宽度
7 height 不限 设置高度

实例演示代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表格元素</title>
  6. </head>
  7. <body>
  9. <!--table:表格声明-->
  10. <table border="1" cellpadding="6" cellspacing="0" width="500" align="center">
  12.     <!--colgroup:按列分组-->
  13.     <colgroup bgcolor= ""> <!-- 设置默认背景-->
  14.         <col>
  15.         <col bgcolor= "">
  17.         <!-- <col span = "2">:跨越2列-->
  18.         <col span = "2">
  19.         <col bgcolor= "">
  20.         <col>
  21.         <col bgcolor="red">
  22.     </colgroup>
  24.     <!-- caption：定义表格标题-->
  25.     <caption style="font-size: 1.5rem; margin-bottom: 10px">
  26.         工资明细表
  27.     </caption>
  29.     <!-- thead：定义表格头部，可选-->
  30.     <thead bgcolor="lightblue">     <!-- thead/tr：定义表格头部，可选-->
  31.     <tr>
  32.         <th>部门</th>
  33.         <th>ID</th>
  34.         <th>MSNV</th>
  35.         <th>姓名</th>
  36.         <th>工作天</th>
  37.         <th>应发</th>
  38.         <th>实领</th>
  40.     </tr>
  41.     </thead>
  43.     <!-- tbody：定义表格主体，必选-->
  44.     <tbody>
  45.     <tr>
  46.         <th rowspan="5">车间管理</th> <!-- rowspan="5"：合并行，合并后，多余的要删除-->
  47.         <td>1</td>
  48.         <td>TH000050</td>
  49.         <td>啊黎</td>
  50.         <td>26</td>
  51.         <td>6000</td>
  52.         <td>5600</td>
  53.     </tr>
  54.     <tr>
  55.         <!--<th>车间管理</th>-->
  56.         <td>2</td>
  57.         <td>TH000051</td>
  58.         <td>啊仁</td>
  59.         <td>26</td>
  60.         <td>6000</td>
  61.         <td>5600</td>
  62.     </tr>
  63.     <tr>
  64.         <!--<th>车间管理</th>-->
  65.         <td>3</td>
  66.         <td>TH000054</td>
  67.         <td>啊清</td>
  68.         <td>26</td>
  69.         <td>6000</td>
  70.         <td>5600</td>
  71.     </tr>
  72.     <tr>
  73.         <!--<th>车间管理</th>-->
  74.         <td>4</td>
  75.         <td>TH000056</td>
  76.         <td>啊梅</td>
  77.         <td>26</td>
  78.         <td>6000</td>
  79.         <td>5600</td>
  80.     </tr>
  81.     <tr>
  82.         <!--<th>车间管理</th>-->
  83.         <td>5</td>
  84.         <td>TH000098</td>
  85.         <td>啊秀</td>
  86.         <td>26</td>
  87.         <td>6000</td>
  88.         <td>5600</td>
  89.     </tr>
  90.     </tbody>
  92.     <!-- tfooter：定义表格尾部，可选-->
  93.     <tfoot>
  94.         <tr bgcolor="#ffe4c4">
  95.             <td>备注</td>
  96.             <td colspan="6">主管以上人员工资保密!!!</td> <!--合并列-->
  97.             <!--<td></td>-->
  98.             <!--<td></td>
  99.             <td></td>
  100.             <td></td>
  101.             <td></td>-->
  102.         </tr>
  103.     </tfoot>
  105. </table>
  107. </body>
  108. </html>

代码效果：
http://www.dashushu.club/homework0403/demo3.html

4、 <form>表单

4.1 表单元素类型

序号 元素 名称 描述
1 <form> 表单容器 表单应该放在该标签内提交
2 <input> 输入控件 由type属性指定控件类型
3 <label> 控件标签 用于控件功能描述与内容关联
4 <select> 下拉列表 用于选择预置的输入内容
5 <datalist> 预置列表 用于展示预置的输入内容
6 <option> 预置选项 与<select>,<datalist>配合
7 <textarea> 文本域 多行文本框,常与富文本编辑器配合
8 <button> 按钮 用于提交表单

4.2 表单元素对应的属性

序号 元素 属性
1 <form> action, method
2 <label> for
3 <input> type, name,value,placeholder…
4 <select> name
5 <datalist> id,与<input list="">关联
6 <option> value, label,selected
7 <textarea> cols, rows,name…
8 <button> type,name

4.3 表单元素的公共属性(并非所有元素都具备)

序号 属性 描述
1 name 元素/控件名称,用做服务器端脚本的变量名称
2 value 提交到服务器端的数据
3 placeholder 输入框的提示信息
4 form 所属的表单,与<form name="">对应
5 autofocus 页面加载时,自动获取焦点
6 required 必填 / 必选项
7 readonly 该控件内容只读
8 disabled 是否禁用

4.4 <input>的type类型

序号 属性 名称 描述
1 type="text" 文本框 默认值
2 type="password" 密码框 输入内容显示为*,不显示明文
3 type="radio" 单选按钮 多个选项中仅允许提交一个(应提供默认选项)
4 type="checkbox" 复选框 允许同时提交一个或多个选项(应提供默认选项)
5 type="hidden" 隐藏域 页面不显示,但数据仍会被提交
6 type="file" 文件上传 本地文件上传,有accept,multiple属性
7 type="submit" 提交按钮 点击后会提交按钮所在的表单
8 type="reset" 重置按钮 点击后会重置输入控件中的内容为默认值
9 type="button" 自定义按钮 使用JS脚本定义按钮点击后的行为

4.5 其它type类型(部分)

序号 属性 名称 描述
1 type="email" 邮箱 输入必须是邮箱格式
2 type="number" 整数 输入必须是整数,可设置范围min,max
3 type="url" URL地址 输入内容必须是有效的URL格式文本
4 type="search" 搜索框 通常与autocomplete配合
5 type="hidden" 隐藏域 页面不显示,但数据仍会被提交
6 type="date" 日期控件 不同浏览器显示略有不同,但功能一致
7 type="color" 调色板 可直接选择颜色, 不同平台略有不同
8 type="tel" 电话号码 手机端会弹出数字小键盘

实例演示代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单元素</title>
  6.     <style>
  7.         form {
  8.             padding: 20px;
  9.             box-sizing: border-box;
  10.             width: 350px;
  11.             box-shadow: 0 0 8px #666666;
  12.             border-radius: 10px;
  13.             margin: auto;
  14.             background-color: dodgerblue;
  15.             display: grid;
  16.             gap: 15px;
  17.         }
  19.         form > section {
  20.             display: grid;
  21.             grid-template-columns: 65px 1fr ;
  22.         }
  24.         h3 {
  25.             text-align: center;
  26.         }
  28.         input[type="image"] {
  29.             justify-self: center;
  30.         }
  31.     </style>
  32. </head
  33. <body>
  35. <h3>用户注册</h3>
  37. <form action="">
  39.     <section>  <!--<section>之间垂直排列-->
  40.     <!--type='text':文本框-->
  41.         <label for="name">用户名：</label> <!--for属性绑定id，实现点击自动焦点-->
  42.         <input type="text" id="name" name="username">
  43.     </section>
  45.     <section>  <!--<section>之间垂直排列-->
  46.         <!--type='password':密码-->
  47.         <label for="psd">密码：</label> <!--for属性绑定id，实现点击自动焦点-->
  48.         <input type="password" id="psd" name="password"> <!--name="password"提交表单到服务器的变量名-->
  49.     </section>
  51.     <section>  <!--<section>之间垂直排列-->
  52.         <!--type="email":密码-->
  53.         <label for="email">邮箱:</label>
  54.         <input type="email" id="email" name="email" placeholder="example@email.com" required>
  55.     </section>
  57.     <!--type="radio":单选框-->
  58.     <section>
  59.         <label for="secret">性别：</label>
  60.         <div class="box">
  61.             <!--name值要下样才能实现单选-->
  62.             <input type="radio" name="gender" id="male"><label for="male">男</label>
  63.             <input type="radio" name="gender" id="female"><label for="female">女</label>
  64.             <input type="radio" name="gender" id="secret"><label for="secret">保密</label>
  65.         </div>
  66.     </section>
  68.     <!--type="checkbox":复选框-->
  69.     <section>
  70.         <label for="anh">爱好：</label>
  72.         <div class="boxs">
  73.             <!--name值用数组形式，方便后台处理-->
  74.             <!--checked默认选项-->
  75.             <input type="checkbox" name="hobby[]" id="programme" value="programme" checked><label for="programme">编程</label>
  76.             <input type="checkbox" name="hobby[]" id="game" value="game"><label for="game">游戏</label>
  77.             <input type="checkbox" name="hobby[]" id="math" value="math"><label for="math">数学</label>
  78.             <input type="checkbox" name="hobby[]" id="anh" value="anh"><label for="anh">英语</label>
  79.         </div>
  80.     </section>
  82.     <!-- select+option:下拉列表-->
  83.     <section>
  84.         <label for="edu">学历:</label>
  85.         <select name="edu" id="edu">
  86.             <option value="1" label="高中">
  87.             <option value="2" label="本科" selected>
  88.             <option value="3" label="研究生">
  89.             <option value="4" label="博士">
  90.         </select>
  91.     </section>
  93.     <!--选项列表-->
  94.     <section>
  95.         <label for="brand">国籍:</label>
  96.         <input type="search" list="nationality" name="brand" id="brand">
  97.         <datalist id="nationality">
  98.             <option value="CH">
  99.             <option value="USA" >
  100.             <option value="VN">
  101.         </datalist>
  102.     </section>
  104.     <!--隐藏域: 数据可以提交, 但页面中没有显示,适合发送敏感或不需要用户输入的数据-->
  105.     <section>
  106.         <input type="hidden" name="user_id" value="1040">
  107.     </section>
  109.     <!--文件上传-->
  110.     <section>
  111.         <label for="uploads">上传头像:</label>
  112.         <input type="file" name="user_pic" id="uploads" accept="image/png, image/jpeg, image/gif">
  113.     </section>
  115.     <!--按钮-->
  116.     <button>提交</button>
  118.     <input type="submit" value="注册" name="submit">
  119.     <input type="reset" value="重填" name="reset">
  122. </form>
  124. </body>
  125. </html>

代码效果：
http://www.dashushu.club/homework0403/demo4.html

5. 注意事项

  • 添加disabled禁用属性的字段数据不会被提交,但是readonly只读属性的字段允许提交
  • 隐藏域的内容不会在HTML页面中显示,但是value属性的数据会被提交
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：代码效果不错, 表单背景有点晃眼
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录