<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    
<!--title-->
<!--无序  ul-li
应用于：
导航
侧边栏新闻
在文章中，一般会使用它来排列
-->
<ul>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
    <li>Java</li>
</ul>

<hr>

<!--有序 ol-li
应用于：
问答试卷、测试题....卷子，或者需要排序的。微博热搜，榜单
-->
<ol>
    <li>邓紫棋</li>
    <li>林俊杰</li>
    <li>张杰</li>
    <li>张靓颖</li>
</ol>

<hr>

<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
应用于：
公司网站的低部，用于标记项
-->
<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>梨子</dd>
    <dd>香蕉</dd>
    <dd>葡萄</dd>
    <dt>蔬菜</dt>
    <dd>萝卜</dd>
    <dd>青菜</dd>
    <dd>山药</dd>
    <dd>豆腐</dd>
</dl>
    
</body>
</html>

图11111111111111111111111111111111111111111111111111

表格标签

<table> </table>

1.表格的特点：

A.简单通用

B.结构稳定

2.基本结构：

A.单元格

B.行

C.列

D.跨行

E.跨列

代码

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

<!--表格标签table
border="1px" 边框属性
-->
<table border="1px">
    <!--行和列-->
    <!--行 tr,列 td-->
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>

</table>

<hr>

<table border="1px">
    <tr>
        <!--实现跨列
        colspan 对应的值:所跨的列数（左右合并）
        -->
        <td colspan="2">学生成绩</td>
    </tr>
    <tr>
        <!--科目名称-->
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <!--成绩-->
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

<hr>

<table border="1px">
    <tr>
        <!--rowspan 所跨的行数（上下合并）-->
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>0</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>0</td>
    </tr>
</table>

</body>
</html>

在这里插入图片描述

媒体元素标签

视频元素 video

音频元素 audio

首先自己找到一个视频和一个音频，将其放在同一个项目下的resource文件夹中用于放音视频的文件中。

代码

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

<!--video 视频标签

这里放的视频，或者音乐，都是必须要能够直接播放的。

src：视频的路径
controls: 提供播放按钮，进度条、下载按钮、全屏按钮、音量控制
autoplay： 自动播放
loop: 循环播放

-->

<video src="../resource/video/china.mp4" controls autoplay></video>

<!--这里无法视频无法成功播放，得到结论
    src：只能放能够直接播放的，即本地的。
-->
<!--<video src="//player.bilibili.com/player.html?aid=68373450&cid=118499718&page=1" controls autoplay>
</video>-->

</body>
</html>

缺点：不能快进

音频和视频一样的

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

<!--音频播放-->
<audio src="../statics/audio/ab410f7bbbb0955e7ae476ae89527a5d.m4a" controls autoplay>
<!--如果想设置背景音乐，就把controls去掉即可-->
    
</audio>

</body>
</html>

网页结构

页面的头部
页面的主体
页面的尾部

这段代码很好的说明了网页的结构

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

<!--这些标签都是一些行业规范-->

<header>
    我是头部
</header>

<nav>导航栏</nav>

<aside>侧边栏</aside>

<article>文章主题</article>

<section> 独立区域 </section>

<footer>
    我是尾部
</footer>

</body>
</html>

内联框架 iframe

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--iframe 内联框架
src： 地址（必填）
-->
 
<!--这里是直接在窗口内联一个-->
<!--<iframe src="https://www.baidu.com/" width="1000px" height="600px"></iframe>-->

<!--实现跳转-->
<iframe name="mainFrame"></iframe>
<a href="https://www.baidu.com/" target="mainFrame">点击显示</a>

</body>
</html>

在这里插入图片描述

@999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
标签

标签列表标签列表：列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能够更快捷地获取相应的信息。列表的分类：1.有序列表2.无序列表3.自定义列表代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫