img、列表和table标签

时间：2023-01-14 10:18:16

一、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>

　　如下：

img、列表和table标签

　　2.2 ol标签

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

<body>

    <ol>

        <li>Python</li>

        <li>Html</li>

        <li>Linux</li>

    </ol>

</body>

　　如下：

img、列表和table标签

　　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>

　　如下：

img、列表和table标签

三、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： 表示列

'''

　　如下：

　　img、列表和table标签

　　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标签：为表格中内容做链接

'''

　　如下：

img、列表和table标签

　　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"：表示占两列， 同时要删去一列

'''

　　如下：

img、列表和table标签

　　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标签

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

  1. ol&comma;ul&comma;dl&comma;table标签的基本语法

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

  2. dl标签和table标签

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

  3. 如何用&lt&semi;dl&gt&semi;标签做表格而不用table标签

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

  4. table标签用法

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

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

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

  6. python处理html的table标签

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

  7. &lbrack;转载&rsqb; 散列表&lpar;Hash Table&rpar;从理论到实用（上）

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

  8. &lbrack;转载&rsqb; 散列表&lpar;Hash Table&rpar;从理论到实用（中）

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

  9. &lbrack;转载&rsqb; 散列表&lpar;Hash Table&rpar; 从理论到实用（下）

    转载自: 白话算法(6) 散列表(Hash Table) 从理论到实用(下) [澈丹,我想要个钻戒.][小北,等等吧,等我再修行两年,你把我烧了,舍利子比钻戒值钱.] ——自扯自蛋 无论开发一个程序还 ...

随机推荐

  1. 仅此一文让你明白ASP&period;NET MVC原理

    ASP.NET MVC由以下两个核心组成部分构成: 一个名为UrlRoutingModule的自定义HttpModule,用来解析Controller与Action名称: 一个名为MvcHandler ...

  2. 如何在ubuntu中启用SSH服务

    如何在ubuntu14.04 中启用SSH服务 开篇科普:  SSH 为 Secure Shell 的缩写,由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为 ...

  3. user&lowbar;jj两条记录改成一条

    1.前台index控制器,用user_jj.*add找到,home_ddxx_pcz_cl() 2.前台index控制器,用user_jj.*add找到,tgbz_list_sd_cl(),tgbz_ ...

  4. C&num;整理1——进制转换

    进制转换:二进制,八进制,十进制,十六进制. (一)二进制转十进制: 1.写2 2.标指数,从右向左,从0开始依次标记 3.乘系数,一一对应. 4.相加. 例:二进制数1101转十进制数* 1.2   ...

  5. shopnc b2b2c如何开启伪静态？？

    shopnc b2b2c开启伪静态的方法 一. windows环境下 1.先下载isapi rewrite插件,安装,然后我们把根目录下面的htaccess.txt那么修改成.htaccess即可. ...

  6. for循环 &plus; setTimeout 结合的烂大街的面试题

    零.背景 最近在翻看以前的老书<node.js开发指南>,恰好碰到for循环 + setTimeout的经典例子,于是重新梳理了思路并记录下. 一.写在前面,setTimeout和setI ...

  7. C&plus;&plus;中const用于函数重载

    C++中const用于函数重载 常成员函数和非常成员函数之间的重载 首先先回忆一下常成员函数 声明:<类型标志符>函数名(参数表)const: 说明: (1)const是函数类型的一部分, ...

  8. mongodb副本集实现

    目录 1. 简单介绍 primary: secondary: arbiter: 2.系统环境设置: 3.安装mongodb 安装mongodb 增加配置文件: 添加启动脚本 3. 副本集实现: 1. ...

  9. BZOJ4671异或图

    题目描述 定义两个结点数相同的图 G1 与图 G2 的异或为一个新的图 G, 其中如果 (u, v) 在 G1 与 G2 中的出现次数之和为 1, 那么边 (u, v) 在 G 中, 否则这条边不在 ...

  10. debian设置软件源为阿里云

    首先编辑sources.list这个文件 sudo vim /etc/apt/sources.list 把sources.list文件内容替换成如下 deb http://mirrors.aliyun ...

相关文章