当前位置： 首页 > news >正文

编程笔记 html5cssjs 004 我的第一个页面

news 2025/7/8 16:55:37

编程笔记 html5&css&js 004 我的第一个页面

  • 一、基本结构
  • 二、HTML标签
  • 三、HTML元素
  • 四、HTML属性
  • 五、编写第一个网页
  • 六、使用VSCODE
  • 小结

开始编写网页，并且使用第一个网页成为一个母板，用于完成后续内容的学习。有一个基本要求，显示结果时不能一个白色背景的窗口，伤眼，不美观。

一、基本结构

前文说了，网页编程，实际是和浏览器的一个约定。也就是说你做的东西不满足浏览器的要求是不会被展现的。首先就是约定了一个网页文档的基本结构。

<!DOCTYPE html>
<html>
<head><title>我的网页</title><meta charset="utf-8">
</head>
<body><h1>标题一：hello html5</h1><p>段落一：hello html5.</p>
</body>
</html>

所有的HTML文档必须以 开始。
所有HTML文档本身以 开始以 结尾。
HTML文档的看见部分以 开始以 结尾。
这就是最基本的约定。

二、HTML标签

HTML标签是一种用于描述网页结构和呈现方式的标记语言。HTML标签以尖括号包围，并且通常是成对出现的，包括一个开始标签和一个结束标签。开始标签用于指示元素的开始，并且可能包含一些属性；结束标签用于指示元素的结束。
HTML标签用于定义网页中的不同元素，例如标题、段落、链接、图片等。每个元素通过HTML标签来定义其类型和属性。
例如，<h1>是定义网页标题的HTML标签，<p>是定义段落的HTML标签，<a>是定义链接的HTML标签，<img>是定义图片的HTML标签。通过正确使用HTML标签，可以组织和呈现网页内容。

三、HTML元素

HTML元素是由开始标签、结束标签和它们之间的内容组成的。HTML元素用于创建网页中的各种结构和内容。

一个HTML元素由以下几部分组成：

  • 开始标签：以尖括号包围，用于指示元素的开始。开始标签可以包含一些属性来定义元素的特征。
  • 结束标签：以尖括号包围，加上一个斜杠，用于指示元素的结束。
  • 内容：位于开始标签和结束标签之间的部分，用于定义元素的具体内容。

例如，以下是一个简单的HTML段落元素：

<p>这是一个段落。</p>

其中，<p>是开始标签，</p>是结束标签，"这是一个段落。"是段落元素的内容。在浏览器中呈现时，该段落元素将显示为一个段落。
通过使用不同的HTML元素和属性，可以构建出复杂的网页结构和呈现效果。
编写网页，首先就是学会运行种标签，构造HTML元素。

四、HTML属性

属性为 HTML 元素提供附加信息。
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name=“value”。
属性总是在 HTML 元素的开始标签中规定。
属性实例
HTML 链接由 标签定义。链接的地址在 href 属性中指定：

<a href="http://www.w3school.com.cn">This is a link</a>

始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name=‘Bill “HelloWorld” Gates’

常见的HTML属性包括：
id：为元素指定唯一的标识符。
class：为元素指定一个或多个类。
style：为元素指定CSS样式。
href：用于超链接元素，指定链接的目标URL。
src：用于图像、音频、视频等元素，指定媒体的来源URL。
alt：用于图像元素，指定图像的替代文本。
title：为元素指定鼠标悬停时显示的文本。
value：用于表单元素，指定元素的初始值。
disabled：用于表单元素，禁用元素的交互功能。
readonly：用于文本输入框等表单元素，指定元素只读。
placeholder：用于文本输入框等表单元素，指定输入提示文本。
checked：用于复选框和单选框，指定默认选中状态。
required：用于表单元素，指定必填字段。
此外，还有许多其他属性，如data属性、event属性等，可以根据具体情况进行使用。

五、编写第一个网页

使网页背景不是一片白的办法：

  1. 使用浏览器插件，如Dark Reader。
  2. 加背景图片。
  3. 加标签属性。（不一定好使）
  4. 加CSS样式。
    我们使用加样式的方法。
<!DOCTYPE html>
<html><head><title>我的第一个网页</title><meta charset="utf-8"><style>body {background: color black;}</style>
</head>
<h1>这是我的第一个页面，也是一个母板</h1>
<p>这是一个段落内容</p><body>
</body></html>

运行结果：
在这里插入图片描述

六、使用VSCODE

以下是使用VS Code编写和调试网页的一些步骤，不够用自己再查一下：

  1. 安装VS Code：首先，确保你已经在你的计算机上安装了VS Code。你可以从VS Code的官方网站（https://code.visualstudio.com/）下载适合你操作系统的版本，并按照指示进行安装。
  2. 安装必要的插件：VS Code有很多插件可以帮助你编写和调试网页。以下是一些常用的插件：
    • HTML插件：用于提供HTML语法高亮、代码补全和代码片段等功能。
    • CSS插件：用于提供CSS语法高亮、代码补全和代码片段等功能。
    • JavaScript插件：用于提供JavaScript语法高亮、代码补全和代码片段等功能。
    • Live Server插件：提供一个本地服务器，用于实时预览你的网页。
    • Debugger for Chrome插件：用于与Chrome浏览器进行调试。
      你可以在VS Code的插件商店（https://marketplace.visualstudio.com/）中搜索并安装这些插件。
  3. 创建网页项目：在VS Code中创建一个新的文件夹来存放你的网页文件。然后，在该文件夹中创建一个名为index.html的文件，并在该文件中编写你的HTML代码。
  4. 实时预览网页：在VS Code的侧边栏中找到Live Server插件，然后点击右上角的“Go Live”按钮。这将启动一个本地服务器，并在浏览器中打开你的网页。现在，你可以在VS Code中进行代码编辑，并在浏览器中实时预览你的更改。
  5. 调试网页：在VS Code中打开你的网页文件（index.html），然后按下F5键或点击菜单栏中的调试按钮。在调试面板中，选择“Chrome”作为调试目标，并点击“创建一个启动配置文件”按钮。然后，按照提示配置调试器，并点击“开始调试”按钮。此时，VS Code将与Chrome浏览器建立连接，并在浏览器中打开你的网页。你可以使用VS Code的调试工具来设置断点、逐行调试代码等。

输入并执行上述代码。

小结

这里我们就开始了网页编写的历程，本人认为这是一个人人应当具备的技能。

相关文章：

编程笔记 html5cssjs 004 我的第一个页面

编程笔记 html5&css&js 004 我的第一个页面 一、基本结构二、HTML标签三、HTML元素四、HTML属性五、编写第一个网页六、使用VSCODE小结 开始编写网页&#xff0c;并且使用第一个网页成为一个母板&#xff0c;用于完成后续内容的学习。有一个基本要求&#xff0c;显示结…...

编程日记 2023/12/28 22:31:59

为实体服务器配置Ubuntu

简介 我们在使用虚拟机时&#xff0c;直接在网上找到镜像然后下载到本地&#xff0c;在VMware创建实例时将该iso文件作为镜像源然后进行基础配置就可以轻松安装配置好Linux虚拟机。 在为实体服务器安装Linux系统&#xff0c;同样的&#xff0c;我们也需要镜像源&#xff08;即…...

编程日记 2023/12/28 22:29:56

单例模式的双重检查锁定是什么？

单例模式的双重检查锁定是什么&#xff1f; 单例模式是一种常见的设计模式&#xff0c;用于确保一个类只有一个实例&#xff0c;并提供一个全局访问点。双重检查锁定&#xff08;Double-Checked Locking&#xff09;是一种在单例模式中使用的性能优化技术。 在传统的单例模式…...

编程日记 2023/12/28 22:28:55

hyper-v ubuntu 3节点 k8s集群搭建

前奏 搭建一主二从的k8s集群&#xff0c;如图所示&#xff0c;准备3台虚拟机。 不会创建的同学&#xff0c;可以看我上上篇博客&#xff1a;https://blog.csdn.net/dawnto/article/details/135086252 和上篇博客&#xff1a;https://blog.csdn.net/dawnto/article/details/135…...

编程日记 2023/12/28 22:27:54

postman进阶使用

前言 对于postman的基础其实很容易上手实现&#xff0c;也有很多教程。 对于小编我来说&#xff0c;也基本可以实现开发任务。 但是今年我们的高级测试&#xff0c;搞了一下postman&#xff0c;省去很多工作&#xff0c;让我感觉很有必要学一下 这篇文章是在 高级测试工程师ht…...

编程日记 2023/12/28 22:22:50

errors包返回堆栈信息的性能测试

errors包返回堆栈信息的性能测试 上一篇Golang中使用errors返回调用堆栈信息 讲了使用第三方开源库的errors github.com/go-errors/errors&#xff0c;错误信息带调用栈&#xff0c;方便定位错误的抛出位置。 通过堆栈的信息来定位是方便了&#xff0c;性能怎么样&#xff0c…...

编程日记 2023/12/28 22:21:49

力扣热题100道-哈希篇

哈希 1.两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你…...

编程日记 2023/12/28 22:18:47

YOLOv7+Pose姿态估计+tensort部署加速

YOLOv7是一种基于深度学习的目标检测算法&#xff0c;它能够在图像中准确识别出不同目标的位置和分类。而姿态估计pose和tensort则是一种用于实现人体姿态估计的算法&#xff0c;可以对人体的关节位置和方向进行精准的检测和跟踪。 下面我将分点阐述YOLOv7姿态估计posetensort…...

编程日记 2023/12/28 22:16:44

gitee+picgo+typora图床搭建

giteepicgotypora图床搭建 1.安装typora 官网下载直接安装&#xff1a;https://www.typora.io/#download 2.编辑typora图像设置 打开 文件 -> 偏好设置 -> 图像设置 插入图片时 选择 上传图片设置 上传服务 为 PicGo-Core(command line) 3.为typora安装PicGo-Core 点…...

编程日记 2023/12/28 22:14:40

Flink项目实战篇 基于Flink的城市交通监控平台（上）

系列文章目录 Flink项目实战篇 基于Flink的城市交通监控平台&#xff08;上&#xff09; Flink项目实战篇 基于Flink的城市交通监控平台&#xff08;下&#xff09; 文章目录 系列文章目录1. 项目整体介绍1.1 项目架构1.2 项目数据流1.3 项目主要模块 2. 项目数据字典2.1 卡口…...

编程日记 2023/12/28 22:13:39

thinkcmf 文件包含 x1.6.0-x2.2.3 已亲自复现

thinkcmf 文件包含 x1.6.0-x2.2.3 CVE-2019-16278 已亲自复现 漏洞名称漏洞描述影响版本 漏洞复现环境搭建漏洞利用 修复建议总结 漏洞名称 漏洞描述 ThinkCMF是一款基于PHPMYSQL开发的中文内容管理框架&#xff0c;底层采用ThinkPHP3.2.3构建。ThinkCMF提出灵活的应用机制&a…...

编程日记 2023/12/28 22:12:38

本地部署 text-generation-webui

本地部署 text-generation-webui 0. 背景1. text-generation-webui 介绍2. 克隆代码3. 创建虚拟环境4. 安装 pytorch5. 安装 CUDA 运行时库6. 安装依赖库7. 启动 Web UI8. 访问 Web UI9. OpenAI 兼容 API 0. 背景 一直喜欢用 FastChat 本地部署大语言模型&#xff0c;今天试一…...

编程日记 2023/12/28 22:10:36

C语言实验1：C程序的运行环境和运行C程序的方法

一、算法原理 这是学C语言的入门&#xff0c;并不需要很高深的知识&#xff0c;一个hello world 或者一个简单的加法即可 二、实验要求 了解所用的计算机系统的基本操作方法&#xff0c;学会独立使用该系统。 了解在该系统上如何编辑、编译、连接和运行一个C程序。 通过运…...

编程日记 2023/12/28 22:09:35

「微服务」微服务架构中的数据一致性

在微服务中&#xff0c;一个逻辑上原子操作可以经常跨越多个微服务。即使是单片系统也可能使用多个数据库或消息传递解决方案。使用多个独立的数据存储解决方案&#xff0c;如果其中一个分布式流程参与者出现故障&#xff0c;我们就会面临数据不一致的风险 - 例如在未下订单的情…...

编程日记 2023/12/28 22:07:32

ARCGIS PRO SDK 要素空间关系

一、要素与要素查询&#xff0c;返回的是bool值 1、 Touches 判断几何要素是否接触 Touches 如果 geometry1 与 geometry2 接触&#xff0c;则返回 true&#xff0c;否则 false。 touches GeometryEngine.Instance.Touches(Geometry1, Geometry2) 2、…...

编程日记 2023/12/28 22:06:31

Python面向对象高级与Python的异常、模块以及包管理

Python面向对象高级与Python的异常、模块以及包管理 一、Python中的继承 1、什么是继承 我们接下来来聊聊Python代码中的“继承”：类是用来描述现实世界中同一组事务的共有特性的抽象模型，但是类也有上下级和范围之分，比如：生物 => 动物 => 哺乳动物 => 灵长型…...

编程日记 2023/12/28 22:05:30

Python 爬取 哔站视频弹幕 并实现词云图可视化

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 环境介绍: python 3.8 解释器 pycharm 编辑器 第三方模块: requests >>> pip install requests protobuf >>> pip install protobuf 如何安装python第三方模块: win R 输入 cmd 点击确定, 输入安装命…...

编程日记 2023/12/28 22:03:27

BP神经网络详细原理，BP神经网络训练界面详解，基于BP神经网络的公司财务风险分类

目录 摘要 BP神经网络参数设置及各种函数选择 参数设置 训练函数 传递函数 学习函数 性能函数 显示函数 前向网络创建函数 BP神经网络训练窗口详解 训练窗口例样 训练窗口四部详解 基于BP神经网络的公司财务风险分类 完整代码下载链接：基于BP神经网络的公司财务风险分类（代码…...

编程日记 2023/12/28 22:01:26

C++ DAY1 作业

1.定义自己的命名空间myspace&#xff0c;并在myspace中定义一个字符串&#xff0c;并实现求字符串长度 #include <iostream>using namespace std; namespace myspace {string str;int length_fun(){getline(cin,str);int i 0;while(str[i] ! \0){i;}return i;}} using…...

编程日记 2023/12/28 21:59:24

「微服务模式」七种微服务反模式

什么是微服务 流行语经常为进化的概念提供背景&#xff0c;并且需要一个良好的“标签”来促进对话。微服务是一个新的“标签”&#xff0c;它定义了我个人一直在发现和使用的领域。文章和会议描述了一些事情&#xff0c;我慢慢意识到&#xff0c;过去几年我一直在发展自己的个人…...

编程日记 2023/12/28 21:58:23

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/7/6 22:31:45

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2025/7/8 1:12:18

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2025/7/6 21:12:40

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2025/7/7 0:36:32

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2025/7/7 21:55:30

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/6/17 3:05:21

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/6/22 1:04:56

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/7/6 23:05:30

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/6/25 2:48:04

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2025/7/7 14:20:35