【前端】制作属于自己的网页(1)

好的!你可以使用以下的HTML代码创建一个简单的网页,标题为“第一个网页”:

```html

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>第一个网页</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            background-color: #f0f0f0;

            color: #333;

            text-align: center;

            padding: 50px;

        }

    </style>

</head>

<body>

    <h1>欢迎来到我的第一个网页!</h1>

    <p>这是一个简单的网页示例。</p>

    <p>你可以修改这个页面,添加更多内容!</p>

</body>

</html>

```

将以上代码粘贴到一个文本编辑器中,并将文件保存为`index.html`。然后用浏览器打开这个文件,就可以看到你的第一个网页了!如果你有其他想添加的内容或者样式,请告诉我!

标记规则

右边的代码展示了一个简单的HTML标签。

具体解释:

标记内容

一段被标记的文本内容——"第一个网页"。

开始标签

使用 title 标签,标记内容开始的位置。

HTML 中的所有标签都要放在< >中,格式为<标签名称>

结束标签

使用 title 标签,标记内容结束的位置。

结束标签的名称前需要添加一个右斜杠/,结构为 </标签名称>

网页元素

开始标签、标记内容、结束标签,三者结合在一起,组成了网页中的一个元素。

右边的代码也可以称为一个 title 元素,其中:

1,<title>是元素的标签;

2,“第一个网页”是元素的内容。

代码小结

下面的代码用来定义一个HTML元素。

空格与换行

在元素内容前后添加的空格或换行会被浏览器忽略。

在浏览器看来,右边四种写法所呈现的网页效果是一致的。

元素的内容除了文本以外,还可以是其它的元素。

比如,图中将title元素,放在了<head>标签中。

当嵌套的元素过多时,代码会变得冗长、不容易阅读。

此时可以适当的在代码上添加换行与缩进,调整代码的结构。

如图,调整了title元素的位置后,title 与 head 的关系会变得更加清晰。

为网页添加注释

当代码过多时,还可以为代码标注注释。

注释仅用来解释代码的意图,加载网页时,浏览器不会执行注释中的内容。

HTML 的注释结构是<!--注释内容-->(注意是双横线)。

在标记的过程中,如果使用了某个开始标签,通常需要使用对应的标签进行结尾。但并非所有的标签都是如此,HTML中还存在一些元素,它们仅由开始标签构成。

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

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

相关文章

动态网站及爬虫技术应用(题目)

/*T26:HTTP响应消息的状态代码为500时表示&#xff08; &#xff09;: HTTP响应消息的状态代码为500时表示服务器内部错误&#xff08;Internal Server Error&#xff09;。这通常意味着服务器在处理请求时遇到了意外的情况&#xff0c;导致无法完成该请求。这种错误可能是由于…

Linux--多路转接之epoll

上一篇:Linux–多路转接之select epoll epoll 是 Linux 下多路复用 I/O 接口 select/poll 的增强版本&#xff0c;它能显著提高程序在大量并发连接中只有少量活跃的情况下的系统 CPU 利用率。它是 Linux 下多路复用 API 的一个选择&#xff0c;相比 select 和 poll&#xff0c…

Linux性能调优,还可以从这些方面入手

linux是目前最常用的操作系统&#xff0c;下面是一些常见的 Linux 系统调优技巧&#xff0c;在进行系统调优时&#xff0c;需要根据具体的系统负载和应用需求进行调整&#xff0c;并进行充分的测试和监控&#xff0c;以确保系统的稳定性和性能。同时&#xff0c;调优过程中要谨…

【云原生技术】Docker容器进阶知识

文章目录 namespace概述一、namespace的基本概念二、namespace的主要作用三、namespace的类型四、namespace的操作五、namespace在容器技术中的应用 cgroup一、cgroup的基本概念二、cgroup的主要功能三、cgroup的子系统介绍四、cgroup的应用场景五、cgroup的使用与管理 cgroup和…

.ts文件编译为.js文件

.ts文件如何编译为.js文件 首先安装了tsc $ npm install -g typescript可以使用如下命令检查是否安装tsc,出现版本号则说明安装成功 tsc -v创建.ts文件 创建 1.ts&#xff0c;编写代码如下&#xff1a; function test(a:string):string{return a }编译为.js文件 执行如下…

Spring Cloud环境搭建

一.开发环境推荐 JDK建议使用JDK17。 因为SpringCloud是基于SpringBoot进行开发的&#xff0c;SpringBoot3.X以下的版本&#xff0c;Spring官方已经不再维护了&#xff08;还可以继续使用&#xff09;&#xff0c;SpringBoot3.X的版本使用的JDK版本基线是17&#xff0c;而且1…

IPv 4

IP协议 网络层主要由IP&#xff08;网际协议&#xff09;和ICMP&#xff08;控制报文协议&#xff09;构成&#xff0c;对应OSI中的网络层&#xff0c;网络层以实现逻辑层面点对点通信为目的。目前应用最广泛的IP协议为IPv4 基本概念给出 主机&#xff1a;配有IP地址但不具有路…

live2d 实时虚拟数字人形象页面显示,对接大模型

live2dSpeek 测试不用gpu可以正常运行 https://github.com/lyz1810/live2dSpeek 运行的话还需要额外下载https://github.com/lyz1810/edge-tts支持语音 ## 运行live2dSpeek >npm install -g http-server >http-server . ## 运行edge-tts python edge-tts.py

SpringMVC(看这一篇就够了)

目录&#xff1a; SpringMVC什么是MVC模型SpringMVC案例SpringMVC执行流程SpringMVC封装参数简单数据类型简单对象关联对象简单数据类型集合Map集合参数类型转换器编码过滤器Servlet原生对象 SpringMVC处理响应视图解析器返回值为void返回值为ModelAndView向request域设置数据向…

止步阿里一面。。。

时间过的真快&#xff0c;转眼间国庆已经过去一周了&#xff0c;又到了新的一周&#xff0c;继续分享最新的面经。 今天分享的是粉丝在阿里巴巴的一面&#xff0c;考察了数据库、redis、kafka、ES和项目&#xff0c;数据库和redis不用多说&#xff0c;项目必用面试必考&#x…

【Python时序数据系列】基于LSTM模型实现时序数据二分类(案例+源码)

这是我的第366篇原创文章。 一、引言 前面我介绍了单变量时序预测和多变量时序预测&#xff0c;都是回归任务。 相关链接&#xff1a; 时序预测系列文章 本文将介绍时序分类任务-基于LSTM模型进行时序数据二分类。 二、实现过程 2.1 准备数据 df1 pd.read_table("t…

python yolov8半自动标注

首先标注一部分图片&#xff0c;进行训练&#xff0c;生成模型&#xff0c;标注文件为xml方便后面统一做处理。 1、标注数据&#xff08;文件为xml, 转为txt用于训练&#xff0c;保留xml标签文件&#xff09; 2、模型训练&#xff08;训练配置、训练代码、&#xff09; 3、使用…

ShardingJDBC分库分表实战

目录 一、第一个分库分表的案例 1、快速搭建基础JDBC应用 2、引入ShardingJDBC快速实现分库分表 二、理解分库分表的核心概念 1、ShardingSphere分库分表的核心概念 2、垂直分片和水平分片 三、ShardingJDBC常见数据分片策略实战 1、INLINE简单分片 2、STANDARD标准分片…

ubuntu下实时查看CPU,内存(Mem)和GPU的利用率

一、实时查看CPU和内存&#xff08;Mem&#xff09;利用率 htop官网&#xff1a;htop - an interactive process viewer sudo apt-get install htop htop ①. 顶部状态栏&#xff08;System Metrics Overview&#xff09; 这个区域显示系统的全局资源使用情况&#xff0c;包括…

深入解析 Harris 角点检测算法:从孔径问题到响应函数的完整推导

在图像处理中&#xff0c;角点是非常重要的特征。为了快速、准确地检测角点&#xff0c;Harris 提出了 Harris 角点检测算法&#xff0c;它基于局部窗口内图像梯度的变化来判断角点。本文将从最基础的孔径问题&#xff08;Aperture Problem&#xff09;入手&#xff0c;通过泰勒…

MeterSphere接口自动化平台调试

1。后置脚本节目 //导入json包 import org.json.*; import com.decode.DecodeMain; String responseprev.getResponseDataAsString(); String result DecodeMain.DecodeUtil(response); log.info(“获取批次账单id result:”result); //转换为Object对象类型 JSONObject data_…

机器学习:知识蒸馏(Knowledge Distillation,KD)

知识蒸馏&#xff08;Knowledge Distillation&#xff0c;KD&#xff09;作为深度学习领域中的一种模型压缩技术&#xff0c;主要用于将大规模、复杂的神经网络模型&#xff08;即教师模型&#xff09;压缩为较小的、轻量化的模型&#xff08;即学生模型&#xff09;。在实际应…

UE5 C++: 插件编写06 | 移动文件时自动Fix up redirectors

目录 前言&#xff1a; 本文内容&#xff1a; WHY WHAT HOW 详细步骤 代码解析 1. Build.cs file中 2. QuickAssetAction.cpp中 IMPORTANT NOTES 中文解释&#xff1a; 使用 AssetToolsModule 来修复重定向器 使用 AssetRegistryModule 来过滤所有重定向器 使用 FMo…

利士策分享,美国“假旗”行动,是否成为了网络空间的阴霾?

利士策分享&#xff0c;美国“假旗”行动&#xff0c;是否成为了网络空间的阴霾? 在当今这个信息化时代&#xff0c;网络空间已经成为国家间竞争与合作的重要领域。然而&#xff0c;美国却频繁采取一种名为“假旗行动”的卑劣手段&#xff0c;污染全球网络空间&#xff0c;给世…

Java 二分查找算法详解及通用实现模板案例示范

1. 引言 二分查找&#xff08;Binary Search&#xff09;是一种常见的搜索算法&#xff0c;专门用于在有序数组或列表中查找元素的位置。它通过每次将搜索空间缩小一半&#xff0c;从而极大地提高了查找效率。相比于线性查找算法&#xff0c;二分查找的时间复杂度为 O(log n)&…