持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第3天,点击查看活动详情
接着昨天我继续学习html,这是我的第二篇笔记,上一篇文章:详见lxmoe的HTML学习笔记 - 掘金 (juejin.cn)
特殊字符
当我们想在我们的页面上添加符号的时候比如大于号、等于号等等就可以使用特殊字符,html对于特殊字符有自己的替代代码,下面是四个普通字符的例子
| 描述 | 代码 |
|---|---|
| 空格 |   |
| 小于号 | < |
| 大于号 | > |
| 版权 | © |
注释标签
在写代码时写注释是非常重要的,一方面是为了让自己缕清思路,另一方面队友看起来时也不会在风中凌乱,html的注释是由<!---->包裹而成,代码如下所示
<!-- 需要注释的内容 -->
路径
路径是我们引入资源所必须知道的知识,通过路径我们可以拿到图片,音频等等资源,而路径也分为绝对路径和相对路径,他们怎么区分呢,相对路径是以当前的文件作为起点寻找另一个文件的位置,绝对路径是从电脑盘符开始的一个完整的路径
相对路径:
<img src="pic.png"/>
**当前文件与另一个文件在同一个文件夹内
<img src="pic/pic.01/pic.png"/>
**另一个文件在当前文件的下级文件夹
<img src="../pic.png"/>
**另一个文件在当前文件的上级文件夹 上几级就重复打几次../
绝对路径:
<img src="https://www.baidu.com"/>
列表标签
为了让文本或图片看起来更整洁有序,我们可以通过列表标签把文字或图表装起来,列表分为无序列表、有序列表和自定义列表
无序列表:
<ul>
<li></li>
</ul>
无序列表li相当于一个容器 可以容纳其他标签 但注意不要在ul下写
有序列表:
<ol>
<li></li>
</ol>
自定义列表:常用于对名词或术语进行解释说明
<dl>
<dt>名词</dt>
<dd>名词解释</dd>
</dl>
一般我们可以使用列表来做一个导航,在很多网页上列表都适用于导航场景
表格table
表格显示表格数据,每一对tr标签都表示一行,每一对td标签都表示一个单元格,th是表格表头标签,其中tr内只可以放置th和td标签
我们还可以通过thead和tbody标签为表格划分结构,示例代码如下:
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
除此之外,我们还可以为table标签增加属性,通过控制这些属性来对表格的样式以及规格进行控制,就像在word里操控表格一样
| 属性 | 含义 |
|---|---|
| width | 设置表格宽度 |
| height | 设置表格高度 |
| align | 设置表格在网页中的水平对齐方式 |
| border | 设置表格边框 |
| cellspacing | 设置单元格与单元格边框之间的空白间距 |
| cellpadding | 设置单元格内容与单元格边框之间的空白间距 |
表格也可以用来布局,是一种传统的布局方式,但是不推荐,因为表格分为四个方块,所以在flex以及grid推出之前很适合用来进行布局