美文网首页我爱编程
html学习----标签(二)

html学习----标签(二)

作者: 这个姑凉儿 | 来源:发表于2018-04-16 11:25 被阅读0次

标签

此篇所记标签

  • &nbsp空格占位符
  • tabletr代表列,td代表行,th代表表头, cellpadding表格左右间距 、cellspacing表格上下间距,colspan跨列,rowspan跨行
  • ul:无序列表 (style="list-style-type:disc"圆点列表,style="list-style-type:circle"圆圈列表,style="list-style-type:square"正方形列表)
  • ol:有序列表(type="A"大写字母列表,type="a"小写字母列表,type="I"罗马数字列表,type="i"小写罗马数字列表)
  • li:定义列表项
  • dl:定义列表
  • dt:自定义列表项目
  • dd: 定义自列表项的描述
html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web学习</title>
    <link rel="stylesheet" href="text.css"> <!-- 引用外部的css -->
</head>
<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td align="center" class="biaoti" height="60">统计表</td>
    </tr>
    <tr>
        <td align="right" height="25">2018-04-16---2018-05-02</td>
    </tr>
</table>


<table border="0" width="100%" cellspacing="1" cellpadding="4" class="tabtop13" bgcolor="#cccccc">
    <tr>
        <td rowspan="2" class="btbg font-center titfont">姓名</td>
        <td rowspan="2" class="btbg font-center titfont">年龄</td>
        <td colspan="2" class="btbg font-center titfont">爱好</td>
        <td colspan="3" class="btbg font-center titfont">身体指标</td>
    </tr>
    <tr>
        <td class="btbg font-center titfont">游泳</td>
        <td class="btbg font-center titfont">绘画</td>
        <td class="btbg font-center titfont">体重</td>
        <td class="btbg font-center titfont">身高</td>
        <td class="btbg font-center titfont">心率</td>
    </tr>
    <tr>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td class="btbg font-center titfont">合计</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
        <td>&nbsp</td>
    </tr>
</table>
</body>
</html>
css:
@charset "utf-8";
/* CSS Document */
.tabtop13 {
    margin-top: 13px; /*margin-top 属性设置元素的上外边距*/
}
.tabtop13 td{
    background-color:#ffffff;
    height:25px;
    line-height:150%;
}
.font-center{ text-align:center}
.btbg{background:#e9faff !important;}
.biaoti{
    font-family: 微软雅黑;
    font-size: 26px;
    font-weight: bold;
    border-bottom:1px dashed #CCCCCC;
    color: #255e95;
}
.titfont {

    font-family: 微软雅黑;
    font-size: 16px;
    font-weight: bold;
    color: #255e95;
    background: url(../images/ico3.gif) no-repeat 15px center;
    background-color:#e9faff;
}

//无序列表
<ul>
    <li>coffee</li>
    <li>tea</li>
    <li>milk</li>
</ul>
//有序列表
<ol  type="A">
    <li>coffee</li>
    <li>tea</li>
    <li>milk</li>
</ol>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

相关文章

  • html学习----标签(二)

    标签 此篇所记标签  空格占位符 table:tr代表列,td代表行,th代表表头, cellpaddin...

  • 20170907html学习(二)常用标签,属性

    HTML学习(二)常用标签,属性 参考 HTML 教程| 菜鸟教程HTML 教程 - w3school 在线教程 ...

  • JAVA 之 HTML知识框架

    HTML简介 一. html是什么 二、html基本标签 三、html表单标签(重点) 四、html框架标签及其他

  • 04_HTML 属性

    前面我们学习了HTML的标签、元素。这次我们来学习HTML 属性。 HTML属性 HTML标签可以拥有属性。属性提...

  • web端测试也需要懂-HTML初识

    4.1 HTML骨架 4.2 HTML标签分类 一.双标签 <标签名>内容 二.单标签 <标签名/> ...

  • 一些html基础标签

    最近学习了一些html标签,下面对学习的标签作一个整理 HTML的排版标签: h标签:标题标签 p标签:段...

  • 二.HTML基础

    一.HTML 标题 HTML标题(Heading)是通过 - 等标签 二.HTML 段落 HTML段落是通过 标签...

  • HTML标签学习

    HTML基础学习(新收获) 通过再一次学习HTML的知识,有了更多的收获,发现了更多之前没有注意到的知识点,在学习...

  • 学习html标签

    标签的target四种状态 blank 新开界面打开 self 当前界面打开 parent...

  • HTML 标签学习

    快速添加标签 选中文本 在按住 command + alt + t 单标签只有开始标签没有结束标签,也就是由一个...

网友评论

    本文标题:html学习----标签(二)

    本文链接:https://www.haomeiwen.com/subject/rxslkftx.html