每日分享

一、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=input.defaultValue;
if(defaultValue==''){
input.value=text
}
input.onfocus=function(){
if(input.value===text)
{
this.value=''
}
};
input.onblur=function(){
if(input.value===''){
this.value=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）。