HTML详解连载（2）

Dear 丶 2023-10-14 18:09 23阅读 0赞

#### HTML详解连载（2） ####

*  专栏链接 \[link\](http://t.csdn.cn/xF0H3)
 *   *  下面进行专栏介绍
 *  开始喽
 *   *  超链接
     *   *  作用
         *  代码示例
         *  解释
         *  经验分享
     *  音频标签
     *   *  代码示例
         *  注意
         *  强调
     *  视频标签
     *   *  代码示例
         *  注意
         *  强调
     *  列表
     *   *  作用：布局内容排列整齐的区域。
         *  分类：无序列表，有序列表，定义列表
         *  无序列表
         *   *  作用
             *  标签
             *  示例
             *  注意事项：
         *  有序列表
         *   *  作用
             *  标签
             *  示例：
             *  注意事项：
         *  定义列表
         *   *  标签
             *  示例
             *  注意事项：
     *  表格-基本用法
     *   *  标签
         *  标签名及说明
         *  注意事项：
     *  表格结构标签
     *   *  作用
     *  合并单元格
     *   *  作用
         *  步骤

## 专栏链接 [link][] ##

### 下面进行专栏介绍 ###

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

## 开始喽 ##

![在这里插入图片描述][ac3db430eb26450fa0c088cd8dcee9d4.png]

### 超链接 ###

#### 作用 ####

点击跳转到其他页面。

#### 代码示例 ####

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

#### 解释 ####

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

#### 经验分享 ####

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

### 音频标签 ###

#### 代码示例 ####

#### 注意 ####

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

#### 强调 ####

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

![在这里插入图片描述][39abade81fd84250b375cd63c5b33f57.png]

### 视频标签 ###

#### 代码示例 ####

#### 注意 ####

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

#### 强调 ####

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

### 列表 ###

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

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

#### 无序列表 ####

##### 作用 #####

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

##### 标签 #####

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

##### 示例 #####

![在这里插入图片描述][d6e63819498d41a499931f314f5e904e.png]

##### 注意事项： #####

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

#### 有序列表 ####

##### 作用 #####

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

##### 标签 #####

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

##### 示例： #####

##### 注意事项： #####

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

#### 定义列表 ####

##### 标签 #####

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

##### 示例 #####

##### 注意事项： #####

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

### 表格-基本用法 ###

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

#### 标签 ####

table嵌套tr，tr嵌套td/th

#### 标签名及说明 ####

<table> 
 <thead> 
  <tr> 
   <th>标签名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>table</td> 
   <td>表格</td> 
  </tr> 
  <tr> 
   <td>tr</td> 
   <td>行</td> 
  </tr> 
  <tr> 
   <td>th</td> 
   <td>表头单元格</td> 
  </tr> 
  <tr> 
   <td>td</td> 
   <td>内容单元格</td> 
  </tr> 
 </tbody> 
</table>

#### 注意事项： ####

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

### 表格结构标签 ###

#### 作用 ####

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

<table> 
 <thead> 
  <tr> 
   <th align="center">标签名</th> 
   <th align="right">含义</th> 
   <th align="right">特殊说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">thead</td> 
   <td align="right">表格头部</td> 
   <td align="right">表格头部内容</td> 
  </tr> 
  <tr> 
   <td align="center">tbody</td> 
   <td align="right">表格主体</td> 
   <td align="right">主要内容区域</td> 
  </tr> 
  <tr> 
   <td align="center">tfoot</td> 
   <td align="right">表格底部</td> 
   <td align="right">汇总信息区域</td> 
  </tr> 
 </tbody> 
</table>

### 合并单元格 ###

#### 作用 ####

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

#### 步骤 ####

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

[link]: http://t.csdn.cn/xF0H3
[ac3db430eb26450fa0c088cd8dcee9d4.png]: https://img-blog.csdnimg.cn/ac3db430eb26450fa0c088cd8dcee9d4.png
[39abade81fd84250b375cd63c5b33f57.png]: https://img-blog.csdnimg.cn/39abade81fd84250b375cd63c5b33f57.png
[d6e63819498d41a499931f314f5e904e.png]: https://img-blog.csdnimg.cn/d6e63819498d41a499931f314f5e904e.png