2：html：基础语法2

ops/2024/9/17 22:48:26/ 标签: html, css, vscode, 前端

htmledit_views">

2.1图像的一些注意点

2.2表格

2.2.1基本的表格

2.2.2表头与边框

2.3列表

2.3.1无序列表

2.3.2有序列表

2.4块

2.4.1块级元素

2.4.2内联元素

2.1图像的一些注意点

在上一篇中，我们已经知道了怎么样去将图片运用到我们的网站中，但是这里还是有一些特殊情况的，比如说浏览器打不开图片，怎么办？

在上次的那个代码中有一个alt

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

那打印出来就是关于