码迷,mamicode.com
首页 > 其他好文 > 详细

herf与src区别 placeholder怎么才能在不同浏览器上显示一样 <fieldset>和<legend>标签的意思和用法

时间:2017-05-08 22:02:09      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:打包   opera   美化   输入   代码   rest   设置   int   --   

herf与src区别:和你这么说吧,href 表示超文本引用(hypertext reference),在 link和a 等元素上使用。src 表示来源地址,在 img、script、iframe 等元素上。

src 的内容,是页面必不可少的一部分,是引入。href 的内容,是与该页面有关联,是引用。区别就是,引入和引用。

二:使用HTML5的Placeholder属性实现input输入框背景文字提示效果

 

这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的。但HTML5给我们提供了新的纯HTML的实现方式,不需要任何的JavaScript,只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性,然后在属性值里输入你需要的提示信息。

 

语法基本是这个样子:<input placeholder=”提示信息...”>

 

HTML代码

 

<form>

<input type="text" placeholder="你的姓名..." name="lname">

<input type="password" placeholder="你的密码..." name="pass">

<input type="submit" value="提交">

</form>

用CSS美化Placeholder提示信息的样式

 

CSS3里有相应的通用的对Placeholder提示信息美化的方法。你可以设置提示信息文字的颜色,透明度,背景色等。

 

为了最大化的兼容所有浏览器,给CSS里的placeholder属性添加浏览器引擎前缀还是有必要的。

 

– 谷歌浏览器(Webkit): ::-webkit-input-placeholder pseudo-element;

 

– IE10: :-ms-input-placeholder pseudo-class;

 

– 火狐浏览器(Gecko18-): :-moz-placeholder pseudo-class;

 

– 火狐浏览器(Gecko19+): ::-moz-placeholder pseudo-element;

 

– Opera(Presto): 无。

 

/* WebKit browsers */

::-webkit-input-placeholder {

color: #777;

}

/* Mozilla Firefox 4 to 18 */

:-moz-placeholder {

color: #777;

opacity: 1;

}

/* Mozilla Firefox 19+ */

::-moz-placeholder {

color: #777;

opacity: 1;

}

/* Internet Explorer 10+ */

:-ms-input-placeholder {

color: #777;}

fieldset:html中的fieldset是一个不常用的标签,但它可以很好的对网页进行布局.

其语法如下: 

<fieldset> 

<legend>fieldset名称</legend> 

<!-- 自己要放的内容 --> 

</fieldset> 

fieldset元素用于对表单中的元素进行分组并在文档中区别标出文本。它与窗口框架的行为有些相似。

fieldset元素元素是块元素。 并且需要关闭标签,即必须成对出现:<fieldset></fieldset>。  

fieldset 元素可将表单内的相关元素分组。 

<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。<fieldset> 标签没有必需的或唯一的属性。 当一组表单元素放到 <fieldset> 标

 

签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。 

下面是一个实例: 

<fieldset style = "width:40%">

    <legend>我的区域设置</legend>

        <table >

            <tr>

                <td align = "right">

                    姓名:</td>

                <td align = "left">

                    <input id="Text1" type="text" /></td>

            </tr>

            <tr>

                <td align = "right">

                    性别:</td>

                <td align = "left">

                    <select id="Select1">

                        <option enableviewstate = true>男</option>

                        <option>女</option>

                    </select></td>

            </tr>

        </table>

    

    </fieldset>

 

herf与src区别 placeholder怎么才能在不同浏览器上显示一样 <fieldset>和<legend>标签的意思和用法

标签:打包   opera   美化   输入   代码   rest   设置   int   --   

原文地址:http://www.cnblogs.com/wangluo123/p/6827759.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!