Java前端元素详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43243190/article/details/103615251

Java前端知识举例2

列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--无序列表-->
<ul>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
    <li>物理</li>
    <li>Java</li>
</ul>
<!--有序列表-->

<ol>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
    <li>物理</li>
    <li>Java</li>
</ol>

<!--自定义列表-->
<dl>
    <dt>水果</dt>
    <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是表格标签-->
    <table border="1">
        <!--tr代表的是行 td代表的是列-->
        <!--rowspan是跨行也就是合并行 colspan也就是跨列-->
        <tr>
            <td rowspan="2">1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
        </tr>
        <tr>
            <td>4-1</td>
            <td colspan="2">4-2</td>

        </tr>
    </table>

</body>
</html>

在这里插入图片描述
音乐视频:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
</head>
<body>
<!--音频播放-->
<audio src="../statics/audio/1743771583.mp3" controls></audio>
</body>
</html>

在这里插入图片描述视频的我没有下载，所以不能播放，我把代码放到上面，有需要的可以直接模仿

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

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

-->

<!--<video src="../statics/video/china.mp4" controls autoplay></video>-->

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


</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>

输入出来虽然都是文本，但是这个一目了然。直到某块代码实现的是什么功能

内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--iframe就是一个简单的类似的框架-->
<iframe src="https://www.baidu.com/" width="500px" height="300px"></iframe>
<!--第二种写法 target的意思就是在名叫mainFrame的iframe框架打开-->
<iframe name="mainFrame" width="500px" height="300px"></iframe>
<a href="https://www.baidu.com/" target="mainFrame">点击显示</a>
</body>
</html>