前端的简单基础知识（HTML，插入图片，链接）

薛定谔的__猫

已于 2023-06-07 14:58:25 修改

阅读量817

点赞数 2

分类专栏：前端文章标签： html 数学建模前端

于 2023-06-07 11:02:07 首次发布

本文链接：https://blog.csdn.net/m0_64188165/article/details/131083177

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

简单的符号作用

文字大小显示<h1></h1> <h2></h2>.....
分段显示<p></p>
换行操作<br/>
格式化操作：
加粗：<strong></strong>
<b></b>
删除线：<del></del>
<s></s>
倾斜：<em></em>
<i></i>
下划线：<ins></ins>
<u></u>

添加图片：

<img src=" ...">里边放的是图片的路径，绝对路径或者相对路径都可以

相对路径： ../表示上级目录

./表示当前目录（可以省略）

width=".." 增加图片的宽度
title=".." 鼠标放在上边的时候会显示的内容
alt="..." 图片显示出错的时候会显示的内容(正确的时候不显示)

代码示例：

<!DOCTYPE html>
<html lang="en">
<!--页面相关-->
<head>
    <meta charset="UTF-8">
    <!--页面标题-->
    <title>第一个测试页面</title>
</head>
<!--文件内容相关-->
<body>
<!--输出内容-->
hello world!

<!--文字显示大小-->
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

<!--分段显示-->
<!--我们要分段显示必须用分段标志,在页面内的换行和空格操作是没有用的.
这个分段显示和中文有差距，不会有前边的两个空格-->
<p>我们都知道爱一个人需要勇气</p>
<p>我们总是想着找到一个人来爱自己，我们再来学会爱着自己，其实是是不对的。我们要先学会爱自己，才会有人来爱我们，爱是需要培养的，爱是需要表达的，爱也是需要学习的。我们要爱自己，才会有别人来爱我们。正所谓钱都流向不缺爱的人，爱也是，爱都流向不缺爱的人。</p>
<!--换行操作-->
爱己及人<br/>
希望我们都可以做到<br/>

<!--格式化标签-->
<!--1.加粗-->
<strong>加粗字体操作1</strong><br/>
<b>加粗字体操作2</b><br/>
<!--2.倾斜-->
<em>倾斜字体操作1</em><br/>
<i>倾斜字体操作2</i><br/>
<!--3.删除线-->
<del>删除线操作1</del><br/>
<s>删除线操作2</s><br/>
<!--4.下划线-->
<ins>下划线操作1</ins><br/>
<u>下划线操作2</u><br/>

<!--图片标签-->
<img src="C:\Users\25647\Pictures\Saved Pictures\QQ图片20230602195424.jpg">
<img src="F:\tuuuuuuuuuuu\ye.jpg" title="叶舒华" alt="这是一个美女图片" width="300px"><br/>

<!--超链接标志-->
<a href="https://www.baidu.com" target="_blank" >百度一下</a>
<a href="D:\temp\asas.txt">文件下载</a>
<a href="https://www.baidu.com"><img src="F:\tuuuuuuuuuuu\mao.jpg"> </a>

</body>
</html>

超链接标签

1、<a href="http://www.baidu.com">百度一下</a>

注意: 里边的url要写全

        "#"表示占位符,行业标准,用一个#占位

2、里边若是文件名,那么表示下载文件

3、这个形式还可以用于锚点测试

        在锚点测试中，里边写的即不是URL或者文件名，而是id。

        注意id要是唯一的（在这个页面是唯一的）。

表格标签（表格标签是要一套一起用的）

table :表示整个表格
tr:表示表格的一行
td:表示表格的一个单元格，也就是列

合并单元格

跨行合并：rowspan="n"
跨列合并：colspan="n"

列表标签

无序列表 ul li
有序列表 ol li
标题列表 dl dt dd

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
<!--  表格标签要一起用的-->
</head>
<body>
<!--列表标签-->
<h3>无序列表</h3>
<ul>
    <li>咬人猫</li>
    <li>兔总裁</li>
    <li>阿叶君</li>
</ul>

<h3>有序列表</h3>
<ol>
    <li>咬人猫</li>
    <li>兔总裁</li>
    <li>阿叶君</li>
</ol>

<h3>自定义列表</h3>
<dl>
    <dt>我的老婆们</dt>
    <dd>咬人猫</dd>
    <dd>兔总裁</dd>
    <dd>阿叶君</dd>
</dl>
<table border="1px" cellspacing="0">
  <tr>
    <td colspan="2">张三</td>
<!--    <td rowspan="2">里斯</td>-->
    <td rowspan="2">王五</td>
  </tr>
  <tr>
    <td>1001</td>
<!--    <td>1002</td>-->
    <td>1003</td>
  </tr>
</table>

</body>
</html>