HTML Mastery

2008-1207

一本不错的书，里面有很多扩展阅读。我是个白目的小孩，居然手工输入这些链接。后来在网上找到这本书引用的所有链接，晕死。这些文章当然都是英文的，真是严重影响阅读的速度，不过还是很值得一看。刚看完Block vs. Inline by Tommy Olsson，对行内元素和块级元素有了更深的认识。如果我的英文水平有所提高，一定把它翻译出来啊。（哈哈！放大话）

以下给出所有链接，其实都是些牛人的BLOG，越来越觉得信息量太大也不好，都看不完。

Chapter 1: Getting Started

Chapter 2: Using the Right Tag for the Right Job

Chapter 3: Table Mastery

Chapter 4: Form Mastery

Chapter 5: Purpose-Built Semantics: Microformats and Other Stories

Chapter 6: Recognizing Semantics

Chapter 7: Looking Ahead: XHTML 2.0 and Web Applications 1.0

Appendix A: XHTML as XML

Appendix B: Frames, and How to Avoid Them

Tagged with: | Posted in HTML&CSS| No Comments

Top 10 custom JavaScript functions

2008-1117

引用：http://www.dustindiaz.com/top-ten-javascript/

找到了所谓的十个常用函数。为了配合JavaScript DOM的学习，我也开始建立自己的库——ZA，呵呵，和化妆品重名了。总之，希望能慢慢完善。

10) addEvent()

function addEvent(elm, evType, fn, useCapture) {
	if (elm.addEventListener) {
		elm.addEventListener(evType, fn, useCapture);
		return true;
	}
	else if (elm.attachEvent) {
		var r = elm.attachEvent('on' + evType, fn);
		return r;
	}
	else {
		elm['on' + evType] = fn;
	}
}

9) addLoadEvent()

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	}
	else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

8) getElementsByClass()

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}

7) cssQuery()

（太长了，直接引用）http://dean.edwards.name/my/cssQuery/

6) toggle()

function toggle(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != 'none' ) {
		el.style.display = 'none';
	}
	else {
		el.style.display = '';
	}
}

5) insertAfter()

function insertAfter(parent, node, referenceNode) {
	parent.insertBefore(node, referenceNode.nextSibling);
}

4) inArray()

Array.prototype.inArray = function (value) {
	var i;
	for (i=0; i < this.length; i++) {
		if (this[i] === value) {
			return true;
		}
	}
	return false;
};

3, 2, & 1) getCookie(), setCookie(), deleteCookie()

function getCookie( name ) {
	var start = document.cookie.indexOf( name + "=" );
	var len = start + name.length + 1;
	if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
		return null;
	}
	if ( start == -1 ) return null;
	var end = document.cookie.indexOf( ';', len );
	if ( end == -1 ) end = document.cookie.length;
	return unescape( document.cookie.substring( len, end ) );
}

function setCookie( name, value, expires, path, domain, secure ) {
	var today = new Date();
	today.setTime( today.getTime() );
	if ( expires ) {
		expires = expires * 1000 * 60 * 60 * 24;
	}
	var expires_date = new Date( today.getTime() + (expires) );
	document.cookie = name+'='+escape( value ) +
		( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()
		( ( path ) ? ';path=' + path : '' ) +
		( ( domain ) ? ';domain=' + domain : '' ) +
		( ( secure ) ? ';secure' : '' );
}

function deleteCookie( name, path, domain ) {
	if ( getCookie( name ) ) document.cookie = name + '=' +
			( ( path ) ? ';path=' + path : '') +
			( ( domain ) ? ';domain=' + domain : '' ) +
			';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}

The Prototype Dollar Function

function $() {
	var elements = new Array();
	for (var i = 0; i < arguments.length; i++) {
		var element = arguments[i];
		if (typeof element == 'string')
			element = document.getElementById(element);
		if (arguments.length == 1)
			return element;
		elements.push(element);
	}
	return elements;
}
Tagged with: | Posted in Javacript| Comment(1)

HTML点点-续

2008-1102

form：尽管form是块级元素，它的内容却必须包含在各自的块级容器中，即form不能有行内元素和文本；

XHML：在XHML中是不允许使用最小化属性的；

legend：该元素很难通过使用CSS得到一致的样式（没有必要）；

经验法则：对表单控件的重新设计应尽可能少，它们看起来不应该像其他东西（可是我觉得有必要做点设计）；

XHTML：应该注重页面的语义和可访问性，而不单单是视觉效果；

input,select,textarea{ font-family: inherit};通常它们具有默认字体

元素的标识不应该基于其表现性因素，而应该基于其含义和用途；

元素的排序依据应该是其内容的重要性，而不是它们在所呈现的页面上的位置安排，可以用CSS重新制定元素在图形化浏览器中的呈现位置，而不用改变它们的内部结构；

通常不宜为一个元素声明固定的高度，因为这会在调整文本的尺寸或添加更多内容时造成问题。

Tagged with: | Posted in HTML&CSS| Comment(1)

HTML点点

2008-1031

<p>：可根据浏览器的宽度自动换行，但有最大的宽度限制，在1280*800的屏幕下达不到边,IE7宽度最小；

<blockquote>：左右两边都有缩进，但1280*800的下，右边的缩进效果也不是很好；

<q>：只有在FF下才会显示引号；

<abbr><acronym>在FF会产生虚线，IE6，IE7不会，IE6对于<abbr>也没有提示；

<div>：块级元素，可包含块级、文本、行内元素；适合把内容组织为较大的块以便用CSS定义或用JAVASCRIPT进行操作；div是一种内容组织工具而不是一种布局工具；

<span>：行内元素，只有在那些语义价值元素都不符合要求时才应用span；

<i><b>(<em><strong>),<big><small>,<tt>(font-family:monospace),<sup><sub>： 表现性元素；

<img />行内元素，body元素只能包含块级元素，而img是行内元素，所以它不能直接包含在body当中，而是必须用一个块级容器加以包装，以保证XHTML文档的有效性。

font-family:

serif:衬线，用于印刷，”Times New Roman”,Georgia,Times,serif；

sans serif：无衬线，用于屏幕显示，Helvetica,Arial,sans-serif；

monospace：等宽，用于显示代码，Courier,Monaco；

cursive：模仿手写的花俏字；

fantasy：装饰性的；

font-size:用em,百分数制定大小，有时用px；

a:active 对FF没有作用，对IE6，IE7有作用；

a:focus 对IE6，IE7没有作用，对FF有作用；

浮动元素基本上都应该设置宽度，不这样做会导致一些不可预知的结果。

PS：看书做了点笔记，应该说推翻了我以前的一些认识。

Tagged with: | Posted in HTML&CSS| Comments(2)

DocType

2008-1029

DocType-Document Type Declaration
上次被某人问到，研究了一下，原来也是挺重要的东西。

XHTML 1.0 Strict
<！DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-Frameset.dtd”>

其主要作用在于让浏览器正确呈现WEB文档。

Tagged with: | Posted in HTML&CSS| No Comments
Page 6 of 7«1234567»
www.911xq.com
www.enshisjw.com