HTML基础-2

上回将body中常用的标签说完，这回我们开始说一说HTML5中的列表

五、列表

在HTML5中，列表别分为三类，有序列表、无序列表、定义列表（自定义列表），后期在学习CSS之后，有序列表和无序列表基本上就没有差异了。

（一）有序列表

有序列表以<ol>开始，存在顺序，每个<li>标签独占一行，每个<li>标签属于一个块元素。

有序列表中type属性，可以修改列表序号。

type="1" 阿拉伯数字（默认）

type="a" 小写英文

type="A" 大写英文

type="i" 小写罗马数字

type="Ⅰ" 大写罗马数字

有序列表中start属性，可以修改序号的起点位置，录入的数字为起点位置

start="3" 就是已第三个作为起点

<ol type="a" start="3">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ol>

（二）无序列表

无序列表以<ul>开始，不存在顺序，每个<li>标签独占一行，每个<li>标签属于一个块元素。

无序列表中type属性，可以修改无须列表每行前圆点样式

type="disc" 实心圆（默认）

type="circle" 空心圆

type="square" 实心方块

<ul type="circle">
    <li>乌克兰最近局势</li>
    <li>两会</li>
    <li>深圳疫情</li>
    <li>kb18第一节课</li>
    <li>HTML5基础基本使用方法</li>
</ul>

（三）定义列表

定义列表以<dl>开始，不存在顺序，每个<dt>、<dd>标签独占一行，每个<dt>、<dd>标签属于一个块元素。

默认没有标记，一般用于一个标题下有一个或多个列表项的情况  

<dl>
    <dt>推荐图书</dt>
    <dd>《java 编程思想》</dd>
    <dd>《非暴力沟通》</dd>
    <dt>推荐游戏</dt>
    <dd>古墓丽影</dd>
    <dd>艾尔法登环</dd>
</dl>

六、表格

想要在HTML5中插入表格，需要用到<table>标签

（一）基本框架

<table> 表格标签

<tr> 每一行的标签

<td>每个单元格的标签

<th>表头标签，与<td>相比加粗，居中

（二）基本属性

1.border属性

border是<table>标签的属性，可以设置表格边框的大小，单位是px。

2.cellspacing属性

callspacing是<table>标签的属性，可设置单元格和边框之间的空隙

（如果设置了边框大小-border但是不设置cellspacing会默认空隙。设置为0则没有空隙 ）

3.align

align是全局属性，可以应用于<table>、<tr>、<td>、<th>，可以用来改变相对应内容的位置

center 居中、left 居左、rignt 居右

4.background

background是全局属性，可以应用于<table>、<tr>、<td>、<th>，可以用来改变相对应内容的背景

5.bgcolor

bgcolor是全局属性，可以应用于<table>、<tr>、<td>、<th>，可以用来改变相对应内容的背景颜色

6.colspan 和 cowspan

colspan 和 cowspan主要应用于<td>、<th>标签，合并单元格

<td colspan="X">|<th colspan="X"> 跨列属性，会将当前单元格多占X列，相当于横向合并单元格

<td cowspan="X">|<th cowspan="X"> 跨行属性，会将当前单元格多占X行，相当于纵向合并单元格

<h2>
    座位表
</h2>
<table border="1" cellspacing="0">
    <tr bgcolor="red">
        <th background="img/蓝点.png" colspan="2">编号</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <td rowspan="2">排数</td>
        <td align="right">第一排</td>
        <td background="img/蓝点.png">AAA</td>
        <td align="right">BBB</td>
        <td bgcolor="red">CCC</td>
        <td>GGG</td>
    </tr>
    <tr>
        <td>第2排</td>
        <td>DDD</td>
        <td>EEE</td>
        <td>FFF</td>
        <td>EEE</td>
    </tr>
</table>

七、HTML5结构元素

元素名	描 述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

八、媒体元素

 媒体元素分为audio（音频）、video（视频），这两个标签在使用上没有多大的区别，下面同意介绍这两个标签的属性

1.src - 引用路径（相对路径、绝对路径）

2.type - 指出媒体元素的格式内容

3.source - 表明资源来源

一个媒体元素可以同时拥有多个source表明来源，但只展示一个资源

4.controls - 媒体元素有自己的控制器

三种写法：controls="controls、controls="true"、controls

5.autoplay - 页面加载完成后自动播放（部分浏览器会自动拦截这一属性）

6.loop - 自动循环播放

7.width=“XX”、height=“XX” – 设置宽度和高度

<video controls width="2000px" height="500px">
    <source src="video/video.webm" type=“video/webm"/>
    <source src="video/video.webm" type=“video/webm"/>
</video>
<video controls autoplay>
    <source src="music/music.mp3" type=“audio/mpeg"/>
    <source src="music/music.ogg" type=“audio/ogg"/>
    你的浏览器不支持audio元素
</video>

PS：写这个文章只是为了复习知识，巩固理解。本人也是初学者，如果存在错误，还请各位大佬进行斧正，谢谢！