웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

HTML - Output elements 본문

html

HTML - Output elements

jokack01 2011. 11. 10. 11:35
<html lang="ko">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>HTML - Output elements</title>
  <style type="text/css">
  <!--
   .pre {
    white-space: pre;
   }
   
   .css {color: #27b2ff;}
    .css .selector { color: #77420f; }
   .javascript {color: #bf3200;}
   
   dfn {
    font-size: 120px;
   }
  -->
  </style>
 </head>
 <body>
 
  <h1>Output Elements</h1>
  
  <ul>
   <li>&lt;pre&gt;</li>
   <li>&lt;code&gt;</li>
   <li>&lt;kbd&gt;</li>
   <li>&lt;dfn&gt;</li>
   <li>&lt;samp&gt;</li>
   <li>&lt;var&gt;</li>
  </ul>
 
  <h2>preserved text &amp; Computer Code</h2>
  <p class="pre">
  <code class="css">
   <span class="selector">#header h1+p</span> {
    text-decoration: overline;
   }
  </code>
  <code class="javascript">var showMessage = function(msg) {
   return console.log(msg);
  };</code>
  </p>
  <pre>
  <code>var showMessage = function(msg) {
   return console.log(msg);
  };</code>
  </pre>
  
  <h2>Keyboard Text</h2>
  
  <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSrGIYmAkuweYn_N8qJ3I7Fs5uc8YkMA55ESbRkzLqKDJ_-Y7jLnJtDBOMM" alt="키보드 모양의 붉은 가방">
  
  <p>키보드 백 이벤트!!! 해당 이미지를 클릭하실 때 <kbd>Shift</kbd> 키를 함께 눌러주시면 이벤트에 참가하게 됩니다.</p>
  <p>해당 레이어(Layer)를 상위 그대로 복제하시려면 <kbd>Ctrl+J</kbd>를 눌러주세요.</p>
  
  
  <dfn>iPad</dfn>
  <p>Apple에서 제조한 Tablet으로 2015년까지 선두자리를 고수할 것으로 전문가들이 예측함.</p>
  
  
 </body>
</html>

'html' 카테고리의 다른 글

HTML Forms - other_forms_element  (0) 2011.11.10
HTML Forms - Fieldset, Legend  (0) 2011.11.10
button  (0) 2011.11.10
object  (0) 2011.11.10
form  (0) 2011.11.10