对比学一下 HTML 和 Latex 的常用输入输出——图像与表格

categories: 技术 tags: Latex

@ 05/11/2021

本文主要写明如何进行插图插表操作，比较简单。

插图

HTML 插图

定义标签：<img>，语法如下：

<img src="url" alt="text" width="number" height="number" />

src	source，资源路径
alt	图片资源失效时显示的文字
height	图片显示高度
weight	图片显示宽度
border	图片的边框宽度，一般设为 0

如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏 HTML 页面的整体布局。

创建图像链接使用如下代码：

<a href="//www.huyanxiaozan.asia"
    ><!--定义链接-->
    <img border="5" src="ok.png" alt="text" width="32" height="32"
/></a>

Latex 插图

\documentclass{article}

\usepackage{graphicx} %引入宏包

\begin{document}

\includegraphics[scale=0.6]{url} %插图命令，scale 表示缩放因子

\end{document}

引入宏包之后调用即可，还可以使用 width 和 height 两个参数指定长宽。比起这种插图方法，更多的是用浮动体。

\begin{figure}[htbp] %开始浮动体

\centering %图片居中
\includegraphics[scale=0.6]{fullscreen.png}
\caption{图片标题} %图片编号和标题
\label{标签} %图片标签
\end{figure}

htbp 的意思如下：

参数	含义
h	here 此处
t	top 顶部
b	bottom 底部
p	page 独立一页

在 figure 后面加*号可以把单栏的图片双栏显示。

插表

HTML 插表

<table> 标签定义。 <tr> 标签定义行， <td> 标签定义列。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>菘菓菌sgg</title>
    </head>
    <body>
        <h4>跨两列：</h4>
        <table border="1">
            <tr>
                <caption>
                    表 1
                </caption>
                <th>姓名</th>
                <th colspan="2">爱好</th>
            </tr>
            <tr>
                <td>菘菓菌</td>
                <td>吃</td>
                <td>玩</td>
            </tr>
        </table>

        <h4>跨两行：</h4>
        <table border="1">
            <caption>
                table 2
            </caption>
            <tr>
                <th>姓名：</th>
                <td>菘菓菌</td>
            </tr>
            <tr>
                <th rowspan="2">爱好</th>
                <td>吃</td>
            </tr>
            <tr>
                <td>玩</td>
            </tr>
        </table>
    </body>
</html>

模板里面的参数：

参数	功能
`<table>`	表格标签
`border`	边框宽度
`<th>`	定义表头 (黑体居中)
`<tr>`	从上到下表示行
`<td>`	从左到右表示列
`<caption>`	表格标题
`rowspan = 2`	参数：该格跨两行
`colspan = 2`	参数：该格跨两列

页眉、主体、页脚、嵌套、边距、间距参考：https://www.runoob.com/html/html-tables.html

Latex 表格

不建议自己打，最好用工具转换：

https://www.tablesgenerator.com/

先用 Excel 做好，然后导入网页中转换即可，也可以转换出 HTML 的表格。