javascript初学总结_4 绝地灬酷狼 2022-07-15 00:28 141阅读 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 #### 定义:指定了表单提交到服务器的地址。 语法: <form action="value"> #### 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);<!--y[x].index替换为x结果是一样的--> } </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
还没有评论,来说两句吧...