创建 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 标签

中常用的标签" class="reference-link"><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>

中常用的标签" class="reference-link"><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>