一、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. js备忘录2

    JavaScript 的类型分为两类,分别是原始类型和对象类型 其中原始类型中只有数字.字符串和布尔型,和java中的有些不一样 null和undefined不是基本数据类型中的某一种 对象是prop ...

  2. oracle删除死锁进程

    在命令行下运行: select SID,SERIAL# from v$session t1, v$locked_object t2 where t1.sid = t2.SESSION_ID; alte ...

  3. 如何：通过将HTML编码应用于字符串来防止Web应用程序中的脚本漏洞

    当用户可以将可执行代码(或脚本)添加到您的应用程序中时,会发生大多数脚本攻击.默认情况下,ASP.NET提供请求验证,如果表单发布包含任何HTML,则会引发错误. 您可以通过以下方式帮助防止脚本漏洞利 ...

  4. pktgen-dpdk 运行 run.py 报错 Config file 'default' not found 解决方法

    pktgen 操作手册:http://pktgen-dpdk.readthedocs.io/en/latest/getting_started.html 执行到这一步时: $ cd <Pktge ...

  5. 基于GUI的小学生四则运算系统

    前言:首先在此感谢我的结对搭档,没有她的帮助和引导绝不会有现在的项目.很高兴和她一起结对完成这个项目.搭档真的是棒棒哒! 一.Coding.Net项目地址: https://git.coding.ne ...

  6. 深入理解Java类加载器(3)

    5.2 网络类加载器 下面将通过一个网络类加载器来说明如何通过类加载器来实现组件的动态更新.即基本的场景是:Java 字节代码(.class)文件存放在服务器上,客户端通过网络的方式获取字节代码并执行 ...

  7. iOS- CALayer绘图，如何绘制渐变效果图

    1.渐变效果 —> 色彩空间 首先:自定义一个渐变视图,在自定义视图中重写drawRect #import "ViewController.h" #import " ...

  8. 0603团队变化+sprint第二个冲刺

    开始一个新的冲刺: 起止:2016.6.1~2016.6.14 按照以下过程进行 ProductBacklog:继续向下细化 Sprint 计划会议:确定此次冲刺要完成的目标 Sprint Backl ...

  9. HBase 架构与工作原理2 - HBase 组件

    本文系转载,如有侵权,请联系我:likui0913@gmail.com 一.HBase 组件概览 Master-Slave 模式: HBase 体系结构遵循传统的 master-slave 模式,由一 ...

  10. 对一致性Hash算法及java实现（转）

    一致性Hash算法 关于一致性Hash算法,在我之前的博文中已经有多次提到了,MemCache超详细解读一文中"一致性Hash算法"部分,对于为什么要使用一致性Hash算法.一致性 ...