目录
2.1图像的一些注意点
在上一篇中，我们已经知道了怎么样去将图片运用到我们的网站中，但是这里还是有一些特殊情况的，比如说浏览器打不开图片，怎么办？
在上次的那个代码中有一个alt
<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>
<a href="https://www.duitang.com/blog/?id=1333702828">
<img src="https://c-ssl.duitang.com/uploads/blog/202104/05/20210405194705_65f81.thumb.1000_0.jpg" alt="周深">
</a>
<hr>
<!-- 不重要的注释 -->
</body>
</html>在我img 最后写到 alt的时候，就是为了防止我浏览器读取不了照片导致访问者并不知道这个是个啥，所以替换文本属性（alt）可告诉读者他们失去的信息（这个照片的内容是啥）。此时，浏览器将显示这个文本。
2.2表格
其实如果我们以做一个网页为这个专栏最后一个目标的话，现在的网页还是比较难以评论的，还是非常简陋。
2.2.1基本的表格
我们继续以介绍周深来举例子的话，我们需要一个表格来介绍他的歌曲。
表格由 <table> 标签来定义，表格有多少行，用<tr>表示，而有多少个格子由<td>
举个例子：
<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>
<hr>
<table>
<tr>
<td>《和平颂》</td>
<td>《起风了》</td>
<td>《大鱼》</td>
</tr>
<tr>
<td> 2024</td>
<td> 2020</td>
<td> 2016</td>
</tr>
</table>
<!-- 不重要的注释 -->
</body>
</html>可以看到其他的上面是一样的，在<table>中是新的，代表是一张表格，然后<tr>代表是一行，<td>是一行中的一个个模块，然后第二个<tr>指的是第二行的内容，结果就是如下
2.2.2表头与边框
可以看到了这个表格，但是这个表格有点简陋，而且歌名与时间没有对应。还有没有我们经常用的边框，与表头。所以我们继续改进。
首先，表头的话是使用标签<th>，但是他同样也是一行，所以表头，应该在<tr>下面，也就是说，要先创建一个行，然后再写自己想要的表头。如果你使用表头<th>的话，浏览器会帮你的字体加粗的
<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>
<hr>
<table>
<tr>
<th>歌曲1</th>
<th>歌曲2</th>
<th>歌曲3</th>
</tr>
<tr>
<td>《和平颂》</td>
<td>《起风了》</td>
<td>《大鱼》</td>
</tr>
<tr>
<td> 2024</td>
<td> 2020</td>
<td> 2016</td>
</tr>
</table>
<!-- 不重要的注释 -->
</body>
</html>结果是这样的：
如果你还想要一个边框
<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>
<hr>
<table border="1">
<tr>
<th>歌曲1</th>
<th>歌曲2</th>
<th>歌曲3</th>
</tr>
<tr>
<td>《和平颂》</td>
<td>《起风了》</td>
<td>《大鱼》</td>
</tr>
<tr>
<td> 2024</td>
<td> 2020</td>
<td> 2016</td>
</tr>
</table>
<!-- 不重要的注释 -->
</body>
</html>
在这里添加了一个参数，border="1"，这个加上之后表格就有边框了
2.3列表
列表分为有序列表与无序列表
2.3.1无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表一般使用<ul>表示，在列表中由一个一个数据，每一行是由<li>来标记
<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>
<hr>
<table border="1">
<tr>
<th>歌曲1</th>
<th>歌曲2</th>
<th>歌曲3</th>
</tr>
<tr>
<td>《和平颂》</td>
<td>《起风了》</td>
<td>《大鱼》</td>
</tr>
<tr>
<td> 2024</td>
<td> 2020</td>
<td> 2016</td>
</tr>
</table>
<ul>
<li>他的作品</li>
<li>他喜欢的东西</li>
</ul>
<!-- 不重要的注释 -->
</body>
</html>你可以看一下
这个就是无序列表
2.3.2有序列表
有序列表使用<ol>进行表示，有序就是有顺序，并且是有顺序的（同样行都是使用<li>)进行的
<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>
<hr>
<table border="1">
<tr>
<th>歌曲1</th>
<th>歌曲2</th>
<th>歌曲3</th>
</tr>
<tr>
<td>《和平颂》</td>
<td>《起风了》</td>
<td>《大鱼》</td>
</tr>
<tr>
<td> 2024</td>
<td> 2020</td>
<td> 2016</td>
</tr>
</table>
<ul>
<li>他的作品</li>
<li>他喜欢的东西</li>
</ul>
<ol>
<li>2016作品</li>
<li>2017作品</li>
</ol>
<!-- 不重要的注释 -->
</body>
</html>那打印出来就是关于
2.4块
块级元素与内联元素，他们让之前学的标签都连接起来。
2.4.1块级元素
块级元素，比如<div>没有啥含义，但是你写了就代表是分成了一个块，（他的主要用处就是将几个容器连接起来）
这个就是我的主页面中我的头像，你看到还有之前学的照片的运用方式，同样，在网页中，我们习惯性的将他分成一个一个块，然后每一个快都是用<div>的标签进行操作
右边的专栏是右键，加上检查，然后就能跳出来这个了。
2.4.2内联元素
内联元素就可以比作容器，将几个标签连接起来，<span> 元素是内联元素，可用作文本的容器
标签：表格,周深,基础,表头,列表,语法,Wesley,html,歌曲 From： https://blog.csdn.net/2301_76578848/article/details/141213462