一、列表
如图所示,简单地说列表就是将一些信息进行排列展示。一般情况下,列表默认是使用竖型进行展示,在经过后面学习,我们也可以将列表内容以我们想要地方式展现出来
列表一般分为3种:无序列表、有序列表、定义列表。
1.1无序列表
顾名思义,就是没有顺序地列表。以<ul><li></li></ul>标签来表示,每个<li>标签属于一个块元素。如:
<ul>
<li>列表第一行</li>
<li>列表第二行</li>
<li>列表第三行</li>
<ul>
1.2有序列表
有顺序的列表,以<ol><li></li></ol>表示。在无序列表的基础上,为每个内容加上了有顺序的编号,并且编号可以使用<ol>的属性type将序号修改成各种样式,如阿拉伯数字、小写英文字母、大写英文字母、小写罗马字母、大写罗马字母;start属性可以修改起点位置,录入的数字为起点位置。如:
<ol type="a">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
1.3定义列表
如:
<!-- 表示如下,dt为表头,dd为普通内容 -->
<dl>
<dt>推荐图书</dt>
<dd>《穆斯林的葬礼》</dd>
<dd>《Spark编程基础》</dd>
<dd>《大数据原理与应用》</dd>
<dt>水果</dt>
<dd>苹果</dd>
<dd>梨</dd>
<dd>菠萝</dd>
</dl>
二、表格
2.1表格基本语法:
<!-- 表格标签 -->
<table>
<!-- 行标签 -->
<tr>
<!-- 单元格标签 -->
<td>一行一列单元格</td>
<td>一行二列单元格</td>
</tr>
<tr>
<td>二行一列单元格</td>
<td>二行二列单元格</td>
</tr>
</table>
2.2表格常用属性:
table:表格
tr:行
td:单元格
th:表头效果:加粗,居中
border:设置边框大小(默认无边框)
cellspacing: 设置单元格和边框之间的空隙
align="center"设置居中
background设置背景图片background="img /ss.jpg"
bgcolor:设置背景颜色
rowspan:行合并
colspan:列合并
三、HTML5结构元素
元素名 | 描 述 |
---|---|
header | 标题头部区域的内容(用于页面或页面中的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
section | Web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
四、HTML5基础框架(iframe标签)
4.1语法
<!-- src为引用页面地址;name标识框架 -->
<iframe src="path" name="mainFrame" ></iframe>
4.2示例
<!--
target属性接的是你想要打开的页面的name标识
name属性则是你想要打开的页面的标识
-->
<a href="https://www.bilibili.com" target="tiaozhuan">点击打开哔哩哔哩</a>
<iframe name="tiaozhuan" width="1200px" height="1000px"></iframe>
五、媒体元素
可以使用video/audio标签在我们的页面中新增一段视频/音频资源
5.1video
语法
<!-- src为路径;controls是这个视频的播放、暂停、音量的控件 -->
<video src="视频路径" controls></video>
主流浏览器支持的视频格式
\ 浏览器 视频格式 \ | IE | Firefox | Opera | Chrome | Safari |
Ogg | 不支持 | 3.5+ | 10.5+ | 5.0+ | 不支持 |
MPEG4 | 9.0+ | 不支持 | 不支持 | 5.0+ | 3.0+ |
WebM | 不支持 | 4.0+ | 10.6+ | 6.0+ | 不支持 |
video属性:autoplay自动播放
5.2audio
语法
<!--src音频路径;controls音频播放、暂停、音量的控件-->
<audio src="音频路径" controls></video>
主流浏览器支持的音频格式
\ 浏览器 视频格式 \ | IE | Firefox | Opera | Chrome | Safari |
Ogg | 不支持 | 3.5+ | 10.5+ | 3.0+ | 不支持 |
MP3 | 9.0+ | 不支持 | 不支持 | 3.0+ | 3.0+ |
WAV | 不支持 | 4.0+ | 10.6+ | 不支持 | 3.0+ |
属性:loop循环播放