HTML详解连载（2）

专栏链接 link

下面进行专栏介绍

本专栏是自己学前端的征程，纯手敲的代码，自己跟着黑马课程学习的，并加入一些自己的理解，对代码和笔记
进行适当修改。希望能对大家能有所帮助，同时也是请大家对我进行监督，对我写的代码进行建议，互相学习。

开始喽

超链接

作用

点击跳转到其他页面。

代码示例

  <a href=”https://www.baidu.com”>跳转到百度a>

解释

href属性值是跳转地址，是超链接的必须属性。
属性加上target=”_black”新窗口打开页面

经验分享

开发初期，不知道超链接的跳转地址。href属性写#，表示空链接，不会跳转。

音频标签

代码示例

	<audio src=”音频的URL”>audio>

注意

常见属性	作用	特殊说明
src（必须属性）	音频URL	支持格式：MP3、Ogg、Wav
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	为提升用户体验，浏览器一般会禁用自动播放功能

强调

在HTML5中，如果属性名和属性值完全一样，可以简写为一个单词

视频标签

代码示例

<video src=”视频的URL”>video>

注意

常见属性	作用	特殊说明
src（必须属性）	音频URL	支持格式：MP4、Ogg、WabM
controls	显示视频控制面板
loop	循环播放
autoplay	自动播放	为提升用户体验，浏览器支持在静音状态自动播放功能

强调

在浏览器中，想要自动播放，必须有muted属性

列表

作用：布局内容排列整齐的区域。

分类：无序列表，有序列表，定义列表

无序列表

作用

布局排列整齐的不需要规定顺序的区域

标签

ul嵌套li，ul是无序列表，li是列表条目

示例

<ul>
  <li>第一项li>
  <li>第二项li>
  <li>第三项li>
  ……
ul>

注意事项：

ul标签里面只能包裹li标签
li标签里面可以包裹任何内容

有序列表

作用

布局排列整齐的需要规定顺序的区域

标签

ol嵌套li，ol是有序列表，li是列表条目

示例：

<ol>
  <li>第一项li>
  <li>第二项li>
  <li>第三项li>
  ……
ol>

注意事项：

ol标签里面只能包裹li标签
li标签里面可以包裹任何内容

定义列表

标签

dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，
dd是定义列表的描述 /详情

示例

<dl>
  <dt>列表标题dt>
  <dd>列表描述 / 详情dd>
   ……
dl>

注意事项：

dl里面只能包含dt和dd
dt和dd里面可以包含任意内容

表格-基本用法

网页中的表格与Excel表格类似，用来展示数据。

标签

table嵌套tr，tr嵌套td/th

标签名及说明

标签名	说明
table	表格
tr	行
th	表头单元格
td	内容单元格

注意事项：

在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线

表格结构标签

作用

用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰

标签名	含义	特殊说明
thead	表格头部	表格头部内容
tbody	表格主体	主要内容区域
tfoot	表格底部	汇总信息区域

合并单元格

作用

将多个 单元格合并成一个单元格，以合并同类信息

步骤

1.明确合并目标
2.保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
跨行合并，保留最上的单元格，添加属性rowspan
跨列合并，保留最左单元格，添加属性colspan
3.删除其他单元格