标签：文档流 调整 屏幕 按钮 移动端 决定 range sele 取颜色
HTML5语义化标签
1.<article>
表示包含一个文档、页面、应用程序或网站中的一段独立的内容，也就是说，它能够独立地被发布或重新使用。可适用的地方有：一篇博客、一个论坛帖子、一篇新闻报道、一个用户评论...
2.<header>
一般被放置在页面的顶部，或者页面中某个区块元素的顶部，包含整个页面或某个区块的标题、简介等信息。
一个文档中可以包含多个header标签
header标签不一定只能显示在页面的上方，它的内容决定该地方是否需要使用header标签
可以为body、article、section和aside增加header标签
3.<footer>
一般被放置在页面的底部，或者页面中某个区块元素的底部。
4.<nav>
表示页面的导航，可以通过导航连接到网站的其他页面，或当前页面的其他部分。搜索引擎和屏幕阅读器会根据nav标签确定网站内容，但并不是任何一组超链接都适合放在nav标签中，譬如登录、隐私权政策与使用条款...可实际去一些网站上检查，却发现大多都是使用div，很少用到这些，但新标准新趋势，学习学习没错。
5.<aside>
包含的内容不是页面的主要内容，具有独立性，是对页面内容的补充。可适用的地方有：页面侧边栏、广告、友情链接、文章引语（内容摘要）...
6.<section>
一个主题性的内容分组，通常包含一个头部（header），也有可能包含一个尾部（footer）。
div 和 section 区别
div应用更广泛，如果需要定义一个区域样式即可使用
section包含一个明确的主题，通常含有一个标题
7.<main>
显示页面的主题内容，每个页面只能包含一个main标签，main标签中不包含网站标题、log、主导航、版权声明等信息。
8.<figure>
标签规定独立的流内容（图像、图表、照片、代码等等），figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
9.<figcaption>
<figcaption> 标签定义 figure 元素的标题（caption），"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
10.<time>
表示一个日期，或者一个时间，或者同时表示一个日期和时间值。
表单控件：
email：电子邮箱文本框,跟普通的没什么区别
- 当输入不是邮箱的时候,验证不通过
- 移动端的键盘会发生变化
tel：电话号码
url：网页的URL
search：搜索引擎
- chrome下输入文字后，会多出一个关闭的X
range：特定范围内的数值选择器
- min、max、step(步数)
- 例子： 用js来显示当前数值
number：只能包含数字的输入框
- 输入框末尾有两个箭头 上为加 下为减
color：颜色选择器
- 点击显示颜色版
datetime：显示完整日期
- 类似select选择样式
datetime-local：显示完整日期， 不包含时区
time：显示时间，不含时区
date：显示日期{年月日}
week：显示周{年月日周}
mouth：显示月{年月}
表单属性
1. placeholder 属性
当用户还没有输入值的时候，输入型控件可以通过 placeholder 属性向用户显示描性说明或者提示信息。使用 placeholder属性只需要将说明性文字作为该属性值即可。除了普遍的文本输入框外，email、number、url 等其他类型的输人框也都支持placeholder 属性。
placeholder 属件的使用方法如下：
<label> text:: <input type="text" placeholder="write me"></label>
2、autocomplete 属性
浏览器通过 autocomplete 属性能够知晓是否应该保存输入值以备将来使用。例如不保存的代码如下：
<input type="text" name="mr" autocomplete="off"/>
autocomplete 属性应该用来保护敏感用户数据，避免本地测览器对它们进行不安全地存储。对于 autocomplete 属性，可以指定“on”“off " 与““(不指定) 这三种值。不指定时，使用浏览器的默认值(取决于浏览器的决定)。把该属性值设为on 时，可以显示指定候补输入的数据列表。
使用 <detailst>标签与 list 属性提供候补输入的数据表，自动完成时，可以将该 <detalist> 标签中的数据作为候补输人的数据在文本框中自动显示。autocomplete 属性的使用方法如下所示：
<input type="text" name="mr" autocomplete="on" list="mrs"/>
3. autofocus 属性
给文本框、选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点。目前为止要做到这一点需要使用JavaScript, autofocus 属当的使用方法如下所示:
<input type="text" autofocus>
只有当一个页面是以使用某个控件为主要目的时，才对该控件使用 autofocus 属性。一个页面只能有一个控件有该属性。
从实际角度来说，不要随便滥用该属性。
4. list 属性
在 HTML5 中，单行文本框增加了一个 list 属性，该属性的值为某个 <datalist>标签的 id。<datalist>标签也是 HTML5中新增标签，该标签类似于选择框( select )，但是当用户想要设置的值不在选择列表之内时，允许其自行输入。该标签本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。
5. min 和 max 属性
通过设置 min 和 max 属性，可以将 range 输入框的数值输入范围限定在最低值和最高值之间。这两个特性既可以只设置一个，也可以两个都设置，当然还可以都不设置，输入型控件会根据设置的参数对值范围做出相应调整。
【例】创建一个表示型大小的 range 控件，值的范围为 0%~100%，代码如下：
<input id="confidence" name="mr" type="range" min="o" max="100" value="0">
上述代码会创建一个最小值为0、最大值为100 的 range 控件。
默认的 min 为 0,max 为 100。
6.step 属性
对于输入型控件，设置其 step 特性能够制定输入值递增或递减的梯度。
例如，按如下方式表示型大小 range 控件的 step 属性设置为 5：
<input id="confidence" name="mr" type="range" min="0" max="100" step="5" value="0">
设置完成后，控件可接受的输入值只能是初始值与 5 的倍数之和。也就是说只能输入0、5、10 … 100， 至于是输入框还是滑动条输人则由浏览器决定。
step属性的默认值取决于控件的类型，对于range 控件，step默认值为1。
7. required 属性
一旦为某输入型控件设置了 required 属性，那么此项必镇，否则无法提交表单。
以文本输入框为例，要将其设置为必填项，按照如下方式添加 required 属性即可。
<input type="text" id="firtname" name="mr‘ reaquired>
required 属性是最简单的一种表单验证方式。
8. email 输入类型
email 类型的<input>标签是一种专门用来输人 email 地址的文本框。提交时如果该文本框中内容不是 email 地址格式的文字则不允许提交，但是它并不检查 email 地址是否存在。和所有的输入类型一样用户可能提交带有空字段的表单，除非该字段加上了 required 属性。
email 类型的文本框具有 multiple 属性，它允许在该文本框中输入一串以逗号隔开的有效 email 地址。当然，这不是要求用户使用该 email 地址列表，浏览器可能使用复选框从用户的邮件客户端或手机通讯录中很好地取出用户的联络人的列表。
email 类型的 <input>标签的使用方法如下：
<input type= "email" name="email" value="1530738736@qq.com"/>
9. url输入类型
url 类型的<input>标签是一种专门用来输人 url 地址的文本框。提交时如果该文本框中内容不是 url 地址格式的文字，则不允许提交。
url 类型的<input>标签的使用方法如下:
<input name="url" type="url" value="http://www.baidu.com"/>
10. date类型
date 类型的 input 标签以日历的形式方便用户输人。
Date类型的<input>标签的使用方法如下:
<input name="date1" type="date" value="2012 09-25"/>
11. time类型
time 类现的<input>标签是一种专门用来输入时间的文本框， 并且在提交时会对输入时间的有效性进行检查。
time 类型的 <input> 标签的使用方法如下：
<input name="time1" type="time" value="10:00"/>
12. datetime 输入类型
datetime 类型的 input 标签是一种专门用来输入 UTC 日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。
datetime 类型的 input 标签的使用方法如下：
<input name="datetime1" type="datetime" />
13. datetime-local 输入类型
datetime-local 类型的 input 标签是一种专门用来输入本地日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。
datetime-local 类型的<input> 标签的使用方法如下:
<input name="datetime-local" type="datetime-local"/>
14. month输入类型
month 类型的<input>标签是一种专门用来输人月份的文本框， 并且在提交时会对输入的月份的有效性进行检查。
month类型的<input>标签的使用方法如下:
<input name="moth1" type="month" Value="2012-09"/>
15. week输入类型
week 类型的 <input> 标签是一种专门用来输入周号的文本框，并且在提交时会对输入的周号有效性进行检查。它可能是个简单的输入文本框， 允许用户输入一个数字；也可能更复杂。更精确。
week 类型的<input>标签的使用方法如下:
<input name="week1" type="week" value="2012-w39"/>
16. number输入类型
number 类型的<input>标签是一种专门用来输入数字的文本框，并且在提交时会检查其中的内容是否为数字。它与 min、 max、 step 属性能很好地协作。
number 类型的 <input> 标签的使用方法如下：
<input name="number1" type="number" value="54" min="10" max="100" step="5" />
17. range输入类型
range 类型的 <input> 标签是一种只允许输入一段范围内数值的文本框，它具有 min 属性与 max 属性，可以设定最小值与最大值(默认为0与100)，它还具有step属性，可以指定每次拖动的步幅。
range 类型的 <input> 标签的使用方法如下：
<input nam="range1" type="range" value="25" min="0" max="100" step="5"/>
18. search 输入类型
search 类型的 <input> 标签是一种专门用来输入搜素关键词的文本核。search类型与 text 类型仅仅在外现上有区别。
可用 css 样式表对文本框外观改写，如下所示：
input [type="search"] { -webkit-appearance:textfield;}
19. tel 输入类型
tel 类型的<input>标签被设计为用来输入电话号码的专用文本标。它没有特殊的校验规则，它甚至不强调只输入数字，因为很多电话号码常常带有额外的字符，例如 12-89564752 但是在实际开发中可以通过 pattern 属性来指定对于输入的电话号码格式的验证。
20. color输入类型
color 类型的 <input>标签用来选取颜色，它提供了一个原色选取器。现在，它只在Black Berry 浏览器中被支持。
标签：文档流 调整 屏幕 按钮 移动端 决定 range sele 取颜色
原文地址：https://www.cnblogs.com/yang1997/p/12093936.html
