html5技巧集锦
包括：设置<input>标签只能输入数字、如何设置select下拉框的默认值、显示/隐藏某个元素、使用css制作一个圆角按钮。
1、设置<input>标签只能输入数字
<input>标签规定用户的输入字段的类型。
根据type 属性规定要显示的 <input> 元素的类型。根据不同的 type 属性，输入字段有多种类型。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。
如果想要设置input只能输入数字，只需要将type 属性的值设置为“number”即可，示例源码如下：
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title>input标签测试 </title>
</head>
<body>
<!--
<input type="text" placeholder="可输入文本,字母,数字等" />
<br>
<input type="number" placeholder="只能输入数字" />
-->
<input type="text" /> 此框可输入文本,字母,数字等
<br>
<input type="number" /> 此框只能输入数字
</body>
</html>
保存文件名为：设置input标签只能输入数字类型.html
运行之效果如下：
2、如何设置 select下拉框的默认值？
具有“selected”属性的<option>标签将显示在下拉列表select标签中。语法：
<option value="value" selected>选项名称</option>
示例源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置下拉框的默认值</title>
</head>
<body >
<b>如何设置select元素的默认值？</b>
<p>默认情况下，显示第一个option选项</p>
<select name="plan" id="plan">
<option value="free">Free</option>
<option value="starter">Starter </option>
<option value="professional">Professional</option>
<option value="corporate">Corporate</option>
</select>
<p>设置Professional选项为默认值</p>
<select name="plan" id="plan">
<option value="free">Free</option>
<option value="starter">Starter </option>
<option value="professional" selected>Professional</option>
<option value="corporate">Corporate</option>
</select>
</body>
</html>
保存文件名为：下拉框的默认值.html
运行之效果如下：
3、显示/隐藏某个元素
在网页应用中，显示/隐藏某个元素或组件是一件经常要做的事情，尤其是在目前比较流行的单页应用中。实现方式：
HTML5 的 hidden 属性
CSS 的 display: none;
CSS 的 visibility: hidden;
它们之间的差异：
HTML5 hidden使用方式：
方式1：给input标签设置hidden属性，语法：
语法
<element hidden>
如：<p hidden>hello, world!</p>
方式2：设置input标签的type属性的值为"hidden"，基本语法：
<input type="hidden" name="field＿name" value="value">
如：<input type="hidden" name="country" value="China">
隐藏的元素不会显示在文档里，也不占据页面空间（不影响布局）。
使用后，元素不会显示在文档里，虽然隐藏（网页页面上不显示）了，还是具有form传值功能，通常会存储一个默认值用来传输一些客户端到服务器的状态信息，它的值也可以由 JavaScript 进行修改。
如果你给带有 HTML hidden 属性的元素，添加了 CSS display 属性，这个 display 属性会覆盖掉 HTML hidden 属性。
display: none;
添加了这个属性的元素：
不占据页面空间（不影响布局），因为这个属性不是让这个元素“不可见”，而是压根没有把它渲染出来
依旧可以通过 DOM API 来获取到，如把它变成 display: block;
下面示例演示了根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。请留意其中display和visibility的区别，示例源码如下：
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title>HTML元素的显示与隐藏控制</title>
</head>
<body>
<div>display：元素的位置不被占用</div>
<div id="div1" >DIV1</div>
<div id="div2" >DIV2</div>
<input type="button" onclick="showAndHidden1()" value="DIV1与DIV2切换" />
<hr>
<div>visibility：元素的位置仍被占用</div>
<div id="div3" >DIV3</div>
<div id="div4" >DIV4</div>
<input type="button" onclick="showAndHidden2()" value="DIV3与DIV4切换" />
<script>
function showAndHidden1(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
if(div1.style.display=='block') div1.style.display='none';
else div1.style.display='block';
if(div2.style.display=='block') div2.style.display='none';
else div2.style.display='block';
}
function showAndHidden2(){
var div3=document.getElementById("div3");
var div4=document.getElementById("div4");
if(div3.style.visibility=='visible') div3.style.visibility='hidden';
else div3.style.visibility='visible';
if(div4.style.visibility=='visible') div4.style.visibility='hidden';
else div4.style.visibility='visible';
}
</script>
</body>
</html>
保存文件名为：显示隐藏某个元素的例子.html
运行之效果如下：
4、使用css制作一个圆角按钮
使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。
语法：
border-radius: 1-4 length|%
其中length 定义弯道的形状，使用%定义角落的形状。
注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
示例源码如下：
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title>圆角按钮示例</title>
<style>
#rcorners1 {
border-radius: 25px;
background: red;
}
/* 在按钮处于活动状态时添加转换 */
#rcorners1:active {
background:green;
}
</style>
</head>
<body>
<button id="rcorners1" >圆角按钮</button>
</body>
</html>
保存文件名为：圆角按钮.html
运行之效果如下：
