工程课系列-Level3-Web应用课

最新推荐文章于 2024-08-22 11:06:05 发布
最新推荐文章于 2024-08-22 11:06:05 发布
阅读量253 收藏 2
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58466526/article/details/127021521
版权

文章目录

html

网页索引：index.html

html导航跳转


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="description" content="文字显示在网页点击的介绍">
    <meta name="keywords" content="算法，计算机">

    <title>Web应用课</title>
    <!-- logo -->
    <link rel="icon" href="images\acwing图标.jpg">
</head>

<body>
    <!--这是一个标题 【注释快捷键 Ctrl + /】-->
    <span>行内元素</span>
    <span>多个span标签内容显示都在同一行</span>

    <h1>Hello World</h1>
    <h2>Hello World</h2>
    <h3>Hello World</h3>
    <h4>Hello World</h4>
    <h5>Hello World</h5>
    <h6>Hello World</h6>
    <i>i斜线</i>
    <d>d加粗</d>
    <p>p分段,dr回车</p>
    <p>其实就是加了前后行间距</p>
    <p>再分段</p>
    <p>再再分段</p>
    <p>
        段落的内容里面回车p标签没有响应<br>大部分标签也会忽略回车的作用，但是
        br标签可以实现回车效果
    </p>
    <p>挑选你的老婆</p>
    <img src="images\倪豆子1.jpg" alt="">
    <img src="images\蕾姆4.jpg" alt="">
    <img height="380" src="images\紫罗兰2.jpg" alt="">
    <!-- type格式 ， 相对路径从/开始写,好习惯 ,controls给了一个控制方式，可以放大、暂停  -->
    <!-- 一个感叹号+Tap直接补全初始模板 -->
</body>

</html>


<!-- 树形结构 : html两个子节点:head和body标签 -->

<!--默认习惯:网站的入口创建一个index -->
<!-- 图片只设置高度，宽度同比压缩 -->
<!-- 链接'?'后面的都是参数，且形式为 参数 =   -->
<!-- required必须填写 -->
<!-- 相同ridio的勾选按钮互斥 -->
<!-- 前端后端互传为字符串 -->
<!-- textarea 可以拖动放缩的输入文本框 -->
<!-- ol有序  ul无序  列表li   可嵌套新分ol在li里面 -->
<!-- dl  dt ：t理解为title   dd数据  -->

html习题

图片下载地址
音频与视频下载地址

1

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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.jpg">
    <!-- 存疑：写成png出不来图标 -->
</head>

<body>

</body>

</html>

<!-- 发现复制的相对路径为反斜杠 ， 但y总写的时候都是斜杠/ -->

2

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>

<!-- pre预处理格式 -->

3

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

4

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <audio controls src="/audios/bgm.mp3"></audio>

    <video width="600" controls src="/videos/video2.mp4"></video>
</body>

</html>

5

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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 width="50" src="/images/logo.png" alt="logo">
    </a>
    <!-- 链接跳转页面 ： 链接提示内容 -->
</body>

</html>

6

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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 http-equiv="X-UA-Compatible" content="IE=edge">
    <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>
<!-- 多级标题ol有序显示序号 ， ul无序不显示序号 li标题 -->

<!--  
    <ol>
    <li>第一点</li>
    <li>第二点</li>
    <ul>
        <li>2.1</li>
        <li>2.2</li>
        <li>2.3</li>
    </ul>
</ol> 
-->

8

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>

<!--table ： caption表格标题  thead表格第一行 tr包含一行 ： th加粗单元格 ，tbody表格内容 td不加粗单元格  -->

9

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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 width="100" src="/images/logo.png" alt="logo">
            <figcaption>logo</figcaption>
        </figure>
        <figure>
            <img width="100" src="/images/mountain.jpg" alt="山">
            <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>


<!--figcaption添加描述   section每个部分  &copy;2018-2022 Me 版权所有 -->

10

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

<!--版权&copy; 左括号&lt;  右括号&gt; -->
violet~evergarden
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
lesson3--html-css基础主要知识点
wywywy_的博客
05-17 194
1.用定位实现两栏布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>两栏布局</title> <style> *{ margin:0; padding:0; } .right{ position...
2021.3.3作业
m0_51767687的博客
03-03 601
网络工程师--网络安全与应用案例分析
mailtolaozhao的博客
04-25 1万+
网络工程师--网络安全与应用案例分析
NLP之GPT-3：《 Language Models are Few-Shot Learners》的翻译与解读
近期请国内外头部出版社可尽快私信博主！——心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，谦虚，自律，反思，成长，还算是比较正能量的博主，公益免费传播……内心特别想在AI界做出一些可以推进历史进程影响力的东西(兴趣使然，有点小情怀，也有点使命感呀)…
07-29 1万+
​ NLP之GPT-3：《 Language Models are Few-Shot Learners》的翻译与解读 目录 相关文章 《GPT-3: Language Models are Few-Shot Learners》的翻译与解读 Abstract 摘要 1 Introduction 介绍 2 Approach方法 3 Results 结果 4 Measuring and Preventing Memorization Of Ben
Quartz-Java Web项目中使用Quartz
小工匠
11-08 1万+
概述 实现 示例 步骤一 构建Maven项目 步骤二 日志组件的配置logbackxml 步骤三 自定义监听器的编写 步骤四 webxml中注册监听器 步骤五 启动概述Quartz也常用在Web应用中，常见的是交由Spring托管的形式，但这里并非介绍这个。如果你的很老的一个项目没有使用Spring呢？ 这里我们介绍Quartz在Web应用中单独使用的场景。实现对于定时任务来讲，一般来说，Web
【愚公系列】软考高级-架构设计师 038-性能指标
热门推荐
时光隧道
04-25 4万+
性能指标是用来评估和衡量系统、组织、人员或产品等性能的一组标准。在不同的领域，性能指标可以涵盖多种不同的测量标准和方法。性能指标通常与目标和目的紧密相关，用于确定当前性能水平、设定性能目标、识别改进领域和跟踪进步情况。在计算机和网络领域，速度通常指处理器的时钟速度、数据传输速度或响应时间。吞吐量是指在单位时间内系统能处理的数据量，例如，网络的吞吐量、数据库的事务吞吐量等。效率指标衡量了资源利用的有效性，如能源效率、代码执行的CPU和内存使用效率。容量是指系统或设备能够存储或处理的最大数据量。
CTFHUB-技能树-WEB通关
Alita_lxz的博客
11-11 7020
Web 题目来自ctfhub技能树web部分 Web前置技能 操作系统 数据库 HTTP协议 请求方式 HTTP 请求方法, HTTP/1.1协议中共定义了八种方法（也叫动作）来以不同方式操作指定的资源。 ​ 1.OPTIONS 　　返回服务器针对特定资源所支持的HTTP请求方法。也可以利用向Web服务器发送’*'的请求来测试服务器的功能性,如获取当前URL所支持的方法。若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持的方法，如“GET,POST”。 　2.HEAD 　　向服务
2107-微服务课上问题分析及总结
雨田说码
10-20 1万+
文章目录Day01~微服务入门常见问题分析常见Bug分析 Day01~微服务入门 常见问题分析 为什么需要微服务?(对系统分而治,解决因并发访问过大带来的系统复杂性(例如:业务,开发,测试,升级,可靠性等) 微服务设计的特点?(单一职责,独立进程,开发测试效率高,可靠性高,升级难度小,但会带来一定的维护成本) 微服务解决方案有哪些?(大厂自研,中小企业采用开源Spring Cloud Alibaba,Spring Cloud Netfix等 ) 微服务设计中需要哪些关键组件(服务的注册,发现,配置,限流降
2106-Redis在SpringBoot工程中的综合应用
雨田说码
10-13 7766
业务描述 从一个博客数据库中查询所有的文章标签，然后存储到缓存(Cache)，后续查询时可从缓存获取。提高其查询性能。 准备工作 初始化数据库数据 初始化数据库中数据，SQL脚本如下： DROP DATABASE IF EXISTS `blog`; CREATE DATABASE `blog` DEFAULT character set utf8mb4; SET names utf8mb4; SET FOREIGN_KEY_CHECKS = 0; USE `blog`; CREATE TABLE `tb_
Word-Level-Classification
03-07
7. **部署与应用**：完成模型训练后，可以将模型集成到Web应用中，使用JavaScript进行实时的文本分类。例如，用户输入文本，后端JavaScript服务进行处理并返回分类结果。 在“Word-Level-Classification-master”这...
效果超棒的Webgl模型-人体心脏
04-11
WebGL是一种基于OpenGL标准的JavaScript API，用于在任何兼容的浏览器中实现三维图形渲染，无需...这种技术的应用不仅限于医学领域，还可以应用于地质、建筑、工程等多个行业，为在线教育和信息传播带来了新的可能性。
holbertonschool-higher_level_programming
03-27
Python是一种广泛应用的高级编程语言，以其简洁明了的语法和强大的库支持而闻名，适合各种任务，包括Web开发、数据分析、人工智能等领域。学习Python可以帮助开发者快速理解和实现复杂的编程概念。 【压缩包子文件...
Level Up Your Web Apps With Go
07-23
### 使用Go语言提升Web应用程序开发水平 #### 一、引言与目标读者 《使用Go语言提升Web应用程序》这本书由Mal Curtis撰写，旨在帮助开发者掌握如何利用Go语言的强大功能来构建高效、可靠的Web应用程序。本书适合...
nlw-web-chat:NLW网络聊天
04-20
3. **前端框架/库**: NLW-web-chat项目可能使用了React、Vue或Angular等前端框架，或者直接使用原生JavaScript进行开发。这些框架能简化DOM操作，提供组件化开发，提高开发效率。 4. **CSS样式与布局**: 为了实现...
前端字符串将其分割成长度为 32 的子字符串数组
人与人之间最小的差别是智商，最大的差别是坚持。
08-19 395
要实现这个需求，可以编写一个简单的 JavaScript 函数来处理字符串并将其分割成长度为 32 的子字符串数组。将字符串切割后，对list数据进行数据处理。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 350
【代码】【js】各类前端输入校验方法。
vue中定义一个url文件,在vue文件中引入
最新发布
weixin_65767506的博客
08-22 239
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
浅谈JavaScript 框架在现代 Web 开发中的作用
08-21 512
随着近年来 Web 开发的快速发展，JavaScript 框架已成为用于构建任何应用程序的强大、灵活和可扩展元素的重要实用程序。一些框架，如Angular、React、Vue.JS等，有助于以系统的方式处理固有的网站开发复杂性，以提高效率。它们提供已经为基本编程功能和常规任务编写的 JavaScript 代码，从而缩短了必要的原始编码时间。此外，它们还增加了 Web 应用程序的功能和交互性，从...
Web3D技术在虚拟建筑环境中的应用探索
它在诸如远程教育、工程技术服务、计算机图形学等领域已得到广泛应用。 在建筑领域，Web3D技术为虚拟建筑环境的构建提供了可能。这种环境能够模拟建筑设计的结果，使建筑师和设计师能够跨越地域限制，通过Internet...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

violet~evergarden

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值