lxmoe的HTML学习笔记(二)

117 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第3天,点击查看活动详情

接着昨天我继续学习html,这是我的第二篇笔记,上一篇文章:详见lxmoe的HTML学习笔记 - 掘金 (juejin.cn)

特殊字符

当我们想在我们的页面上添加符号的时候比如大于号、等于号等等就可以使用特殊字符,html对于特殊字符有自己的替代代码,下面是四个普通字符的例子

描述代码
空格&nbsp
小于号<
大于号>
版权©

注释标签

在写代码时写注释是非常重要的,一方面是为了让自己缕清思路,另一方面队友看起来时也不会在风中凌乱,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内只可以放置thtd标签

我们还可以通过theadtbody标签为表格划分结构,示例代码如下:

<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推出之前很适合用来进行布局