关于html:HTML之图像表格列表区块笔记小结

39次阅读

共计 5511 个字符，预计需要花费 14 分钟才能阅读完成。

1 图像

1.1 图像标签

  • 图像由<img> 标签定义；
  • <img> 是空标签，只蕴含属性，并且没有闭合标签；
  • 须要应用源属性（src），页面上能力显示图像，其值是图像的 URL 地址；
标签 阐明
<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域

1.2 应用办法

<img src="url" alt="可替换的文本信息">

1.3 Alt 属性

  • 用来为图像定义一串准备的可替换的文本；
  • 文本的内容用户自定义；
  • 作用：浏览器无奈载入图像时，就会显示替换文本，这样很容易晓得错误信息。

1.4 高度和宽度

  • 应用 height（高度 与 width（宽度）进行设置；
  • 属性值默认单位为像素；
  • 应用办法：
<img src="xxx.jpg" alt="可替换文本信息" width="数字" height="数字">
  • 倡议对图像的宽度和高度进行设置，这样便于图片显示，而不打乱页面布局；

1.5 举例

<!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> 标签定义）；
  • 数据单元格能够蕴含文本、图片、列表、段落、表单、水平线、表格等；
  • 举例：
<!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> 标签进行定义；
  • 举例：
<!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：
<!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：
<!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：
<!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> 标签；
  • 举例：
<!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 举例

<!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>

正文完
html
发表至： html
2023-01-17
 0
关于html:ztree树结构使用条件
关于html:网站设计之响应式网站在网站制作上有哪些不足
关于html:在线HTML转JSJSON工具
关于html:HTML是一种标记语言用于创建Web页面