笔记

src和href之间存在区别，能混淆使用。src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
<script src ="js.js"></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href="common.css" rel="stylesheet"/>
那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

 

block（块）元素的特点：

①总是在新行上开始；

②高度，行高以及外边距和内边距都可控制；

③宽度缺省是它的容器的100%，除非设定一个宽度。

④它可以容纳内联元素和其他块元素

inline元素的特点：

①和其他元素都在一行上；

②高，行高及外边距和内边距不可改变；

③宽度就是它的文字或图片的宽度，不可改变

④内联元素只能容纳文本或者其他内联元素

（中文叫法有多种内联元素、内嵌元素、行内元素、直进式元素）。

块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和

内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元

素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素

加上display:block这样的属性，让他也有每次都从新行开始的属性即成为块元素

,同样我们可以把块元素加上display:inline这样的属性，让他也在一行上排列

可变元素：

是基于以上两者随环境而变化的，它的基本概念就是他需要根据上下文关系确定该

元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确

定了他的类别，他就要遵循块元素或者内联元素的规则限制

 

HTML元素 fieldset方框

　　Draws a box around the text and other elements that the field set contains.
　　在字段集包含的文本和其它元素外面画一个方框。

　　fieldset元素用于对表单中的元素进行分组并在文档中区别标出文本。它与窗口框架的行为有些相似。fieldset在 Internet Explorer 4.0 及以上版本的HTML 和的脚本中可用。
　　fieldset元素元素是块元素。 并且需要关闭标签，即必须成对出现：<fieldset></fieldset>。

HTML元素 legend域标题

　　Inserts a caption into the box drawn by the fieldSet object.
　　在 fieldSet 对象绘制的方框内插入一个标题。

　　legend元素必必位于fieldset内的第一个元素。在 Internet Explorer 4.0 及以上版本的 HTML 和脚本中可用。
　　legend元素是块元素。并且需要关闭标签，即必须成对出现：<legend></legend>。

placeholder在不同浏览器下的表现及兼容方法

1、什么是placeholder？

　　placeholder是html5新增的一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点（或输入内容）时，提示文字消失。

2、placeholder的浏览器兼容性和在不同浏览器下的表现
　由于placeholder是html5的新属性，可想而知，仅支持html5的浏览器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。
　　如果直接写input{color:red;}，可以看到，ie10和ff下，placeholder文字和输入文字都变成了红色，
　　而在chrome和safari下，placeholder文字颜色不变，只有输入的文字变成红色。

显然，这种做法是行不通的。因为我们只想改变placeholder文字的颜色，并不想改变输入文字的颜色。
　　正确的写法如下：
　　 ::-moz-placeholder{color:red;} 　　//ff
　　::-webkit-input-placeholder{color:red;} //chrome,safari
　　:-ms-input-placeholder{color:red;} //ie10

　　$(function() {
　　// 如果不支持placeholder，用jQuery来完成
　　if(!isSupportPlaceholder()) {
　 // 遍历所有input对象, 除了密码框
　 $('input').not("input[type='password']").each(
　　function() {
　　var self = $(this);
　　var val = self.attr("placeholder");
　　input(self, val);
　　}
　 );

　　 /**//* 对password框的特殊处理
　　* 1.创建一个text框
　　* 2.获取焦点和失去焦点的时候切换
　　 */
　　$('input[type="password"]').each(
　　 function() {
　　var pwdField = $(this);
　　var pwdVal = pwdField.attr('placeholder');
　　var pwdId = pwdField.attr('id');
　　// 重命名该input的id为原id后跟1
　　pwdField.after('<input id="' + pwdId +'1" type="text" value='+pwdVal+' autocomplete="off" />');
　　var pwdPlaceholder = $('#' + pwdId + '1');
　　pwdPlaceholder.show();
　　pwdField.hide();

　　pwdPlaceholder.focus(function(){
　　pwdPlaceholder.hide();
　　pwdField.show();
　　pwdField.focus();
　　});

　　pwdField.blur(function(){
　　if(pwdField.val() == '') {
　　pwdPlaceholder.show();
　　pwdField.hide();
　　}
　　});
　　}
　　);
　　}
　　});

// 判断浏览器是否支持placeholder属性
function isSupportPlaceholder() {
var input = document.createElement('input');
return 'placeholder' in input;
}

// jQuery替换placeholder的处理
function input(obj, val) {
var $input = obj;
var val = val;
$input.attr({value:val});
$input.focus(function() {
if ($input.val() == val) {
$(this).attr({value:""});
}
}).blur(function() {
if ($input.val() == "") {
$(this).attr({value:val});
}
});
}

 

转载于:https://www.cnblogs.com/z123123/p/6828335.html