[持续更新]HTML5学习笔记(四)
2015-09-02 21:21
633 查看
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>
相关文章推荐
- HTML5之WebSocket(仅介绍客户端的实现)
- HTML5离线存储
- 深入解析HTML5使用SVG图像时的viewBox属性用法
- Canvas
- 纯HTML5后台模板
- HTML5 统计条数
- h5本地存储storage
- h5地理位置对象navigator.geolocation
- HTML5的常用标签
- Html5 canvas 画带箭头的线
- HTML5的Web Storage
- html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签(转)
- [持续更新]HTML5学习笔记(三)
- H5 input type="search" 不显示搜索 解决方法
- html5发布命令
- <Video> in HTML5
- html5--用canvas做个放大镜
- HTML5 离线缓存-manifest简介
- Web开发者不容错过的10个HTML5工具
- [持续更新]HTML5学习笔记(二)