zoukankan      html  css  js  c++  java
  • HTML的常用标签

      1 <!--编写HTML常用的标签
      2     文字版面的编辑
      3         格式标签
      4         文本标签
      5     超链接和锚点
      6     图像和图像地图
      7     -->
      8 
      9 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     10 <html xmlns="http://www.w3.org/1999/xhtml">
     11 <head>
     12 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
     13 <title>格式标签</title>
     14 </head>
     15 
     16 <body>
     17 <!--格式标签用于网页中文本的布局、缩进、位置、换行、列表等
     18     <br>           换行
     19     <p>            段落
     20     <center>       居中
     21     <pre>          保留文字在源代码中的格式
     22     <ul><li>       无序列表
     23     <ol><li>       有序列表
     24     <hr>           水平分割线-->
     25     aaaaaa&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaa<br />
     26     bbbbbbbbbbbb<br />
     27     cccccccccccc<br />
     28     <hr>
     29     <p>aaaaaaaaaaa</p>
     30     <p style="color:blue">bbbbbbbbbbb</p>
     31     <p align="center">ccccccccccc</p>
     32     <hr />
     33     <center>居中文字</center>
     34     <hr />
     35     <pre>aaaa     bbbb    cccc     ddddd        eeeee     fffff     gggg   hhhhh    yyyyy </pre>
     36     <hr />
     37     <ul>
     38         <li>内容一
     39             <ul>
     40                 <li>列表项</li>
     41                 <li>列表项</li>
     42                 <li>列表项</li>
     43                 <li>列表项</li>
     44             </ul>
     45         </li>
     46         <li>内容二
     47             <ul>
     48                 <li>列表项</li>
     49                 <li>列表项</li>
     50                 <li>列表项</li>
     51                 <li>列表项</li>
     52             </ul>
     53         </li>
     54         <li>内容三
     55             <ul>
     56                 <li>列表项</li>
     57                 <li>列表项</li>
     58                 <li>列表项</li>
     59                 <li>列表项</li>
     60             </ul>
     61         </li>
     62     </ul>
     63     <hr width="600" size="20" noshade="noshade">
     64     <hr width="80%" size="20" noshade="noshade" color="#000000">
     65     <ol>
     66         <li>内容一
     67             <ol>
     68                 <li>列表项</li>
     69                 <li>列表项</li>
     70                 <li>列表项</li>
     71                 <li>列表项</li>
     72             </ol>
     73         </li>
     74         <li>内容二
     75             <ol>
     76                 <li>列表项</li>
     77                 <li>列表项</li>
     78                 <li>列表项</li>
     79                 <li>列表项</li>
     80             </ol>
     81         </li>
     82         <li>内容三
     83             <ol>
     84                 <li>列表项</li>
     85                 <li>列表项</li>
     86                 <li>列表项</li>
     87                 <li>列表项</li>
     88             </ol>
     89         </li>
     90     </ol>    <!--文本标签在网页中,为了着意强调某一部分文字,或者为了让文字有所变化
     91     <hn>(n为1~6)     标题文字
     92     <b>                粗体
     93     <i>                斜体
     94     <u>                下划线
     95     <font>
     96     <tt>
     97     <cite>
     98     <em>
     99     <strong>
    100     <small>
    101     <sub>           
    102     <sup>
    103     -->
    104     <h1>使用&lt;H1&gt;输出一号标题字体</h1>
    105     <h2>使用&lt;H2&gt;输出二号标题字体</h2>
    106     <h3>使用&lt;H3&gt;输出三号标题字体</h3>
    107     <h4>使用&lt;H4&gt;输出四号标题字体</h4>
    108     <h5>使用&lt;H5&gt;输出五号标题字体</h5>
    109     <h6>使用&lt;H6&gt;输出六号标题字体</h6>
    110     
    111     <b>粗体</b>
    112     <u>下划线</u>
    113     <i>斜体</i><br />
    114     
    115     <font face="楷体_GB2312" color="red" size="5">绝对字体大小为5的红色楷体字</font><br />
    116     <font face="宋体" color="green" size="+3">相对字体大小为+3的绿色字体</font><br>
    117     <font face="黑体" color="blue" size="-1">相对字体为-1的蓝色黑体字</font><br />
    118     
    119     <tt>输出打印文字</tt><br />
    120     <cite>输出引证、举例的斜体字</cite><br />
    121     <em>输出强调的斜体字</em><br />
    122     <strong>输出强调的粗体字</strong><br />
    123     <small>输出小型字体</small><br />
    124     <big>输出大型字体</big><br />
    125     
    126     
    127     
    128 <!--超链接标签-->
    129 <a href="../1/1.html">1.html网页</a>
    130 <br />
    131 
    132 <!--锚点标签
    133 <a href="URL">某某页面</a>:超链接
    134 <a name="name">内容</a>:锚点
    135 使用时<a href="#name">定位位置</a>
    136 -->
    137 <a href="#one">第一段</a>
    138 <a href="#two">第二段</a>
    139 <a href="#three">第三段</a>
    140 <br />
    141 <a name="one">
    142 aaaaaaaaa<br />
    143 aaaaaaaaa<br />
    144 aaaaaaaaa<br />
    145 </a><br />
    146 <a href="#">返回</a>
    147 <a name="two">
    148 bbbbbbbbbb<br />
    149 bbbbbbbbbb<br />
    150 bbbbbbbbbb<br />
    151 </a><br />
    152 <a href="#">返回</a>
    153 <a name="three">
    154 cccccccccc<br />
    155 cccccccccc<br />
    156 cccccccccc<br />
    157 </a>
    158 <a href="#">返回</a>
    159 <br />
    160 
    161 <!--图像标签
    162 <img>
    163 src:指定图片所在的URL
    164 border:边框的宽度
    165 alt:1.鼠标放上去有黄色小图标。2.如图片不存在,则出现它指定的文字。3.搜索引擎可以通过它指定的文字搜索该图片
    166 width:宽度
    167 height:高度
    168 -->
    169 <a href="../2/2.html"><img src="../1/logo.gif" border="0" width="300" alt="geshi_logo"/></a><br />
    170 
    171 <!--图片地图
    172 一个图像只能加一个a标签,做一个链接。
    173 如果把一副图像分成多个区域,每个区域指向不同的URL地址(为图片加多个链接)
    174 在图像标签<img>中使用usemap属性去使用地图热点
    175 <map>定义热点区域
    176 <area>指定每个热点区域
    177     shape指定形状rect(矩形)、poly(多边形)、circle(圆形)
    178     coords确定形状
    179     href指定链接的位置
    180 -->
    181             <img src="../1/logo.gif" usemap="#mymap" border=0 />
    182 
    183             <map name="mymap">
    184                 <area shape="rect"  coords="5, 5, 50, 70" href="../1/1.html" target="_blank">
    185                 <area shape="circle" coords="75, 35,30" href="../2/2.html" target="_blank">
    186                 <area shape="poly" coords="175,0,110,70, 180,70" href="#" target="_blank">
    187             </map>    
    188 </body>
    189 </html>
  • 相关阅读:
    Can't connect to local MySQL server through socket '/tmp/mysql.sock'
    reversePairs
    sort
    分割数组的最小值
    decode string
    276. 栅栏涂色
    133. Clone Graph
    Palindromic string
    爬楼梯
    正则匹配
  • 原文地址:https://www.cnblogs.com/Y-HKL/p/5244779.html
Copyright © 2011-2022 走看看