学会这样写HTML代码2

作者：佚名发布时间：2011-11-23 浏览：2413次

9. 格式化片段 /

 是指 computer code text, 而 
 是指 preformatted text。 的范围更广，并且是块状元素，可能被使用来格式化各种文本，特别是代码。使用没有需要特别注意的，主要是语义上的正确使用，比如不要用  来代替一般的 。
text-align:center

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

10. 换行: 

在现代网页中，使用 
 的情况是非常少的。网页中的留白，一般都是使用 CSS 的 padding 和 margin 来实现。这样更精准，并用更容易控制。现在推荐的用法是，使用到一般的段落 
 中做简单的换行，而不是用来控制页面留白。
我是一个段落。

诗歌都会用换行的。

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。可能很多刚入门前端的同学会对 、、 、、 这几个标签的使用拿捏不准。 和  基本上是被废置的，相当于现在的  和 ，一般情况下他们对于内容重要性的排序是这样的：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.bjsjwl.com/"><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 id='pre_next'><ul><li><h1><a href='https://www.bjsjwl.com/index.php?ie=2-110-2047-1'title='做好以下三点有效防止黑客攻击'>上一篇： 做好以下三点有效防止黑客攻击</a></h1><h2><a href='https://www.bjsjwl.com/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 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 class="BSHARE_COUNT bshare-share-count">0</span></div><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=1&lang=zh"></script><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
<table width="100%" border="0" style="height:20px;"><tr><td></td></tr></table>
<div 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 id="footer">
<div 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 id='menu_foot'><span>服务项目</span><ul><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-74-1' alt='网站建设' title='网站建设'>网站建设</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-154-1' alt='网站服务明细' title='网站服务明细'>网站服务明细</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-155-1' alt='SSL认证' title='SSL认证'>SSL认证</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-77-1' alt='新媒体运营' title='新媒体运营'>新媒体运营</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-75-1' alt='微信代运营、小程序开发' title='微信代运营、小程序开发'>微信代运营、小程序开发</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-152-1' alt='SEO优化' title='SEO优化'>SEO优化</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-146-1' alt='宝鸡外贸网站建设' title='宝鸡外贸网站建设'>宝鸡外贸网站建设</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-118-1' alt='建站流程' title='建站流程'>建站流程</a></h1></li><li><h1><a href='https://www.bjsjwl.com/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 id='menu_foots'><span>客户案例</span><ul><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-52-1' alt='企业集团' title='企业集团'>企业集团</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-82-1' alt='党政机关' title='党政机关'>党政机关</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-83-1' alt='有色金属' title='有色金属'>有色金属</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-148-1' alt='外贸网站' title='外贸网站'>外贸网站</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-90-1' alt='机械装备' title='机械装备'>机械装备</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-98-1' alt='电子电器' title='电子电器'>电子电器</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-99-1' alt='学校教育' title='学校教育'>学校教育</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-100-1' alt='食品工业' title='食品工业'>食品工业</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-101-1' alt='石油机械' title='石油机械'>石油机械</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-102-1' alt='服务行业' title='服务行业'>服务行业</a></h1></li><li><h1><a href='https://www.bjsjwl.com/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 id='menu_foots'><span>关于我们</span><ul><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-92-1' alt='公司简介' title='公司简介'>公司简介</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-93-1' alt='组织机构' title='组织机构'>组织机构</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-94-1' alt='企业文化' title='企业文化'>企业文化</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-105-1' alt='我们的优势' title='我们的优势'>我们的优势</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-106-1' alt='人力资源' title='人力资源'>人力资源</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-107-1' alt='联系我们' title='联系我们'>联系我们</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-108-1' alt='合作伙伴' title='合作伙伴'>合作伙伴</a></h1></li><li><h1><a href='https://www.bjsjwl.com/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 id='menu_foots'><span>新闻资讯</span><ul><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-86-1' alt='公司动态' title='公司动态'>公司动态</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-88-1' alt='网站推广' title='网站推广'>网站推广</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-96-1' alt='网站优化' title='网站优化'>网站优化</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-153-1' alt='新媒体运营' title='新媒体运营'>新媒体运营</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-104-1' alt='微信营销' title='微信营销'>微信营销</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-141-1' alt='行业资讯' title='行业资讯'>行业资讯</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-127-1' alt='常见问题' title='常见问题'>常见问题</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-139-1' alt='备案专栏' title='备案专栏'>备案专栏</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-143-1' alt='小程序应用' title='小程序应用'>小程序应用</a></h1></li><li><h1><a href='https://www.bjsjwl.com/index.php?ie=1-145-1' alt='外贸网站建设' title='外贸网站建设'>外贸网站建设</a></h1></li><li><h1><a href='https://www.bjsjwl.com/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="https://www.bjsjwl.com/index.php?ie=93-1-1">
<div 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 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 id="textabg"><span>　留言内容:</span><textarea name="mdb[l_content]" cols="45" rows="4" id="content" class="texta">
Copyright © https://www.bjsjwl.com/　宝鸡市世纪网络技术有限公司　专业从事于宝鸡网站建设,宝鸡SEO优化,宝鸡网站优化,欢迎来电咨询！
地址：宝鸡市东高新区高新大道20号(新宝中对面)　电话：0917-3535180　13619273150　邮箱：bjwlyx@126.com
陕ICP备08000229号-1　本公司法律顾问：陕西秦轩律师事务所　党东峰律师　　网站地图　 XML