HTML学习笔记（2）_html 同级目录-CSDN博客

    <h1>标题的大小从1到6逐渐减小</h1>
    <h2></h2>
    ……………………
    <h6>最小的标题</h6>

    <p>这是段落1</p>
    <p>这是段落2</p>

    <br>这是换行
    <hr>这是水平线

    <b>加粗字体</b>   <strong>加粗字体</strong>
    <u>下划线</u>     <ins>下划线</ins>
    <i>字体倾斜</i>   <em>倾斜字体</em>
    <s>删除线</s>     <del>删除线</del>
    <!-- 这是注释 --> ctrl+/ 快捷键

效果展示：

2.图片标签

 <img src="" alt="" title="" width="" height="">插入图片

 img src="图片的路径"   
 alt="当图片路径错误时显示的替换文本" 
 title="鼠标悬停在图片上时的提示文字"
 width="输入数字控制图片的宽度" 
 height="图片的高度"

(1)图片的路径：

A.绝对路径：指目录下的绝对位置，这种完整地描述文件位置的路径就是绝对路径

如图所示就是绝对路径

B.相对路径：相对于自身坐在位置，到达目标所走的路径。

a.同级目录：当前文件和目标文件在同一目录中

在1.2的HTML文件中使用这张图片时只需在属性值中输入图片的命名即可：

当图片路径出错时，便会显示如下结果

上级目录要注意的一点是：返回上级目录时要用"../"

（效果就不再展示了）

3.音频标签

代码：

常见属性：

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

注意：

音频标签目前支持三种格式：MP3、Wav、Ogg

4.视频标签

代码：

常见属性（与音频一样）

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需配合muted实现静音播放）
loop	循环播放

5.链接标签

代码：

属性target

取值	效果
_self	默认值，在当前窗口跳转（覆盖原页面）
_blank	在新的窗口中展示跳转页面（保存原页面）

6.列表

（1）无序列表

标签名	说明
ul	表示无序列表的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

注意：

ul标签内只能包含li标签，而li标签内可以使用其他标签包含任意内容，且无序列表在每一项前都有一个黑色小圆点（可通过css去掉）

（2）有序列表

标签名	说明
ol	表示有序列表的整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一行的内容

注意：

ol标签内只能包含li标签，而li标签内可以使用其他标签包含任意内容，有序列表每一行默认显示序号标识。

（3）自定义列表

1.标签组成

标签名	说明
dl	表示自定义列表的证整体、用于包裹dt/dd的标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

2.显示特点

dd前会默认显示缩进效果

3.注意点

dl标签中只允许包含dt/dd标签

dt/dd标签可以包含任意内容

7.表格标签

（1）表格的基本标签

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

标签嵌套关系：table>tr>td

（2）表格相关属性

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

（3）表格标签和表头单元格标签

场景：在表格中表示整体大小标题和一列小标题

标签：

标签名	名称	说明
captain	表格大标题	表示表格整体大标题，默认在表格整体顶部剧中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，内部文字加粗并居中显示

注意点：

caption标签书写在table标签内部

th标签书写在tr标签内部（用于替换td标签）

（4）表格结构标签

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

作用：方便他人阅读，提高执行效率

注意点：

表格结构标签内部用于包裹tr标签

表格的结构标签可以忽略

（5）合并单元格

作用：将水平（跨列合并）或垂直（跨行合并）多个单元格合并成一个单元格

合并原则：左上原则（上下合并保留最上的，删除其他）（左右合并保留最左的，删除其他）

属性：

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

注意点：

只有同一个标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）