前端HTML基础学习笔记2

#博学谷IT学习技术支持#

一、音频标签和视频标签

1.音频audio标签

作用：在网页中插入音频

属性：src：音频的路径；controls：播放的控件；autoplay：自动播放；loop：循环播放

2.视频video标签

作用：在网页中插入视频

属性：src：视频的路径；controls：播放的控件；autoplay：自动播放；loop：循环播放。

二、列表标签

应用场景：网页中以行的方式整齐的展示数据：如数据列表、排行榜

类型：

1.无序列表：

标签：整体：ul；每一项：li。

显示的效果：每一项前面默认有小圆点

注：每一项是没有顺序的；ul标签中只能放li标签；li标签里面可以放任意的标签。

2.有序列表：

标签：整体：ol；每一项：li。

显示的效果：每一项前面有默认的序号

注：每一项是有顺序的；ol标签中只能放li标签；li标签里面可以放任意的标签。

3.自定义列表：

标签：

整体：dl；小标题：dt；每一项：dd。

注：dl标签中只能放dt或者dd；dt或者dd中可以放任意标签。

三、表格标签

1.应用场景：以行+列的单元格的方式整齐的展示数据，如：股票价格

2.基本标签：整体table；每一行tr；每一个单元格td。

3.属性： 边框border；宽度width；高度height。

4.表格的其他标签：

caption：表格整体的大标题，写在：table标签开始标签的下面。

th：表头标签（表格一列的小标题），写在：用来替换td。

        表格的结构标签：表格的头部thead，表格的身体tbody，表格的底部tfoot。写在：用来包裹tr。

5.合并单元格

应用场景：多个单元格展示内容相同时让信息简洁不重复显示

合并属性：行合并rowspan和列合并colspan

实现步骤：

        确定合并哪几个单元格

        通过左上原则确定保留谁删除谁（如果是上下合并，保留最上面的，删除其他；如果是左右合并，保留最左边的，删除其他)

        确定是跨行还是跨列(如果是跨行合并, rowspan=“合并的个数”, 给保留的单元格设置;如果是跨列合并,colspan=“合并的个数”,给保留的单元格设置)

四：总结：今日更新依旧主要是基础内容，未完待续