如何书写超文本标签代码,构建网页?

165 阅读4分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第25天,点击查看活动详情

今天参加了码上1024活动,我一开始是用python语言写的,第一次参加这种活动,第一次在码上掘金写代码(第一次由于不知道码上掘金怎么用的,所以是用Python语言写的)今天我终于在和别人的探讨下搞懂了码上掘金是怎么用的,在此罗列了这次1024网页构建的步骤和过程。如果还有小伙伴,不会用码上掘金的可以借鉴此文章

目录

超文本传输语言介绍
用python语言构建1024
       replace方法的三个变量
用超文本标签语言构建1024
       怎么理解nbsp呢?
1024程序员节作品欣赏

一.超文本传输语言介绍

html英⽂是Hyper Text Markup Language,HTML是缩写,中⽂为超⽂本标签语⾔,通过HTML标签对⽹页中的⽂本、图⽚、声⾳等内容进⾏描述。

整个HTML文档是有它的框架的

<HTML>
<head>
<title>
</title>
</head>
<body>
</body>
</HTML>

标题title标签在head头标签内,然后才是身体body,大部分信息都在身体中

二.用python语言构建1024

s = '1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 \n1 1 1 0 1 0 0 0 1 0 0 0 1 0 1 0 1 1 1 1 1 \n1 1 1 0 1 0 1 0 1 1 1 0 1 0 1 0 1 1 1 1 1 \n1 1 1 0 1 0 1 0 1 0 0 0 1 0 0 0 0 1 1 1 1 \n1 1 1 0 1 0 1 0 1 0 1 1 1 1 1 0 1 1 1 1 1 \n1 1 1 0 1 0 0 0 1 0 0 0 1 1 1 0 1 1 1 1 1 \n1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 '
print(s.replace('1',' '))

Snipaste_2022-10-26_02-12-54.jpg

用常数代替所有数字,以1和0为主,空字符填充,第一个字符不是空字符,其他每一个元素后面加一个空字符,引用常量s,赋予replace方法

Snipaste_2022-10-26_02-06-25.jpg

replace方法的三个变量:

s.replace(old,new,count=0) old:需要替换的字符 new:替换后的字符 count:总共替换的次数,如果默认为0或者不填则表⽰全局替换,所以一般后面都没有count变量

S就相当于是一个集合,replace,这个函数从前面的集合中,挑选你选定的字符串更改为另一个字符串

这样,把衣全部替换成空字符串,就和左右的空字符串一直了,相当于消失,等于是提供了一个距离,把所有相同的字符串全部替换成空字符串,不想动的字符串就留在了上面,这样1024就出来了

Snipaste_2022-10-25_16-52-29.jpg

三.用超文本标签语言构建1024

下载Visual Studio Code软件运行网页源代码

Snipaste_2022-10-26_02-02-11.jpg

根据HTML框架书写,在标签中输入“文件名.py”然后就用结束标签,结束的标签一般都会有“/”符号,在任意地点看到都代表着那个标签页面内容的结束,在身体中h1代表一行,另起一行需要再用小标签h1打头阵

Snipaste_2022-10-26_02-05-12.jpg

有起始就有结束,用/h1结束,小标签的结束不需要另起一行,全文也就只有三个地方的结束,需要另起一行,第一就是HTML主干,第二就是头,第三就是身体,在头和身体里的所有小标签的结束都不需要另起一行,具体在句子结尾写上就行

Snipaste_2022-10-26_02-21-51.jpg

nbsp是空格的意思,每一个元素都需要用“&”符号串联在一起

&nbsp是一个空格
&nbsp—是一个“—”字符串
&nbsp0是一个数字“0”字符串

怎么理解nbsp呢?

nbsp是不换行空格,外文名Non-Breaking Space,nbsp前面加“&”后面加分号“;”第一个符号是必须要加的后面的符号论情况而定,不换行nbsp空格用在文本中避免断行的地方,简单来说就是一个整体不像一般留在上一行一半留在下一行,让类似/n换行符这样的存在往前挪移直至没有不换行空格的地方。总的来说,nbsp不允许断行,不会被认为是普通空格合并。

Snipaste_2022-10-25_22-15-18.jpg

有些地方就是横杠和三个零组成,可以在三个零中间加上空格(&nbsp),“&nbsp—&nbsp0&nbsp0&nbsp0&nbsp—”,这是没有加空格的效果

Snipaste_2022-10-25_22-15-44.jpg

像这样的地方,需要一个一个插入符号,让上下对齐,5个&nbsp的长度和1个&nbsp—长度差不多

Snipaste_2022-10-26_03-34-59.jpg

四.1024程序员节作品欣赏

Snipaste_2022-10-25_22-57-27.jpg

祝大家“1024程序猿节日快乐”,万事顺心,阖家幸福!!!