img、列表和table标签

一、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标签的更多相关文章

ol,ul,dl,table标签的基本语法
ol,ul,dl,table标签的基本语法有序列表: 无序列表: 自定义列表: <ol> <ul> < ...
dl标签和table标签
dl标签定义了一个定义列表 <html> <body> <h2>一个定义列表:</h2> <dl> <dt>计算机</ ...
如何用<dl>标签做表格而不用table标签
我们都知道很多的内容编辑器(TinyMCE编辑器.fck)都有插入表格功能,快速方便,但是这些表格用到的<table>标签,可以查看html源代码就能发现,table标签对搜索引擎不是很友 ...
table标签用法
<table>标签 HTML中表格由 <table> 标签来定义. 每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> ...
js技术之拖动table标签
一.js技术之拖动table标签起因:前几天公司,突然安排一个任务任务描述:要求尺码table列表要像Excel表中一样可以直接移动整行尺码到任意行位置技术点:采用ui的sortable技术来h ...
9月5日网页基础知识通用标签、属性（body属性、路径、格式控制）通用标签（有序列表、无序列表、常用标签）（补）
网页基础知识一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
python处理html的table标签
转载:http://www.xuebuyuan.com/583071.html python处理html的table标签 2012年01月06日 ⁄ 综合 ⁄ 共 5279字 ⁄ 字号小中大 ⁄ ...
[转载] 散列表(Hash Table)从理论到实用（上）
转载自:白话算法(6) 散列表(Hash Table)从理论到实用(上) 处理实际问题的一般数学方法是,首先提炼出问题的本质元素,然后把它看作一个比现实无限宽广的可能性系统,这个系统中的实质关系可以通 ...
[转载] 散列表(Hash Table)从理论到实用（中）
转载自:白话算法(6) 散列表(Hash Table)从理论到实用(中) 不用链接法,还有别的方法能处理碰撞吗?扪心自问,我不敢问这个问题.链接法如此的自然.直接,以至于我不敢相信还有别的(甚至是更好 ...

随机推荐

js中使用对象注意
var myObject = { hello: '你好', world : '世界' } 正常使用 myObject.hello //输出你好若引用的属性本身是一个变量: 需要用方括号使用 va ...
[2019BUAA软件工程]第0次个人作业
我 & 计算机写在前面撰写本博客时,笔者正就读北航计算机系大三下的软件工程课程.借由这次博客作业的机会,笔者从高考时与计算机专业结缘.大学对计算机的学习以及对未来的计划三方面进行了些许 ...
Sprint7
进展:根据昨天查到的资料,今天开始编写闹钟部分的代码,主要实现了闹钟添加事件显示时间主界面.
Hibernate的使用技巧②
1.Hibernate统计记录的数量 Criteria c = session.createCriteria(User.class.getName()); c.setProjection ...
B2
组员1:吴晓晖(组长) 过去两天完成了哪些任务代码重构基本完成展示GitHub当日代码/文档签入记录接下来的计划推荐算法还剩下哪些任务组员2:陈锦谋过去两天完成了哪些任务重新制作图标 ...
DPDK flow_filtering 源码阅读
代码部分 main.c /*- * BSD LICENSE * * Copyright 2017 Mellanox. * * Redistribution and use in source and ...
团队作业5-Alpha版本测试报告(彼岸芳华队)
请根据团队项目中软件的需求文档.功能说明.系统设计和测试计划,写出软件的测试过程和测试结果,并回答下述问题. 一.在测试过程中总共发现了多少Bug?每个类别的Bug分别为多少个?(10分) 在测试过程 ...
grunt入门讲解5：创建插件，安装Grunt以及常见问题
创建插件创建插件主要有以下几个步骤: (1)通过 npm install -g grunt-init 命令安装 grunt-init .(2)通过 git clone git://github.co ...
订制EditText光标
订制EditText光标设置背景android:background="@null" 设置光标样式:android:textCursorDrawable="@drawa ...
jquery on 事件嵌套事件执行多次
今天做了个项目,就是想点击添加然后追加一列,点击这一列的修改按钮,在修改, //编辑事件 $('#eventTable').on('click','.edit_n',function(){ var i ...