学习资料

图像

<img src="XXX.jpg" width="400" height="300" alt="我是一张图片" title="这是图片的介绍">

src是标签的必须属性，用于指定图像文件的路径和文件名。
width指定图片的宽度，height指定图片的高度。
alt为在浏览器无法载入图像时，浏览器将显示这个替代性的文本而不是图像。
title为鼠标停留在图片上时显示的信息。

文件路径

1.绝对路径

<img src="C:\User\Pictures\图片20230401.png">

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">

2.相对路径

相对路径类型	符号	说明
同级路径		与html文件同一级
下级路径	/	在html文件下一级
上级路径	../	在html文件上一级

例：有Pictures文件夹和1.jpg在同一级文件夹内，其中Pictures内有A文件夹、X.html、2.jpg，而A内又有3.jpg。
将1.jpg、2.jpg、3.jpg放在X.html内。

同级路径
<img src="2.jpg">

下级路径
<img src="A/3.jpg">

上级路径
<img src="../1.jpg">

链接

外部链接
<a href="https://www.bilibili.com/" target="_self">哔哩哔哩</a>

网站内部链接
<a href="atom.xml">RSS订阅</a>

空链接
<a href="#">空链接</a>

下载链接
<a href="培训讲义.zip">点我下载培训资料</a>

元素链接
<a href="https://www.baidu.com/"><img src="1.jpg"></a>
不光是图片，文本、表格、音频、视频等均可设置元素链接。

锚点链接
<a href="link">查看文章内“图像”章节</a>
<a id="link"># 图像</a>
需要在想要跳转处添加`<a id="link"></a>`。

href是标签的必须属性，用于指定链接的URL。
target可以规定链接的打开方式：
1.target="_self"表示：将链接的画面内容，显示在目前的视窗中。(内定值) 。即：同窗口打开。
2.target="_parent"表示：将链接的画面内容，当成文件的上一个画面。即：当前窗口打开。
3.target="_top"表示：将框架中链接的画面内容，显示在没有框架的视窗中（即除去了框架)。即：顶端打开窗口。
4.target="_blank"表示：将链接的画面内容，在新的浏览视窗中打开。即：打开新窗口。

注释

<!-- 我是一条注释 -->
<!-- 这个公司里面没有年终奖,兄弟你快跑吧 -->

在vscode中，可使用Ctrl+/快速添加注释。

表格

<table border="1" cellpadding="10" cellspacing="10" align="center">
    <thead>
    <tr>
            <th rowspan="2">学生<br>姓名</th>
            <th rowspan="2">年龄</th>
            <th colspan="3">技能</th>
        </tr>
        <tr>
            <th>PS</th>
            <th>PR</th>
            <th>AE</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>√</td>
            <td>×</td>
            <td>×</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>19</td>
            <td>×</td>
            <td>√</td>
            <td>×</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>20</td>
            <td>×</td>
            <td>×</td>
            <td>√</td>
        </tr>
    </tbody>
</table>

<table></table>表示表格，为双标签。
border为边框粗细，border=""表示没有边框。
cellpadding为表格单元边沿与单元内容之间的空间。
cellspacing为单元之间的空间。
align为水平对齐方式。
<tr></tr>定义每一行的内容。
rowspan表示单元格跨列合并数。
colspan表示单元格跨行合并数。
<th></th>定义表头。
<tr></tr>定义单元格内容。
<thead></thead>标签用于组合HTML表格的表头内容。
<tbody></tbody>标签用于组合HTML表格的主体内容。

表格效果

学生姓名	年龄	技能
学生姓名	年龄	PS	PR	AE
张三	18	√	×	×
李四	19	×	√	×
王五	20	×	×	√

列表

1.无序列表

无序列表：
<ul>
    <li>咖啡</li>
    <li><b>牛奶</b></li>
    <li>
        <span style="color:red">红茶</span>
        <p><span style="color:green">绿茶</span></p>
    </li>
</ul>

2.有序列表

有序列表：
<ol>
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ol>
<ol start="25">
    <li>薯条</li>
    <li>汉堡</li>
    <li>鸡块</li>
</ol>

3.自定义列表

自定义列表：
<dl>
    <dt>蔬菜</dt>
    <dd>番茄</dd>
    <dd>白菜</dd>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>橘子</dd>
</dl>