Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML常用元素（链接、列表、表格、表单）-------PHP十一期线上培训班 学号：510251 04月03日作业
Blogger Information
Blog 119
fans 3
comment 1
visits 94399
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常用元素（链接、列表、表格、表单）-------PHP十一期线上培训班 学号：510251 04月03日作业
赵大叔
Original
663 people have browsed it

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属性的数据会被提交
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