search

博客列表 >HTML常用元素（链接、列表、表格、表单）-------PHP十一期线上培训班 学号：510251 04月03日作业

HTML常用元素（链接、列表、表格、表单）-------PHP十一期线上培训班 学号：510251 04月03日作业

赵大叔
赵大叔原创
2020年04月04日 11:54:38665浏览

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属性的数据会被提交
上一条：4月3日 html常用元素下一条：HTML之链接、列表、表格、表单 2020.4.3作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多