首页 > 代码库 > 每日分享

每日分享

一、href和src的区别:

href 表示超文本引用(hypertext reference),在 link和a 等元素上使用。src 表示来源地址,在 img、script、iframe 等元素上。

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

二、什么是块元素和内联元素,及其特点:

1.块级元素,默认是独自占据一行的。比如是<p>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ul>、<ol>、<dl>、<pre>、<hr />
2.内联元素,默认是几个内联元素都可以在同一行上显示。比如是<a>、<span>等。
lock(块)元素的特点:
①总是在新行上开始;
②高度,行高以及外边距和内边距都可控制;
③宽度缺省是它的容器的100%,除非设定一个宽度。
④它可以容纳内联元素和其他块元素
inline元素的特点:
①和其他元素都在一行上;
②高,行高及外边距和内边距不可改变;
③宽度就是它的文字或图片的宽度,不可改变
④内联元素只能容纳文本或者其他内联元素
(中文叫法有多种内联元素、内嵌元素、行内元素、直进式元素)。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和
内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元
素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素
加上display:block这样的属性,让他也有每次都从新行开始的属性即成为块元素
,同样我们可以把块元素加上display:inline这样的属性,让他也在一行上排列

三、html5的placeholder属性(IE如何兼容placeholder属性)  

placeholder属性,IE对其的支持表示无奈,firefox、google chrome表示毫无压力。

HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现:

<input id="t1" type="text" placeholder="请输入文字" />

由于placeholder是个新增属性,目前只有少数浏览器支持,如何检测浏览器是否支持它呢?(更多HTML5/CSS3特性检测可以访问)

function hasPlaceholderSupport() { 
   return ‘placeholder‘ in document.createElement(‘input‘); 


}

默认提示文字是灰色的,可以通过CSS来改变文字样式:

/*all*/
::-webkit-input-placeholder { color:#f00; }
input:-moz-placeholder { color:#f00; }
/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090;background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
/* individual: mozilla */
#field2:-moz-placeholder { color:#00f; }
#field3:-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4:-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

兼容其他不支持placeholder的浏览器:

介绍一个超强的让IE下支持placeholder的属性插件,代码如下:

$(document).ready(function(){
var doc=document,
inputs=doc.getElementsByTagName(‘input‘),
supportPlaceholder=‘placeholder‘in doc.createElement(‘input‘),

placeholder=function(input){
var text=input.getAttribute(‘placeholder‘),
defaultValue=http://www.mamicode.com/input.defaultValue;
if(defaultValue=http://www.mamicode.com/=‘‘){
input.value=http://www.mamicode.com/text
}
input.onfocus=function(){
if(input.value=http://www.mamicode.com/==text)
{
this.value=http://www.mamicode.com/‘‘
}
};
input.onblur=function(){
if(input.value=http://www.mamicode.com/==‘‘){
this.value=http://www.mamicode.com/text
}
}
};

if(!supportPlaceholder){
for(var i=0,len=inputs.length;i<len;i++){var input=inputs[i],text=input.getAttribute(‘placeholder‘);
if(input.type===‘text‘&&text){placeholder(input)}
}
}
});

四、fieldset标签:

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

<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。

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

<fieldset> 标签没有必需的或唯一的属性。

<legend> 标签为 fieldset 元素定义标题。

legend标签

 legend 元素为 fieldset 元素定义标题(caption)。

 

每日分享