[持续更新]HTML5学习笔记（四）

1.  零散的知识点

hgroup 样式display：block；但是它具有语义上的作用。

例如，要用脚本把文档中的h1-h6标题提出来做提纲，h1是主标题，h2是章标题。现在h1主标题有副标题h2，这样按照正常的逻辑脚本会把副标题h2也当成章标题，不符合要求。使用hgroup标签将主副标题包含在内，语义上他们是一组，并且语义上遵照hgroup的第一个子元素，其他副标题在语义上都相对隐藏，这样脚本在提取提纲的时候，只会显示第一个子元素。

section 语义上是节，将文档一节节划分，用法没有明确的规定。

使用了section，浏览器就会负责顺利标题关系，看个例子。

<section>    <h1>This first H1</h1>    <section>        <h1>This second H1</h1>        <section>            <h1>This third H1</h1>        </section>    </section></section>

上述例子中使用了三个section，相互嵌套关系，就是一个大节中有一个小节，小节里套小节，这样的话浏览器会梳理每个节中的标题关系，也就是我们看到的每个h1都比上一个h1字体要小，虽然我们没有用css修饰，但是浏览器替我们做了，这样看起来更加的结构化。

2.  input元素

input元素，这个元素功能强大在H5中其type属性有23个不同的值，除此之外，钙元素一共有30个属性，其中很多属性只能搭配某些type值来。

1.  maxlength：限制用户最多输入字符数，当用输入多于该属性值时，浏览器会忽略掉超出范围得值。

2.  size：浏览器会确保该文本框的宽度足以显示该值所对应的宽度，但是该属性不会限制用户输入长度。

3.  value：设置默认值。比如当我们需要修改用户名，在修改页面的输入框内默认值就是我们当前的用户名，我们只需将其选中并修改即可。

4.  placeholder：占位式提示。显示浅色的提示文字，待文本框输入后文字消失。

5.  datelist：数据列表。搭配option使用用于提示数据。 不同浏览器会显示不同样式。

6.  disabled：文本框禁用。用户无法选中该文本框，也无法输入该文本框。显示为暗色。并且该文本框不会被提交到服务器。

7.  readonly：只读文本框。用户无法修改该文本框，但是可以获得该文本框焦点等。该文本框任然会被发给服务器。

8.  pattern：匹配。设定一个正则表达式，确保输入的只能与其匹配。

还有一些常见的好玩的type属性以及其对应的效果。

1.  number：文本框只能接受数字，并且可以设置最大值最小值以及增长值。

2.  ranger：文本框变成可调节的按钮，不同浏览器显示会不同。并且可以设置最大值最小值以及增长值。

3.  checkbox：复选框。常见的值，比如用户选择喜欢的电影类型时，可以多选。还有在注册时选择是否同意本站条例。若为选择复选框时，后台接收不到数据，若选择了一个复选框，后台收到的on（未指定value情况下）。

4.  radio：单选框。Name相同的单选框中只能选一个。

5.  email&tel&url：具有验证功能的文本框。三种类型分别验证邮箱，电话号码和url。现实上为普通文本框，只有在表单提交时验证。而且不同浏览器的验证支持也不同，大多数都支持email，url，但是对url的数据处理则不同。对tel的支持最差。

6.  date：获取时间。目前只有opera和chrome对该属性支持较好。

7.  color：选择颜色。目前同样不是全部浏览器支持。输出格式为#000000。

8.  search：搜索框。用出不多，输入字符后，右侧出现清空的按钮。

9.  hidden：隐藏的输入框。该输入框不显示，但是可以携带数据，后台会接收到该数据。

10. image：将输入框显示为图片，例如：

<input type="image" src="url"name="submit">

11. file：上传文件。若是上传文件（图片），form中的enctype=“multipart/form-data”，文件将以二进制的格式发送给服务器。

<form autocomplete="on" method="post" action="ss"><input maxlength="10" name="username" placeholder="123456789011" autofocus><br><input size="20" name="" ><br><input name="" value="value"><br><input name="" list="testlist"><br><input name="" disabled placeholder="disabled"><br><input name="" readonly placeholder="readonly"><br><input name="" pattern="^.* .*$"><br><input type="number" step="1" min="0" max="100" value="1" ><br><input type="text" id="show" size="3" value="1">1<input type="range" step="1" min="0" max="100" value="1" id="control" onchange="changeNumber()">100<br><input type="email" required><br><input type="tel"><br><input type="url"><br><input type="date"><br><input type="datetime"><br><input type="datetime-local"><br><input type="month"><br><input type="time"><br><input type="week"><br><input type="text" id="showcolor" size="7" value="#000000"><input type="color" id="color" onchange="colorchange()"><br><input type="search"><br><input type="file"><br><button type="submit">submit</button></form><form onsubmit="return false" oninput="res.value = num1.valueAsNumber * num2.valueAsNumber"><input type="number" id="num1" placeholder="num1" name="num1">*<input type="number" id="num2" placeholder="num2" name="num2">=<output name="res"/></form><script type="text/javascript">function changeNumber(){    var number = document.getElementById("control").value;    document.getElementById("show").value = number;}function colorchange(){    var number = document.getElementById("color").value;    document.getElementById("showcolor").value = number;}</script><datalist id="testlist">    <option value="value1" label="label1" />    <option value="value2" label="label2" />    <option value="value3" label="label3" /></datalist>