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

HTML初体验

news 文章来源：https://blog.csdn.net/linux423/article/details/139668133 2024/10/31 13:26:38

可参考jd.com官网，ctrl+u查看当前页面源代码
在这里插入图片描述

找到你的项目，在项目中创建html类型的网页文件

标准的HTML正确书写格式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>

在这里插入图片描述
效果如下

HTML标签基本解读

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>第一个html</title>
<!--     <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>  -->
</head>
<body>
<h1>candy的第一个html</h1>
<!-- html的注释-->
<!-- h1>candy的第一个html</h1> -->
<!--
<html特有的写法,标记语言
左边的<>表示，这是某个标签的的开始元素
右边的</>,这是表示某个标签的闭合元素
基于上述理论，得出如下结论
HTML标签，一般是成对出现，既是开始标签，必有闭合标签还有一种HTML标签，是自闭合写法如下
< / 标签名称 >
如 <br / >自动换行
如 <hr / >水平线标签</html特有的写法>
-->
<h1>Linux</h1>
<h1>Apache</h1>
<h1>Nginx</h1>
<h1>Python函数式编程</h1>
</body>
</html>

在这里插入图片描述

适当注释，涉及业务逻辑，不在再次添加注释

效果如下图：
在这里插入图片描述

HTML基础标签属性

<!DOCTYPE html>
<!--  留白  -->
<!--  ！DOCTYPE 指定HTML标准/类型，此处的类型为html意思是标准为HTML5，即HTML标准的第五版本HTML组织，W3C组织，是国际标准组织，W3C是HTML的指定组织--><!--  html标签，表示这是一个html类型的网页文件  -->
<html lang="en"><!--  HTML标签的头部标签  -->
<!--  HTML头部标签，一般写HTML网页自身的属性信息或样式信息  -->
<!--  head头部标签和HTML标签，属于同一级，没有包含父子关系  -->
<head><!--HTML标签的属性信息指定网页的字符集，格式必须在meta标签中指定meta charset='UTF-8'meta标签 属性名是charset使用等于号 赋值运算符 属性值一般使用单引号或多引号包裹此处的属性值是‘UTF-8’,一个HTML标签，会有一个或多个属性值，叫做属性标签--><meta charset="UTF-8"><title>html网页结构-HTML骨架/框架</title>
</head><!--  HTML标签的内容标签，填写网页内容类似人头部以下，脚部以上的组织结构所有的网页内容或嗲有内容的元素，都应写到此处-->
<body>
<h1><strong>Linux</strong></h1>
<basefont>python</basefont>
<h1>nginx</h1>
</body><!--  这是HTML网页的结束标签  -->
</html>

在这里插入图片描述
效果如下：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html属性初体验</title><style>/* 标签名称 {} *//* CSS样式的注释格式 {} */span.s1{backgroud:apua; /*设置span标签的背景色 */fout-size:30px;  /*  设置span标签的内容字体大小  */color: cornflowerblue; /* 设置span标签的内容字体颜色 */}.s2 {/*  .表示，s2名称表示是一个类型级的选择器  */display: compact;background: pink;font-size: 50px;}</style>
</head>
<body>
<!--<span display="block">我是span标签，我是一个行标签</span>-->
<span style="background: thistle; font-size: 78px; display: block">我是段落标签</span>
<span style="background: paleturquoise; font-size: 56px; display: block">我是段落标签</span>
<span style="background: mediumaquamarine; font-size: 99px; display: block">我是段落标签</span><!--通过css样式，设置HTML标签属性，比如字体大小，颜色背景，是否居中，字体下划线，删除线样式-->
<!--标签选择器-->
<span class="s1">LANP</span>
<span class="s2">LNMP</span>
<span class="s3">LNAMP</span>
</body>
</html>

使用chrome查看
在这里插入图片描述

JS初体验

前端页面交互

<script>function sayHello(){document.write("Hello World");}sayHello();alert("Hello, 张无忌");</script>

HTML初体验

可参考jd.com官网，ctrlu查看当前页面源代码找到你的项目，在项目中创建html类型的网页文件标准的HTML正确书写格式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title&…...

编程日记 2024/6/17 23:12:30

【设计模式-12】代理模式的代码实现及使用场景

&emsp；代理模式是一种应用很广发的结构性设计模式，它的设计初衷就是通过引入新的代理对象，在客户端和目标对象之间起到中介的作用，从而实现控制客户端对目标对象的访问，比如增强或者阉割某些能力。 1. 概述代理模…...

编程日记 2024/6/17 23:10:28

网工内推 | 神州数码、弧聚科技网工，IE认证优先，最高18K

01 神州数码 🔷招聘岗位：高级网络工程师 🔷岗位职责： 1)提供7*24小时一线运维技术服务，如因应急故障处理应15分钟内到达现场。 2)提供设备的告警信息的分析处理及与故障问题定位服务。 3)完成数据中心网络和HPC超算…...

编程日记 2024/6/17 23:09:27

【Linux】模拟实现一个简单的日志系统

👦个人主页：Weraphael ✍🏻作者简介：目前正在学习c和算法 ✈️专栏：Linux 🐋 希望大家多多支持，咱一起进步！😁 如果文章有啥瑕疵，希望大佬指点一二如果文章对…...

编程日记 2024/6/17 23:06:22

MongoDB 多层级查询

多层级查询注意：要注意代码顺序查询层级数据代码放前面，查询条件放后面 if (StringUtils.isBlank(params.getDocType())) {params.setDocType(DOC_TDCTYPE);}String docName mapper.findByDocInfo(params.getDocType());List<ExpertApprovalOpin…...

编程日记 2024/6/17 23:04:20

grpc代理服务的实现(一)

最近公司需要无感知基于服务代号来实现通信, 并监控和管理通信连接，目前公司使用的是如下的逻辑(当然逻辑简化了，但是思想不变) 目录简单的原理图代理服务的实现创建 tls tcp 服务, 用于grpc client 和 grpc service 通信保存与代理服务建立的 grpc …...

编程日记 2024/6/17 23:02:18

FastAPI系列 4 -路由管理APIRouter

FastAPI系列 -路由管理APIRouter 文章目录 FastAPI系列 -路由管理APIRouter一、前言二、APIRouter使用示例1、功能拆分2、users、books模块开发3、FastAPI主体三、运行结果一、前言未来的py开发者请上座，在使用python做为后端开发一个应用程序或 Web API&#x…...

编程日记 2024/6/17 23:01:17

数据驱动制造：EMQX ECP 指标监测功能增强生产透明度

迈向未来的工业生产，需要的不仅是自动化，更是智能化。如果工业企业的管理者能够实时监测每一生产环节的设备运行状态，每一数据点位情况，洞察和优化每一步生产流程，他们将能够做出更精准的决策，提高生产效率…...

编程日记 2024/6/17 22:59:15

一行代码实现鼠标横向滚动

🧑‍💻 写在开头点赞收藏学会🤣🤣🤣 在项目中我们可能会遇到当鼠标在某个区域内，我们希望滚动鼠标里面的内容可以横向滚动； 比如我们一些常见的后台状态栏： 那这种该怎么写&…...

编程日记 2024/6/17 22:57:11

Flink集群架构

在上一章节我们对flink有了一个基本的了解。从它的应用的场景以及它的一些基本的一些核心的一些概念。从本章节开始，我们对flink从它的一个集群的一个架构以及它的一个部署模式着手，去了解flink如何去部署在不同的这样的一个集群的一些资源管理器上面&am…...

编程日记 2024/6/17 22:56:10

计算机网络(6) UDP协议

一.UDP数据报格式 UDP（User Datagram Protocol，用户数据报协议）是一种简单的传输层协议，与TCP（Transmission Control Protocol，传输控制协议）相比，UDP提供一种无连接、不可靠的数据传…...

编程日记 2024/6/17 22:55:08

单片机(STM32)与上位机传输浮点数

目录单片机(STM32)与上位机传输数据的方法1. 传输整形数据2. 传输浮点数据3. 如何打包与解包单片机(STM32)与上位机传输数据的方法在进行单片机程序的开发时，常常需要与其他设备进行通信。一种情况是与其他电路板通信，比如STM32主机与STM32从机通信&…...

编程日记 2024/6/17 22:54:07

50etf期权交易规则杠杆怎么计算？

今天带你了解50etf期权交易规则杠杆怎么计算？近年来，期权交易在股票市场中变得愈发流行，其中50ETF期权备受关注。作为一种金融衍生品，50ETF期权为投资者提供了更灵活的投资方式和更多的策略选择。 50etf期权交易规则杠杆怎么计算&…...

编程日记 2024/6/17 22:52:06

先贴鸿蒙认证官网10个类别总结如下 https://developer.huawei.com/consumer/cn/training/dev-cert-detail/101666948302721398 10节课学习完考试考试 90分合格 3次机会 1个小时不能切屏运行hello world hvigorfile.ts是工程级编译构建任务脚本 build-profile.json5是工程…...

编程日记 2024/6/17 22:51:04

2024年最佳插电式混合动力电动汽车

对电动汽车充满好奇和环保意识的司机们还没有准备好跨入纯电动汽车，他们可以找到一个折衷方案，即插电式混合动力车。在过去的16年里，我一直在把握汽车行业的脉搏。试驾数百辆汽车、电动汽车、插电式混合动力车，跟踪汽车行业的新闻…...

编程日记 2024/6/17 22:49:02

上海交通大学、中科大开源镜像站停止 Docker Hub 仓库镜像支持后的可用替代源

上海交通大学 Linux 用户组发布公告： 即时起中止对 Docker Hub 仓库的镜像。Docker 相关工具默认会自动处理失效镜像的回退，如果对官方源有访问困难问题，建议尝试使用其他仍在服务的镜像源。源加速地址有网友表示百度的 Docker Hub 加速器…...

编程日记 2024/6/17 22:48:01

【Linux】shell——条件判断test，各种运算符，expr

条件判断——test 真——0 假——1 test expression or [ expression ] 整数运算符字符串运算符 -z 长度是否为0 -n 长度是否不为0 str1 str2 str1 ! str2 补 &&-->逻辑与，前面为真后面才会执行 || -->逻辑或，前面为假后面才…...

编程日记 2024/6/17 22:47:00

中介子方程二十二

X$XFX$XdXuXWXπX$XWXeXyXeXyXeXWX$XπXWXuXdX$XFX$XEXyXαXiX$XαXiXrXkXtXyX$XpXVX$XdXuXWXπX$XWXeXyXeXyXeXWX$XπXWXuXdX$XVXpX$XyXtXkXrXiXαX$XiXαXyXEX$XFX$XEXyXαXiX$XαXiXrXkXtXyX$XpXVX$XdXuXWXπX$XWXeXyXeXyXeXWX$XπXWXuXdX$XVXpX$XyXtXkXrXiXαX$XiXαXyXEX$…...

编程日记 2024/6/17 22:45:59

你还不会选ProfiNET和EtherCAT网线?

在现代工业自动化领域，ProfiNET和EtherCAT是两种非常流行的通信协议。选择合适的网线对于确保通信的稳定性和效率至关重要。 ProfiNET是什么？ ProfiNET是一种基于以太网的通信协议，由德国西门子公司开发。它支持实时通信，广泛应用…...

编程日记 2024/6/17 22:42:56

醉美酒话：承载着深厚文化底蕴的敬酒词

这些敬酒词凝聚了中华酒文化的精髓，每一句都体现了对美好愿景的深深祝愿，同时也展示了中文语言的丰富与魅力。一、“步步高升”酒： 第一杯，酒至三分，象征着龙洒点滴、财运将至。我衷心祝愿您财富如江水般滚滚而来&a…...

编程日记 2024/6/17 22:40:53

vue3-sfc-loader动态加载一个异步vue组件生成cesium画面

在 Vue.js 3 中，使用 vue3-sfc-loader 可以动态加载异步的 Vue 单文件组件（.vue 文件）。这个工具允许你在运行时根据需要加载和解析 .vue 文件，使得组件的加载变得更加灵活和动态。下面是一个简单的示例，演示如何使用…...

编程日记 2024/6/17 22:39:52

flink学习-状态管理

状态管理在flink中，算子可以分为无状态和有状态两种情况。无状态的算子只需要观察每个独立事件，根据当前输入的数据直接输出结果。像：filter、flatMap、map都属于无状态的算子。有状态的算子则是除当前数据之外，还需要一些其他…...

编程日记 2024/6/17 22:36:48

OpenCV图像算术位运算

一图像相加 import cv2 import numpy as npgirlcv2.imread(./2037548.jpg)#图像的加法运算就是矩阵的加法运算 #因此加法运算的两张图必须是相等的print(girl.shape)imgnp.ones((1920,1080,3),np.uint8)*50 cv2.imshow(girl,girl) resultcv2.add(girl,img) cv2.imshow(result…...

编程日记 2024/6/17 22:35:47

【调试笔记-20240611-Linux-配置 OpenWrt-23.05 支持泛域名 acme 更新】

调试笔记-系列文章目录调试笔记-20240611-Linux-配置 OpenWrt-23.05 支持泛域名 acme 更新文章目录调试笔记-系列文章目录调试笔记-20240611-Linux-配置 OpenWrt-23.05 支持泛域名 acme 更新前言一、调试环境操作系统：Windows 10 专业版调试环境调试目标二、调…...

编程日记 2024/6/17 22:34:46

ssm宠物网站系统-计算机毕业设计源码07183

摘要在信息飞速发展的今天，网络已成为人们重要的信息交流平台。宠物网站每天都有大量的信息需要通过网络发布，为此，本人开发了一个基于B/S（浏览器/服务器）模式的宠物网站系统。该系统以JJava编程语言、MySQL和SSM框…...

编程日记 2024/6/17 22:33:44

想上币的项目方怎么去选择交易所

在区块链和加密货币蓬勃发展的今天，许多项目方都渴望通过交易所上线其代币，以扩大影响力、提升流动性和市场认可度。然而，选择合适的交易所并非易事，它关乎项目的未来发展和市场地位。那么，对于有上币意向的项目来说&a…...

编程日记 2024/6/17 22:32:43

mysql如何创建并执行事件？

在 MySQL 中，事件调度器允许您在指定的时间间隔执行 SQL 语句。这类似于操作系统中的计划任务（如 cron 作业）。前提条件确保您的 MySQL 服务器已启用事件调度器。可以通过以下命令检查并启用： SHOW VARIABLES LIKE event_scheduler;如果返回的值是 OFF，可以通过以下命…...

编程日记 2024/6/17 22:31:42

k8s环境里查看containerd创建的容器对应的netns

如何查看containerd创建的容器对应的netns 要查看由 containerd 创建的容器对应的网络命名空间（netns），你可以遵循以下步骤。这个过程涉及到了解容器的 ID，以及使用 ctr 命令或其他方式来检索容器的详细信息。这里假定你已经具备…...

编程日记 2024/6/17 22:30:41

学习笔记——网络管理与运维——SNMP(基本配置)

四、SNMP基本配置 1、SNMP配置举例整个华为数通学习笔记系列中，本人是以网络视频与网络文章的方式自学的，并按自己理解的方式总结了学习笔记，某些笔记段落中可能有部分文字或图片与网络中有雷同，并非抄袭。完处于学习态度&#x…...

编程日记 2024/6/17 22:29:39

wordpress mysql 配置/温州seo按天扣费

1卷积神经网络的优点卷积神经网络进行图像分类是深度学习关于图像处理的一个应用，卷积神经网络的优点是能够直接与图像像素进行卷积，从图像像素中提取图像特征，这种处理方式更加接近人类大脑视觉系统的处理方式。另外，卷积神经网…...

编程日记 2024/10/31 12:54:48

网站开发什么语言安全/快速网站排名提升

现代社会科学和信息技术的发展,特别是互联网技术和云计算的发展,有两个特点:一是数据量大,活动量大;二是业务数据从非常枯燥的数据到海量的数据,结构和非结构数据、复杂数据、如何随着时间的推移收集和管理数据、研究数据和可视化以使其更高效和直观地帮助管理者做出最佳决策。…...

编程日记 2024/10/31 12:23:31

建立网站要准备多少钱/北京seo百度推广

Eureka 服务器架起来了(关于架设步骤参考博客《Linux 下 Eureka 服务器的部署》)，现在如何把我们要负载均衡的服务器(也就是从 Application Client 接收请求并返回一个响应的 Application Service)注册到 Eureka？本文以一个示例介绍 Eureka Application …...

编程日记 2024/10/31 11:11:39

做精美ppt的网站/网页搜索

为了更好地让初学者轻松入门，这里仍然采用趣味性的方式聊一些常用技术点，致力于.NET新手们的快速提高！知识都是普通的，关键是学习的思路。技术源于生活，技术原来可以这样学。抛砖引玉而已。层次结构在现实社会里随处…...

编程日记 2024/10/31 10:48:17

织梦调用网站备案号/明星百度指数在线查询

1.常用且容易忘记的快捷键 iter 生成增强forxun 1.1.循环相关的快捷键 itar 生成array for代码块 itco 生成Collection迭代 iten 生成enumeration遍历 iter 生成增强forxun itit 生成iterator 迭代 itli 生成List的遍历 ittok 生成String token遍历 itve 生成Vector数组迭代 …...

编程日记 2024/10/31 8:03:02

网站规划模板/南宁正规的seo费用

spring 集成 Orika Bean映射框架前文介绍了Orika，本文介绍如何在spring框架中集成使用。 spring中注册与spring 集成仅需定义统一的mapperFactory，然后把需要转换的bean依次注册至mapperFactory。 package com.mytutorial;import ma.glasnost.orik…...

编程日记 2024/10/31 5:13:20

HTML标签基本解读

HTML基础标签属性

JS初体验

相关文章：