HTML起步
html介绍
HTML是编写网页的语言，规则由W3C制定。W3C是万维网联盟。中文是超文本标记语言
文件命名
创建html文件有一些规范:
- 不建议使用中文，因为中文是宽字符，在不同操作系统上可能会出现问题
- 不需要使用驼峰规范，英文字母全部使用小写
- 多个单词可以使用
-或_连接，建议使用-字符如user-create.html - 扩展名标准是
.html，当然也可以使用.htm，这是因为早期的文件拓展名只能支持三个字母
URL
URL是统一资源定位符，用于表示资源在网络上的地址，每个部分以/进行分隔
示例：
| 访问协议 | URL |
|---|---|
| http资源访问 | https://www.houdunren.com/edu/front/lesson/298.html |
| FTP文件下载 | ftp://ftp.houdunren.com/download/php.pdf |
| MAILTO邮箱地址 | mailto:2300071698@qq.com |
参数说明
| 参数 | 说明 |
|---|---|
https | 访问协议http或https、ftp、mailto |
www.houdunren.com | 服务器地址 |
edu/front/lesson | 资源目录 |
298.html | 文件名 |
访问路径
绝对路径
绝对路径包含 主机+服务器地址+目录+文件名 的完整路径
网络路径：https://www.houdunren.com/edu/front/lesson/298.html
本地路径：E:/download/music/qqMusic/安和桥 - 宋冬野.mp3
相对路径
相对路径是指相对当前项目根目录的地址，如果你的html文件在test的直接目录下，那么你的项目根目录就是test这个目录。相对于这个根目录去找到其他文件，具体的操作就是：
../(3.html)(上级目录的文件)
./back.png(当前目录下的文件)
基本结构
html代码的基本结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="keyword" content="HTML,Java" />
<meta name="description" content="TonyDon-爱睡懒觉的程序猿" />
<title>这是网页的标题</title>
</head>
<body>
<p> p标签代表段落，因此这里的内容会独占一行 </p>
<!-- 这里的内容不会显示在网页上，它通常用来注释我们的程序代码 -->
</body>
</html>
代码解析:
像上面代码中用尖括号括起来的都叫做标签，比如：<html>标签，<head>标签，<body>标签，<title>标签，<p>标签，<meta>标签等等。他们都是以<标签名>开头，以</标签名>结尾，当然之后我们也会遇到没有</标签名>结尾的标签，这里我们之后在说。不同的标签有不同的意义，比如<title>标签就是网页的标题。学习HTML大部分都在学习标签，就和学习C语言的时候都在学习关键字一样，当你会用所有关键字的时候，C语言也就学完了。同理学习完大部分的HTML标签，HTML也就快学完了。
| 语句 | 描述 |
|---|---|
<!DOCTYPE html> | 这句声明就是告诉浏览器，请使用HTML5的标准来解析这个网页 |
lang="zh-CN" | 网页的语言，如en为英文，zh-CN为中文等，非必选项目 |
<head> | 表示网页的头部，这里的信息都是对网页的整体说明 |
charset="utf-8" | 字符编码 |
keyword | 搜索引擎说明你的网页的关键词 |
description | 向搜索引擎描述网页内容的摘要信息 |
<title> | 网页标题 |
<body> | body表示网页的身体，网页的主要内容都写在这里 |
<p> | p标签代表段落，因此这里的内容会独占一行 |
<!-- 注释 --> | 程序注释 |
HTML基本语法
常用标签
<meta>标签
<meta>标签定义关于 HTML文档的元信息，<meta> 标签通常位于 <head>区域内。它在我们前面的基本结构中出现过，可能大家还不是很清楚<meta>标签怎么用，这里给大家举了<meta>标签的四种用法：
定义文档关键词，用于搜索引擎：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
向搜索引擎描述网页内容的摘要信息:
<meta name="description" content="TonyDon-爱睡懒觉的程序猿">
定义页面作者：
<meta name="author" content="TonyDon">
每30秒刷新页面：
<meta http-equiv="refresh" content="30">
设置字符编码：
<meta charset="utf-8">
<progress>标签
<progress>标签表示进度条标签，用于表示完成任务的进度，格式如下：
<progress value="30" max="100">内容</progress>
效果如下：
内容
文本内容是看不见的，当浏览器不支持<progress>标签的时候，会显示文本内容，但是现在大部分浏览器都会支持<progress>标签，所以不要考虑这个问题。
value代表当前值，max代表最大值
<fieldset>标签
<fieldset>标签内的一组表单元素会在 WEB 浏览器中以特殊的方式显示，比如不同样式的边界、3D效果等。我们现在还不知道什么是表单，这暂且不用管，我们后面会说，大家先看一下格式：
<fieldset>
<legend>TonyDon</legend>
<p>爱睡懒觉的程序猿</p>
</fieldset>
<legend>标签内的内容是标题，而且<legend>标签必须是<fieldset>标签的子标签
效果如下：
文本标签
| 标签 | 描述 |
|---|---|
<p>段落</p> | p标签代表段落，因此这里的内容会独占一行。 |
| 代表一个空格，段落内连续的多个空格HTML只能识别一个空格，使用 显示一个空格 |
<pre> | pre标签为原样输出标签，可以原样输出文本的空格和换行 |
<h1>一级标题</h1> | h标签为标题标签，一共有六级标签，从<h1>标签到<h6>标签，1~6代表不同大小的标题。 |
<br/> | br标签表示换行，放在哪里就在哪里换行，可以在其他标签内使用 |
<hr/> | hr标签代表一条水平横线，用于分割页面内容 |
<span></span> | span标签没有语义，常用于对某些文本特殊控制，但该文本又没有适合的语义标签 |
<div></div> | div标签也没有语义，常用于包裹一块区域 |
<i>斜体</i> | i标签表示斜体 |
<em>斜体</em> | em标签也表示斜体 |
<b>加粗</b> | 加粗字体 |
<del>删除线</del> | 给文字增加删除线 |
<sup>2</sup> | sup标签表示上标字 |
<sub>2</sub> | sub标签表示下标字 |
<u>下划线</u> | 给文字加上下划线 |
<center></center> | 使文字居中 |
语义标签
语义标签在文本的表现形式上没有太大的变化，但是它的标签名有特定的语义内容，可以让代码看起来更加整洁清晰
| 标签 | 描述 |
|---|---|
<strong>强调</strong> | 加粗字体，表示强调 |
<em>斜体</em> | 斜体，表示强调 |
<mark></mark> | 黄色背景色，用于突出显示文本内容，类似我们生活中使用的马克笔 |
<header></header> | 表示一块区域头部 |
<footer></footer> | 表示文档或节的页脚，页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等 |
<nav></nav> | 导航区域 |
<small></small> | 小号字体，用于设置描述、声明等文本 |
<address></address> | 用于设置联系地址等信息，一般将saddress放在footer标签中 |
<time></time> | time标签用来定义日期或时间，或者两者 |
<main></main> | HTML5中使用main标签表示页面主要区域，一个页面中main元素最好只出现一次 |
<abbr title="TonyDon">TD</abbr> | abbr标签用于描述一个缩写内容，title的内容是鼠标放置的显示内容 |
<aside></aside> | 使用 aside 用于设置与主要区域无关的内容，比如侧面栏的广告等 |
<ins></ins> | 文字带下划线，常用于修正内容，或者插入字 |
<s></s> | 标签显示效果与 del 相似，但语义用来定义那些不正确、不准确或没有用的文本 |
<code></code> | 语义表示显示代码块内容，一般需要代码格式化插件来完成代码高亮，本身没有高亮 |
<cite></cite> | 内容斜体，表示它所包含的文本对某个参考文献的引用，或文章作者的名子 |
<blockquote></blockquote> | 表示大段的引用 |
<article></article> | article 标签通常表示一块独立的内容区域 |
<section></section> | 使用 section 定义一个区块，一般是一组相似内容的排列组合 |
<q></q> | 用于表示行内引用文本，在大部分浏览器中会加上引号 |
图像处理
使用一张图片就是使用<img>标签，格式如下：
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度" title = "百度" height = "100px">
效果如下：
属性介绍：
| 属性 | 描述 |
|---|---|
src | 图片路径，可为相对路径，绝对路径或者URL |
title | 鼠标滑到图片上的文本提示 |
alt | 图片加载失败后的文本提示 |
height/weight | 图片尺寸 |
alt，title这些属性也可以不写，html标签中的属性都是可选的
图片的显示
图片在网页中自左往右显示，并默认以底部对齐。当一行放不下所有图片时，会在下一行显示
调整图片的大小
<img src="images/01.jpg" height="100px">
height和weigth只需设定一个就可以了，图片会成比例进行放缩- 如果两个都设置，需要保证比例不变，否则图片会变形
height = "100%"表示撑满屏幕px是像素单位
链接
a标签
链接就是使用<a>标签实现的超链接，格式如下：
<a href="http://www.tonydon.club/" target="_blank" title="爱睡懒觉的程序猿">TonyDon</a>
href属性为超链接的打开地址，也可以打开站内的文件，或者跳转到当前网页的某个位置，这个为锚点，我们之后再说
<a href = "#">，href的值为#时，代表空链接
target属性规定在何处打开链接文档，属性值如下：
| 值 | 描述 |
|---|---|
_blank | 在新窗口中打开被链接文档。 |
_self | 默认。在相同的框架中打开被链接文档。 |
_parent | 在父框架集中打开被链接文档。 |
_top | 在整个窗口中打开被链接文档。 |
framename | 在指定的框架中打开被链接文档。 |
title为鼠标滑上去的提示文本
图片链接
有时候我们想让一张图片也可以点击跳转链接，其实我们只需要在a标签内部写上img标签就可以了，如下：
<a href="https://www.baidu.com/">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</a>
跳转锚点
锚点是使用id进行跳转(通过name值进行跳转已经被淘汰了)，id是一个元素的id值是唯一的，不会有两个元素的id值是一样的，所以可以使用id的值进行跳转。id值是我们自己赋值的，如果没有给id赋值，那这个元素就没有id值。我们可以在a标签内的href属性设置为改网页内某个元素的id值，要在id值前面加上#，如下：
<a href="#tonydon" target="_blank" title="tonydon">点击跳转</a>
<div style="background: red; height: 3000px;"></div>
<div id="tonydon">爱睡懒觉的程序猿</div>
你也可以跳转到另一个页面中的某个锚点，如下：
<a href="002.html#tonydon" target="_blank" title="baidu">点击跳转</a>
发送邮件
可以通过超链接直接打开电脑的第三方邮件客户端发送邮件，如下：
<a href="mailto:1400615611@qq.com">发送邮件</a>
注意事项：我们一般不这么写，因为会被爬虫爬取信息，通常使用以下内容代替
请把 # 改成 @ 后发送邮件，1400615611@qq.com
<a href="mailto:1400615611#qq.com">发送邮件</a>
拨打电话
在手机上直接点击或弹出拨号面板拨打电话，如下：
<a href="tel:13102058011">拨打电话</a>
显示图片
将href设置为某张图片的地址时，点击超链接显示某张图片
<a href="../../img/19102604.jpg">
图片
</a>
如何下载图片及贴图
下载图片
从网页中下载图片，有两种方式：一是直接右击图片下载，二是F12打开源码，从中查找图片下载地址
使用PhotoShop切图
-
添加图片
-
选择切图工具
-
切取
-
保存
-
常用快捷键
快捷键 调整大小 alt + 鼠标滚轮保存 ctrl + alt + shift + s
列表
有序列表
<ol>标签定义有序列表. 列表排序默认以阿拉伯数字数字来显示。使用<li>标签来定义列表选项。
有序列表的格式如下：
<ol start="10" type="1" reversed>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
start属性为数字排列的起始数字，type属性规定排序的形式，默认值为1，也就是阿拉伯数字排列，其他值如下：
| type | 效果 |
|---|---|
type = "a" | 以小写字母显示 |
type = "A" | 以大写字母显示 |
type = "i" | 以小写罗马字符显示 |
type = "I" | 以大写罗马字符显示 |
reversed属性表示排序反转，它的值为reversed，本来应该写成reversed="reversed"，但是当属性的唯一值和属性本身重名时，可以直接写属性名
无序列表
无序列表就是没有数字或者字母这种顺序排列的列表，<ul>标签表示HTML页面中项目的无序列表，将<ul>标签与<li>标签一起使用，创建无序列表。
<ul type="disc">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
type属性是规定列表的项目符号的类型，默认为实心圆disc，属性值如下：
| type | |
|---|---|
type = "disc" | 实心圆 |
type = "circle" | 空心圆 |
type = "square" | 黑方块 |
描述列表
<dl>标签为描述列表，<dt>标签为标题，<dd>标签为解释内容，示例如下：
<dl>
<dt>TonyDon</dt>
<dd>爱睡懒觉的程序猿</dd>
<dd>睡懒觉</dd>
</dl>
效果如下：
- TonyDon
- 爱睡懒觉的程序猿
- 睡懒觉
表格和多媒体
表格
<table>标签为表格；<thead>为表格头部内容；<tbody>标签为表格主体，内容默认左对齐；<tfont>标签为表格的尾部，常用于写一些小字内容，不常用，文本内容格式和<tbody>一样；<tr>标签为行标签，<tr>标签内的<td>标签为列，<th>标签也是一列，但是文本内容会加粗并居中对齐。<caption>标签为表格标题，不常用，示例如下：
<table border="1">
<caption>表格标题</caption>
<thead>
<tr>
<th>编号</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>TonyDon-爱睡懒觉的程序猿</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表格尾部</td>
<td>用于尾部内容</td>
</tr>
</tfoot>
</table>
效果如下：
| 编号 | 标题 |
|---|---|
| 001 | TonyDon-爱睡懒觉的程序猿 |
| 表格尾部 | 用于尾部内容 |
不规则表格
水平合并
在<td>标签内设置colspan属性值，来进行多个列的合并，也就是水平合并，colspan的值表示合并几列，格式如下：
<table border="1">
<caption>表格标题</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小红</td>
<td colspan="2">女</td>
<!-- <td>18</td> -->
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>19</td>
</tr>
</tbody>
</table>
效果如下：
| 姓名 | 性别 | 年龄 |
|---|---|---|
| 小红 | 女 | |
| 小明 | 男 | 19 |
垂直合并
在<td>标签内设置rowspan属性值，来进行多个行的合并，也就是垂直合并，rowspan的值表示合并几行，格式如下：
<table border="1">
<caption>表格标题</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小红</td>
<td rowspan="2">女</td>
<td>18</td>
</tr>
<tr>
<td>小明</td>
<!-- <td>男</td> -->
<td>19</td>
</tr>
</tbody>
</table>
效果如下：
| 姓名 | 性别 | 年龄 |
|---|---|---|
| 小红 | 女 | 18 |
| 小明 | 19 |
视频播放
Adobe与苹果公司对 FLASH都不支持或消极状态，这时HTML提供对视频格式的支持，<video>标签用于视频播放，除了使用html提供的标签来播放视频外，也有很多免费或付费的插件，如video.js 、阿里云播放器 等等
示例如下：
<video src="http://tonydon.club/wp-content/files/video/天空幻境.mp4" width="600" height="300"
autoplay muted controls poster="http://tonydon.club/wp-content/uploads/2020/06/ext.jpg" preload="none" loop>
</video>
效果如下：
属性解析：
| 属性 | 描述 |
|---|---|
src | 要播放的视频的 URL |
width | 设置视频播放器的宽度 |
height | 设置视频播放器的高度 |
autoplay | 如果出现该属性，则视频在就绪后马上播放（自动播放） |
muted | 播放时默认静音 |
controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
poster | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像 |
preload | 控制视频何时加载，如何加载 |
loop | 如果出现该属性，则视频会循环播放 |
preload属性详解
1. 如果使用 `"autoplay"`，则忽略该属性。
2. 如果视频观看度低可以设置为 `preload="none"` 不加载视频数据减少带宽。
3. 如果设置为 `preload="metadata"` 值将加载视频尺寸或关键针数据，目的也是减少带宽占用。
4. 设置为 `preload="auto"` 时表示将自动加载视频数据
音频播放
<audio>标签为音频播放，它的大部分属性和<video>标签属性一样，大家参考<video>标签的属性就可以了，示例如下：
<audio src="http://tonydon.club/wp-content/uploads/2020/05/MELANCHOLY-原唱_-White-Cherry-嘻嘻琳.mp3" loop controls preload="auto"></audio>
效果如下：
表单
<form> 标签
使用 <form> 标签可以向服务器传输数据，action属性的值就是后台脚本的url，可以是php脚本。<input>标签用于创建交互式控件，这类控件是基于 web 表单的，它可以接收用户的数据、信息。通过赋予不同的type属性值，得到不同的控件，之后会详细介绍。每个input标签必须有一个name值，否则后台无法接收到数据，不过我们现在还没有接触到后天，所以不用在意这一点。 <form> 标签内method属性是提交的方式，默认为GRT，它时候提交一些小型的数据，而且会在浏览器的搜索栏中明文显示提交的内容。示例如下：
<form action="" method="GET">
<fieldset>
<legend>表单</legend>
姓名：<input type="text" name="name">
学号：<input type="text" name="id">
<input type="submit">
</fieldset>
</form>
效果如下：
method属性
当需要考虑数据的安全性，或者有大型数据的提交时，比如用户的头像，上传的文件等等，可以使用POST值，示例：
<form action="" method="POST">
<fieldset style="border-width: 2px;
border-style: groove;
border-color: threedface;
border-image: initial;">
<legend>表单</legend>
姓名：<input type="text" name="name">
<input type="submit">
</fieldset>
</form>
<input>标签
<input>标签有不同的web控件，但比如文本输入框这类控件中的内容是需要提交的，<input>标签只有在<form>标签内，才能提交
不同的type属性值，对应不同的控件，以下为所以的type属性值：（不同控件我们之后会详解）
| type | 控件 |
|---|---|
type = "text" | 文本输入框 |
type = "password" | 密码输入框 |
type = "radio" | 单选框 |
type = "checkbox" | 复选框 |
type = "button" | 普通按钮 |
type = "submit" | 提交按钮 |
type = "reset" | 重置按钮 |
type = "file" | 文件选择框 |
type = "url" | 输入内容为URL地址 |
type = "email" | 输入内容为邮箱 |
type = "tel" | 电话号，移动端会调出数字键盘 |
type = "search" | 搜索框 |
type = "hidden" | 隐藏表单,用于提交后台数据 |
type = "number" | 只能输入数字，会有上下箭头调整数字大小 |
type = "date" | 日历输入框 |
input内有不同的属性：
| 属性 | 描述 |
|---|---|
name = "" | 定义input元素的名称，后台接收字段名 |
id = "" | 作为标签的唯一标识 |
value = "" | 规定input元素的值(初始值) |
type = "text" | 规定input元素的类型，表单类型默认为 text |
placeholder = "" | 规定帮助用户填写输入字段的提示 |
disabled | 禁用选择 |
checked | 默认选择 |
required | 必须输入 |
maxlength | 允许最大输入字符数 |
size | 表单显示长度，一般用不使用而用 css 控制 |
readonly | 只读，可提交到后台 |
<label>标签
<label> 标签可以与<input>标签联立，让用户在使用表单的时候能够有更好的体验。
看下面的代码：我们将<label>标签内的for属性赋值为某个<input>标签的id值，这样的话<label> 标签就与<input>标签联立起来了，当我们用鼠标点击<label>标签内的文本时，后面的<input>标签就回获得焦点。
<form action="">
<label for="name">姓名</label>
<input type="text" name="name" id="name">
</form>
效果如下：
姓名还有一种方法就是，直接把<input>标签抱在<label>标签内部，这样也可以将<label> 标签就与<input>标签联立起来，而且也不需要设置for和id值了，如下:
<form action="">
<label>学号：
<input type="text" name="id">
</label>
</form>
效果如下：
学号：所有控件
文本输入
type = "text"为文本输入框，如下：默认情况下也为文本输入框，不写type = "text"时，也是文本输入框
<form action="">
<input type="text">
</form>
效果如下：
密码输入
type="password"为密码输入框，输入的文本会显示*号，如下：
<form action="">
<input type="password">
</form>
效果如下：
邮箱输入
type="email"为邮箱输入框，如果我们输入的时候不是邮箱，那么提交的时候会提示我们输入错误
<form action="">
<input type="email">
<input type="submit">
</form>
URL输入
type="url"为URL输入框，如果我们输入的时候不是URL地址，那么提交的时候会提示我们输入错误
<form action="">
<input type="url">
<input type="submit">
</form>
电话输入
type = "tel"为电话输入框，在桌面端和文本输入框一样，也可以输入字母，但是在移动端会弹出电话输入框，方便我们的输入
<form action="">
<input type="tel">
<input type="submit">
</form>
输入数字
type = "number"为数字输入框，只能输入数字，还会再右侧出现上下小箭头调节数字大小
<form action="">
<input type="number">
</form>
效果如下：
隐藏表单
type = "hidden"为隐藏表单，我们看不见，但是可以提交到后台
<form action="">
<input type="hidden">
</form>
表单提交
type = "submit"为提交按钮：
<form action="">
<input type="submit">
</form>
也可以使用<button>标题来提交表单:
<form action="">
<input type="text">
<button type="submit">提交</button>
</form>
文本输入域
<textarea>标签为文本域，cols为列数，rows为行数
<form action="">
<label for="11">介绍</label>
<br>
<textarea name="info" id="11" cols="30" rows="10"></textarea>
</form>
下拉列表框
<select>为下拉列表框，<option>为一个选项
<form action="">
<label for="">栏目
<select name="" id="">
<option value="">TonyDon</option>
<option value="">爱睡懒觉的程序猿</option>
</select>
</label>
</form>
效果如下：
栏目 TonyDon 爱睡懒觉的程序猿列表选择框可以多选，设置multiple属性，但是要将<select>标签的name属性设置为数组，不然只能提交到后台一个值：
<form action="">
<label for="">栏目
<select name="name[]" id="" multiple>
<option value="1">TonyDon</option>
<option value="2">爱睡懒觉的程序猿</option>
</select>
</label>
</form>
可以设置默认选中：使用selected属性
<form action="">
<label for="">栏目
<select name="" id="">
<option value="1">TonyDon</option>
<option value="2" selected>爱睡懒觉的程序猿</option>
</select>
</label>
</form>
效果如下：
栏目 TonyDon 爱睡懒觉的程序猿选项还可以分组：
<form action="">
<label for="">栏目
<select name="" id="">
<optgroup label="昵称">
<option value="1">TonyDon</option>
<option value="2" selected>爱睡懒觉的程序猿</option>
</optgroup>
<optgroup label="编程语言">
<option value="3">Java</option>
<option value="4">JavaScript</option>
</optgroup>
</select>
</label>
</form>
效果如下：
栏目 TonyDon 爱睡懒觉的程序猿 Java JavaScript单选框
type = "radio"为单选框：name值要相同，id和value值不同，设置<label>标签，当我们点击文字时，也会选中单选框。checked属性为默认选中
<form action="">
<input type="radio" name="sex" id="boy" value="boy" checked>
<label for="boy">男孩</label>
<input type="radio" name="sex" id="girl" value="girl">
<label for="girl">女孩</label>
</form>
效果如下：
男孩 女孩多选框
type = "checkbox"为多选框，操作和单选框一样，checked属性为选中
<form action="">
注册方式：
<input type="checkbox" name="email" id="email" value="email" checked>
<label for="email">邮箱注册</label>
<input type="checkbox" name="mobile" id="mobile" value="mobile">
<label for="mobile">手机注册</label>
</form>
效果如下：
注册方式： 邮箱注册 手机注册文件上传
type = "file"为文件上传
<form action="" enctype="multipart/form-data">
<input type="file">
</form>
可以上传多个文件：
<form action="" enctype="multipart/form-data">
<input type="file" multiple name="image[]">
</form>
可以限制上传的文件类型：accept属性设置
<form action="" enctype="multipart/form-data">
<input type="file" multiple name="image[]" accept=".png,.jpg">
</form>
日历选择
type = "date"为日历选择：可以选择日历
<form action="">
<input type="date">
</form>
效果如下：
同时我们还可以设置其实日期和截至日期：
<form action="">
<input type="date" min="2020-05-01" max="2024-06-01">
</form>
效果如下：
还可以设置间隔的天数：如下为间隔五天
<form action="">
<input type="date" min="2020-05-01" max="2024-06-01" step="5">
</form>
时间选择
type = "time"为时间选择：可以选择时间
<form action="">
<input type="time">
</form>
效果如下：
周选择
type = "week"为周选择：可以选择周
<form action="">
<input type="week">
</form>
效果如下：
datetime-local
type = "datetime-local"可以同时选择年月日和时间：
<form action="">
<input type="datetime-local" min="2020-05-01" max="2024-06-01">
</form>
搜索框
type = "search"为搜索框：
<form action="">
<input type="search">
</form>
可以设置搜索的数据，使用<datalist>标签：
<form action="">
<input type="search" list="td">
<datalist id="td">
<option value="英雄联盟">电子竞技</option>
<option value="TonyDon">爱睡懒觉的程序猿</option>
</datalist>
</form>
效果如下：
电子竞技 爱睡懒觉的程序猿属性详解
设置初始值
我们可以设置文本的初始值，通过给value属性赋值来实现：
<form action="">
<input type="text" value="TonyDon">
</form>
效果如下：
提示字段
我们也可以设置提示字段，当文本输入框没有输入内容的时候会显示的提示字段，通过placeholder属性来实现：
<form action="">
<input type="text" placeholder="请输入账号">
</form>
效果如下：
设置必须输入
可以设置某个表单必须输入，通过required属性设置：
<form action="">
<input type="text" required>
</form>
最大输入字符
还可以设置最大输入的字符数量：
<form action="">
<input type="text" maxlength="10">
</form>
效果如下，可以体验一下：
只读字段
使用readonly属性设置表单内容只读，不可更改，但是可以发给后台
<form action="">
<input type="text" value="只读内容" readonly>
</form>
效果如下：
禁用表单
使用disable属性禁用表单，表单内容只能看，无法修改，也无法发送给后台
<form action="">
<input type="text" value="禁用表单" disabled>
</form>
效果如下：
历史数据的自动提示
使用autocomplete="on"属性设置历史的数据自动提示：
<form action="">
<input type="text" autocomplete="on">
<input type="submit">
</form>
感谢阅读！
个人博客：tonydon.club/
