Notifier's Blog

常遇困境,说明你在进步!
       常有压力,说明你有目标!
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

HTML代码学习梳理_上半部分

Posted on 2010-05-10 15:56  notifier  阅读(768)  评论(1)    收藏  举报

　　HTML的熟悉主要就是标签使用的熟悉过程，我觉得通过代码的阅读和书写最为有效。下面是HTML语言的基本元素的学习，各个标签都有注释。 

   <!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" >
       <head>
           <!--title的内容不显示在浏览器的页面内-->
           <title>这是页面的标题,显示在浏览器的标题栏,不显示在网页内容中</title>
       </head>
           <!--以下为黄色背景的网页正文-->
       <body bgcolor="yellow" text="Red">
           <b>这是加粗的文字</b>
          <p>这是一个段落,段落段首和段尾会各空出一行</p>
          <b><i>这是加粗斜体显示的文字</i></b>
          
          <!--h1到h6的标题-->
          <h1>这是标题</h1>
          <h2>这是标题</h2>
          <h3>这是标题</h3>
          <h4>这是标题</h4>
          <h5>这是标题</h5>
          <h6>这是标题</h6>
          
          <!--br是blank row的意思,该标签自关闭,所以最好写作<br/>-->
          <br />
          <h3 align="center">上面空出一行(本行居中显示)</h3>
          
          <!--hr标签插入一个水平线-->
          <hr />
          
          <!--以下是文本格式化的例子-->
          <b>加粗显示</b>
          <br>
          <strong>定义加重语气</strong>
          <br>
          <big>大字体</big>
          <br>
          <em>定义着重文字(emphasized)</em>
          <br>
          <i>斜体</i>
          <br>
          <small>小号字</small>
          <br>
          这段文字后面有下标字
          <sub>subscript</sub>
          <br>
          这段文字后面有上标字
          <sup>superscript</sup>
          
          <!--预格式文本输出,适合代码等-->
          <pre>
          pre预格式输出:
          for i = 1 to 10
             print i
             next i
          </pre>
          
          <!--联系方式和地址的格式化书写-->
          <address>
              <a href="mailto:baidu@gmail.com">我的邮箱</a><br />
              上海虹桥路<br />
              中国<br />
          </address>
          
          <!--缩写,在鼠标指示的时候,会显示全称-->
          <abbr title="United Nations">UN</abbr><br />
          <acronym title="World Wide Web">WWW</acronym><br />
          
          <!--引用,浏览器会在引用的话语段落插入换行和缩进-->
          <blockquote>
              这是引用的一段话,blabla~~~
          </blockquote>
          
          <!--删除字和下划线字的显示-->
          <del>这是删除字体显示</del><br />
          <ins>这是下划线字体显示</ins><br />
          
          <!--输出HTML的字符实体 < > & ""-->
           &lt;
           &gt;
           &amp;
           &quot;
           
           <!--插入链接-->
           <p><a href="#">本文本</a>指向本文本</p>
           <!--使用target属性,可以定义链接的文档在何处显示-->
           <p><a href="http://www.google.com.hk" target="_blank">本文本</a>指向Google香港</p>
           
           <!--使用图片作为链接-->
           <p>
               <a href="#">
               <img border=0 src="niu.jpg"/>
               </a>
           </p>
           
           <!--页面内跳转到命名锚,将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到命名锚-->
           <a name="tips">Useful Tips Section</a>
           <br />
           <a href="#tips">跳转到tips段落</a>
           
           <!--发送邮件的复杂方式-->
           <a href="mailto:baidu@gmail.com?cc=sogou@gmail.com&bcc=youdao@gmail.com;zhongsou@gmail.com&subject=Nice to meet you">
            给我发送邮件
           </a><br />
          
          <!--HTML表格,蓝色显示2行3列,边框为1磅,单元格边距为1.表格有表头,有表格的标题名为"我的表格"-->
          <table border="1" cellpadding="1" bgcolor="blue">
             <caption>我的表格</caption>
             <tr>
                 <th>第一列</th>
                 <th colspan="2">第二列</th>
             </tr>
             <tr>
                 <td align="right">一行,一列</td>
                 <td align="right">一行,二列</td>
                 <td align="right">一行,三列</td>
             </tr>
             <tr>
                 <td>二行,一列</td>
                 <td>二行,二列</td>
                 <td>二行,三列</td>
             </tr>
          </table>
           
          <!--HTML列表,包括无序列表,有序列表,嵌套列表和定义列表-->
          <!--无序列表-->
          <ul type="square">
             <li>苹果</li>
             <li>香蕉</li>
             <li>梨</li>   
          </ul>
          <!--有序列表-->
          <ol type="1">
             <li>苹果</li>
             <li>香蕉</li>
             <li>梨</li>
          </ol>
          <!--嵌套列表-->
          <ul>
             <li>咖啡</li>
             <li>茶
                 <ul>
                     <li>红茶</li>
                     <li>绿茶
                         <ul>
                             <li>中国绿茶</li>
                             <li>非洲绿茶</li>
                         </ul>
                     </li>
                 </ul>
             </li>
             <li>牛奶</li>
          </ul>
          <!--定义列表-->
          <dl >
             <dt>苹果</dt>
             <dd>苹果就是苹果树结出的果实嘛</dd>
             <dt>香蕉</dt>
             <dd>香蕉就是香蕉树结出的果实嘛</dd>
          </dl>
          
          <!--HTML表单和输入-->
          <form action="action="/example/html/form_action.asp" method="get">
          <!--文本框和密码框-->
             姓名:
             <input type="text" name="name" />
             <br />
             密码:
             <input type="password" name="password" />
             <br />
          <!--单选按钮-->
             <input type="radio" name="sex" value="Male" />Male
             <input type="radio" name="sex" value="Female" />Female
             <br />
          <!--复选框-->
             <input type="checkbox" name=".NET" value=".NET"/>.NET
             <input type="checkbox" name="J2EE" value="J2EE"/>J2EE
             <input type="checkbox" name="PHP" value="PHP"/>PHP
             <br />
          <!--提交按钮-->
             <input type="button" value="submit" >
             <br />
          <!--下拉菜单-->
             <select name="car">
                 <option>吉利</option>
                 <option>奇瑞</option>
                 <option>夏利</option>
             </select> 
          <!--按钮-->
             <input type="button" value="你好!" />
          </form>
          
          <!--插入图片-->
          <!--最简单的插入图片,其中alt是为了图像显示不出来时提示之用-->
          <img alt="niu.jpg" align="top" src="niu.jpg" width="44" height="44" />  
          <a href="mailto:baidu@gmail.com"><img alt="mail.png"src="mail.png" align="bottom"/></a>  
       </body>
 </html>