html5技巧集锦

红太狼 2022-09-15 15:52 219阅读 0赞

### 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" /> 此框可输入文本,字母,数字等
    <br>      
    <input type="number" /> 此框只能输入数字
    
    </body>
    </html>

保存文件名为：设置input标签只能输入数字类型.html

运行之效果如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv54ix5aW96ICF_size_20_color_FFFFFF_t_70_g_se_x_16][]

**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

运行之效果如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv54ix5aW96ICF_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

**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

运行之效果如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv54ix5aW96ICF_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

**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

运行之效果如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv54ix5aW96ICF_size_19_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv54ix5aW96ICF_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/c32133390ae3419fa13ffcb47bbdf46a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv54ix5aW96ICF_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/e21081849f254a97b7d1d5f10d0290b9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv54ix5aW96ICF_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/459a822a374446df928f4dd650088978.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv54ix5aW96ICF_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/03d280bc89ab4398b5214f610c0e2f55.png