day21网页布局-编程知识

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>