网页设计

2009年2月3日星期二

blogger代码注释

<body>
<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='网页设计 (标题)' type='Header'>
<b:includable id='main'>

<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>


<div expr:style='"background-image: url("\" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "px;" + "_height: " + data:height + "px;" + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>

<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='博客帖子' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>
<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<dd class='comment-footer collapseable'>
<span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
<span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
</dd>
</div>
</b:loop>
</dl>
</b:if>
<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
</p>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> 
</div>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span> <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span> <span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span> <span class='post-icons'>

<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>


<b:include data='post' name='postQuickEdit'/>
</span> </div>

<div class='post-footer-line post-footer-line-2'><span class='post-labels'>

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span> </div>

<div class='post-footer-line post-footer-line-3'/>
</div>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<img src='http://www.blogger.com/img/icon_delete13.gif'/>
</a>
</span>
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> 
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

<b:else/> 
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='"item-control " + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
<img src='http://www.blogger.com/img/icon_delete13.gif'/>
</a>
</span>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>

<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/><data:commentLabel/>:
</b:if>
</h4>

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</p>
</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>
<b:includable id='main' var='top'>

<div class='blog-posts hfeed'>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.dateHeader'>

<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == "item"'>

<b:include data='post' name='comments'/>
</b:if>

</b:loop>
</div>


<b:include name='nextprev'/>


<b:include name='feedLinks'/>

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

</b:includable>
</b:widget>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='BlogArchive2' locked='false' title='Archivo del blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄
<b:else/>
►
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>
<b:widget id='Followers2' locked='false' title='跟踪者' type='Followers'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<b:if cond='data:codeSnippet != ""'>
<h2 class='title'><data:title/></h2>
<b:else/>
<b:if cond='data:totalFollowerCount != ""'>
<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>
</b:if>
</b:if>
</b:if>

<div expr:id='data:widget.instanceId + "-wrapper"'>
<b:if cond='data:codeSnippet != ""'>
<div style='margin:2px;'>
<data:codeSnippet/>
</div>
<b:else/>
<b:if cond='data:totalFollowerCount == ""'>
<span class='item-control following-not-admin'>
<b><data:failureSnippet/></b>
</span>
<span class='item-control blog-admin'>
<b><data:adminFailureSnippet/></b>
</span>
<b:else/>
<b:if cond='data:followingLinkPresent'>
<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:followThisMessage/>
</a>
</div>
<div class='follow-this profile-link item-control following-stop-following-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:stopFollowingMessage/>
</a>
</div>
</b:if>

<div class='followers-grid'>
<b:if cond='data:totalFollowerCount == 0'>
<div class='profile-link item-control following-follow-this'>
<data:emptyFollowersMessage/>
</div>
</b:if>

<b:loop values='data:followers' var='follower'>
<div class='follower'>
<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>
<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:onerror='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"' expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"' expr:width='data:follower.imageWidth' src='http://img1.blogblog.com/img/blank.gif'/>
</a>
</div>
</b:loop>
<div class='clear'/>
</div>

<div class='followers-canvas profile-link'>
<data:followersFooterMessage/>
<span class='item-control following-not-admin'>
<a expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>
<span class='item-control blog-admin'>
<a expr:href='data:manageFollowersUri'>
<data:manageFollowersMessage/>
</a>
</span>
</div>
</b:if>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='Subscribe1' locked='false' title='订阅' type='Subscribe'>
<b:includable id='main'>
<b:if cond='data:isPublic'>
<div style='white-space:nowrap'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:loop values='data:feeds' var='feed'>
<div expr:class='"subscribe-wrapper subscribe-type-" + data:feed.type'>

<div expr:class='"subscribe expanded subscribe-type-" + data:feed.type' expr:id='"SW_READER_LIST_" + data:widgetId + data:feed.type' style='display:none;'>

<div class='top'>
<span class='inner' expr:onclick='"return(_SW_toggleReaderList(event, \"" + data:widgetId +data:feed.type + "\"));"'>
<img class='subscribe-dropdown-arrow' expr:src='data:arrowDropdownImg'/>
<img align='absmiddle' alt='' border='0' class='feed-icon' expr:src='data:feedIconImg'/>
<data:feed.title/>
</span>

<ul class='feed-reader-links'>
<a class='feed-reader-link' expr:href='"http://www.google.com/ig/add?source=bstp&feedurl=" + data:feed.encodedUrl' target='_blank'>
<img expr:src='data:imagePathBase + "subscribe-google.png"'/>
</a>
<a class='feed-reader-link' expr:href='"http://www.bloglines.com/sub/" + data:feed.url' target='_blank'>
<img expr:src='data:imagePathBase + "subscribe-bloglines.png"'/>
</a>
<a class='feed-reader-link' expr:href='"http://www.netvibes.com/subscribe.php?url=" + data:feed.encodedUrl' target='_blank'>
<img expr:src='data:imagePathBase + "subscribe-netvibes.png"'/>
</a>
<a class='feed-reader-link' expr:href='"http://www.newsgator.com/ngs/subscriber/subext.aspx?url=" + data:feed.encodedUrl' target='_blank'>
<img expr:src='data:imagePathBase + "subscribe-newsgator.png"'/>
</a>
<a class='feed-reader-link' expr:href='"http://add.my.yahoo.com/content?url=" + data:feed.encodedUrl' target='_blank'>
<img expr:src='data:imagePathBase + "subscribe-yahoo.png"'/>
</a>
<a class='feed-reader-link' expr:href='data:feed.url' target='_blank'>
<img align='absmiddle' class='feed-icon' expr:src='data:feedIconImg'/>
Atom
</a>
</ul>

</div>
<div class='bottom'/>
</div>

<div class='subscribe' expr:id='"SW_READER_LIST_CLOSED_" + data:widgetId +data:feed.type' expr:onclick='"return(_SW_toggleReaderList(event, \"" + data:widgetId +data:feed.type + "\"));"'>
<div class='top'>
<span class='inner'>
<img class='subscribe-dropdown-arrow' expr:src='data:arrowDropdownImg'/>
<span expr:onclick='"return(_SW_toggleReaderList(event, \"" + data:widgetId +data:feed.type + "\"));"'>
<img align='absmiddle' alt='' border='0' class='feed-icon' expr:src='data:feedIconImg'/>
<data:feed.title/>
</span>
</span>
</div>
<div class='bottom'/>
</div>

</div>
</b:loop>

<div style='clear:both'/>

</div>
</div>

<b:include name='quickedit'/>

</b:if>
</b:includable>
</b:widget>
</b:section>
</div>


<div class='clear'> </div>

</div> 

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div></div> 
</body> Read more ...

学会看blogger的代码

面对一大堆标签我们不知从何看起，但先不急，我们先找到b:section. b:section可以将网页划分成不同的区域，一般分为头部，侧边栏，页脚等。B:section和你网页的布局有很大的关系例如，假如你的博客是两栏型的，建议分4个section。一个是header，一个是博客的文章部分，一个是侧边栏，一个是页脚。如下图：

当然了，想要将相应的区域放在相应的位置就要用到DIV标签了。

b:section和b:widget的属性

我们发现b:section里面紧接着就包含b:widget，b:widget是窗口小部件，如：博客列表，标签列表，文章归档，跟踪者等，都是窗口小部件。B:section里面可以包含一个b:widget,也可以包含几个b:widget，当然是随你喜欢了。

b:includable里面包含的就是窗口小部件的内容了。注意了b:widget里面只能包含b:includable。B:widget里面可以包含多个b:includable,但只会显示一个而已，那就是id为main的那一个，所以对于众多的b:includable我们想都要显示出来，则可以用b:include将它包含在main的那一个b:includable中。如：

<b:includable id='main'>

<b:loop var='i' values='posts'>

<b:include name='post' data='i'/>

</b:loop>

</b:includable>

<b:includable id='post' var='p'>

Title: <data:p.title/>

</b:includable>

data: 标记是最重要的标记之一。它是博客的内容得以显示的途径，如果不加入data则博客是一片空白，没有任何的内容。

如：<data:title/>则表示显示博客的标题。使用 data: 标记，您可以访问很多数据，且此标记会因您所使用的窗口小部件不同而异。blogger提供了一份完整的列表帮助您查找需要的数据。

html标签属性

最近，看一些网页的源代码看得很头疼。虽然html语言的基本标签的含义我都明白，但有些标签里还包含了另外一些东西，像 "id="$%^^""，"name="@#$%""，"dir="&*&&&""，等等……像这些我不是很明白是什么，有什么作用。在网络的搜索过的才明白，原来这些是html标签的属性。
标签属性写法如下：
<标签名属性名1="属性值 " 属性名2="属性值 " 属性名3="属性值 "……>

标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中
标签可以拥有多个属性
属性由属性名和值成对出现

想要了解更多标签的属性值我们可以参考这里：http://www.w3school.com.cn/tags/tag_comment.asp

它给出了各个html标签的定义和用法还有必需属性和可选属性，对于html的学习很有帮助。

下面列出一些常用属性属性：

核心属性

标记base, head, html, meta, param, script, style, 和 title除外.

属性	值	描述
class	class_rule or style_rule(类规则或样式规则)	元素的类(class)
id	id_name(id名)	元素的唯一id
style	style_definition(样式定义)	内联样式定义
title	tooltip_text(提示文本)	显示提示文本(鼠标在其上停留时)

语言属性

元素base, br, frame, frameset, hr, iframe, param, 和 script 除外.

属性	值	描述
dir	ltr \| rtl	设置文本的方向
lang	language_code(语言编码)	设置语言编码

2009年2月1日星期日

div标签

div是一个块级元素。这意味着它的内容自动地开始一个新行。

DIV常见的属性有：id , class , title , style等。其中最常用的就数id 和class。

id 和class的区别：

id 属性为每个元素分配一个唯一的名字。每个名字只能在页面中使用一次。（例如，假如你的页面包含 id 为 content 的 div，那么另外一个 div 或者其他别的元素都不能使用这个名字。相反地，class 属性可以被一遍有一遍地使用在页面中（例如，页面中的五个段落都可以使用名为 "small" 或者"footnote" 的 class 名称）。

2009年1月29日星期四

页内书签

在word里，我们可以实现点击某个超链接，直接跳到页面的某个地方。那么在网页里应该如何写代码实现这个功能呢？

我们可以这样写代码：

*******

***

然后在想要到达的地点加一个a标签。

meta标签知识点

1、meta是html语言head区的一个辅助性标签。

一、meta标签的组成

　　meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

　　1、name属性

　　name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

　　meta标签的name属性语法格式是：＜meta name="参数" content="具体的参数值"＞。

　　其中name属性主要有以下几种参数：

　　A、Keywords(关键字)

　　说明：keywords用来告诉搜索引擎你网页的关键字是什么。

　　举例：＜meta name ="keywords" content="science, education,culture,politics,ecnomics，relationships, entertaiment, human"＞

　　B、description(网站内容描述)

　　说明：description用来告诉搜索引擎你的网站主要内容。

　　举例：＜meta name="description" content="This page is about the meaning of science, education,culture."＞

　　C、robots(机器人向导)

　　说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

　　content的参数有all,none,index,noindex,follow,nofollow。默认是all。

　　举例：＜meta name="robots" content="none"＞

　　D、author(作者)

　　说明：标注网页的作者

　　举例：＜meta name="author" content"root,root@21cn.com"＞

2、http-equiv属性

　　http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

　　meat标签的http-equiv属性语法格式是：＜meta http-equiv="参数" content="参数变量值"＞；其中http-equiv属性主要有以下几种参数：

　　A、Expires(期限)

　　说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

　　用法：＜meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT"＞

　　注意：必须使用GMT的时间格式。

　　B、Pragma(cache模式)

　　说明：禁止浏览器从本地计算机的缓存中访问页面内容。

　　用法：＜meta http-equiv="Pragma" content="no-cache"＞

　　注意：这样设定，访问者将无法脱机浏览。

　　C、Refresh(刷新)

　　说明：自动刷新并指向新页面。

　　用法：＜meta http-equiv="Refresh" content="2；URL=http://www.root.net"＞

　　注意：其中的2是指停留2秒钟后自动刷新到URL网址。

　　D、Set-Cookie(cookie设定)

　　说明：如果网页过期，那么存盘的cookie将被删除。

　　用法：＜meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/"＞

　　注意：必须使用GMT的时间格式。

　　E、Window-target(显示窗口的设定)

　　说明：强制页面在当前窗口以独立页面显示。

　　用法：＜meta http-equiv="Window-target" content="_top"＞

　　注意：用来防止别人在框架里调用自己的页面。

　　F、content-Type(显示字符集的设定)

　　说明：设定页面使用的字符集。

　　用法：＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞

其它用法：

　４、实现网页转换时的动画效果

　　使用meta标签，我们还可以在进入网页或者离开网页的一刹那实现动画效果，我们只要在页面的html代码中的＜head＞＜/head＞标签之间添加如下代码就可以了：

　　＜meta http-equiv="Page-Enter" content="revealTrans(duration=５.０, transition=２０)"＞

　　＜meta http-equiv="Page-Exit" content="revealTrans(duration=５.０, transition=２０)"＞

　　一旦上述代码被加到一个网页中后，我们再进出页面时就会看到一些特殊效果，这个功能其实与FrontPage2000中的Format/Page Transition一样，但我们要注意的是所加网页不能是一个Frame页;

--------来自百度百科

修改浏览器状态条中的Ico图标

只要在header之间加入<link rel="icon" type="image/ico" href="###"/>就可以了。

其中“###”表示图标的地址。

订阅：博文 (Atom)

网页设计

2009年2月3日星期二

blogger代码注释

学会看blogger的代码

html标签属性

2009年2月1日星期日

div标签

2009年1月29日星期四

页内书签

meta标签知识点

修改浏览器状态条中的Ico图标

Etiquetas

Archivo del blog

关注者