<i>，<iframe>，<img>，<ins>，<input>标签文档

<i>标签

定义斜体
说明：该标签定义斜体(italic)，无语义。

<iframe>标签

<iframe 
src="https://www.86886.wang/login" 
width="500px" 
height="300px" 
scrolling="no"
sandbox="allow-top-navigation allow-same-origin">
</iframe>

说明：该标签创建一个包航另一个文档的内联框架。

width属性

说明：规定iframe的宽度和宽度。值可以是像素和百分比。

height属性

说明：规定iframe的宽度和高度。值可以是像素和百分比。

name属性

说明：定义iframe的名字。为脚本提供一个钩子

src属性

说明：定义框架中文档的URL。可以是相对的或者绝对的URL。

srcdoc属性

说明：该属性定义框架内容，值可以是HTML代码，代码会被渲染到iframe中，他会覆盖掉src属性所指的src。Edge浏览器不支持，在手机端用应该没问题。

sandbox属性

说明：定义对iframe中文档的额外限制。

属性值

allow-same-origin：表示允许iframe内容被视为和当前文档有相同的来源。

allow-top-navigation：表示允许iframe内容从当前文档(包含文档)导航内容。

allow-forms：表示允许提交表单。

allow-scripts：表示允许脚本执行。""空值表示禁止以上所有权限。如果要添加多个属性值则以空格分开。
更多值参考

<img>标签

<img src="https://cdn.86886.wang/blog/1520049901259.jpg" alt="蒲公英" width="150" height="150">

说明：该元素用于插入图片。事实上img标签不会向网页中插入图片，而是链接了图片的URL，img标签创建的是图片的占位空间。

src属性定义图片URL.

alt属性定义当图片无法显示时的替代文本，这两个属性是必需属性。

crossorigin属性表示是否使用CORS完成图像抓取，常用于canvas绘图，这样可以重复使用避免污染。当使用了该属性，默认值是anonymous，表示执行一个跨域请求，但是不会发送证书（如cookie），如果服务器没有设置Access-Control-Allow-Origin,图像的使用会被限制。另一个属性值use-credentials表示发送一个有证书的跨域请求，如果服务器没有设置Access-Control-Allow-Origin,图像的使用同样会被限制。

width属性定义图片的宽度，height属性定义图像的高度，值可以是像素或者百分比，建议为图片添加宽度和高度，这样在加载过程中起到占位符作用，布局不会错乱。

usemap属性定义图像映射，需要配合map标签使用，值为#号加map元素的id。

<img src="https://cdn.86886.wang/blog/1520049901259.jpg" 
alt="image" srcset="https://cdn.86886.wang/blog/1520049901259.jpg 200w, https://cdn.86886.wang/blog/1520049901259.jpg 400w" 
sizes="(min- 600px) 200px, 100px">

srcset该属性常结合sizes属性一起使用，让我们可以创建响应式的且根据屏幕像素密度显示不同的图片的效果。上面的代码中，sizes表示在大于600px的屏幕上设置图片的宽度为200px，在小于600px的屏幕设置图片宽度为100px。srcset表示图片容器宽度为200px时显示第一张图，宽度为400px时显示第二张图片。sizes属性的第一个值是媒体查询条件，第二个值资源的尺寸，多个值可以用逗号分隔开。srcset属性的第一个值是图片URL，第二个值可选用于表示宽度，宽度的表示形式有两种，第一种是一个正整数，以符号w结尾，第二种是一个正浮点数，以符号x结尾。

<ins>标签

原价20元，现价15元

<p>原价<del>20</del>元，现价<ins>15</ins>元</p>

说明：该标签定义被插入文档的文本。这个标签应和del标签配合使用，描述文档的更正和修改。cite属性指向一个URL,该文档用于解释被插入的原因。datatime属性定义被插入的日期和时间。以上两个属性没有浏览器支持，但是搜索引擎可根据它们获取额外的信息。

<input>标签

<!-- type=image建议用button标签代替 -->
<input type="image" src="https://cdn.86886.wang/blog/1520049901259.jpg" alt="提交" width="100px" height="100px">

<input type="file" accept="image/png, image/jpeg" multiple>
<br>

<input type="number" min="5" max="15" step="2">
<br>

<input type="text" placeholder="请输入名字" maxlength="50">
<br>

<form action="#" method="get" id="from1">
<input type="submit" value="确定提交">
<form>
<br>

<input type="text" list="lang" name="language" from="from1">
<datalist id="lang">
  <option value="中文">
  <option value="English">
</datalist>
<br>

<input type="text" name="info" pattern="[A-z]{3}" title="必须为三个字母">

说明：该标签用于收集用户信息。

accept属性

说明：该属性需要配合<input type="file">使用，设置允许的MIME类型。实际应避免使用该属性，由服务器验证更安全。

src属性和alt属性

说明：这两个属性是<input type="image">特有的，定义，主要用于个性化提交按钮，可以用图片作为按钮。src就是图片的URL, alt是图片加载失败的替换文本。

width属性和height属性

说明：定义input的宽度和高度。值可以是像素和百分比

size属性

说明：该属性定义input的长度。值为一个数字，当type="text"和type="password"时size的值表示字体的个数，type为其他类型时表示input的像素宽。比如<input type="text" size="30">表示显示30个字的宽度，<input type="number" size="30">表示input的宽度为30px。该属性不建议使用，应该用css设置。

min，max，step属性

说明：规定输入字段所允许的最小值和最大值。min和max这两个属性常一起使用创建合适的取值范围。适用于以下类型number, range, date, datetime, datetime-local, month, time, week。step属性规定输入字段的合法间隔。

placeholder属性

说明：规定input的输入提示

autofocus，autocomplete，checked, disabled, multiple, readonly, required属性

说明：这些都是逻辑属性。autofocus表示input自动获得焦点。autocomplete表示浏览器自动填充输入域。checked表示type="radio"和type="checkbox"的input为选中状态。disabled表示表单为禁用状态。multiple属性表示type="file"类型的input可以多选。readonly表示表单只读。required表示表单为必填项。

name, value属性

说明：name定义input的名字，value定义input的设定值。 type="checkbox",type="radio"必需设置value值，这样提交到服务器才能正确拿到值。type="button","reset","submit"定义按钮上的显示文本。type="text","password","hidden"定义表单的初始值。value属性无法与type="file"一同使用。

type属性

<input type="date"><br>
<input type="month"><br>
<input type="week"><br>
<input type="time"><br>
<input type="datetime"><br>
<input type="datetime-local">

<!-- value格式-->
date                　　 YYYY-MM-DD
time                 　　hh:mm:ss.s
datetime            　　 YYYY-MM-DDThh:mm:ss:sZ
datetime-local           YYYY-MM-DDThh:mm:ss:s
month            　　　　 YYYY-MM
week                　　 YYYY-Wnn

<!-- 格式说明 -->
YYYY=年
MM=月
DD=日
hh=小时
mm=分钟
ss=秒
s=0.1秒
T=日期与时间之间的分隔符
Z=Zulu时间的时区
Wnn=W周数，从1月的第一周开始是1，直到52

说明：规定input元素的类型。
button、checkbox、file、hidden、image、password、radio、reset、submit、text得到所有浏览器支持的传统输入控件，color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week得到部分浏览器支持的HTML5新增控件。tel，number在手机端会唤起数字键盘，emial在手机端会唤起英文键盘，search会在你输入时加一个清空按钮，url会进行网址格式验证。详细参考

maxlength属性

说明：该属性规定输入字段的最大长度。适用于type="text","password"的input,以字符个数统计。

list属性

说明：该元素定义预选项的数据列表。需要配合datalist元素使用。

form属性

说明：该属性规定input属于哪一个表单(可以是多个)。属性值必须是表单的id,如果要引用多个表单，属性值为空格分割的列表。

pattern属性

说明：该属性用于验证输入的内容是否满足模式。属性值为一个正则表达式,可以使用title属性描述模式，当不满足要求时能够显示出你的描述。

formaction, formenctype, formmethod, formnovalidate, formtarget属性

说明：以上这些属性用于覆盖form表单的属性。属性适用于type="submit",image类型。具体代表的意思在form元素的说明已有介绍。