• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
遥远的梦
--心有多大, 世界就有多大
博客园    首页    新随笔    联系   管理    订阅  订阅

html常用标签

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title>HTML--标记</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <!--HTML注释-->
    HTML文本内容
   
    <br />
    换行后
   
    <nobr>禁止自动换行(折返)*****************************************************
          *********************************************************************************----------------------</nobr>
    
    <nobr>在禁止自动换行(折返)中强制部分文本换行.........................................................................................00000000000000000000000000000000000788
         887kkkkkkkkkkkkkkkkkkkkkkkk-------------------------------------<wbr>这里是强制换行</wbr></nobr>
        
    <hr width="80%" size="20%" color="blue"/>
    <hr color="Red" align="left" width="50%" />
    加入两条换分隔线
   
    <p style=" font-style:italic" align="left" >这一行的下面插入了一条空白行.</p>
    网页内容
   
    <pre>这个标签的作用是:   将编辑时的文字排版格式
         如 如实的显示出来  
    </pre>
   
    <center>这个标签的作用是, 无论窗口如何变化, 文本内容始终都是居中的.</center>
   
    <br />
   
    <blockquote style="font-style:italic">使文本内容向右缩进</blockquote>
    <blockquote style="background-color:blue">使文本内容第二次向右缩进.</blockquote>
   
    <bdo dir="rtl" >ABCDEFG: 这个标签可以让文本从右向左排版</bdo>
   
    <cite style="background-color:Blue">这个标签起一个引用出处的作用: 这首诗出自李白****</cite>
   
    <address style="background-color:Yellow">这个标签强调网络地址: 家庭:中国, 电话: 232323</address>
   
    <span style="background-color:Yellow; font-style:oblique;">该标签中标记的文字一直使用它定义的样式,直到遇到span的结束符/span</span>
   
    <h1>H1, H2....H7都是用来设置文档的标题, 字体由大到小</h1>
    <h5>这是h5大小的标题</h5>
   
    <basefont size="5">设置整个网页的基本格式: 后面所有文本都呈现此格式, 直到再次遇到别的basefont或终止于/basefont </basefont>
    <basefont color="green">网页的后一部分内容</basefont>
   
    <br />
    <font color="red" size="5" face="Times New Reman">font标签设置特殊的文本</font>
   
    <br />
    <b style="font-weight:900">使文字呈现粗体--特别强调的文本</b>
   
    <br />
  
    <strong>这是使用strong标签特别强调的文字</strong>这是一段正常的文字
   
    <br />
    加入文字: <i>这是使用 i 强调的一段斜体文字</i> 原来的文字段
    <br />
    <em>em 同 i 强调一样的效果, 现已取代 i</em>
    <br />
    <u>这是使用 u 强调的一段带下划线的文字</u>
   
    <br />
    <big>这是放大的文字</big>
    <small>这是缩小的文字</small>
    <br />
    <ins>这是刚加入的文字</ins>
    <br />
    <del datetime="2008-8-21: 08: 58: 35">这是带删除线的文字</del>
    <s>这也是带删除线的文字</s>
   
    <br />
    H <sub> 2 </sub> O
    这里演示的是sub将文字变成下标
    <br />
    Na <sup> + </sup> 这里演示的是用sup将文字变成上标
   
    <br />
    <tt>will哈哈</tt> 使用tt标签使文字中的字符变成等宽.(中英文的占比率是 2:1)
   
    <br />
    <ruby style="background-color:Blue; right:auto">利用 ruby 标签在文字右上方产生小的说明文字 <rt>这是说明文字</rt></ruby>
    其中 rt 是用来标记日文假名
   
    <br />
    <kbd>这段文字表示专门由键盘输入的文字</kbd>
    <br />
    <samp>这段文字表示专门由电脑输出的文字</samp>
    <br />
    <code>表示一段程序代码: Private Sub Exit() <br /> Uploade me</code>
    <br />
    <dfn>dfn表示一个专有名词,如 MIDI是一种音乐文件的格式类型</dfn>
   
    <br />
    使用 var 标签表示程序变量, 小于号"<"用 "lt"输出<br />
    for( <var> j </var> =0; <var> j </var>&lt;10 <var>j</var>++)
   
    <br />
    menu标签能让无顺序的项目自动向右编排,并加上空白列
    <menu>
      <li>项目1</li>
      <li>项目2</li>
      <li>项目3</li>
    </menu>
   
    <br />
    dir标签同menu一样.
    <dir>
      <li>项目1</li>
      <li>项目2</li>
      <li>项目3</li>
    </dir>
   
    <br />
    LH标签能提供圆心, 但不自己向右编排, 并不能加上空白列
   
    <br />
    使用li添加圆心标号
     <menu>
      <li>项目1</li>
      <li>项目2</li>
      <li>项目3</li>
    </menu>
   
    <br />
    使用ul能清楚地呈现清单项目与标题的从属关系
    <ul>
     <li>项目1</li>
     <li>项目2</li>
    </ul>
   
    <br />
    OL标签允许用户自定义项目前的标记, 默认为阿拉伯数字
    <ol>
    <li>项目1</li>
    <li>项目2</li>
    </ol>
    <ol type='A'>
    <li>项目1</li>
    <li>项目2</li>
    </ol>
   
    <br />
    DL标签能呈现说明的文字.dt为项目, dd为说明的文字
    <dl>
    <dt>项目1</dt>
    <dd>项目1说明</dd>
    </dl>
   
    <br />
    acronym 用来添加提示标记<br />
    <acronym title="中国最大的门户网站"> <a href= http://www.sina.com>新浪网</a> </acronym>
    </div>
    </form>
</body>
</html>

 

---table标签

 table标记主要是通知浏览器后面的内容将以表格的形式呈现出来.
    属性之一 frame控制表格的边框形式. above表示上有边框, void 表示下无边框等
    <br />
    注意: table对单元格的格式控制是丰富多彩的.
    如: 以对单元格中的文字居中为例: <br />
    <menu>
     <li>如果要让整个table中所有单元格都居中,则应该在 table 的 style 属性中写style="text-align:center;"</li>
     <li>如果要让某一行中的所有单元格都居中, 则应该在 tr 标记中的 align 属性中:align="center;" </li>
     <li>而如果要让某一个列或单元格中的文字居中, 则应该在 td 标记中的align属性中写: align="left;" </li>
     <li>说明: 叠层的顺序是 table->tr->td. 也就说后面相同的定义会覆盖前面相同的定义</li>
    </menu>
    <table width="70%" border="2" frame="hsides" align="center" style="text-align:center;">
    <tr>
     <td >单元格1.1</td>
     <td>单元格1.2</td>
    </tr>
   
    <tr align="right">
     <td align="left">单元格2.1</td>
     <td>单元格2.2</td>
    </tr>
    </table>
   
    <br />
    TBody标记只能用在 table标记中, 起编辑表格形式的作用. 每一个标记只能标记一种表格形式
    <table width="50%" align="center" border="2" frame="box">
     <tbody valign="top">
       <tr><td height="50">单元格1</td></tr>
       <tr><td height="50">单元格2</td></tr>
      
       <tr>
         <th>th为表格表头, 用法跟td完全一样</th>
         <td>这是表格表头后面的单元格内容</td>   
      </tr>
     </tbody>
    </table>
   
    <br />
    thead确定表的表头, 用法同tbody一样. tfoot与thead用法一致.
     <table width="70%" border="2" frame="box" align="center" style="text-align:center;">
     <thead><tr><td>这里是表的表头</td></tr></thead>
    <tr>
     <td >单元格1.1</td>
     <td>单元格1.2</td>
    </tr>
   
    <tr align="right">
     <td align="left">单元格2.1</td>
     <td>单元格2.2</td>
    </tr>
    </table>
   
    <br />
     caption标记来完成表格的标题.
     <table width="70%" border="2" frame="box" align="center" style="text-align:center;">
     <caption>这里是表的标题</caption>
    <tr>
     <td >单元格1.1</td>
     <td>单元格1.2</td>
    </tr>
   
    <tr align="right">
     <td align="left">单元格2.1</td>
     <td>单元格2.2</td>
    </tr>
    </table>

posted on 2008-09-03 14:57  子逸  阅读(935)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3