123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
- <title>HTML 辅助函数 - CodeIgniter 中文手册|用户手册|用户指南|Wiki文档</title>
- <link rel="shortcut icon" href="http://codeigniter.org.cn/user_guide/../images/design/favicon.ico" type="image/x-icon" />
- <link rel="stylesheet" type="text/css" media="all" href="../userguide.css" />
- <link rel="search" href="http://codeigniter.org.cn/user_guide/../CodeIgniterSearch.xml" type="application/opensearchdescription+xml" title="CodeIgniter 搜索"/>
- <link rel="canonical" href="http://codeigniter.org.cn/user_guide/helpers/html_helper.html" />
- <script type="text/javascript" src="../nav/mootools.js-ver=20130324.js"></script>
- <script type="text/javascript" src="../nav/mootools-more.js-ver=20130324.js"></script>
- <script type="text/javascript" src="../nav/nav.js-ver=20130324.js"></script>
- <script type="text/javascript" src="../nav/user_guide_menu.js-ver=20130324.js"></script>
- <meta name="robots" content="all" />
- <meta name="author" content="ExpressionEngine Dev Team" />
- <meta name="description" content="CodeIgniter 中文手册, CodeIgniter 用户指南, CodeIgniter User Guide, Wiki 文档" />
- </head>
- <body>
- <!-- START NAVIGATION -->
- <div id="nav">
- <div id="nav_inner">
- <script type="text/javascript">create_menu('../');</script>
- </div>
- </div>
- <script type="text/javascript">_setNavigation();</script>
- <div id="nav2"><a name="top"></a><a href="javascript:void(0);" onclick="myHeight.toggle();"><img src="../images/nav_toggle_darker.jpg" width="154" height="43" border="0" title="切换目录" alt="切换目录" /></a></div>
- <div id="masthead" class="clearfix">
- <div class="topbar-hd"><h1>CodeIgniter 用户指南 版本 2.2.0</h1></div>
- <div class="topbar-tip">编辑文档、查看近期更改请 <a href="#">登录</a> 或 <a href="#">注册</a> <a href="#">找回密码</a></div> <div id="breadcrumb_right"><a href="../toc.html">目录页</a></div>
- </div>
- <!-- END NAVIGATION -->
- <!-- START BREADCRUMB -->
- <table cellpadding="0" cellspacing="0" border="0" style="width:100%">
- <tr>
- <td id="breadcrumb">
- <a href="#" target="_blank">CodeIgniter 中国首页</a> ›
- <a href="../index.html">用户指南首页</a> › HTML 辅助函数 </td>
- <td id="searchbox">
- <form method="get" action="http://www.google.com.hk/search" target="google_window">
- <input type="hidden" name="client" value="pub-0176846097796333"></input>
- <input type="hidden" name="forid" value="1"></input>
- <input type="hidden" name="ie" value="UTF-8"></input>
- <input type="hidden" name="oe" value="UTF-8"></input>
- <input type="hidden" name="as_sitesearch" id="as_sitesearch" value="codeigniter.org.cn/user_guide/" />
- 搜索用户指南
- <input type="text" class="input" style="width:200px;" name="q" id="q" size="31" maxlength="255" value="" />
-
- <input type="submit" class="submit" name="sa" value="Go" />
- </form>
- </td>
- </tr>
- </table>
- <!-- END BREADCRUMB -->
- <div style="clear:both;text-align:right;padding: 6px 40px 0 0;">
- <a href="#" target="_blank">查看原文</a>
- </div>
- <!--<br clear="all" />--><!-- START CONTENT -->
- <div id="content">
- <h1>HTML辅助函数</h1>
- <p>HTML 辅助函数涵盖了一些用于 HTML 操作的函数。</p>
- <ul>
- <li><a href="#br">br()</a></li>
- <li><a href="#heading">heading()</a></li>
- <li><a href="#img">img()</a></li>
- <li><a href="#link_tag">link_tag()</a></li>
- <li><a href="#nbs">nbs()</a></li>
- <li><a href="#ol_and_ul">ol() 和 ul()</a></li>
- <li><a href="#meta">meta()</a></li>
- <li><a href="#doctype">doctype()</a></li>
- </ul>
- <h2>装载辅助函数</h2>
- <p>本辅助函数的装载通过如下代码完成:</p>
- <code>$this->load->helper('html');</code>
- <p>可用的函数如下:</p>
- <h2><a name="br"></a>br()</h2>
- <p>生成指定个数的换行标签 (<br />) 。例如:</p>
- <code>echo br(3);</code>
- <p>如上代码将显示: <br /><br /><br /></p>
- <h2><a name="heading"></a>heading()</h2>
- <p>帮助你创建 HTML <h1> 标签. 第一个字段用于标记显示内容,第二个字段用于标该标签所用字号。例如:</p>
- <code>echo heading('Welcome!', 3);</code>
- <p>如上代码将显示: <h3>Welcome!</h3></p>
- <p>Additionally, in order to add attributes to the heading tag such as HTML classes, ids or inline styles, a third parameter is available.</p>
- <code>echo heading('Welcome!', 3, 'class="pink"')</code>
- <p>The above code produces: <h3 class="pink">Welcome!<h3></p>
- <h2><a name="img"></a>img()</h2>
- <p>帮助你创建 HTML <img /> 标签。 第1个参数包含的是图片文件的路径。 例如:</p>
- <code>echo img('images/picture.jpg');<br />
- // 生成 <img src="http://site.com/images/picture.jpg" /></code>
- <p>第2个参数是可选的, 其值为TRUE或者FALSE, 作用是决定该函数生成的图片地址中是否包含由$config['index_page']所设置的起始页面。 一般来说, 当你使用媒体控制器时才使用这个。</p>
- <p><code>echo img('images/picture.jpg', TRUE);<br />
- // 生成 <img src="http://site.com/index.php/images/picture.jpg" alt="" /></code></p>
- <p>此外, 关联数组也能够被作为参数传递到 img() 函数中, 用来实现对所有属性和值的完全控制。如果没指定 alt 属性,则 CodeIgniter 将产生一个空字符串。</p>
- <p><code> $image_properties = array(<br />
- 'src' => 'images/picture.jpg',<br />
- 'alt' => 'Me, demonstrating how to eat 4 slices of pizza at one time',<br />
- 'class' => 'post_images',<br />
- 'width' => '200',<br />
- 'height' => '200',<br />
- 'title' => 'That was quite a night',<br />
- 'rel' => 'lightbox',<br />
- );<br />
- <br />
- echo img($image_properties);<br />
- // <img src="http://site.com/index.php/images/picture.jpg" alt="Me, demonstrating how to eat 4 slices of pizza at one time" class="post_images" width="200" height="200" title="That was quite a night" rel="lightbox" /></code></p>
- <h2><a name="link_tag"></a>link_tag()</h2>
- <p>帮助你创建 HTML <link /> 标签。在链接样式表以及其他内容时非常有用。参数包括 href 以及可选的 rel, type, title, media 以及 index_page。index_page 是一个TRUE/FALSE 值,作用是决定该函数生成的 href 地址中是否包含由 $config['index_page']所设置的起始页面。<code>
- echo link_tag('css/mystyles.css');<br />
- // 生成 <link href="http://site.com/css/mystyles.css" rel="stylesheet" type="text/css" /></code></p>
- <p>更多示例:</p>
- <code>
- echo link_tag('favicon.ico', 'shortcut icon', 'image/ico');<br />
- // <link href="http://site.com/favicon.ico" rel="shortcut icon" type="image/ico" />
- <br />
- <br />
- echo link_tag('feed', 'alternate', 'application/rss+xml', 'My RSS Feed');<br />
- // <link href="http://site.com/feed" rel="alternate" type="application/rss+xml" title="My RSS Feed" /> </code>
- <p>此外,关联数组也能够被作为参数传递到 link_tag() 函数中, 用来实现对所有属性和值的完全控制。</p>
- <p><code>
- $link = array(<br />
- 'href' => 'css/printer.css',<br />
- 'rel' => 'stylesheet',<br />
- 'type' => 'text/css',<br />
- 'media' => 'print'<br />
- );<br />
- <br />
- echo link_tag($link);<br />
- // <link href="http://site.com/css/printer.css" rel="stylesheet" type="text/css" media="print" /></code></p>
-
- <h2><a name="nbs"></a>nbs()</h2>
- <p>生成不换行的指定个数的空格标签(&nbsp;)。例如:</p>
- <code>echo nbs(3);</code>
- <p>如上代码将显示: &nbsp;&nbsp;&nbsp;</p>
- <h2><a name="ol_and_ul"></a>ol() 和 ul()</h2>
- <p>允许你通过简单或多维的数组生成有序或无序的HTML列表。例如:</p>
- <code>
- $this->load->helper('html');<br />
- <br />
- $list = array(<br />
- 'red', <br />
- 'blue', <br />
- 'green',<br />
- 'yellow'<br />
- );<br />
- <br />
- $attributes = array(<br />
- 'class' => 'boldlist',<br />
- 'id' => 'mylist'<br />
- );<br />
- <br />
- echo ul($list, $attributes);<br />
- </code>
- <p>如上代码将显示:</p>
- <code>
- <ul class="boldlist" id="mylist"><br />
- <li>red</li><br />
- <li>blue</li><br />
- <li>green</li><br />
- <li>yellow</li><br />
- </ul>
- </code>
- <p>这是一个更复杂的例子,应用了多维数组:</p>
- <code>
- $this->load->helper('html');<br />
- <br />
- $attributes = array(<br />
- 'class' => 'boldlist',<br />
- 'id' => 'mylist'<br />
- );<br />
- <br />
- $list = array(<br />
- 'colors' => array(<br />
- 'red',<br />
- 'blue',<br />
- 'green'<br />
- ),<br />
- 'shapes' => array(<br />
- 'round', <br />
- 'square',<br />
- 'circles' => array(<br />
- 'ellipse', <br />
- 'oval', <br />
- 'sphere'<br />
- )<br />
- ),<br />
- 'moods' => array(<br />
- 'happy', <br />
- 'upset' => array(<br />
- 'defeated' => array(<br />
- 'dejected',<br />
- 'disheartened',<br />
- 'depressed'<br />
- ),<br />
- 'annoyed',<br />
- 'cross',<br />
- 'angry'<br />
- )<br />
- )<br />
- );<br />
- <br />
- <br />
- echo ul($list, $attributes);</code>
- <p>如上代码将显示:</p>
- <code>
- <ul class="boldlist" id="mylist"><br />
- <li>colors<br />
- <ul><br />
- <li>red</li><br />
- <li>blue</li><br />
- <li>green</li><br />
- </ul><br />
- </li><br />
- <li>shapes<br />
- <ul><br />
- <li>round</li><br />
- <li>suare</li><br />
- <li>circles<br />
- <ul><br />
- <li>elipse</li><br />
- <li>oval</li><br />
- <li>sphere</li><br />
- </ul><br />
- </li><br />
- </ul><br />
- </li><br />
- <li>moods<br />
- <ul><br />
- <li>happy</li><br />
- <li>upset<br />
- <ul><br />
- <li>defeated<br />
- <ul><br />
- <li>dejected</li><br />
- <li>disheartened</li><br />
- <li>depressed</li><br />
- </ul><br />
- </li><br />
- <li>annoyed</li><br />
- <li>cross</li><br />
- <li>angry</li><br />
- </ul><br />
- </li><br />
- </ul><br />
- </li><br />
- </ul>
- </code>
- <h2><a name="meta"></a>meta()</h2>
- <p>帮助你创建meta标签. 你可以将字符串、简单数组或者多维数组传递给函数. 例如:</p>
- <code>
- echo meta('description', 'My Great site');<br />
- // 生成: <meta name="description" content="My Great Site" /><br />
- <br /><br />
- echo meta('Content-type', 'text/html; charset=utf-8', 'equiv'); // 注意第3个参数.,可以是 "equiv" 或者 "name"<br />
- // 生成: <meta http-equiv="Content-type" content="text/html; charset=utf-8" /><br />
- <br /><br />
- echo meta(array('name' => 'robots', 'content' => 'no-cache'));<br />
- // 生成: <meta name="robots" content="no-cache" /><br />
- <br /><br />
- $meta = array(<br />
- array('name' => 'robots', 'content' => 'no-cache'),<br />
- array('name' => 'description', 'content' => 'My Great Site'),<br />
- array('name' => 'keywords', 'content' => 'love, passion, intrigue, deception'),<br />
- array('name' => 'robots', 'content' => 'no-cache'),<br />
- array('name' => 'Content-type', 'content' => 'text/html; charset=utf-8', 'type' => 'equiv')<br />
- );<br />
- <br />
- echo meta($meta);
- <br />
- // 生成: <br />
- // <meta name="robots" content="no-cache" /><br />
- // <meta name="description" content="My Great Site" /><br />
- // <meta name="keywords" content="love, passion, intrigue, deception" /><br />
- // <meta name="robots" content="no-cache" /><br />
- // <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
- </code>
- <h2><a name="doctype"></a>doctype()</h2>
- <p>帮助你创建文档类型声明以及DTD。默认值是 XHTML 1.0 Strict ,但你也可以指定其他很多文档类型。</p>
- <code>
- echo doctype();<br />
- // <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
- <br />
- echo doctype('html4-trans');<br />
- // <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- </code>
- <p>下面是支持的文档类型列表。它们都是可灵活配置的,可以在 <samp>application/config/doctypes.php</samp> 中配置。</p>
- <table cellpadding="0" cellspacing="1" border="0" style="width:100%" class="tableborder">
- <tr>
- <th>文档类型</th>
- <th>选项</th>
- <th>结果</th>
- </tr>
- <tr>
- <td class="td">XHTML 1.1</td>
- <td class="td">doctype('xhtml11')</td>
- <td class="td"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></td>
- </tr>
- <tr>
- <td class="td">XHTML 1.0 Strict</td>
- <td class="td">doctype('xhtml1-strict')</td>
- <td class="td"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></td>
- </tr>
- <tr>
- <td class="td">XHTML 1.0 Transitional</td>
- <td class="td">doctype('xhtml1-trans')</td>
- <td class="td"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></td>
- </tr>
- <tr>
- <td class="td">XHTML 1.0 Frameset</td>
- <td class="td">doctype('xhtml1-frame')</td>
- <td class="td"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"></td>
- </tr>
- <tr>
- <td class="td">HTML 5</td>
- <td class="td">doctype('html5')</td>
- <td class="td"><!DOCTYPE html></td>
- </tr>
- <tr>
- <td class="td">HTML 4 Strict</td>
- <td class="td">doctype('html4-strict')</td>
- <td class="td"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></td>
- </tr>
- <tr>
- <td class="td">HTML 4 Transitional</td>
- <td class="td">doctype('html4-trans')</td>
- <td class="td"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></td>
- </tr>
- <tr>
- <td class="td">HTML 4 Frameset</td>
- <td class="td">doctype('html4-frame')</td>
- <td class="td"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"></td>
- </tr>
- </table><p> </p>
- <div id="Contributors">
- 翻译贡献者:
- Hex, szlinz, yinzhili</div>
- <div id="DocDate">
- 最后修改: 2012-02-05 23:58:58</div>
- </div>
- <!-- END CONTENT -->
- <div id="footer">
- <p>
- 上一个主题: <a href="form_helper.html">表单辅助函数</a> · <a href="#top">页首</a>
- · <a href="../index.html">用户指南首页</a> · 下一个主题: <a href="path_helper.html">路径辅助函数</a> </p>
- <p><a href="#">CodeIgniter</a> · 版权所有 © 2006-2013 · <a href="#">Ellislab, Inc.</a></p>
- <p>中文化: <a href="#">CodeIgniter 中国</a> · 制作: Hex · 版本: 1.30 · 鸣谢: 子非鱼</p>
- </div>
- </body>
- </html>
|