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标签中。语法：

示例源码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置下拉框的默认值</title>
    </head>
    <body style = "text-align:center;">  
        <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属性，语法：

语法

如：<p hidden>hello, world!</p>

方式2：设置input标签的type属性的值为"hidden"，基本语法：

如：<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" style="display:block;">DIV1</div>
<div id="div2" style="display:none;">DIV2</div>
<input type="button" onclick="showAndHidden1()" value="DIV1与DIV2切换" />
<hr>
<div>visibility：元素的位置仍被占用</div>
<div id="div3" style="visibility:visible;">DIV3</div>
<div id="div4" style="visibility:hidden;">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

运行之效果如下：

html5技巧集锦

html5技巧集锦

猜你喜欢