javascript初学总结_4

绝地灬酷狼 2022-07-15 00:28 207阅读 0赞

#### 1.placeholder ####

定义和用法：

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

实例：

<!DOCTYPE HTML>
    <html>
    <body>
    
    <form action="/example/html5/demo_form.asp" method="get">
    <input type="search" name="user_search" placeholder="Search W3School" />
    <input type="submit" />
    </form>
    
    </body>
    </html>

#### 2.action ####

定义：指定了表单提交到服务器的地址。

语法：

#### 3.button ####

实例：

<button type="button">Click Me!</button>

重要事项：

如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。

定于和用法：

在button元素内部，可以放置内容，比如文本或图像，这是该元素与使用input元素创建的按钮之间的不同之处。

<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。  
唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。  
请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

#### 4.label ####

定义和用法：

<label> 标签为 input 元素定义标注（标记）；label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。

实例：

<html>
    <body>
    
    <p>请点击文本标记之一，就可以触发相关控件：</p>
    
    <form>
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" />
    <br />
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" />
    </form>
    
    </body>
    </html>

即当鼠标点击label标签中的Male文本时，for所对应的单选按钮会被选中。

#### 5.word-spacing ####

实例：

p
      {
      word-spacing:25px;
      }

定义：

定于元素中字之间插入多少空白符（CSS 把“字”定义为任何非空白符字符组成的串，并由某种空白字符包围）。

#### 6.index ####

定义和用法：

index 属性可返回下拉列表中选项的索引位置。

实例：

<html>
    <head>
    <script type="text/javascript">
    function alertIndex()
      {
      var x=document.getElementById("mySelect").selectedIndex;
      var y=document.getElementsByTagName("option");
      alert(y[x].text + " has the index of: " + y[x].index);
      }
    </script>
    </head>
    <body>
    
    <form>
    请选择您喜欢的水果：
    <select id="mySelect">
      <option>苹果</option>
      <option>桃子</option>
      <option>香蕉</option>
      <option>桔子</option>
    </select>
    <br />
    <br />
    <input type="button" οnclick="alertIndex()" value="显示被选水果的 index">
    </form>
    
    </body>
    </html>

注意：index也可以是一个自定义属性，通常被当作索引。

#### 7.z-index ####

定义和用法：

设置元素的堆叠顺序，可继承；

注释：元素可拥有负的 z-index 属性值；  
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute,fixed;）；

实例：

<html>
    <head>
    <style type="text/css">
    img.x
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1
    }
    </style>
    </head>
    
    <body>
    <h1>这是一个标题</h1>
    <img class="x" src="/i/eg_mouse.jpg" /> 
    <p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
    </body>
    
    </html>

运行结果：  
![20161026223810330][]

[20161026223810330]: /images/20220715/0bf714e8179542aab283634231e9fc7b.png