Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Html基础
Blogger Information
Blog 119
fans 3
comment 1
visits 94591
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
676 people have browsed it

创建 Html 文件

  • Html 文件以.html后缀结尾
  • 电脑文件夹中创建 html 文件时注意文档类型是否为 html
  • 关于文件命名
    • 可以以中文命名，但是不允许使用中文。
    • 不允许使用特殊字符。
    • HTML 文件名推荐使用小写。
    • 创建完 HTML 文件后依然是文本文件格式，那么需要将系统中隐藏已知文件类型扩展名勾选掉

Html 文件标签

  • html 标签分双标签（成对出现）：<p>内容</p>和单标签（不成对出现）：<hr />。
  • 有且只有这两种类型。
  • html 标签不区分大小写，推荐使用小写。

Html 标签属性

颜色值的设置

  • 浏览器都支持颜色名称集合，颜色值是一个关键字或者是一个 RGB 格式的数字，在网页中都用的很多,RGB(255,255,255)。
  • 使用英文单词作为颜色值：red 红色 | green 绿色 | blue 蓝色 | pink 粉色 | purple 紫色等,。
  • 六位的十六进制颜色值：#ff0000 简写：#f00 前两位表示红色，中间两位表示绿色，最后两位表示蓝色,。

Html 注释

  • 注释的内容不会被浏览器解析出来。
  • 格式: <!-- 注释内容 -->

Html 代码格式

  • 任何回车或者空格在源代码中都不起作用，可以使用回车或者空格进行代码排版，要求保持严格的缩进规则，缩进以 tab 键为准。

Html 实体字符

序号 字符 含义
1   空格
2 > <
3 < >
4 © 版权符号 ©

Html 结构

  1. <!--声明头-->
  2. <!DOCTYPE html>
  4. <html>
  5.   <!--头标签-->
  6.   <head>
  7.     <!-- <title></title>设置页面字符串 -->
  8.     <title></title>
  9.     <!-- meta 设置页面字符集 -->
  10.     <meta charset="utf-8" />
  11.     <!-- <link /> 定义两个文档之间连接的关系 -->
  12.     <link />
  13.   </head>
  15.   <!--体标签-->
  16.   <body>
  17.     <!--段落标签-->
  18.     <p></p>
  19.     <!--加粗-->
  20.     <b></b>
  21.     <!--强调某段文本-->
  22.     <strong></strong>
  23.     <!--强调某段文本-->
  24.     <em></em>
  25.     <!--斜体-->
  26.     <i></i>
  27.   </body>
  28. </html>

Html 标签

<head>中常用的标签

  • 内容主要设置给浏览器
序号 标签 解释
1 <title></title> 设置页面字符串
2 <meta charset="utf-8" /> 设置页面字符集
3 <meta http-equiv="content-type" content="text/html;charset=utf-8" /> html4 设置页面字符集,http-equiv 告知浏览器的行为;name 告知浏览器的内容
4 <link /> 定义两个文档之间连接的关系 ,rel = “表示文档与被连接文档之间的关系” type = “被连接文档的类型” href = “被连接文档的地址”
5 <style></style> 加载 CSS 样式
6 <script></script> 加载 JS 脚本
7 <meta name="viewport" content="initial-scale=2.0,width=device-width" /> 阻止移动浏览器自动调整页面大小,name = “viewport” 说明此 meta 标签定义视口的属性;initial-scale = 2.0 意思是将页面放大两倍;width = device-width 告诉浏览器页面的宽度的能与设备的宽度 
  1. <head lang="en">
  2.   <!--
  3.     lang是language的意思,lang="en" 属性对页面声明主要语言，en表示英文，zh-cn表示中文。
  4.     搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你得站点是中文站，这些都是HTML规范，越规范，越容易被收录
  5.   -->
  6.   <!-- 设置页面字符串 -->
  7.   <title></title>
  8.   <!-- 设置页面字符集 -->
  9.   <meta charset="utf-8" />
  10.   <!-- 设置页面字符集 -->
  11.   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  12.   <!--http-equiv 告知浏览器的行为-->
  13.   <!-- 设置5秒后自动跳转到学习猿地 -->
  14.   <meta http-equiv="refresh" content="5;url=https://www.lmonkey.com" />
  15.   <!-- 设置浏览器5秒刷新一次 -->
  16.   <meta http-equiv="refresh" content="5" />
  18.   <!--name 告知浏览器的内容-->
  19.   <!-- 设置网站关键字，多个关键字之间用英文状态下的逗号分割 -->
  20.   <meta name="keywords" content="关键字1,关键字2" />
  21.   <!-- 设置网站的描述 -->
  22.   <meta name="description" content="描述的内容" />
  24.   <!-- 定义两个文档之间连接的关系 -->
  25.   <!--
  26.     rel = "表示文档与被连接文档之间的关系"
  27.     type = "被连接文档的类型"
  28.     href = "被连接文档的地址"
  29.   -->
  30.   <link />
  31.   <!-- 加载标题icon图标 -->
  32.   <link rel="icon" type="" href="" />
  34.   <!--了解级别-->
  35.   <!-- 加载CSS样式 -->
  36.   <link rel="stylesheet" type="text/css" href="" />
  37.   <!-- 书写CSS样式 -->
  38.   <style></style>
  39.   <!-- 书写JS脚本 -->
  40.   <script></script>
  42.   <!--阻止移动浏览器自动调整页面大小-->
  43.   <!--
  44.     name = "viewport" 说明此meta标签定义视口的属性
  45.     initial-scale = 2.0 意思是将页面放大两倍
  46.     width = device-width 告诉浏览器页面的宽度的能与设备的宽度
  47.   -->
  48.   <meta name="viewport" content="initial-scale=2.0,width=device-width" />
  49.   <!--允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半-->
  50.   <meta
  51.     name="viewport"
  52.     content="width=device-width,maximun-scale=3,minimum-scale=0.5"
  53.   />
  54.   <!--禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放。user-scalable=no是禁止缩放-->
  55.   <meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
  56. </head>

<body>中常用的标签

文本与文本格式标签

序号 标签 解释
1 <p></p> 段落标签
2 <b></b> 加粗
3 <strong></strong> 强调某段文本
4 <em></em> 强调某段文本
5 <i></i> 斜体
6 <br/> 换行
7 <hr /> 水平线
8 <u></u> 下划线标签
9 <del></del> 删除线标签
10 <hn></hn> h 族标题标签
11 <bdo></bdo> 覆盖默认的文本方向
12 <sub></sub> 下标文本
13 <sup></sup> 上标文本
14 <details></details> 交互式控件、可见的或者隐藏的补充细节
15 <summary></summary> 为 details 定义标题
16 <dialog></dialog> 定义对话框或窗口
17 <pre></pre> 原格式输出
18 <figure></figure> 用于对元素进行组合。多用于图片与图片描述组合
19 <mark></mark> 标记文本 
  1. <body>
  2.   <!-- <p></p> 段落标签，段落上下都会空一行 -->
  3.   <p>
  4.     <!-- <b></b>, <strong></strong>都显示加粗 -->
  5.     <!-- <i></i> <em></em> 都显示斜体 -->
  6.     <b>28日，</b
  7.     >国家卫健委疾控局副局长吴良有表示，<strong>上海疫情整体呈现明显下降趋势</strong>，社会面疫情风险逐步降低，但防控形势依然严峻，<mark
  8.       ><i>防反弹防外溢任务</i><em>十分艰巨</em></mark
  9.     >。
  10.   </p>
  11.   <!-- <hr>分割线 -->
  12.   <hr />
  13.   近期全国疫情主要有以下几个特点:继续呈现点多面广态势,4月全国共有31个省份261个地市报告本土疫情;规模化与散发聚集性疫情并存;继续呈现多点多源多链的复杂局面。
  14.   上海疫情...
  15.   <hr />
  16.   <!-- h1-h6 标题标签，1-6字体逐渐缩小，H7与默认一样 -->
  17.   <h1>th045386->help大叔</h1>
  18.   <h2>th045386->help大叔</h2>
  19.   <h3>th045386->help大叔</h3>
  20.   <h4>th045386->help大叔</h4>
  21.   <h5>th045386->help大叔</h5>
  22.   <h6>th045386->help大叔</h6>
  23.   <h7>th045386->help大叔</h7>
  24.   <hr />
  26.   <!-- <bdo dir=""></bdo> 默认覆盖文本方向 -->
  27.   <bdo dir="">默认覆盖文本方向</bdo>
  28.   <bdo dir="rtl">默认覆盖文本方向</bdo>
  29.   <hr />
  31.   <!-- <sub></sub> 下标文本
  32.     <sup></sup> 上标文本 -->
  33.   <p>H<sub>2</sub>0<sub>2</sub></p>
  34.   <p>3<sup>2</sup>=9</p>
  35.   <hr />
  36.   <!-- <details></details> 交互式控件、可见的或者隐藏的补充细节，配合<summary></summary>设置标题 -->
  37.   <details>
  38.     <summary>最新上映电影</summary>
  39.     名称：灭绝重启版<br />
  40.     票价：￥45.00<br />
  41.     描述: 灭绝的一生
  42.   </details>
  43.   <hr />
  44.   <!-- <pre></pre> 原样输出文本 -->
  45.   <pre>
  46. 1
  47. +   1
  48. ========
  49. 2
  50.     </pre
  51.   >
  52.   <hr />
  53.   <!-- <figure></figure> 分组组合其他标签 -->
  54.   <figure>
  55.     <img src="./img/s.png" alt="figure标签" title="figure标签" />
  56.     <figcaption>figure的标题</figcaption>
  57.   </figure>
  58.   <br />
  59.   <p>你是<mark>大长腿</mark>吗？</p>
  60. </body>

语义化标签

  • 主要用于页面布局，也可以不用
  1. <!-- <div></div> 区块元素，独占一行 -->
  2. <div></div>
  3. <!-- <span></span>行内元素 -->
  4. <span></span>
  5. <!-- <header></header> 头部 -->
  6. <header></header>
  7. <!-- <footer></footer>脚步 -->
  8. <footer></footer>
  9. <!-- <nav></nav> 导航 -->
  10. <nav></nav>
  11. <!-- <address></address>地址 -->
  12. <address></address>
  13. <section></section>
  14. <!-- <article></article>文章 -->
  15. <article></article>
  16. <!-- <aside></aside>侧边栏 -->
  17. <aside></aside>

列表标签

  1. <!-- <ul></ul>声明为有序列表，li，列表元素 -->
  2. <ul></ul>
  3. <!-- <ol></ol>声明为有序列表，li，列表元素 -->
  4. <ol></ol>
  5. <li></li>
  6. <dl></dl>
  7. <dt></dt>
  8. <dd></dd>

a 链接

  • Html 页面 a 标签出现率 80% 以上
属性 描述
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.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>body常用的标签-a链接</title>
  8.   </head>
  9.   <body>
  10.     <!--
  11.     相对路径而言：相对于自己的位置来查找
  12.         ../ 代表上一级目录
  13.         ./ 当前目录
  15.     绝对路径：从根开始查找
  16.     网络地址：
  17.     https://www.so.com:80/s?ie=utf-8&fr=none&src=360sou_newhome&nlpv=basezc&q=%E7%BE%8E%E5%A5%B3
  18.     https:// 协议
  19.     www.so.com 域名  名字     192.168.100.123
  20.     :80  端口  门牌号  apache 服务器软件
  21.     s 文件简写
  22.     ? 就是访问该页面所需要的参数
  23.     ie  utf-8
  24.     & 表示继续参数礼品(参数)
  25.     fr = none
  26.     http://localhost:63342/lesson01/first.html
  27.     -->
  28.     <!--1、链接到网址-->
  29.     <!--/*taget属性：-->
  30.     <!--* _self: 当前窗口打开-->
  31.     <!--* _blank: 新窗口打开-->
  32.     <!--*-->
  33.     <!--*/-->
  34.     <a href="[www.help10086.net](http://help10086.net/login)" target="_blank"
  35.       >help的网页</a
  36.     >
  38.     <!--2、下载html不能解析的文件-->
  39.     <!--/*-->
  40.     <!--* download属性：指定下载文件名-->
  41.     <!--*/-->
  42.     <a href="DASHU.rar" download="下载大叔文件">下载文件</a>
  44.     <!--3、发邮件-->
  45.     <a href="mailto:1815810057@qq.com">发邮件</a>
  47.     <!--4、打电话-->
  48.     <a href="tel:1831445****">打电话</a>
  50.     <!--5、锚点-->
  51.     <a href="#anchor">锚点</a>
  53.     <h3 id="anchor" style="margin-top: 1000px;">锚点</h3>
  54.   </body>
  55. </html>

多媒体标签

  • img 比较常用
序号 属性 shuomih
1 src 设置图片路径
2 width 设置图片宽度 width、height 一般设置一个，另外一个会等比例缩放
3 height 设置图片高度
4 title 设置图片标题
5 alt 图片不生效时，显示文本 
  1. <!-- img比较常用，其他可参考w3c -->
  2. <img
  3.   src="../lesson01/img/a.jpeg"
  4.   width="200"
  5.   alt="我是HTML5"
  6.   title="我是标题"
  7. />
  8. <!-- <map></map>
  9. <area />
  10. <audio></audio>
  11. <source />
  12. <video></video>
  13. <embed />
  14. <progress></progress>
  15. <meter></meter> 
  16. -->

表格标签

  1. <!-- <table></table>声明表格 -->
  2. <table></table>
  3. <!-- <caption></caption>设置文字，可以上表格标题 -->
  4. <caption></caption>
  5. <!-- <tr></tr> 表格行 -->
  6. <tr></tr>
  7. <!-- <th></th>表头列 -->
  8. <th></th>
  9. <!-- <td></td>表体列 -->
  10. <td></td>
  11. <!-- <thead></thead>表头 -->
  12. <thead></thead>
  13. <!-- <tbody></tbody>表格主体 -->
  14. <tbody></tbody>
  15. <!-- <tfoot></tfoot>表尾 -->
  16. <tfoot></tfoot>
  18. <table border="1" width="480px" cellspacing="0" style="text-align:center;">
  19.   <thead style="background-color: #f50303;height: 40px;font-size: 18px;">
  20.     <!-- <th> -->
  21.     <td>时间</td>
  22.     <td>周一</td>
  23.     <td>周二</td>
  24.     <td>周三</td>
  25.     <td>周四</td>
  26.     <td>周五</td>
  27.     <td>周六</td>
  28.     <!-- </th> -->
  29.   </thead>
  30.   <tbody>
  31.     <tr>
  32.       <td rowspan="4" style="background-color: #b2dcf8;">上午</td>
  33.       <td>vs code编辑器</td>
  34.       <td>css</td>
  35.       <td>php</td>
  36.       <td>js</td>
  37.       <td>laravel</td>
  38.       <td>layui</td>
  39.     </tr>
  40.     <tr>
  41.       <!-- <td>上午</td> -->
  42.       <td>vs code插件</td>
  43.       <td>css</td>
  44.       <td>php</td>
  45.       <td>js</td>
  46.       <td>laravel</td>
  47.       <td>layui</td>
  48.     </tr>
  49.     <tr>
  50.       <!-- <td>上午</td> -->
  51.       <td>html入门</td>
  52.       <td>css</td>
  53.       <td>php</td>
  54.       <td>js</td>
  55.       <td>laravel</td>
  56.       <td>layui</td>
  57.     </tr>
  58.     <tr>
  59.       <!-- <td>上午</td> -->
  60.       <td>html元素</td>
  61.       <td>css</td>
  62.       <td>php</td>
  63.       <td>js</td>
  64.       <td>laravel</td>
  65.       <td>layui</td>
  66.     </tr>
  68.     <tr>
  69.       <td colspan="7" style="text-align:center;background-color:#fafab3">
  70.         中午休息
  71.       </td>
  72.     </tr>
  73.     <tr>
  74.       <td rowspan="3" style="background-color: #b2dcf8;">下午</td>
  75.       <td>html标签</td>
  76.       <td>css</td>
  77.       <td>php</td>
  78.       <td>js</td>
  79.       <td>laravel</td>
  80.       <td>layui</td>
  81.     </tr>
  82.     <tr>
  83.       <!-- <td>下午</td> -->
  84.       <td>table</td>
  85.       <td>css</td>
  86.       <td>php</td>
  87.       <td>js</td>
  88.       <td>laravel</td>
  89.       <td>layui</td>
  90.     </tr>
  91.     <tr>
  92.       <!-- <td>下午</td> -->
  93.       <td>form表单</td>
  94.       <td>css</td>
  95.       <td>php</td>
  96.       <td>js</td>
  97.       <td>laravel</td>
  98.       <td>layui</td>
  99.     </tr>
  100.     <tr>
  101.       <td>备注</td>
  102.       <td colspan="7">放学要完成作业才能睡觉</td>
  103.       <!-- <td>周二</td>
  104.         <td>周三</td>
  105.         <td>周四</td>
  106.         <td>周五</td>
  107.         <td>周六</td> -->
  108.     </tr>
  109.   </tbody>
  110. </table>
  • table 标签常用属性
属性 描述 说明
width 表格宽度
height 表格高度
align 表格在页面的水平摆放位置 取值：left/center/right
background 表格的背景图片
bgcolor 表格的背景颜色
border 表格边框的宽度（以像素为单位） 表格默认没有边框
bordercolor 表格边框颜色 当 border >= 1 时起作用
cellspacing 单元格之间的间距
Cellpadding 单元格内容与单元格边界之间的空白距离大小
  • tr(行)标签常用属性
属性 描述
height 行高
align 行内容的水平对齐方式
valign 行内容的垂直对齐方式
Bgcolor 行的背景颜色
  • td(单元格)标签常用属性
属性 描述
width/height 单元格的宽度和高度
align 设置水平对齐方式，取值 left/center/right
valign 设置垂直对齐方式，可取值 top/middle/bottom
bgcolor 单元格的背景颜色
colspan 设置单元格跨列
rowspan 设置单元格跨行

表单常用标签

标签 含义 说明
<form></form> 为用户输入创建 HTML 表单
<input /> 输入框 type 属性有多个值，对应不同输入框
<label></label> 为 input 元素定义标注(绑定元素) label for 属性值=input 的 id
<button></button> 按钮
<textarea></textarea> 多行文本输入域
<select></select> 下拉列表
<option></option> 为下拉列表定义列表项
<fieldset></fieldset> 将表单内的相关元素分组
<legend></legend> 为 fieldset 定义标题
<optgroup></optgroup> 为下拉列表定义分组
<datalist></datalist> 定义可选数据列表

  • 表单元素属性

    | 序号 | 元素 | 属性 |
    | —— | —————— | ——————————————— |
    | 1 | <form> | action、method |
    | 2 | <input> | for |
    | 3 | <label> | 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 |

  • 表单元素属性含义

    | 序号 | 属性 | 含义 |
    | —— | ——————- | ————————————————————————————————— |
    | 1 | name | 元素/控件名称，用做服务器脚本的变量名称 |
    | 2 | value | 提交到服务器端的数据 |
    | 3 | placeholder | 输入框的提示信息 |
    | 4 | form | 所属的表单，与<form name = ""> 对应 |
    | 5 | autofocus | 页面加载时自动获取焦点 |
    | 6 | required | 必填，必须项 |
    | 7 | readonly | 改控件内容只读 |
    | 8 | disabled | 是否禁用 |
    | 9 | selected | 为下拉列表定义默认选中 |
    | 9 | checked | 为单选、多选定义默认选中 |
    | 10 | min | 用于设定表单的最小值 |
    | 11 | max | 用于设定表单的最大值 |
    | 12 | multiple | 设定当前表单允许同时选中多个文件，适用于 input[type=file] |
    | 13 | pattern | 用于自定义验证规则(需要配合正则的语法) |
    | 14 | step | 取消表单验证，适用于 form 标签 |
    | 15 | formaction | 用于在提交按钮中修改当前表单的提交页面 |
    | 16 | formmethod | 用于在提交按钮中修改当前表单的提交方式 |
    | 17 | formenctype | 用于在提交按钮中修改当前表单提交数据编码类型(不用，文件上传时适用) |
    | 18 | tabindex | 切换索引属性 tab 键 |

  • input 元素 type 属性值

    | 序号 | 属性 | 名称 | 描述 |
    | —— | ————— | ————— | —————————————————————————————————————— |
    | 1 | text | 文本框 | 默认值 |
    | 2 | password | 密码框 | 输入内容显示为* |
    | 3 | radio | 单选按钮 | 多个选项中仅允许提交一个选项，应设置默认值,name 值一样,通过 value 值区分选择 |
    | 4 | checkbox | 复选框 | 允许提交一个或多个选项，应设置默认值，name 值设置为数组形式hobby[] |
    | 5 | hidden | 隐藏域 | 页面不显示但数据仍会提交 |
    | 6 | file | 文件上传 | 本地文件上传，有 accept、multiple 属性,form 提交方式必须为post |
    | 7 | submit | 提交按钮 | 点击会提交按钮所有的表单 |
    | 8 | reset | 重置按钮 | 重置输入控件中的内容为默认 |
    | 9 | button | 自定义按钮 | 一般使用 js 脚本定义点击后的行为 |
    | 10 | email | 邮箱 | 输入肉容必须是邮箱格式 |
    | 11 | number | 整数 | 输入肉容必须是整数格式 |
    | 12 | url | URL 地址 | 输入肉容必须是有效的 URL 格式 |
    | 13 | seaech | 搜索框 | 通常与 autocomplete 配合 |
    | 14 | date | 日期控件 | 不同浏览器可能会有不同 |
    | 15 | color | 调色板 | 可直接选择颜色 |
    | 16 | tel | 电话号码 | 手机端会弹出数字键盘 |

  • button 元素 type 属性值

    | 序号 | 属性 | 名称 | 描述 |
    | —— | ——— | ———— | ——— |
    | 1 | submit | 提交按钮 | 默认值 |
    | 2 | button | 按钮 | |

Html 全局属性

  1. contentEditable 内容可编辑属性; designMode 页面可编辑属性

Html 框架标签

  1. <frameset></frameset>代替body标签定义框架页(H5取消)
  2. <frame />定义frameset标签中每个框架页的内容
  3. <iframe></iframe>在页面中开一块空间连接一个子页面
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>form表单</title>
  6.   </head>
  7.   <body>
  8.     <!-- 表单中有<input type="file"/>则提交方式必须为post,必须设置enctype="multipart/form-data"属性 -->
  9.     <!-- <form action="" method="post" enctype="multipart/form-data"> -->
  10.     <form action="" method="get">
  11.       用户名：
  12.       <input
  13.         type="text"
  14.         autofocus
  15.         name="uaername"
  16.         value=""
  17.         tabindex="2"
  18.         placeholder="请您输入用户名"
  19.       /><br />
  20.       密码：
  21.       <input type="password" required name="pwd" tabindex="1" /><br />
  23.       <!-- name属性值一样 -->
  24.       <!-- label for属性值与input id值一样 -->
  25.       <!-- checked，设置默认选中项 -->
  26.       单选:
  27.       <input type="radio" name="sex" value="0" id="nv" /><label for="nv"
  28.         >女</label
  29.       >
  30.       <label> <input type="radio" name="sex" value="1" checked />男 </label>
  31.       <input type="radio" name="sex" value="2" />保密
  32.       <br />
  33.       <!-- checked，设置默认选中项 -->
  34.       <!-- 复选框，name值要写成类似数组形式，hobby[] -->
  35.       复选： 爱好：
  36.       <input type="checkbox" name="hobby[]" value="0" />吃
  37.       <input type="checkbox" name="hobby[]" value="1" id="he" /><label for="he"
  38.         >喝</label
  39.       >
  40.       <input type="checkbox" name="hobby[]" value="2" checked />玩
  41.       <input type="checkbox" name="hobby[]" value="3" checked />乐
  42.       <br />
  43.       文件上传
  44.       <input type="file" name="pic" id="" />
  45.       <br />
  46.       <input type="submit" value="登录" />
  47.       <hr />
  48.       <!-- 用图片代替提交按钮 -->
  49.       <input type="image" src="./img/a.jpeg" width="50" title="" alt="" />
  50.       <input type="reset" name="" value="重置按钮" />
  51.       <input type="hidden" name="" value="隐藏域" />
  52.       <input type="button" name="" value="按钮" />
  53.       <button>提交按钮</button>
  54.       <button type="submit">提交按钮</button>
  55.       <button type="button">按钮</button>
  56.       <hr />
  58.       <textarea name="address" id="" cols="50" rows="5"></textarea>
  59.       <hr />
  61.       <select name="" id="">
  62.         <option value="">初中</option>
  63.         <option value="">高中</option>
  64.         <option value="" selected>本科</option>
  65.         <option value="">专科</option>
  66.       </select>
  67.       <hr />
  69.       <input type="email" name="" value="" />
  70.       <input type="url" name="" value="" />
  71.       <input type="number" name="" value="" />
  72.       <input type="range" name="" value="" />
  73.       <input type="search" name="" value="" />
  74.       <input type="color" name="" value="" />
  75.       <!-- disabled 禁用 -->
  76.       <input type="tel" name="" value="110" disabled />
  77.       <input type="date" name="" value="" />
  78.       <input type="time" name="" value="" />
  79.       <input type="week" name="" value="" />
  80.       <input type="month" name="" value="" />
  81.       <input type="datetime-local" name="" value="" />
  82.     </form>
  83.   </body>
  84. </html>
Correcting teacher：PHPzPHPz

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