【web大前端】001_前端开发入门:创建你的第一个网页

前端开发入门:创建你的第一个网页

在当今数字化时代,网页已经成为人们获取信息和交流的重要平台。对于想要学习编程的人来说,前端开发往往是一个不错的起点。本文将带你通过简单的两步,创建属于你的第一个网页程序。

点击这里去哔哩哔哩听课

001_前端_第一个前端程序

第一步:使用记事本编写代码

创建网页的第一步是编写HTML代码。HTML(超文本标记语言)是构建网页的基础,它使用标签来定义网页的结构和内容。

首先,打开记事本程序。在记事本中输入以下代码:

<html><head><title>我的网页</title></head><body>Hello,我的第一个网页</body>
</html>

这段代码包含了一个基本网页的结构:

  • <html> 标签是整个网页的容器
  • <head> 标签包含了网页的元信息,如标题
  • <title> 标签定义了网页在浏览器标签上显示的标题
  • <body> 标签包含了网页的可见内容

完成代码编写后,将文件保存到I盘下,路径为 I:/itbaizhan...,文件名取为 Welcome.html。注意,文件后缀名必须是 .html,这是网页文件的标准后缀。

注意事项

在编写HTML代码和保存文件时,需要注意以下几点:

  1. 文件后缀名必须以 .html 结尾,这样浏览器才能正确识别并打开它
  2. 所有HTML标签的尖括号 <> 必须在英文状态下输入,中文状态下的尖括号会导致代码错误
第二步:以浏览器方式打开

完成代码编写并保存文件后,接下来需要在浏览器中打开这个网页,查看实际效果。

找到刚才保存的 Welcome.html 文件,右键点击它,在弹出的菜单中选择"打开方式",然后选择你常用的浏览器,如Chrome、Firefox或Edge等。

浏览器会立即加载并显示你的网页。在这个简单的例子中,你会看到浏览器标签上显示"我的网页",而网页内容则是"Hello,我的第一个网页"。

实时效果反馈解答

通过这个简单的实例,我们可以解答以下两个常见问题:

  1. 网页文件的正确后缀名是:

    • 正确答案:B 后缀为 .html
    • 解析:.html是网页文件的标准后缀,用于告诉浏览器这是一个HTML文档
  2. 符合HTML标签规范的写法是:

    • 正确答案:C <html></html>
    • 解析:HTML标签由开始标签和结束标签组成,结束标签需要在尖括号内添加斜杠

通过这两个步骤,你已经成功创建并打开了自己的第一个网页。虽然这个网页非常简单,但它包含了所有网页的基本结构。随着学习的深入,你可以逐步添加更多的元素和功能,如图片、链接、样式和交互效果等。

前端开发是一个充满创意和乐趣的领域,希望这个简单的入门教程能为你打开编程世界的大门!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/93051.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/93051.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTTP性能优化终极指南:从协议原理到企业级实践

前言&#xff1a;为什么性能优化是Web开发的生命线&#xff1f;根据Google研究数据&#xff0c;当页面加载时间从1秒增加到3秒时&#xff0c;跳出率提升32%&#xff1b;当达到5秒时&#xff0c;转化率下降90%。本文将通过七层优化体系&#xff0c;带您掌握HTTP性能优化的核心技…

Python 数据分析(二):Matplotlib 绘图

目录 1. 简介2. 绘图 2.1 折线图 2.1.1 单线2.1.2 多线2.1.3 子图 2.2 散点图2.3 直方图2.4 条形图 2.4.1 纵置2.4.2 横置2.4.3 多条 2.5 饼图 1. 简介 Matplotlib 是 Python 提供的一个绘图库&#xff0c;通过该库我们可以很容易的绘制出折线图、直方图、散点图、饼图等丰…

Scrapy分布式爬虫数据统计全栈方案:构建企业级监控分析系统

引言&#xff1a;数据统计在分布式爬虫中的战略价值在分布式爬虫系统中&#xff0c;​​数据统计与分析​​是系统优化的核心驱动力。根据2023年爬虫工程调查报告&#xff1a;实施专业统计方案的爬虫系统性能提升​​40%以上​​数据驱动的优化策略可减少​​70%​​的资源浪费…

计划任务(at和cron命令介绍及操作)

简介计划任务主要做一些周期性的任务&#xff0c;目前最主要的是定期备份数据分类at&#xff1a;一次性调度执行cron&#xff1a;循环调度执行at简介at 是一个用于安排一次性任务的命令行工具&#xff0c;适合在指定时间点执行单次任务语法at 时间 选项若要提交&#xff0c;通过…

[2025CVPR:图象合成、生成方向]WF-VAE:通过小波驱动的能量流增强视频 VAE 的潜在视频扩散模型

论文概述​ 这篇论文提出了一种名为WF-VAE(Wavelet Flow VAE)​的新型视频变分自编码器(Video VAE),旨在解决潜在视频扩散模型(LVDM)中的关键瓶颈问题,包括高计算成本和潜在空间不连续性。WF-VAE利用小波变换(Wavelet Transform)来分解视频信号,并通过能量流路径优…

Map接口-实现类HashMap

目录 一、什么是Map&#xff1f; 二、实现类HashMap 1.关键特点 无序、key唯一、value允许重复、key和value允许为null。 2.数据结构 2.1 JDK 1.7 2.2 JDK 1.8 2.3 关键参数 2.4 关键计算 3.扩容方式 3.1 初始化 3.2 扩容 4.常见方法 4.1 根据key存入value 4.2 …

深入解析Hadoop如何实现数据可靠性:三副本策略、校验和验证与Pipeline复制

Hadoop数据可靠性的重要性在大数据时代&#xff0c;数据可靠性已成为企业数字化转型的生命线。根据IDC预测&#xff0c;到2025年全球数据总量将增长至175ZB&#xff0c;其中企业数据占比超过60%。面对如此庞大的数据规模&#xff0c;任何数据丢失或损坏都可能造成数百万美元的经…

15.6 DeepSpeed+Transformers实战:LLaMA-7B训练效率提升210%,显存直降73%

DeepSpeedTransformers实战:LLaMA-7B训练效率提升210%的底层逻辑与实操指南 当LLaMA-7B的训练显存需求达到78GB时,单卡A100(80GB)几乎濒临溢出,更不用说普通GPU集群。而DeepSpeed与Hugging Face Transformers的深度集成,通过"ZeRO三阶段优化+混合精度+梯度检查点&q…

Nginx + PM2 实现Express API + React 前端 本地测试服务器搭建

一、工具准备 openSSL&#xff1a;需要针对https请求头 生成对应的 自签名证书。 Nginx&#xff1a;服务器搭建工具 nodeJS: Express API运行环境 PM2: node进程管理器。用于替代npm命令管理 启动命令。 二、openSSL 本地自签名证书生成。 创建服务器空文件夹&#xff08…

OTG原理讲解

文章目录一、什么是 OTG&#xff08;USB On-The-Go&#xff09;&#xff1f;✅ OTG 的定义&#xff1a;二、传统 USB 与 OTG 的区别三、OTG 的核心机制&#xff1a;**通过 ID 引脚判断角色**1. 对于 Micro-USB OTG&#xff1a;2. 电路如何感知 ID 引脚&#xff1f;四、OTG 电路…

数据结构系列之红黑树

前言 红黑树是比较重要的一颗树了&#xff0c;map和set的底层就是红黑树&#xff0c;一定要牢牢记住。 一、什么是红黑树 首先&#xff1a;红黑树仍然是一颗搜索二叉树&#xff0c;但他引入了颜色这一概念&#xff0c;每个结点多一个存储位来存储颜色&#xff0c;它通过维护下…

在OpenMP中,#pragma omp的使用

在OpenMP中&#xff0c;#pragma omp for 和 #pragma omp parallel for&#xff08;或 #pragma omp parallel num_threads(N)&#xff09;有本质区别&#xff0c;主要体现在 并行区域的创建 和 工作分配方式 上。以下是详细对比&#xff1a;1. #pragma omp for 作用 仅分配循环迭…

停止“玩具式”试探:深入拆解ChatGPT Agent的技术栈与实战避坑指南

摘要&#xff1a; 当许多人还在用ChatGPT写周报、生成样板代码时&#xff0c;其底层的Agent化能力已经预示着一场深刻的开发范式变革。这不再是简单的“AI辅助”&#xff0c;而是“人机协同”的雏形。本文旨在穿透表面的功能宣传&#xff0c;从技术栈层面拆解Agent模式的实现基…

element-plus安装以及使用

element-plus时为vue.js 3开发的组件库。 在引入前需要做如下准备 安装node.js https://blog.csdn.net/zlpzlpzyd/article/details/147704723 安装vue的脚手架vue-cli https://blog.csdn.net/zlpzlpzyd/article/details/149647351 安装element-plus github地址 https://git…

学习随想录-- web3学习入门计划

#60 转方向 web3 golang 以太坊应用 这是课表部分&#xff08;Golang以太坊方向&#xff09; Sheet b站up学习计划 第一阶段&#xff1a;基础能力构建&#xff08;1-2 个月&#xff09; 学习目标 掌握 Golang 核心语法与以太坊底层基础概念&#xff0c;建立开发知识框架。…

【RAG优化】PDF复杂表格解析问题分析

在构建检索增强生成(RAG)应用时,PDF文档无疑是最重要、也最普遍的知识来源之一。然而,PDF中潜藏着RAG系统的难点问题——复杂表格。这些表格富含高密度的结构化信息,对回答精准问题至关重要,但其复杂的视觉布局(多层表头、合并单元格、跨页表格等)常常让标准的文本提取…

ReAct Agent(LangGraph实现)

文章目录参考资料一 AI Agent二 ReAct三 LangGraph实现ReAct代理3.1 SerperAPI实时联网搜索3.2 ReAct实现参考资料 entic RAG 架构的基本原理与应用入门 一 AI Agent AI Agent 整个过程是一个动态循环。Agent不断从环境中学习&#xff0c;通过其行动影响环境&#xff0c;然后…

如何从0到1的建立组织级项目管理体系【现状诊断】

今天我想给大家分享是“如何在企业中从0到1的去建立PMO的组织级项目管理体系。”的系列文章&#xff0c;这是我近几年来一直在努力的尝试去探索和实践的过程&#xff0c;从0到1的过程。当我最开始去接手这样一个场景的时候所需要做的第一件事情是诊断和差距分析。这是多年以来做…

网络通信协议详解:TCP协议 vs HTTP协议

在计算机网络中&#xff0c;TCP&#xff08;传输控制协议&#xff09;和HTTP&#xff08;超文本传输协议&#xff09;是两个核心协议&#xff0c;但它们的职责和层级完全不同。TCP是底层传输协议&#xff0c;负责数据的可靠传输&#xff1b;HTTP是应用层协议&#xff0c;定义了…

[Qt]QString隐式拷贝

引言在Qt框架中&#xff0c;QString 作为字符串处理的核心类&#xff0c;其高效的内存管理机制一直是开发者津津乐道的特性。这背后的关键便是 隐式共享&#xff08;Implicit Sharing&#xff09;&#xff0c;也称为 写时复制&#xff08;Copy-On-Write, COW&#xff09;。本文…