如何使用记事本制作一个简陋的小网页(1)

news2025/1/12 16:03:46

1、创建一个记事本

2、将记事本的尾缀进行修改,变为html

html本质上是一种标签并不是一种语言,其最主要的功能就是对页面设置和页面的文本样式进行修改和修缮。

3、右键被修改了尾缀的文本,选择使用记事本的打开方式。

 

 

打开完毕后,我们便可开始进行网页的制作。

4、前置工作

 

我们需要将被修改为html格式的记事本放入一个新的文件夹,再新的文件夹中,我们需要创建以上文件,方便日后使用。 

5、<html></html>

<html>
</html>

 <html>是网页制作开始的标志,而</html>是网页制作结束的标志,再二者之间则是填充其他html的标签以此丰富网页的内容。

注意:非常多人会忘记</html>以此导致网页制作完成后崩溃或者无法显示,又或者并无大碍。

6、<head></head>和<title></title>

再html中 <head></head>和<title></title>通常是配合使用的,其效果就如下图所示:

 

是一个网页标签标签名字。 

7、<body></body>

通过英文的意思我们便可知道,网页页面的内容应该在二者之间进行敲击。

正如上图所示,我们又可以再<body></body>中进行网页的一些其他设置。

比如bgcolor和background,前者是背景颜色,后者是背景图片,二者只能选其中一个。

若出现<body bgcolor = " "  background = "./img/111.jpg"></body> 

不论bgcolor中是否出现了颜色的英文单词,都不会显示后面background所上传的背景图片。

而关于background 再其的等于号后面输入的其实是背景图片再本电脑中的路径。

而关于路径,我在次推荐相对路径,也就是文中的./img/111.jpg其中 ./  表示的是html所在的文件夹。

 也就是上图文件所在的文件夹路径。

而img则表示为和hml同处一个文件夹的文件夹名字,后面的111.jpg表示的是img中的文件。

8、<center></center>

 <center></center>是进行了一个居中效果。

 对<center></center>中间的内容进行居中

9、<!-- --> 

 <!-- --> 是一个注释,和C语言中的 //一样是面向程序员和网页制作者的一种标签和说明。

当我们使用该标签时,网页中并不会显示标签的内容。

注释的修改也并不会影响网页的内容,只会影响网页制作者。

10、<b></b>、<i></i>、<u></u>

三个标签分别对应为加粗、斜体、以及下划线。 

11、<fount></fount>

是进行字体的设置。

其中内含多种属性例如,color 、size、face这三个是最常见的属性,分别代表了颜色,大小和字体设置。

 

 

注意这里的楷体其实来源于电脑中的face文件的字体 

12、 <br>和<p> 

其实二者都有一种换行的效果,但是,只有<br>才是正真的换行,而<p>其实是段间距,很多人会将二者弄混,但实际上<br>换行后的行间距比<p>的小。

13、<hn></hn>

这是一种标题。<hn>标题内容</hn>

其中n是用来替换,替换为阿拉伯数字 1、2、3、4等,这也表示为各种不同的标题。

例如<h1>标题内容</h1>这里表示的是一级标题 ,<h2>标题内容</h2>这里表示的是二级标题,以此类推。

其次也可以对标题进行格式设置,例如:

<h1 align = "center">标题内容</h1>   将标题内容进行居中

<h1 align = "right">标题内容</h1>     将标题内容进行右对齐

<h1 align = "left">标题内容</h1>      将标题内容进行左对齐

 

14、<a></a>

超链接。

 使用方法如上,<a href= ""></a>  中 href存放的是需要跳转的链接,<a href= "">   </a>二者中间存放的是超链接的名字。

如上图的效果图如下:

  

需要注意的是,超链接在放置后,我们在网页中进行转跳其实是将我们本网页转跳到链接的网页中,若需要在新的窗口打开超链接的网页,则需要加上 target = "_blank"

15、<img src =" ">

插入图片,是一个在网页中插入图片的 标签,而图片则是来源于本电脑的文件,src=" "中存放的是图片的路径,对此我们使用相对路径。

相对路径在上文讲诉过,这里不讲解了。

在插入图片的过程中,我们也可以为插入的图片添加属性,例如:

alt:设置图片的替换信息

title:设置图片的提示信息。

width:设置图片的大小。

同时也可以将插入的图片设置为超链接的内容,如下所示:

效果如下:

 

15、<ul></ul>和<ol></ol> 

 <ul></ul>和<ol></ol> 其实都表示的是一个序列表,只不过前者表示的是无序序列,后者表示的是有序序列。

而对于序列的内容通常使用<li></li>进行表示

对于<ol></ol>也有一些属性的加持,这个属性就是前面的序列,使用type = " " 进行序列的修改。

如:

效果图:

 

但是在通常情况下序列默认的是数字1,而序列也可以进行顺序的修改,注意这里的顺序修改只是将第一个序列进行修改后,后面的序列也随着第一个序列的修改后进行递增。

比如:statr = "2"表示序列从2开始进行排列

而对于 <ul></ul>的序列来说,type也可以进行序列符号的修饰,且<ul></ul>的默认序列符号是实心圆。

比如:

效果图:

 

而将实心圆进行修改可以使用type = "circle"或者type = "square"前者修改为空心圆,后者修改为实心方块,或者使用 type = "disc" 再次修改为实心圆。


那么以上就是制作一个简陋小网页所选要的知识,可以等待后续更新,请多多支持!

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

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

相关文章

什么是JavaScript的事件驱动编程(event-driven programming)?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 事件&#xff08;Event&#xff09;⭐ 事件监听器&#xff08;Event Listener&#xff09;⭐ 回调函数&#xff08;Callback Function&#xff09;⭐ 非阻塞和异步⭐ 事件循环&#xff08;Event Loop&#xff09;⭐ 触发事件&#xff08;…

「C++程序设计 (面向对象进阶)」学习笔记・二

0、引言 本专栏的系列文章是在学习 北京邮电大学 崔毅东 老师的《C程序设计 (面向对象进阶)》课程过程中整理的。欢迎前往专栏了解更多相关内容~ &#x1f600; 有关于现代 C 的基本介绍&#xff0c;请前往《现代C基本介绍》&#xff01; &#x1f514; 先决条件 本专栏的系列…

【测试开发】答疑篇 · 什么是软件测试

【测试开发】答疑篇 文章目录 【测试开发】答疑篇1. 生活中的测试2. 什么是软件测试3. 为什么要有测试/没有测试行不行4. 软件测试和软件开发的区别5. 软件测试和软件调试之间的区别6. 软件测试的岗位7. 优秀测试人员具备的素质 【测试开发】答疑篇 软件不一定是桌面应用&#…

公众号迁移线上公证如何办?

公众号账号迁移的作用是什么&#xff1f;只能变更主体吗&#xff1f;微信公众平台的帐号迁移功能可将原公众号的粉丝、文章素材、违规记录、留言功能、名称等迁移至新的公众号。通过迁移可以实现公众号的公司主体变更、粉丝转移、开通留言功能、服务号转为订阅号等作用。因此不…

Qt基于paintEvent自定义CharView

Qt基于paintEvent自定义CharView 鼠标拖动&#xff0c;缩放&#xff0c;区域缩放&#xff0c; 针对x轴&#xff0c;直接上代码 charview.h #ifndef CHARVIEW_H #define CHARVIEW_H#include <QWidget> #include <QPainter> #include <QPaintEvent> #inclu…

Kotlin使用infix关键字构建高可读性代码

自从Google推出Kotlin作为官方开发语言后&#xff0c;一堆像我这样的习惯Java开发的程序员从不习惯到爱上这门语言只用了很短的时间&#xff0c;相比于Java语言&#xff0c;kotlin集各家所长&#xff0c;可以使用更少的代码&#xff0c;实现更多更复杂的需求&#xff0c;而且可…

腾讯mini项目-【指标监控服务重构】2023-08-18

今日已办 watermill 将 key 设置到 message 中 修改 watermill-kafka 源码 将 key 设置到 message.metadata中 接入 otel-sdk 添加 middleware resolveUpstreamCtx 解析上游上下文&#xff0c;开启根Span添加 middleware middleware.InstantAck - 马上ACK&#xff0c;使得多…

怒刷LeetCode的第4天(Java版)

#【中秋征文】程序人生&#xff0c;中秋共享# 目录 第一题 题目来源 题目内容 解决方法 方法一&#xff1a;遍历字符串 方法二&#xff1a;有限状态机&#xff08;Finite State Machine&#xff09; 方法三&#xff1a;正则表达式 第二题 题目来源 题目内容 解决方…

机器学习——决策树/随机森林

0、前言&#xff1a; 决策树可以做分类也可以做回归&#xff0c;决策树容易过拟合决策树算法的基本原理是依据信息学熵的概念设计的&#xff08;Logistic回归和贝叶斯是基于概率论&#xff09;&#xff0c;熵最早起源于物理学&#xff0c;在信息学当中表示不确定性的度量&…

带你了解前后端分离的秘密-Vue【vue入门】

&#x1f3c5;我是默&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《Vue》。&#x1f3af;&#x1f3af; &#x1f680;无论你是编程小白&#xff0c;还是有一定基础的程序员&#xff0c;这个专栏…

js中事件委托和事件绑定之间的区别

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 事件绑定&#xff08;Event Binding&#xff09;⭐事件委托&#xff08;Event Delegation&#xff09;⭐ 选择事件绑定或事件委托⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本…

NVM安装及如何使用NVM

NVM是什么&#xff1f; nvm 全名 Node Version Manager&#xff0c;Node的版本管理工具 NVM能做什么&#xff1f; 安装 nvm 后&#xff0c;可以使用nvm的相关命令来管理和切换不同的 node 版本&#xff0c;方便开发 如何安装NVM 链接: NVM GitHub地址 如何使用 NVM 命令 …

R语言绘制PCA双标图

代码&#xff1a; setwd("D:/Desktop/0000/R") #更改路径#导入数据 df <- read.table("Input data.csv", header T, sep ",")# ----------------------------------- #所需的包: packages <- c("ggplot2", "tidyr"…

1.简单工厂模式

UML类图 代码 main.cpp #include <iostream> #include "OperationFactory.h" using namespace std;int main(void) {float num1;float num2;char operate;cin >> num1 >> num2 >> operate;Operation* oper OperationFactory::createOpera…

算法综合篇专题四:前缀和

"回忆里的我&#xff0c;比国王富有。奢侈的快乐~" 1、前缀和【模板】 (1) 题目解析 (2) 算法原理 #include <iostream> using namespace std;const int N 100010; // 可能出现溢出 long long arr[N],dp[N]; int n,q;int main() {cin >> n …

长胜证券:突破五日线什么意思?

随着股市的快速开展&#xff0c;越来越多的人开端了解和参与股票投资&#xff0c;但或许会遇到一些术语和概念&#xff0c;例如“打破五日线”&#xff0c;这是新手们需求了解的。本文将介绍“打破五日线”的概念及其意义&#xff0c;同时从不同视点剖析其意义和影响因素。 什…

记录wisemodel上传失败

参考&#xff1a;https://wisemodel.cn/docs/%E6%A8%A1%E5%9E%8B%E4%B8%8A%E4%BC%A0 第一种方法&#xff1a; git lfs install git clone https://oauth2:your_git_tokenwww.wisemodel.cn/username/my_test_model.git也就是用oauth2&#xff0c;然后再按照一般的方法传文件&a…

(三十三)大数据实战——Canal安装部署及其应用案例实战

前言 Canal 是一个开源的MySQL数据库binlog监听和解析框架&#xff0c;用于实时捕获 MySQL数据库的binlog 变更事件&#xff0c;并将其解析成易于消费的数据格式。Canal 可以实时监听 MySQL 数据库的 binlog&#xff0c;并即时捕获数据库的数据变更事件。Canal可以将捕获到的b…

C++ function<>和bind()

一、可调用对象 介绍两个概念&#xff1a;调用运算符和可调用对象 调用运算符 调用运算符&#xff0c;即&#xff1a;() 。跟随在函数名之后的一对括号 “()”&#xff0c;起到调用函数的效果&#xff0c;传递给函数的参数放置在括号内。 可调用对象 对于一个对象或者一个表…

位图+布隆过滤器+海量数据问题(它们都是哈希的应用)

一)位图: 首先计算一下存储一下10亿个整形数据&#xff0c;需要多大内存呢&#xff0c;多少个G呢&#xff1f; 2^3010亿&#xff0c;10亿个字节 byte kb mb gb 100000000个字节/1024/1024/10241G 所以10亿个字节就是1G&#xff0c;所以40亿个字节就是4G&#xff0c;也就是10个整…