zoukankan      html  css  js  c++  java
  • HTML常用标签跟表格

    <html>    --开始标签

    <head>

    网页上的控制信息

    <title>页面标题</title>

    </head>

    <body>

    页面显示的内容

    </body>

    </html>    --结束标签
    注:成对存在

    body的属性:

    bgcolor     页面背景色         background        背景壁纸、图片          text         文字颜色         topmargin        上边距

    leftmargin      左边距          rightmargin            右边距         bottommargin      下边距            background 背景壁纸

    一、格式控制标签

    <font color="" face="" size=""></font>

    <font size="+4" color="#CCFF00">字体格式控制标签:</font>
    

    控制字体:颜色:color="##FF0000";字体:face;字体大小:size; 

    <b></b>                字体加粗

    <i></i>                  倾斜

    <u></u>                下划线

    <strong></strong> 字体加粗(强调,语气加强用)

    <em></em>           字体倾斜(强调,语气加强用)

    <center></center>  居中(前后有内容时自动换行 内容会单独占据一行)

    <br> 或<br />         相当于回车

    &nbsp                      表示空格 也可以在设计页面中按ctrl+shift+space

    二、内容容器标签

    <h1></h1>……<h6></h6>     标题(会自动换行)。

    <p></p>                               段落标签(段落之间空行)

    <div></div>                          层标签(默认占一行)

    <span></span>                     层标签(默认用多大空间占多大空间)

    <ol type="1">                       --有序列表,序号为1,2,3……,引号中可以更改序号形式

    <li>内容</li>

    <li>内容</li>

    </ol>                                  --上面“ol”改为“ul”则为无序列表

    三、超链接、图片标签

    <a href="http://www.baidu.com" target="new">百度一下</a><br />
    <img src="n0.jpg" alt="zheshiyitouniu" title="这是一头牛" /><br />

    四、表格

    <table></table> 表格

        宽度。可以用像素或百分比表示。常用960像素。

        border:边框。常用值0。

        cellpadding:内容跟单元格边框的边距。常用值0。

        cellspacing:单元格之间的间距。常用值0。

        align:对齐方式。

        bgcolor:背景色。

               background:背景图片。

     

      <tr></tr> 行

        align:一行的内容的水平对齐方式

        valign:一行的内容的垂直对齐方式

        height:行高

        bgcolor:背景色

               background:背景图片

     

      <td></td> 单元格

        align:单元格的内容的对齐方式

        valign:单元格的内容的垂直对齐方式

        width:单元格宽度

        height:单元格高度

        bgcolor:背景色

             background:背景图片
      <th></th> 表头,单元格的内容自动居中、加粗

    个人简历练习:

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
    <center><img src="QQ图片20161025152150.png" width="400"/></center>
    <table align="center" width="840" height="1048" border="1" cellpadding="0" cellspacing="0">
    <tr align="center">
    <td width="75" height="80">姓名:</td>
    <td width="70">张三</td>
    <td width="100">性别:</td>
    <td width="70"></td>
    <td width="100">出生年月:</td>
    <td width="200">1994.01.01</td>
    <td rowspan="4"><img src="3.jpg" width="225" height="316" /></td>
    </tr>
    <tr align="center">
    <td height="75">专业:</td>
    <td>666</td>
    <td>健康状况:</td>
    <td>良好</td>
    <td>籍贯:</td>
    <td>山东省淄博市</td>
    
    </tr>
    <tr align="center">
    <td height="75">毕业院校:</td>
    <td colspan="3">清华大学</td>
    <td>联系电话:</td>
    <td>13555555555</td>
    
    </tr>
    <tr align="center">
    <td height="80">邮箱:</td>
    <td colspan="3">291378108@qq.com</td>
    <td>学历:</td>
    <td>院士</td>
    
    
    </tr>
    <tr align="center">
    <td height="178">地址:</td>
    <td colspan="6">xxxxxxxxxxxxx</td>
    </tr>
    <tr align="center" height="70">
    <td rowspan="2" >工作经历:</td>
    <td colspan="6" rowspan="2">xxxxxxxx<br />xxxxxxx<br />xxxxxxxxx<br />xxxxx<br />xx<br /></td>
    </tr>
    <tr height="70">
    </tr>
    <tr align="center" height="40">
    <td rowspan="2">获奖证书:</td>
    <td colspan="6" rowspan="2"></td>
    </tr>
    <tr height="40">
    </tr>
    <tr align="center" height="70">
    <td>专业技能:</td>
    <td colspan="6">xxxxxxxxx<br />xxx<br /></td>
    </tr>
    <tr align="center" height="100">
    <td>个人评价:</td>
    <td colspan="6"></td>
    </tr>
    <tr align="center">
    <td></td>
    <td colspan="6"><a href="http://www.cnblogs.com/jiuban2391/">博客园</a></td>
    </tr>
    </table>
    </body>
    </html>
    View Code

    备注:这方面知识点比较琐碎,只能多去记忆才能加深印象

  • 相关阅读:
    【从小白到专家】收官!Istio技术实践之九:路由控制与灰度发布
    Kube-OVN 1.2.0发布,携手社区成员打造高性能容器网络
    Kubernetes最佳实践之腾讯云TKE 集群组建
    5大最新云原生镜像构建工具全解析,3个来自Google,你了解几个?
    【从小白到专家】 Istio专题之七:30分钟讲透Istio访问与控制
    后疫情时期传统企业的云原生之路将走向何方?第二期(2019-2020)云原生实践调研报告发布!
    使用Spring Security控制会话
    Spring Security – security none, filters none, access permitAll
    No bean named 'springSecurityFilterChain' is defined
    Unable to locate Spring NamespaceHandler for XML schema namespace
  • 原文地址:https://www.cnblogs.com/jiuban2391/p/6001911.html
Copyright © 2011-2022 走看看