一、img图片

<body>

    <a href="https://www.fmtxt.com">

        <img src="data:images/1.jpg"  title="哆啦A梦" style="height: 200px; width: 200px " alt="哆啦A梦"/>

    </a>

</body>

'''

  1. 放在 a 标签中，点击图片就能跳转到链接的网站

  2. src : 图片的位置

  3. title：当鼠标放置在图片上时显示的内容

  4. alt：当图片不能打开时，显示的内容

'''

　　注： img 标签默认会自带1px的边框，可以使用样式 boder:0 去掉这个边框

二、列表标签

　　2.1 ul标签

　　说明：ul=>unordered lists 无序列表，跟li标签配合着使用

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

</body>

　　如下：

　　2.2 ol标签

　　说明：ol=>ordered lists 有序列表，也是跟li标签配合着使用　　

<body>

    <ol>

        <li>Python</li>

        <li>Html</li>

        <li>Linux</li>

    </ol>

</body>

　　如下：

　　2.3 dl标签

　　dl=>defintion list 定义一个列表   配合着dt=>defintion title(定义标题)和dd=>defintion description(描述)两个标签配合使用

<dl>

        <dt>浙江</dt>

        <dd>杭州</dd>

        <dd>金华</dd>

        <dd>嘉兴</dd>

        <dt>江苏</dt>

        <dd>苏州</dd>

        <dd>南京</dd>

        <dd>无锡</dd>

    </dl>

　　如下：

三、table标签

　　3.1 tr 和 td　　

    <table border="1">

        <tr>

            <td>姓名</td>

            <td>年龄</td>

            <td>地址</td>

        </tr>

        <tr>

            <td>张三</td>

            <td>22</td>

            <td>北京</td>

        </tr>

        <tr>

            <td>李四</td>

            <td>22</td>

            <td>上海</td>

        </tr>

    </table>

'''

  1. tr : 表示行

  2. td： 表示列

'''

　　如下：

　　

　　3.2 规范的表格写法 　　

<table border="1">

    <thead>

        <tr>

            <td>表头1</td>

            <td>表头2</td>

            <td>表头3</td>

            <td>表头4</td>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>

                <a href="https://www.baidu.com">1</a>

            </td>

            <td>1</td>

            <td>1</td>

            <td>1</td>

        </tr>

        <tr>

            <td>1</td>

            <td>1</td>

            <td>1</td>

            <td>1</td>

        </tr>

        <tr>

            <td>1</td>

            <td>1</td>

            <td>1</td>

            <td>1</td>

        </tr>

    </tbody>

'''

  thead：表头

  tbody：内容

  a标签：为表格中内容做链接

'''

　　如下：

　　3.3 合并单元格--列之间合并　　

    <thead>

        <tr>

            <td>表头1</td>

            <td>表头2</td>

            <td>表头3</td>

            <td>表头4</td>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td colspan="2">1</td>

            <td>1</td>

        </tr>

        <tr>

            <td>1</td>

            <td>1</td>

            <td>1</td>

            <td>1</td>

        </tr>

    </tbody>

'''

   colspan="2"：表示占两列， 同时要删去一列

'''

　　如下：

　　3.3 合并单元格--行之间合并　

    <tbody>

        <tr>

            <td rowspan="2">1</td>

            <td>1</td>

            <td>1</td>

            <td>1</td>

        </tr>

        <tr>

            <td>1</td>

            <td>1</td>

            <td>1</td>

        </tr>

    </tbody>

'''

   rowspan="2"：表示横跨两行，同时要在下一行中删去一列

'''

　　如下：

img、列表和table标签的更多相关文章

  1. ol,ul,dl,table标签的基本语法

    ol,ul,dl,table标签的基本语法 有序列表: 无序列表:                                  自定义列表: <ol> <ul> < ...

  2. dl标签和table标签

    dl标签定义了一个定义列表 <html> <body> <h2>一个定义列表:</h2> <dl>   <dt>计算机</ ...

  3. 如何用<dl>标签做表格而不用table标签

    我们都知道很多的内容编辑器(TinyMCE编辑器.fck)都有插入表格功能,快速方便,但是这些表格用到的<table>标签,可以查看html源代码就能发现,table标签对搜索引擎不是很友 ...

  4. table标签用法

    <table>标签 HTML中表格由 <table> 标签来定义. 每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> ...

  5. js技术之拖动table标签

    一.js技术之拖动table标签 起因:前几天公司,突然安排一个任务 任务描述:要求尺码table列表要像Excel表中一样可以直接移动整行尺码到任意行位置 技术点:采用ui的sortable技术来h ...

  6. 9月5日网页基础知识 通用标签、属性（body属性、路径、格式控制） 通用标签（有序列表、无序列表、常用标签）（补）

    网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

  7. python处理html的table标签

    转载:http://www.xuebuyuan.com/583071.html python处理html的table标签 2012年01月06日 ⁄ 综合 ⁄ 共 5279字 ⁄ 字号 小 中 大 ⁄ ...

  8. [转载] 散列表(Hash Table)从理论到实用（上）

    转载自:白话算法(6) 散列表(Hash Table)从理论到实用(上) 处理实际问题的一般数学方法是,首先提炼出问题的本质元素,然后把它看作一个比现实无限宽广的可能性系统,这个系统中的实质关系可以通 ...

  9. [转载] 散列表(Hash Table)从理论到实用（中）

    转载自:白话算法(6) 散列表(Hash Table)从理论到实用(中) 不用链接法,还有别的方法能处理碰撞吗?扪心自问,我不敢问这个问题.链接法如此的自然.直接,以至于我不敢相信还有别的(甚至是更好 ...

随机推荐

  1. css修改input自动提示的黄色背景

    css修改input自动提示的黄色背景 input:-webkit-autofill { background-color: #FAFFBD; background-image: none; -web ...

  2. Node.js中exports，module.exports以及require方法

    在Node.js中,使用module.exports.f = ...与使用exports.f = ...是一样的,此时exports就是module.exports的一种简写方式.但是,需要注意的是, ...

  3. 第十二周作业_PSP总结报告

    回顾1 (1)回想一下你曾经对计算机专业的畅想 当初你是如何做出选择计算机专业的决定的?经过一个学期,你的看法改变了么,为什么? 你认为过去接触到的课程是否符合你对计算机专业的期待,为什么?经过一个学 ...

  4. Daily Scrum 11.7

    明后两天周六日,按照TFS的日常安排应该是休息,所以让他们自由完成已经分配的任务. 姓名 今日任务 黄新越 提取爬取网页的关键字并输出到接口 刘垚鹏 程序总架构的修改与多线程的学习 王骜 多线程学习 ...

  5. OO的第一次死亡

    久仰OO大名,总是想着提前做点准备,其实到头来还是什么准备都没有做,所以这学期就是从零开始的面向对象生活,也因此遇到了很多的问题. 第一次作业——多项式加减 第一次作业历来是较为简单的,但是对于面向对 ...

  6. jQuery全屏滚动插件fullPage使用

    1. 引入jquery.js和jquery.fullPage.min.js <script src="jquery.min.js"></script> &l ...

  7. 牛客网国庆集训派对Day4题目 2018年

    链接:https://www.nowcoder.com/acm/contest/204/A来源:牛客网 深度学习 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 1048576K,其他 ...

  8. 基于windowsphone7的控制ppt播放

    最近突然想起了一个学长的一个利用手机控制ppt播放的一个创意,并想将其在windows phone7上实现一下. 经过几天的努力已经可以控制ppt的播放,暂停,上一张,下一张了,并且电脑会将当前ppt ...

  9. fx投影效果分离

    虽然忙着花花二期三期bug.bug  ing,修改等待中突然看见一张logo.文字下面的阴影图,如下,就满脑子在想阴影到底咋做的.. 七拼八凑的尝试后大体样子是有,终究没有上图那种字体轮廓的阴影... ...

  10. [转帖]PCI-E的部分知识

    PCI-E PCI-E全称是PCI Express,是新一代的总线接口.采用了目前业内流行的点对点串行连接,比起PCI以及更早期的计算机总线的共享并行架构,每个设备都有自己的专用连接,不需要向整个总线 ...