LZ-Says：路漫漫其修远兮，虽艰，还得行。
前言
这几天学习练习 HTML 相关内容，感触不少。
当初讨厌 HTML、JS，没曾想，过了几年再次找上门，现在，不得不认真面对了。
啊啊啊～！！！
再战 HTML 标签
前几章，简单叙述了 HTML 相关简述以及标签内容，今天，继续开搞。
但愿人长久，千里共婵娟，奈何，奈何。
1. iframe 内嵌标签
iframe 常用于在一个网页内内嵌另一个网页，使用此，我们可以在一个网页中展示多个网页（不过，文哥说貌似兼容性会有些问题）。
语法如下：
<iframe src="目标地址"></iframe>
而我们下面实践一波：
<body>
<iframe src="https://blog.csdn.net/u012400885" width="30%" height="400px"></iframe>
<iframe src="http://www.apkbus.com/space-uid-904057.html" width="30%" height="400px" frameborder="0"></iframe>
</body>
这里提一个属性：
- frameborder=“0”： 去除边框
效果如下：
接下来，我们想一个场景，假设界面有个按钮，点击在下方某个区域进行展示，这个又如何实现呢？
简单说下思路：
首先，a 标签实现超链接效果，iframe 内嵌实现在同一界面加载不同网页，其次，iframe 指定 name 属性，a 标签 target 指定 iframe name 即可。
如下：
<h6><a href="https://blog.csdn.net/u012400885/article/details/85500381" target="iframe_a">点我有惊喜</a></h6>
<iframe src="file:///Users/heliquan/VSCodePro/HLQStudyDemo/iFrame.html" width="30%" height="400px" frameborder="0" name="iframe_a"></iframe>
运行查看一波：
2. HTML 5 新增标签
- datalist 元素： 规定输入域的选项列表，且规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：而更多时候则是 input 元素的列表属性与 datalist 元素绑定使用。
举个小例子：
<label>
<input list="browsers"/>
<datalist id="browsers">
<option>Internet Explorer</option>
<option>Firefox</option>
<option>Chrome</option>
<option>Opera</option>
<option>Safari</option>
</datalist>
</label>
效果如下：
-
keygen 元素： 提供一种验证用户的可靠方法，此标签规定用于表单的密钥对生成器字段，当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
-
output 元素： 用于不同类型的输出，比如输出计算结果：
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50"/>100 +
<input type="number" id="b" value="50"/>=
<output name="x" for="a b"></output>
</form>
效果如下：
3. HTML5 新增表单属性
HTML5 的 form 和 input 标签添加了几个新属性：
- form 新属性：
- autocomplete : form 或 input 域应该拥有自动完成功能；
- novalidate： 提交表单时不应该验证 form 或 input 域；
- input 新属性：
- autocomplete： form 或 input 域应该拥有自动完成功能；
- autofocus： 在页面加载时，域自动地获得焦点；
- form： 输入域所属的一个或多个表单；
- formaction： 用于描述表单提交的URL地址，会覆盖 form 元素中的action属性，用于 type=“submit” 和 type=“image”；
- formenctype： 描述了表单提交到服务器的数据编码 (只对form表单中 - method=“post” 表单)，会覆盖 form 元素的 enctype 属性。；
- formmethod： 定义了表单提交的方式，覆盖了 form 元素的 method 属性
- formnovalidate： 在表单提交时无需被验证，会覆盖 form 元素的 novalidate 属性；
- formtarget： 指定一个名称或一个关键字来指明表单提交数据接收后的展示，覆盖 form 元素的 target 属性，与 type=“submit” 和 type=“image” 配合使用 height and width；
- list： 规定输入域的 datalist。datalist 是输入域的选项列表；
- min and max： min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束），min、max 和 step 属性适用于以下类型的 input 标签：date pickers、number 以及 range；
- multiple： 规定 input 元素中可选择多个值，适用于以下类型的 input 标签：email 和 file；
- pattern (regexp)： 正则表达式用于验证 input 元素的值，适用于以下类型的 input 标签: text, search, url, tel, email, 和 password；
- placeholder： 提供一种提示（hint），描述输入域所期待的值
- required： 规定必须在提交之前填写输入域（不能为空）
- step： 为输入域规定合法的数字间隔
提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。
注意: autocomplete 适用于 form 标签，以及以下类型的 input 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
个人公众号
不定期发布博文，最近有点忙，感谢老铁理解，欢迎关注～
