注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

让一切都逝去吧

排骨炖泥菜/猪肝炒苹果/鱼籽狗肉汤/狗头薏米汤

 
 
 

日志

 
 

html  

2011-11-13 23:08:04|  分类: web |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

例子:

<pre> &lt;html&gt;  &lt;head&gt;   &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt; &lt;/script&gt; &lt;/head&gt;  &lt;body&gt;    &lt;script type=&quot;text/javascript&quot;&gt;     xmlDoc=<a href="http://ljhzzyx.blog.163.com/blog/dom_loadxmldoc.asp">loadXMLDoc</a>(&quot;books.xml&quot;);     document.write(&quot;xmlDoc is loaded, ready for use&quot;);   &lt;/script&gt;  &lt;/body&gt;  &lt;/html&gt; </pre> 

在上面的代码中,<pre> 标签中的特殊符号被转换为符号实体,比如 "&lt;" 代表 "<","&gt;" 代表 ">"。另外,请注意蓝色的代码,我们在 <pre> 标签中使用了链接,也就是 <a> 标签。上面这段代码的显示效果如下:

<html>  <head>   <script type="text/javascript" src="http://ljhzzyx.blog.163.com/blog/loadxmldoc.js"> </script> </head>  <body>    <script type="text/javascript">     xmlDoc=loadXMLDoc("books.xml");     document.write("xmlDoc is loaded, ready for use");   </script>  </body>  </html>

提示和注释

提示:制表符(tab)在 <pre> 标签定义的块当中可以起到应有的作用,每个制表符占据 8 个字符的位置。但是我们不推荐使用它,因为在不同的浏览器中,Tab 的实现各不相同。在用 <pre> 标签格式化的文档段中使用空格,可以确保文本正确的水平位置。

提示:如果您希望使用 <pre> 标签来定义计算机源代码,比如 HTML 源代码,请使用符号实体来表示特殊字符,比如 "&lt;" 代表 "<","&gt;" 代表 ">","&amp;" 代表 "&"。

提示:在 W3School 中,非常多页面中的源代码实例都是通过 <pre> 标签定义的,您可以参考这些页面,学习如何使用该标签。我们甚至把 <pre> 标签与 <code> 标签结合起来使用,以获得更加精确的语义。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中,pre 元素的 "width" 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD 中,pre 元素的 "width" 属性是不被支持的。


HTML特殊转义字符列表

最常用的字符实体
Character Entities

显示 说明 实体名称 实体编号

半方大的空白 &ensp; &#8194;

全方大的空白 &emsp; &#8195;

不断行的空白格 &nbsp; &#160;
< 小于 &lt; &#60;
> 大于 &gt; &#62;
& &符号 &amp; &#38;
" 双引号 &quot; &#34;
? 版权 &copy; &#169;
? 已注册商标 &reg; &#174;
? 商标(美国) ? &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

ISO 8859-1 (Latin-1)字符集

HTML 4.01 支持 ISO 8859-1 (Latin-1) 字符集。

备注:为了方便起见,以下表格中,“实体名称”简称为“名称”,“实体编号”简称为“编号”

显示 名称 编号 显示 名称 编号 显示 名称 编号 显示 名称 编号 显示 名称 编号
  &nbsp; &#160; ? &iexcl; &#161; ? &cent; &#162; ? &pound; &#163; ¤ &curren; &#164;
? &yen; &#165; ? &brvbar; &#166; § &sect; &#167; ¨ &uml; &#168; ? &copy; &#169;
? &ordf; &#170; ? &laquo; &#171; ? &not; &#172; ? &shy; &#173; ? &reg; &#174;
? &macr; &#175; ° &deg; &#176; ± &plusmn; &#177; ? &sup2; &#178; ? &sup3; &#179;
? &acute; &#180; ? &micro; &#181; ? &para; &#182; · &middot; &#183; ? &cedil; &#184;
? &sup1; &#185; ? &ordm; &#186; ? &raquo; &#187; ? &frac14; &#188; ? &frac12; &#189;
? &frac34; &#190; ? &iquest; &#191; ? &Agrave; &#192; ? &Aacute; &#193; ? &Acirc; &#194;
? &Atilde; &#195; ? &Auml; &#196; ? &Aring; &#197; ? &AElig; &#198; ? &Ccedil; &#199;
? &Egrave; &#200; ? &Eacute; &#201; ? &Ecirc; &#202; ? &Euml; &#203; ? &Igrave; &#204;
? &Iacute; &#205; ? &Icirc; &#206; ? &Iuml; &#207; ? &ETH; &#208; ? &Ntilde; &#209;
? &Ograve; &#210; ? &Oacute; &#211; ? &Ocirc; &#212; ? &Otilde; &#213; ? &Ouml; &#214;
× &times; &#215; ? &Oslash; &#216; ? &Ugrave; &#217; ? &Uacute; &#218; ? &Ucirc; &#219;
? &Uuml; &#220; ? &Yacute; &#221; ? &THORN; &#222; ? &szlig; &#223; à &agrave; &#224;
á &aacute; &#225; ? &acirc; &#226; ? &atilde; &#227; ? &auml; &#228; ? &aring; &#229;
? &aelig; &#230; ? &ccedil; &#231; è &egrave; &#232; é &eacute; &#233; ê &ecirc; &#234;
? &euml; &#235; ì &igrave; &#236; í &iacute; &#237; ? &icirc; &#238; ? &iuml; &#239;
? &eth; &#240; ? &ntilde; &#241; ò &ograve; &#242; ó &oacute; &#243; ? &ocirc; &#244;
? &otilde; &#245; ? &ouml; &#246; ÷ &divide; &#247; ? &oslash; &#248; ù &ugrave; &#249;
ú &uacute; &#250; ? &ucirc; &#251; ü &uuml; &#252; ? &yacute; &#253; ? &thorn; &#254;
? &yuml; &#255;

数学和希腊字母标志
symbols, mathematical symbols, and Greek letters

显示 名称 编号 显示 名称 编号 显示 名称 编号 显示 名称 编号 显示 名称 编号
? &fnof; &#402; Α &Alpha; &#913; Β &Beta; &#914; Γ &Gamma; &#915; Δ &Delta; &#916;
Ε &Epsilon; &#917; Ζ &Zeta; &#918; Η &Eta; &#919; Θ &Theta; &#920; Ι &Iota; &#921;
Κ &Kappa; &#922; Λ &Lambda; &#923; Μ &Mu; &#924; Ν &Nu; &#925; Ξ &Xi; &#926;
Ο &Omicron; &#927; Π &Pi; &#928; Ρ &Rho; &#929; Σ &Sigma; &#931; Τ &Tau; &#932;
Υ &Upsilon; &#933; Φ &Phi; &#934; Χ &Chi; &#935; Ψ &Psi; &#936; Ω &Omega; &#937;
α &alpha; &#945; β &beta; &#946; γ &gamma; &#947; δ &delta; &#948; ε &epsilon; &#949;
ζ &zeta; &#950; η &eta; &#951; θ &theta; &#952; ι &iota; &#953; κ &kappa; &#954;
λ &lambda; &#955; μ &mu; &#956; ν &nu; &#957; ξ &xi; &#958; ο &omicron; &#959;
π &pi; &#960; ρ &rho; &#961; ? &sigmaf; &#962; σ &sigma; &#963; τ &tau; &#964;
υ &upsilon; &#965; φ &phi; &#966; χ &chi; &#967; ψ &psi; &#968; ω &omega; &#969;
? &thetasym; &#977; ? &upsih; &#978; ? &piv; &#982; ? &bull; &#8226; &hellip; &#8230;
&prime; &#8242; &Prime; &#8243; ? &oline; &#8254; ? &frasl; &#8260; ? &weierp; &#8472;
? &image; &#8465; ? &real; &#8476; ? &trade; &#8482; ? &alefsym; &#8501; &larr; &#8592;
&uarr; &#8593; &rarr; &#8594; &darr; &#8595; ? &harr; &#8596; ? &crarr; &#8629;
? &lArr; &#8656; ? &uArr; &#8657; ? &rArr; &#8658; ? &dArr; &#8659; ? &hArr; &#8660;
? &forall; &#8704; ? &part; &#8706; ? &exist; &#8707; ? &empty; &#8709; ? &nabla; &#8711;
&isin; &#8712; ? &notin; &#8713; ? &ni; &#8715; &prod; &#8719; &sum; &#8721;
? &minus; &#8722; ? &lowast; &#8727; &radic; &#8730; &prop; &#8733; &infin; &#8734;
&ang; &#8736; &and; &#8743; &or; &#8744; &cap; &#8745; &cup; &#8746;
&int; &#8747; &there4; &#8756; ? &sim; &#8764; &cong; &#8773; &asymp; &#8776;
&ne; &#8800; &equiv; &#8801; &le; &#8804; &ge; &#8805; ? &sub; &#8834;
? &sup; &#8835; ? &nsub; &#8836; ? &sube; &#8838; ? &supe; &#8839; ? &oplus; &#8853;
? &otimes; &#8855; &perp; &#8869; ? &sdot; &#8901; ? &lceil; &#8968; ? &rceil; &#8969;
? &lfloor; &#8970; ? &rfloor; &#8971; ? &lang; &#9001; ? &rang; &#9002; ? &loz; &#9674;
? &spades; &#9824; ? &clubs; &#9827; ? &hearts; &#9829; ? &diams; &#9830;

重要的国际标记
markup-significant and internationalization characters

显示 名称 编号 显示 名称 编号 显示 名称 编号 显示 名称 编号 显示 名称 编号
" &quot; &#34; & &amp; &#38; < &lt; &#60; > &gt; &#62; ? &OElig; &#338;
? &oelig; &#339; ? &Scaron; &#352; ? &scaron; &#353; ? &Yuml; &#376; ? &circ; &#710;
? &tilde; &#732; ? &ensp; &#8194; ? &emsp; &#8195; ? &thinsp; &#8201; ? &zwnj; &#8204;
? &zwj; &#8205; ? &lrm; &#8206; ? &rlm; &#8207; &ndash; &#8211; &mdash; &#8212;
&lsquo; &#8216; &rsquo; &#8217; ? &sbquo; &#8218; &ldquo; &#8220; &rdquo; &#8221;
? &bdquo; &#8222; ? &dagger; &#8224; ? &Dagger; &#8225; &permil; &#8240; ? &lsaquo; &#8249;
? &rsaquo; &#8250; ? &euro; &#8364;

JavaScript转义符

转义序列 字符
\b 退格
\f 走纸换页
\n 换行
\r 回车
\t 横向跳格 (Ctrl-I)
\' 单引号
\" 双引号
\\ 反斜杠

编程的时候要注意特殊字符的问题,很多运行时出现的问题都是因为特殊字符的出现而引起的。

注意,由于反斜杠本身用作转义符,因此不能直接在脚本中键入一个反斜杠。如果要产生一个反斜杠,必须一起键入两个反斜杠 (\\)。



<input name="result" id="result" type="text" onFocus="this.blur();" size="20" value=""> 
是一个输入框,用户输入文本的框就是类似于百度的搜索框,大小是20,value=""说明初始为空 
onfocuse="this.blur()" 
onfocuse是聚焦的意思,当你把光标放在文本框上输入的时候,就是聚焦,但这里添加了"this.blur()",blur的作用就是去除聚焦,也就是你不能把光标放在这个文本框上,换句话说就是你不能输入文本了 
---------- 
整个代码构成了”不能输入任何文本的文本框“
      这个补充一点,就是this.blur()会造成“tab”失效。

从根源上看,加onfocus=”this.blur()”是为了去除链接获取焦点后外围的虚线框(当然chrome、safari、opera下的focus效果各异,这里姑且就这么叫吧 )。W3C关于Outline的文章里说明这个虚线框用来告诉用户当前页面获取焦点的元素。我觉得,虚线框的存在有它的合理性,但有时你也许无法回避某些”视觉洁癖”需求(如图二:虚线框使“商品”背景和下面的红色色块分隔开了),以下总结了去掉虚线框的几种常用方法:

去除虚线框的方法优劣兼容性是否中断tab
<a href=”#” onfocus=”this.blur()”>this blur</a>链接聚焦触发时失去焦点,js和html耦合在一起没有兼容性问题
a:focus {outline:none}或
a{outline:none}
outline由css2.1引入,去除虚线框视觉上的问题正是css的职责ie6/ie7不支持,ie8+/ff /safari/opera[2]支持
<a href=”#” hidefocus=”true” >hidefocus</a>该属性是ie的私有属性[3]ie5+支持
a { noFocusLine: expression(this.onFocus = this.blur())}可批量处理,但expression的性能问题不能忽视expression ie6/7支持,ie8+、非ie不支持

综合以上,去除链接虚线框的推荐方法是:ie下用hidefocus属性,ff/chorme/opera/safari下用outline:none。即:

<a href=”#” hidefocus=”true” >链接</a>
a:focus {
    outline:none;
}

杨永全同学无奈地说,如果页面因为onfocus=”this.blur()”导致tab无法访问页面全部内容,争渡读屏软件在读取页面之前会强制过滤掉这个属性,但是如果用户是在js里面动态触发this.blur(),读屏软件又要出新招来克制了。这无疑增加了读屏软件的开发工作量,为了让盲人用户们能更顺畅的访问我们的网站,尽量避免使用onfocus=”this.blur()”

  评论这张
 
阅读(2176)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017