zoukankan      html  css  js  c++  java
  • HTML基础和表格

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body topmargin="200" leftmargin="200"><a name="top"></a>
    今天天气不错<br />
    <font color="red" size="35">
    <b>文字加粗方式1,b标签</b><br />
    <strong>文字加粗方式2,strong标签</strong><br />
    <i>文字倾斜方式1,i标签</i><br />
    <em>文字倾斜方式2,em标签</em><br />
    <u>文字加下划线,u标签</u><center>center居中标签,默认前后若有其他,执行前后换行,保证自身是一个整体,然后进行居中显示</center>123
    <p>p标签,段落标签,默认前后若有其他,执行前后换行并且空开一行</p>
    123<ol>ol有序列表
    <li>默认自带序号</li>
    <li>自动换行</li>
    <li>默认前后若有其他,执行前后换行并且空开一行</li>
    </ol>123
    <ul>ul无序列表
    <li>默认不自带序号</li>
    <li>自动换行</li>
    <li>默认前后若有其他,执行前后换行并且空开一行</li>
    </ul>456<br />
    <a href="http://www.baidu.com/" target="_blank">百度一下</a><br />
    <img src="n0.jpg" title="这是一头牛" alt="zheshiyitouniu" /><br />
    <a href="http://360.com"><img src="n0.jpg" width="325" /></a><br />
    <img src="n0.jpg" width="400" height="150" />
    </font>
    <h1>h1~h6标签,标题控制标签</h1>
    <h2>重要性依次减小</h2>
    <h3>默认前后若有其他,执行前后换行并且空开一行</h3>
    <h4>在大环境内的字体大小的基础之上进行加或者减</h4>
    <div style="background-color:#0F6">div层标签,默认一上来就占用一行</div>
    <span style="background-color:#936">span层标签,使用多少就占用多少</span><br /><br />
    
    <table align="center" width="480" height="90" border="1" cellpadding="0" cellspacing="0">
    <tr align="center">
    <td width="120"><a href="http://autohome.com/">汽车之家</a></td>
    <td width="120">易车网</td>
    <td width="120">太平洋汽车</td>
    <td rowspan="2">新浪汽车</td>
    </tr>
    <tr align="center">
    <td>58同城</td>
    <td>赶集网</td>
    <td>百姓网</td>
    </tr>
    <tr align="center">
    <td colspan="2">淘宝</td>
    <td>唯品会</td>
    <td>聚美优品</td>
    </tr>
    </table>
    
    
    
    <br />
    
    <a href="#top">返回最顶端</a>
    </body>
    </html>
    

    font

    文字加粗方式1,b标签
    文字加粗方式2,strong标签
    文字倾斜方式1,i标签
    文字倾斜方式2,em标签
    文字加下划线,u标签

    center居中标签,默认前后若有其他,执行前后换行,保证自身是一个整体,然后进行居中显示

    p标签,段落标签,默认前后若有其他,执行前后换行并且空开一行

    span层标签,使用多少就占用多少

    标题

    h1~h6标签,标题控制标签

    重要性依次减小

    默认前后若有其他,执行前后换行并且空开一行

    在大环境内的字体大小的基础之上进行加或者减

     超链接标签

    一,锚点标签 <a name=“”?/></a>

     二,锚点链接 <a href=“目标链接的name值"></a>

    图片标签

    <img src="图片地址"  title =”文字“ alt="文字" width="" heigh=""/>

    title 用来为元素提供额外说明信息

    alt 为了给那些不能看到你文档中图像的浏览者提供文字说明

     

     

    表格

    对齐方式alignwidth ;高height边宽border边距cellpadding ;间距cellspacing

     

    水平对齐方式align  ;竖直对齐方式 valign  ;行高height

    单元格

    <th></th>表头,内容自动居中加粗

    水平对齐方式align  ;竖直对齐方式 valign  ;行高height

    colspan 合并水平单元格;rowspan合并竖直单元格

     表格标题

    <caption></caption>  

    caption 元素定义表格标题。

    caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上

    单实线表格双实线表格

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body > <font size="+5"> <caption>粗线表格 </caption>
    <table  border="1" width="500" cellpadding="0"  cellspacing="1"  bgcolor="#000000">
    <tr bgcolor="#FFFFFF">
    <td>qqqq</td>
    
    </tr>
    </table>
    </table> <caption> 单实线表格</caption> <table border="0" width="500" cellpadding="0" cellspacing="1" bgcolor="#000000"> <tr bgcolor="#FFFFFF"> <td>qqqq</td> </tr> </table> </font> </body> </html>

     

    横单线

    <table width="60%" border="1" cellspacing="0" cellpadding="0" rules="rows" frame="hsides">
    <caption>这是系列横单线试验</caption>
    <tr>
    <td> 这是系列横单线试验,效果还好吧?</td>
    </tr>
    <tr>
    <td> </td>
    </tr>
    <tr>
    <td> </td>
    </tr>
    </table> 
    

    、<table>标记的rules和frame参数,rules参数是对表格的内部边框作显示控制。

      rules="none":表示不加内部边框;

      rules="rows":表示只显示水平方向的边框;

      rules="cols:表示只显示垂直方向上的边框;

      rules="all":则是显示所有方向上的边框,这也是默认值;

      frame="void":表示不加外边框;

      frame="above":表示显示上边的外边框;

      frame="below":表示显示下边的外边框;

      frame="lhs" :表示显示左边的外边框;

      frame="rls" :表示显示右边的外边框;

      frame="hsides":表示显示上下外边框;

      frame="vsides":表示显示左右外边框;

      frame="box" 则表示显示所有外边框。

  • 相关阅读:
    【bzoj 1143】[CTSC2008]祭祀river
    【SRM-09 B】撕书II
    【刷题记录】BZOJ-USACO
    【noip 2014】提高组Day2T3.华容道
    【noip 2012】提高组Day2T3.疫情控制
    【noip 2012】提高组Day1T3.开车旅行
    点分治
    2—SAT问题
    生成树
    莫比乌斯反演
  • 原文地址:https://www.cnblogs.com/zoubizhici/p/5456986.html
Copyright © 2011-2022 走看看