學會這樣寫HTML代碼2

作者：佚名發布時間：2011-11-23 瀏覽：2439次

9. 格式化片段 /

 是指 computer code text, 而 
 是指 preformatted text。 的范圍更廣，并且是塊狀元素，可能被使用來格式化各種文本，特別是代碼。使用沒有需要特別注意的，主要是語義上的正確使用，比如不要用  來代替一般的 。
text-align:center

{ ( 1 * 102 ) + ( 9 * 101 ) + ( 3 * 100 ) }

10. 換行: 

在現代網頁中，使用 
 的情況是非常少的。網頁中的留白，一般都是使用 CSS 的 padding 和 margin 來實現。這樣更精準，并用更容易控制?，F在推薦的用法是，使用到一般的段落 
 中做簡單的換行，而不是用來控制頁面留白。
我是一個段落。

詩歌都會用換行的。

11. 分割線: 

 具有非常好的語義作用。但他的視覺效果很難控制。之前就寫過這樣的文章關于
在各瀏覽器中的問題。一般也都很少用。如果專門為讀屏軟件使用者提供單獨頁面的話，或許 
 會大有用處。
標題一

Lorem Ipsum is ...


標題二

This is the entry of... 

12. 無語義標簽：
/
其實 
/ 這兩個標簽是有語義的，都是 defines a section in a document。是的，和 HTML5 中的  其實是一樣的。只是，因為搜索引擎的的原因，搜索引擎認為它們是無語義標簽，因此他們成了 “無語義” 標簽。推薦用法是盡量使用其他來做為頁面框架的容器，比如布局、添加額外的視覺效果，而不是段落等的替代品。

    

    

    

        

            
God, oh my zsh

        

    


13. 段落/標題: 
,
/
/
…
這幾個標簽幾乎可以說是一個頁面標簽等級結構中最重要的標簽。我們可以用一本書的結構來說明這幾個標簽，而我們構建一個頁面的時候，也應該有這樣的一種思想在腦中：
書的名稱：H1 
書的每個章節標題: H2 
章節內的文章標題: H3 
章節的段落: P 
小標題/副標題: H4/H5/H6 
是的，當然還有引用 ，技術類書中提供的代碼 
，一些需要注意點的列表 ，一些方便比較的表格  等。
LOGO
Title

    
Summary:

    
lorem ipsum is ...emphasize

14. 強調: /
 emphasize 的縮寫。而  是 strong emphasize?？赡芎芏鄤側腴T前端的同學會對 、、 、、 這幾個標簽的使用拿捏不準。 和  基本上是被廢置的，相當于現在的  和 ，一般情況下他們對于內容重要性的排序是這樣的：strong > em ≈ cite。 
注意：別使用老掉牙的標簽，比如FONT、CENTER等，特別是 FONT。
15. 表單項: //<select></SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'">表單項是 HTML 中相對比較復雜的標簽，需要注意的點也比較多：</SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'">需要給每個表單項添加 <label> 對其進行描述，當不能使用 label 時，為表單項添加 title 屬性 </SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'">當表單項是必填項的時候，使用 “*“ 符號來標記 </SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'">Flash 創建表單項一般是不會生成 <label> 的，請勾上 auto label 那個選項 </SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><form method="post" action="http://sofish.de"></SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'">    <fieldset><legend>My Form</legend></SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'">      <label for="firstname">* First name:</label> <input type="text" id="firstname" /></SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'">      <label for="speech">Say something:</label></SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'">      <textarea id="speech" /></SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'">      </textare></SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'">      <input type="submit" value="submit" title="submit button" /></SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'">    </fieldset></SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"></form></SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'">16. 圖片: <img></SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'">對于圖片，盲人看不到。提供 alt 來表示替代文本。告訴他們這是一張什么樣的圖。</SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><img src="/img/uploadimg/20110902/0932380.jpg"></SPAN></P>
<P style="TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"></SPAN><SPAN style="FONT-FAMILY: '宋體'; FONT-SIZE: 10.5pt; mso-spacerun: 'yes'"><o:p></o:p></SPAN> </P>
<P style="MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt" class=p0><SPAN><A href="http://www.meigaomei0471.cc/"><SPAN style="FONT-FAMILY: '宋體'; COLOR: rgb(0,0,0); FONT-SIZE: 10.5pt; FONT-WEIGHT: bold; mso-spacerun: 'yes'" class=15>寶雞世紀網絡</SPAN></A></SPAN></P><!--EndFragment--></td></tr></table><br></br><div   class="jtfpzhz"   id='pre_next'><ul><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=2-110-2047-1'title='做好以下三點有效防止黑客攻擊'>上一篇： 做好以下三點有效防止黑客攻擊</a></h1><h2><a href='http://www.meigaomei0471.cc/index.php?ie=2-110-2033-1'title='學會這樣寫HTML代碼1'>下一篇:  學會這樣寫HTML代碼1</a></h2></li></ul></div>  <table width="100%" border="0" style="height:10px;"><tr><td></td></tr></table> 	
<div   id="nbxfntj"   class="bshare-custom"><a title="分享到微信" class="bshare-weixin"></a><a title="分享到QQ空間" class="bshare-qzone"></a><a title="分享到新浪微博" class="bshare-sinaminiblog"></a><a title="分享到人人網" class="bshare-renren"></a><a title="分享到騰訊微博" class="bshare-qqmb"></a><a title="分享到網易微博" class="bshare-neteasemb"></a><a title="更多平臺" class="bshare-more bshare-more-icon more-style-addthis"></a><span id="55zxdhz"    class="BSHARE_COUNT bshare-share-count">0</span></div>
<table width="100%" border="0" style="height:20px;"><tr><td></td></tr></table>
<div   id="j7hfprz"   class="Copyright_title"><h1>*溫馨提示：如有疑問，可免費咨詢世紀網絡在線客服，或撥打世紀網絡熱線0917-3535180，我們會從專業的角度認真解答。<br>
*聲　　明：本站部分信息來自網絡，僅供參考，不作為世紀網絡業務依據，不希望被轉載的媒體或個人可與我們聯系，我們將立即進行刪除，詳情咨詢客服。世紀網絡是一家專注于網站建設、SEO優化、網站優化、網站托管、網絡推廣、軟件開發的網絡公司,10年建站歷程,擁有900多家客戶案例,值得信賴！</h1></div>
<table width="100%" border="0" style="height:10px;"><tr><td></td></tr></table> 
</div>
<table width="100%" border="0" style="height:30px;"><tr><td></td></tr></table>
</div><!-----div main end1----->
</div><!-----div wrapper end1-----> 
<div   class="zr5fltl"   id="footer">
<div   class="bd5t575"   id="footer_con">
<table width="100%" border="0" style="height:25px;"><tr><td></td></tr></table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
<td width="20"></td>
<td align="left" width="227" valign="top"><div   class="5vnplpv"   id='menu_foot'><span>服務項目</span><ul><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-74-1' alt='網站建設' title='網站建設'>網站建設</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-154-1' alt='網站服務明細' title='網站服務明細'>網站服務明細</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-152-1' alt='短視頻營銷' title='短視頻營銷'>短視頻營銷</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-155-1' alt='SSL認證' title='SSL認證'>SSL認證</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-75-1' alt='微信代運營、小程序開發' title='微信代運營、小程序開發'>微信代運營、小程序開發</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-77-1' alt='新媒體運營' title='新媒體運營'>新媒體運營</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-146-1' alt='寶雞外貿網站建設' title='寶雞外貿網站建設'>寶雞外貿網站建設</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-118-1' alt='建站流程' title='建站流程'>建站流程</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-97-1' alt='軟件定制開發' title='軟件定制開發'>軟件定制開發</a></h1></li></ul></div></td><td width="70"></td>
<td align="left" width="177" valign="top"><div   class="55dzh55"   id='menu_foots'><span>客戶案例</span><ul><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-52-1' alt='企業集團' title='企業集團'>企業集團</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-82-1' alt='黨政機關' title='黨政機關'>黨政機關</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-83-1' alt='有色金屬' title='有色金屬'>有色金屬</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-148-1' alt='外貿網站' title='外貿網站'>外貿網站</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-90-1' alt='機械裝備' title='機械裝備'>機械裝備</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-98-1' alt='電子電器' title='電子電器'>電子電器</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-99-1' alt='學校教育' title='學校教育'>學校教育</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-100-1' alt='食品工業' title='食品工業'>食品工業</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-101-1' alt='石油機械' title='石油機械'>石油機械</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-102-1' alt='服務行業' title='服務行業'>服務行業</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-103-1' alt='其他行業' title='其他行業'>其他行業</a></h1></li></ul></div></td><td width="70"></td>
<td align="left" width="177" valign="top"><div   class="hjhpxp5"   id='menu_foots'><span>關于我們</span><ul><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-92-1' alt='公司簡介' title='公司簡介'>公司簡介</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-93-1' alt='組織機構' title='組織機構'>組織機構</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-94-1' alt='企業文化' title='企業文化'>企業文化</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-105-1' alt='我們的優勢' title='我們的優勢'>我們的優勢</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-106-1' alt='人力資源' title='人力資源'>人力資源</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-107-1' alt='聯系我們' title='聯系我們'>聯系我們</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-108-1' alt='合作伙伴' title='合作伙伴'>合作伙伴</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-149-1' alt='網上繳費' title='網上繳費'>網上繳費</a></h1></li></ul></div></td><td width="70"></td>
<td align="left" width="197" valign="top"><div   class="3nxhpvx"   id='menu_foots'><span>新聞資訊</span><ul><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-86-1' alt='公司動態' title='公司動態'>公司動態</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-156-1' alt='短視頻營銷' title='短視頻營銷'>短視頻營銷</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-88-1' alt='網站推廣' title='網站推廣'>網站推廣</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-96-1' alt='網站優化' title='網站優化'>網站優化</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-153-1' alt='新媒體運營' title='新媒體運營'>新媒體運營</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-104-1' alt='微信營銷' title='微信營銷'>微信營銷</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-141-1' alt='行業資訊' title='行業資訊'>行業資訊</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-127-1' alt='常見問題' title='常見問題'>常見問題</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-139-1' alt='備案專欄' title='備案專欄'>備案專欄</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-143-1' alt='小程序應用' title='小程序應用'>小程序應用</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-145-1' alt='外貿網站建設' title='外貿網站建設'>外貿網站建設</a></h1></li><li><h1><a href='http://www.meigaomei0471.cc/index.php?ie=1-150-1' alt='網站維護' title='網站維護'>網站維護</a></h1></li></ul></div></td><td width="70"></td>
<td align="left" width="387" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr><td class="addressr" valign="top" width="135">聯系我們</td><td valign="top" align="left" style=" height:25px;float:left;font-size:20px;font-weight:600;color:#E9840E;">咨詢熱線：13619273150</td></tr>			 
  <tr><td colspan="2">
<form name="dopostform" id="dopostform" class="dopostform" method="post" action="http://www.meigaomei0471.cc/index.php?ie=93-1-1">
<div   class="hxdzhlp"   id="inputbg">　姓名（必填）:<input type="text" name="mdb[l_username]" size="42" id="name" class="inputs"></div>
<table width="100%" border="0" style="height:15px;"><tr><td></td></tr></table>
<div   class="hjpjjnr"   id="inputbg">　郵箱（必填）:<input type="text" name="mdb[l_email]" size="42" id="emails" class="inputs"></div>
<table width="100%" border="0" style="height:15px;"><tr><td></td></tr></table>
<div   class="dndldhv"   id="textabg"><span>　留言內容:</span><textarea name="mdb[l_content]" cols="45" rows="4" id="content" class="texta">
Copyright ? http://www.meigaomei0471.cc/　寶雞市世紀網絡技術有限公司　專業從事于寶雞網站建設,寶雞短視頻營銷,微信代運營,歡迎來電咨詢！
地址：寶雞市東高新區高新大道20號(新寶中對面)　電話：0917-3535180　13619273150　郵箱：bjwlyx@126.com
陜ICP備08000229號-1　本公司法律顧問：陜西秦軒律師事務所　黨東峰律師　　網站地圖　 XML