首页 > 其他分享 >html的简单使用

html的简单使用

时间:2024-04-05 22:58:17浏览次数:34  
标签:Web 简单 小节 春眠 99 98 html 使用 Document

1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web应用课作业</title>
    <meta name="keywords" content="acwing,web,html">
    <meta name="description" content="本课程为【AcWing工程课系列——Level-3 第一篇】《Web应用课》,讲解Web相关知识。">
    <link rel="icon" href="/images/logo.png">
</head>

<body>

</body>

</html>

2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>春江花月夜</h2>
    <h5>张若虚</h5>
    <p>
        春江潮水连海平,海上明月共潮生。<br>
        滟滟随波千万里,何处春江无月明!<br>
        江流宛转绕芳甸,月照花林皆似霰;<br>
        空里流霜不觉飞,汀上白沙看不见。<br>
        江天一色无纤尘,皎皎空中孤月轮。<br>
        江畔何人初见月?江月何年初照人?<br>
        人生代代无穷已,江月年年望相似。
    </p>
    <hr>
    <pre>
int main()
{
    int a, b;
    scanf("%d%d", &a, &b);
    printf("%d %d\n", a, b);
    return 0;
}
    </pre>
    <p>
        <i>春眠不觉晓,</i>
        <b>处处闻啼鸟。</b>
        <del>夜来风雨声,</del>
        <ins>花落知多少。</ins>
    </p>
</body>

</html>

3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="/images/mountain.jpg" alt="山" width="600">
</body>

</html>

4

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <audio src="/audios/bgm.mp3" controls></audio>
    <video src="/videos/video2.mp4" controls width="600"></video>
</body>

</html>

5

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="/about.html">About</a>
    <a href="https://www.acwing.com" target="_blank">
        <img src="/images/logo.png" alt="logo" width="50">
    </a>
</body>

</html>

6

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="/login.html">
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" required minlength="3" maxlength="15" placeholder="用户名">
        <label for="age">年龄</label>
        <input type="number" name="age" id="age" required placeholder="年龄">
        <label for="email">邮箱</label>
        <input type="email" name="email" id="email" required placeholder="邮箱">
        <label for="password">密码</label>
        <input type="password" name="password" id="password" required placeholder="密码">
        <label for="resume">个人简介</label>
        <textarea name="resume" id="resume" cols="30" rows="10" placeholder="个人简介"></textarea>
        <label for="lang">语言</label>
        <select name="lang" id="lang">
            <option value="Cpp">Cpp</option>
            <option value="Java">Java</option>
            <option value="Python">Python</option>
        </select>
        <button type="submit">提交</button>
    </form>
</body>

</html>

7

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ol>
        <li>第一讲</li>
        <li>第二讲
            <ul>
                <li>第一小节</li>
                <li>第二小节</li>
                <li>第三小节</li>
            </ul>
        </li>
        <li>第三讲
            <ol>
                <li>第一小节</li>
                <li>第二小节</li>
                <li>第三小节</li>
            </ol>
        </li>
    </ol>
</body>

</html>

8

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <caption>成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>数学</th>
                <th>语文</th>
                <th>英语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice</td>
                <td>100</td>
                <td>99</td>
                <td>98</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>99</td>
                <td>98</td>
                <td>97</td>
            </tr>
            <tr>
                <td>Tom</td>
                <td>98</td>
                <td>97</td>
                <td>96</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

9

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <header>
        <h3>我的收藏夹</h3>
    </header>

    <section>
        <h4>图片</h4>
        <figure>
            <img src="/images/logo.png" alt="logo" width="100">
            <figcaption>logo</figcaption>
        </figure>
        <figure>
            <img src="/images/mountain.jpg" alt="山" width="100">
            <figcaption>山</figcaption>
        </figure>
    </section>

    <section>
        <h4>古诗</h4>
        <article>
            <h5>春晓</h5>
            <p>春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。</p>

        </article>
        <article>
            <h5>咏柳</h5>
            <p>碧玉妆成一树高,万条垂下绿丝绦。不知细叶谁裁出,二月春风似剪刀。</p>
        </article>
    </section>

    <footer>
        &copy;2018-2022 Me 版权所有
    </footer>
</body>

</html>

10

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    &copy;&lt;Web&gt;版权所有
</body>

</html>

总的来说还是非常简单的,这是自己学习工程项目的开始

标签:Web,简单,小节,春眠,99,98,html,使用,Document
From: https://blog.csdn.net/L3102250566/article/details/137410795

相关文章

  • 记一次dlopen使用问题导致Framework重启,tombstones、pmap与反汇编分析(上)
    关键词:AndroidFramework动态库动态链接Binder1、事件起因AndroidStudio一次更新后发现installApp,设备就重启了,跑了一遍开机动画但不是从开机第一屏开始重启,tombstones内容查看发现是surfaceflinger挂在libbinder.so,那installapp做了什么这个不得而知,理论上有问题应该挂的......
  • centos7:从源代码编译安装:使用ntirpc v3.2+的 修改版:nfs-ganesha v2.8.4.1
    官方nfs-ganeshav2.8.4只能使用 ntirpc<=v3.1的版本。原因是ntirpcv3.2版本做了修改:github上比较 ntirpc:tagv3.1..tagv3.2结果如下: 所以,(参考高版本nfs-ganesha的代码)只能通过修改nfs-ganesha的源代码,来解决问题,需要修改的3个文件分别如下:/root/nfs-ganesh......
  • Solidworks导出urdf,在ros2中使用gazebo仿真教程
    1.前言本人目前初学ros2,最近在实践ros2中的gazebo仿真,入门跟着鱼香ros老师和古月居老师来学习相关的知识,在gazebo仿真环节,发现教程里基本都是采用自写urdf来生成几何图像(圆柱、立方体)来组成简单的机器人,因此在后期仿真的真实性带来了一定的局限性,因此我最近在研究如何在ros2中......
  • 6.7物联网RK3399项目开发实录-驱动开发之Camera摄像头的使用(wulianjishu666)
    90款行业常用传感器单片机程序及资料【stm32,stc89c52,arduino适用】链接:https://pan.baidu.com/s/1M3u8lcznKuXfN8NRoLYtTA?pwd=c53f ========================================================Camera使用简介AIO-3399J开发板分别带有两个MIPI,MIPI支持最高4K拍照......
  • Android NDK之使用 arm-v7a 汇编实现两数之和
    AndroidNDK之使用arm-v7a汇编实现两数之和关键词:NDKarmv7aWebRTCarm汇编CMake最近适配对讲程序,在webrtc的库编译的过程中,发现其为arm的平台定制了汇编程序以优化平方根倒数算法速度,上次写汇编还是8086的,借此机会初步尝试下android上arm汇编具体jni工程建立就不介绍了,An......
  • 6.8物联网RK3399项目开发实录-驱动开发之RTC实时时钟的使用(wulianjishu666)
    90款行业常用传感器单片机程序及资料【stm32,stc89c52,arduino适用】链接:https://pan.baidu.com/s/1M3u8lcznKuXfN8NRoLYtTA?pwd=c53f ========================================================RTC使用简介AIO-3399J开发板上有一个集成于RK808上的RTC(RealTime......
  • 62.html+css网页设计实例/“动漫”主题海贼王介绍/web前端期末大作业/
    一、前言  本实例以“动漫”海贼王为主题设计,div+css布局,页面代码简单,质量好,是个不错的学生网页设计作业源码。【关注作者|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!【点赞收藏博文】,Web开发、课程设计、毕业设计有兴趣的联系我交流分享,3Q!二、......
  • [工具] png图片打包plist工具,手把手教你使用pngPackerGUI_V2.0
    png图片打包plist工具,手把手教你使用pngPackerGUI_V2.0此软件是在pngpacker_V1.1软件基础之后,开发的界面化操作软件,方便不太懂命令行的小白快捷上手使用。1.下载并解压缩软件,得到如下目录,双击打开pngPackerGUI.exe 2.打开pngPackerGUI之后,默认的界面如下: 3.选择目录:选......
  • 【LeetCode刷题记录】简单篇-13-罗马数字转整数
    【题目描述】 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M。字符数值I1V5X10L50C100D500M1000例如,罗马数字 2 写做 II ,即为两个并列的1。12 ......
  • html入门基础
    html主要框架:<html>        <!--头部-->        <head>          <title>标题</title>        </head>        <!--主体-->        <body>        </body></html>一、标签1.加粗<strong></strong> ......