前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML之图像,表格,列表,区块(笔记小结)

HTML之图像,表格,列表,区块(笔记小结)

原创
作者头像
虫无涯
发布2023-02-07 13:12:27
1.7K0
发布2023-02-07 13:12:27
举报
文章被收录于专栏:全栈测试技术

1 图像

1.1 图像标签

  • 图像由<img> 标签定义;
  • <img> 是空标签,只包含属性,并且没有闭合标签;
  • 需要使用源属性(src),页面上才能显示图像,其值是图像的 URL 地址;

标签

说明

<img>

定义图像

<map>

定义图像地图

<area>

定义图像地图中的可点击区域

1.2 使用方法

代码语言:html
复制
<img src="url" alt="可替换的文本信息">

1.3 Alt属性

  • 用来为图像定义一串预备的可替换的文本;
  • 文本的内容用户自定义;
  • 作用:浏览器无法载入图像时,就会显示替换文本,这样很容易知道错误信息。

1.4 高度和宽度

  • 使用height(高度 与 width(宽度)进行设置;
  • 属性值默认单位为像素;
  • 使用方法:
代码语言:html
复制
<img src="xxx.jpg" alt="可替换文本信息" width="数字" height="数字">
  • 建议对图像的宽度和高度进行设置,这样便于图片显示,而不打乱页面布局;

1.5 举例

代码语言:html
复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>图像学习</title>
</head>

<body>
    <!-- 图像在文字中的使用 -->
    <h3>1、图像居中、底部对齐(vertical-align: middle、bottom):</h3>
    <p><b>鹿柴-王维〔唐代〕</b></p>
    <p>空山不见人,<img src="F:\html_study\img\1.jpg" alt="图片居中" style="vertical-align: middle;" width="64" height="64">但闻人语响。
    </p>
    <p>返景入深林,<img src="F:\html_study\img\1.jpg" alt="图片底部对齐" style="vertical-align: bottom;" width="64"
            height="64">复照青苔上。</p>
    <hr>
    <h3>2、图像顶部对齐、居中(vertical-align: middle、top):</h3>
    <p><b>送别-王维〔唐代〕</b></p>
    <p>山中相送罢,<img src="F:\html_study\img\1.jpg" alt="顶部对齐" style="vertical-align: top;" width="64" height="64">日暮掩柴扉。
    </p>
    <p>春草明年绿,<img src="F:\html_study\img\1.jpg" alt="图片居中" style="vertical-align: middle;" width="64" height="64">王孙归不归?
    </p>
    <hr>
    <h3>3、图像浮动在段落左边、右边(float: left、right):</h3>
    <p><b>春晓-孟浩然〔唐代〕</b></p>
    <p>春眠不觉晓,<img src="F:\html_study\img\1.jpg" alt="图像浮动在段落左边" style="float: left;" width="64" height="64">处处闻啼鸟。
    </p>
    <p>夜来风雨声,<img src="F:\html_study\img\1.jpg" alt="图像浮动在段落右边" style="float: right;" width="64" height="64">花落知多少。
    </p>
    <hr>
    <h3>4、图像链接(a herf)-无、有边框:</h3>
    <a href="https://blog.csdn.net/NoamaNelson" <br><img border="0" src="F:\html_study\img\1.jpg" alt="图像链接无边框"
            width="64" height="64">
        <img border="10" src="F:\html_study\img\1.jpg" alt="图像链接有边框" width="64" height="64"></a>
    <hr>
    <h3>5、点击图片中的对应区域:</h3>
    <img border="0" src="F:\html_study\img\2.jpg"  width="565" height="367" alt="图片" usemap="#planetmap">
    <map name="planetmap">
        <area shape="rect" coords="333,212,530,322" alt="矩形" href="html\矩形.html">
        <area shape="circle" coords="160,269,69" alt="圆形" href="html\圆形.html">
        <area shape="poly" coords="272,31,369,31,404,99,369,168,272,168,237,99" alt="多边形" href="html\多边形.html">
    </map>
</body>

</html>
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.6 总结

  • 关于图像映射标签<area>;

shape

coords

rect(矩形)

矩形左上角和右下角的坐标

circle(圆形)

圆心的坐标和半径

poly(多边形)

规定多边形各顶点坐标

2 表格

2.1 表格标签

  • <table> 标签来定义;
  • 每个表格均有若干行(由 <tr> 标签定义);
  • 每行被分割为若干单元格(由 <td> 标签定义);
  • 数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等;
  • 举例:
代码语言:html
复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表格学习</title>
</head>

<body>
    <table border="1">
        <tr>
            <td>r1, c1</td>
            <td>r1, c2</td>
        </tr>
        <tr>
            <td>r2, c1</td>
            <td>r2, c2</td>
        </tr>
    </table>
</body>

</html>
在这里插入图片描述
在这里插入图片描述

2.2 边框属性

  • 如上2.1的代码,使用了border来设置边框;
  • border的值从0开始,值越大,边框越粗;
  • 以下border的值为1,5,20
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.3 表格表头

  • 使用 <th> 标签进行定义;
  • 举例:
代码语言:html
复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表格学习</title>
</head>

<body>
    <table border="1">
        <tr>
            <th>项目</th>
            <th>说明</th>
        </tr>
        <tr>
            <td>r1, c1</td>
            <td>r1, c2</td>
        </tr>
        <tr>
            <td>r2, c1</td>
            <td>r2, c2</td>
        </tr>
    </table>
</body>

</html>
在这里插入图片描述
在这里插入图片描述

2.4 表格示例

  • 示例1:
代码语言:html
复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表格学习</title>
</head>

<body>
    <table border="1">
        <h4>1、有边框</h4>
        <tr>
            <th>项目</th>
            <th>说明</th>
        </tr>
        <tr>
            <td>r1, c1</td>
            <td>r1, c2</td>
        </tr>
        <tr>
            <td>r2, c1</td>
            <td>r2, c2</td>
        </tr>
    </table>
    <h4>2、无边框</h4>
    <table border="0">
        <tr>
            <th>项目</th>
            <th>说明</th>
        </tr>
        <tr>
            <td>r1, c1</td>
            <td>r1, c2</td>
        </tr>
        <tr>
            <td>r2, c1</td>
            <td>r2, c2</td>
        </tr>
    </table>
    <h4>3、设置标题</h4>
    <table border="1">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>分数</th>
        </tr>
        <tr>
            <td>隔壁老王</td>
            <td>数学</td>
            <td>100</td>
        </tr>
        <tr>
            <td>草根小李</td>
            <td>语文</td>
            <td>100</td>
        </tr>
    </table>
    <h4>4、单元格跨行扩列,类似合并</h4>
    <table border="1">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th colspan="2">科目和分数</th>
        </tr>
        <tr>
            <td>隔壁老王</td>
            <td>数学</td>
            <td>100</td>
        </tr>
        <tr>
            <td>草根小李</td>
            <td>语文</td>
            <td>100</td>
        </tr>
        <tr>
            <td rowspan="2">剑神无名</td>
            <td>剑气</td>
            <td>100</td>
        </tr>
        <tr>
            <td>武力</td>
            <td>99</td>
        </tr>
    </table>
</body>

</html>
在这里插入图片描述
在这里插入图片描述
  • 示例2:
代码语言:html
复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表格学习</title>
</head>

<body>
    <h4>表格内标签</h4>
    <table border="1">
        <caption>内标签说明</caption>
        <tr>
            <th>项目</th>
            <th>说明</th>
        </tr>
        <tr>
            <td>
                <p>段落1</p>
                <p>段落2</p>
            </td>
            <td>
                单元格中再套一个表格
                <table border="1">
                    <tr>
                        <td>r1, c1</td>
                        <td>r1, c2</td>
                    </tr>
                    <tr>
                        <td>r1, c1</td>
                        <td>r1, c2</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>单元格中是列表
                <ul>
                    <li>第一;</li>
                    <li>第二;</li>
                    <li>第三;</li>
                </ul>
            </td>
            <td>r1, c2</td>
        </tr>

</body>

</html>
在这里插入图片描述
在这里插入图片描述
  • 示例3:
代码语言:html
复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表格学习</title>
</head>

<body>
    <h4>单元格无边距</h4>
    <table border="1">
        <tr>
            <th>项目</th>
            <th>说明</th>
        </tr>

        <tr>
            <td>项目1 </td>
            <td>说明1</td>
        </tr>

        <tr>
            <td>项目2</td>
            <td>说明2</td>
        </tr>
    </table>
    <h4>单元格有边距</h4>
    <table border="1" cellpadding="20">
        <tr>
            <th>项目</th>
            <th>说明</th>
        </tr>

        <tr>
            <td>项目3 </td>
            <td>说明3</td>
        </tr>

        <tr>
            <td>项目4</td>
            <td>说明4</td>
        </tr>
    </table>
</body>

</html>
在这里插入图片描述
在这里插入图片描述

3 列表

3.1 有序、无序列表

  • 有序使用 <ol> 标签;
  • 无序使用<ul>标签;
  • 举例:
代码语言:html
复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>列表学习</title>
</head>

<body>
    <h4>无序列表</h4>
    <ol>
            <li>项目1 </li>
            <li>项目1 </li>
            <li>项目1 </li>
            <li>说明1 </li>
            <li>说明1 </li>
            <li>说明1 </li>
    </ol>
        
    <h4>有序列表</h4>
    <ul>
            <li>项目1 </li>
            <li>项目1 </li>
            <li>项目1 </li>
            <li>说明1 </li>
            <li>说明1 </li>
            <li>说明1 </li>
    </ul>

</body>

</html>
在这里插入图片描述
在这里插入图片描述

3.2 列表标签

标签

描述

<ol>

定义有序列表

<ul>

定义无序列表

<li>

定义列表项

<dl>

定义列表

<dt>

自定义列表项目

<dd>

定义自定列表项的描述

4 区块

4.1 区块元素

  • 块级元素在浏览器显示时,通常会以新行来开始(和结束);
  • <h1>, <p>, <ul>, <table>

4.2 内联元素

  • 在显示时通常不会以新行开始;
  • <b>, <td>, <a>, <img>

4.3 div元素

  • <div> 元素是块级元素;
  • 用于组合其他 HTML 元素的容器;
  • 如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性;
  • 另一个常见的用途是文档布局;

4.4 span元素

  • 是内联元素;
  • 可用作文本的容器;
  • 与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

4.5 举例

代码语言:html
复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>区块学习</title>
    <style type="text/css">
    div {font-family: 'Courier New', Courier, monospace;color: blue;}
    span {font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;color: brown;color: brown;font-size: larger;}
    </style>
</head>

<body>
    <div>
        <h4>区块元素和内联元素</h4>
        <ul>
            <li><span>项目1 </span></li>
            <li>项目1 </li>
            <li><span>项目1 </span></li>
            <li>说明1 </li>
            <li><span>说明1 </span></li>
            <li>说明1 </li>
        </ul>
    </div>

</body>

</html>
在这里插入图片描述
在这里插入图片描述

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 图像
    • 1.1 图像标签
      • 1.2 使用方法
        • 1.3 Alt属性
          • 1.4 高度和宽度
            • 1.5 举例
              • 1.6 总结
              • 2 表格
                • 2.1 表格标签
                  • 2.2 边框属性
                    • 2.3 表格表头
                      • 2.4 表格示例
                      • 3 列表
                        • 3.1 有序、无序列表
                          • 3.2 列表标签
                          • 4 区块
                            • 4.1 区块元素
                              • 4.2 内联元素
                                • 4.3 div元素
                                  • 4.4 span元素
                                    • 4.5 举例
                                    相关产品与服务
                                    容器服务
                                    腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                                    领券
                                    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档