day21网页布局

文章目录

- 块元素和行内元素
- 列表标签
- 表格标签
- 媒体元素
- 页面结构分析
- iframe内联框架

块元素和行内元素

块元素：无论内容多少，该元素独占一行。(p标签、h1~h6…)

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行。（a、strong、em…）

列表标签

什么是列表

列表就是信息资源的一种展示形式，它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览你者能更快捷的获得相应的信息。

列表的分类：

无序列表 ul、li
有序列表 ol、li
定义列表 dl、dt、dd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!-- 无序列表
应用范围：导航、侧边栏
-->
无序列表:
<ul>
  <li>java</li>
  <li>C/C++</li>
  <li>运维</li>
  <li>前端</li>
  <li>测试</li>
</ul>

<hr>

<!-- 有序列表
应用范围：试卷、问答……
-->
有序列表:
<ol>
  <li>java</li>
  <li>C/C++</li>
  <li>运维</li>
  <li>前端</li>
  <li>测试</li>
</ol>


<hr>

<!-- 定义列表
dl:标签
dt:列表标题
dd:列表内容

应用范围：公司网站底部……
-->
定义列表:
<dl>
  <dt>学科</dt>

  <dd>java</dd>
  <dd>C/C++</dd>
  <dd>python</dd>
  <dd>web</dd>
  <dd>linux</dd>

  <dt>地点</dt>

  <dd>重庆</dd>
  <dd>广州</dd>
  <dd>深圳</dd>
  <dd>北京</dd>
  <dd>上海</dd>
</dl>


</body>
</html>

在这里插入图片描述

表格标签

为什么使用表格

简单通用
结构稳定

表格基本结构：

单元格
行
列
跨行
跨列

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!--表格table
行 tr
列 td
-->
<table border="1px">
  <tr>
    <td>1-1</td>
    <td>1-2</td>
    <td>1-3</td>
    <td>1-4</td>
  </tr>
  <tr>
    <td>2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
    <td>3-4</td>
  </tr>
  <tr>
    <td>4-1</td>
    <td>4-2</td>
    <td>4-3</td>
    <td>4-4</td>
  </tr>
</table>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!--表格table
行 tr
列 td
-->
<table border="1px">
  <tr>
<!--    colspan跨列-->
    <td colspan="4">1-1</td>
<!--    <td>1-2</td>-->
<!--    <td>1-3</td>-->
<!--    <td>1-4</td>-->
  </tr>
<!--  跨行-->
  <tr>
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
  <tr>
<!--    <td>3-1</td>-->
    <td>3-2</td>
    <td>3-3</td>
    <td>3-4</td>
  </tr>
  <tr>
    <td>4-1</td>
    <td>4-2</td>
    <td>4-3</td>
    <td>4-4</td>
  </tr>
</table>
</body>
</html>

媒体元素

视频和音频

视频元素：video

音频元素：audio

controls：控制条
autoplay：自动播放

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>音频视频</title>
</head>
<body>
<!--
src：资源路径
controls：控制条
autoplay：自动播放-->
<audio src="../resource/audio/私奔到月球.mp3" controls autoplay>私奔到月球</audio>

<video src="../resource/video/BACKSEAT.mp4" controls></video>

</body>
</html>

页面结构分析

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

iframe内联框架

<iframe src="path" name="mainFrame"></iframe>

src：引用页面地址
name：框架标识名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内联框架</title>
</head>
<body>
<!--iframe内联框架
src:地址
width：宽度
height：高度
-->
<iframe src="" name="turn" frameborder="0" width="600px" height="300px"></iframe>
<a href="https://blog.csdn.net/m0_51635935?spm=1011.2415.3001.5343" target="turn">点击跳转</a>

<iframe src="https://yiyan.baidu.com/" frameborder="0" width="900px" height="500px"></iframe>

<!--bilibili中分享视频中的嵌入代码-->
<iframe src="//player.bilibili.com/player.html?aid=496605776&bvid=BV1mK411a7v6&cid=1415345803&p=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>

</body>
</html>