html的body内标签之图片及表格

1. img (src,alt,title)

列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="1.png">
</body>
</html>

运行结果：

2.自己测试跳转的效果吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.oldboyedu.com">
        <img src="1.png" title="大美女" style="height:200px;width:200px" alt="美女">
    </a>
</body>
</html>

3.列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.oldboyedu.com">
        <img src="1.png" title="大美女" style="height:200px;width:200px" alt="美女">
    </a>
    <ul>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
    </ul>
    <ol>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
    </ol>
    <dl>
        <dt>ttt</dt>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dt>ttt</dt>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dd>ddd</dd>
    </dl>
</body>
</html>

运行结果：

4. 表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>第1行，第1列</td>
            <td>第1行，第2列</td>
            <td>第1行，第3列</td>
        </tr>
        <tr>
            <td>第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
        </tr>
    </table>
</body>
</html>

运行结果：

5. 表头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <table border="1">
        <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>

        </tbody>

    </table>
    <tr>
        <td>第1行，第1列</td>
        <td>第1行，第2列</td>
        <td>第1行，第3列</td>
    </tr>
    <tr>
        <td>第2行，第1列</td>
        <td>第2行，第2列</td>
        <td>第2行，第3列</td>
    </tr>
</table>
</body>
</html>

运行结果：

6. 横向合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <table border="1">
        <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
                <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>5</td>
            <td colspan="2">6</td>
            <td>7</td>

        </tr>
                <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>

        </tbody>

    </table>
    <tr>
        <td>第1行，第1列</td>
        <td>第1行，第2列</td>
        <td>第1行，第3列</td>
    </tr>
    <tr>
        <td>第2行，第1列</td>
        <td>第2行，第2列</td>
        <td>第2行，第3列</td>
    </tr>
</table>
</body>
</html>

运行结果：

7.纵向合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <table border="1">
        <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
                <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>5</td>
            <td colspan="2">6</td>
            <td>7</td>

        </tr>
        <tr>
            <td rowspan="2">5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>

        </tbody>

    </table>
    <tr>
        <td>第1行，第1列</td>
        <td>第1行，第2列</td>
        <td>第1行，第3列</td>
    </tr>
    <tr>
        <td>第2行，第1列</td>
        <td>第2行，第2列</td>
        <td>第2行，第3列</td>
    </tr>
</table>
</body>
</html>

运行结果：

时间： 2024-12-28 23:20:38

html的body内标签之图片及表格的相关文章

html入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

一.转义字符由特殊字符包裹的文本会当做标签去解析对应不换行空格对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应< >对应> 二.行内元素和块级元素1.块级标签默认情况下,每一个块级元素都是独占一行的即元素的前后都会换行都有 align 属性,例如: p标签段落标签 h1~6标签标题标签 hr标签水平分割线标签 div标签块级元素 2.行内标签不会换行可以和其他的标签或文本在一行内显示

行内标签和块级标签

块级标签 div ………………块级标签 h1~h6 ………………标题 ul (内含多个li) ol (内含多个li) dl (内含一个dt 多个dd)………………列表 table(内含tr th td)……………………表格 p…………………………………………段落 br…………………………………………换行 form……………………………………表单行级标签 span a……………………超链接 img……………………图片 var……………………变量,显示斜体 strong…………

表格标签，图片标签，框架标签，表单标签

一)表格标签 <table>标签表格里面需要设置单元格的行,在行内设置单元格代表该行的列. 通过改变table的属性还有单元格的属性可以设置单元格的跨度,字体,对齐方式等. 示例: <table align="center" border="1px" width="400pt" height="300pt"> <tr> <th colspan="3">学习成

〇二——body内标签之交互输入标签二

我们在上一章讲了一些要通过后台程序实现交互的标签,下面我们看一看一些不通过后台实现交互的标签. 一.a标签 a标签主要实现超链接的功能 1.跳转效果这个效果比较简单,直接在属性里添加一个网址,然后可以做成链接效果 <a href="http://www.baidu.com"target='_blank'>百度</a> 其中的target='_blank'意思是在新窗口内打开链接.targe还有其他的属性,但是这个是用的比较多的. 2.锚效果有些比较好的博客,

CSS中的行内标签变成块级标签

大家都知道,CSS中的行内标签(span,i,b等等),是不能设置宽高或者margin-top;margin-bottom;但是在设置了display为block或者inline-block的情况下是可以设置的,这就是常见的行内元素转化为块级元素: 今天给大家分享的是自己在案例中看到的小技巧.给行内标签添加position:absolute或者float中的设置,行内元素是会被默认转成块级元素!!!

jQuery获取动态产生的html内标签或元素

下午分享<MVC编辑状态两个DropDownList联动>http://www.cnblogs.com/insus/p/3426563.html 不久,马上有网友问及三级联动的例子.Insus.NET回复他,会做二级联动,三级应该不难.原理与方法是一样的. 写此篇的目的,还是处理jQuery怎样获取动态产生后的html的标签或是元素.还是先回过头去看篇头指定的链接的文章.一开始时,Insus.NET使用了jQuery的ajax产生了一数据行,并append至 <tbody id=&quo

通过HTTP请求获取网上或公司内网服务器图片显示到页面

<span style="white-space:pre"> </span>/** * @author luoguohui * @date 2015年7月16日 * Description: 通过HTTP请求获取网上或公司内网服务器图片 * @params urlStr 如http://creatim.allyes.com.cn/imedia/csdn/20150715/15_39_00_5A1E2C1E.jpg

css基础 display:block 行内标签转为块级标签

礼悟: 公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体. 虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜. ide:visual studio 2017 browser:Chrome os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu