Python 给html css自动添加注释(2020年11月8日)

背景

大二上学期专业开设了网页设计课程，专门学习html和css，有时候也经常有同学找我来帮忙看看他们写的代码，并且改改，我就忽然间想到，好像可以通过程序文件操作的方法自动帮我改它们一部分的代码，有些地方可以用这种方式实现，我就换一种方式再实现，但是这个目前还有一定的难度，我需要将html和css学的再精通一些才能实现。并且还比较麻烦。

于是我就转变了方向，可以做一个自动加注释的功能，使之看起来有很大的改动，并且可以通过注释向同学解释一些css语法的功能(其实可能并没有太大效果，有可能会反而让代码看的很冗余)，但是我只要做出来了我可以说谎了，说是我自己手动一点点加的，以表现出我很认真负责的样子，哈哈开玩笑的。

效果截图

添加注释前

添加注释后

源代码

# -*- encoding: utf-8 -*-

"""

修改网页html文件的程序

2020年10月31日

by littlefean

"""

from random import choice

HTML_DICT = {}

CSS_DICT = {}

JS_DICT = {}

"""

主要功能：

1 自动给每一行添加注释

思路：

--------------------

获取当前文件夹下的名字的文件

把读取，把每一行全部存放到数组中

新建一个空数组

遍历数组

如果当前元素是开头标签，并且开头标签里面的内容在字典库里

那么先append字典库对应的字符串翻译到新数组

再append当前行

最后把新数组写入到一个新的文件里面

--------------------

2 更改颜色

3 更改像素的值

"""

def main():

updateDict("html_list.txt", HTML_DICT)

updateDict("css_property.txt", CSS_DICT, fileType="oneToOne")

while True:

print("请输入本文件夹下的一个html或者css文件：例如 主页详情.html\n文件将被覆盖写，请注意备份")

fileName = input("输入路径:")

file = open(fileName, encoding="utf-8")

array = file.readlines()

array = addHtmlNote(array)

array = addCssNote(array)

file.close()

file = open(f"{fileName}", 'w', encoding="utf-8")

file.writelines(array)

file.close()

input("修改完成！回车继续……")

def updateDict(f, dic, fileType="oneToMany"):

"""

根据f文件里的内容来更新dic字典内容

:param f: 表示翻译内容的文件路径

:param dic: 根据f文件的内容来更新的dic词典变量

:param fileType: f文件的翻译方式类型

分为oneToMany和oneToOne两种，表示以不同的方式解析f文件里的内容

oneToMany：表示一对多的注释翻译，被翻译内容与翻译结果用tab间隔，各个翻译结果之间用单个空格间隔

oneToOne：表示一对一的注释翻译，被翻译内容与翻译结果用任意数量的tab或者空格间隔

需要根据f文件里的格式来选择oneToMany还是oneToOne

:return:

"""

fArr = open(f, encoding="utf-8").readlines()

if fileType == "oneToMany":

for line in fArr:

wordData = line[:len(line) - 1].split("\t")

wordName = wordData[0]

wordExplains = wordData[1].split(" ")

dic[wordName] = wordExplains

elif fileType == "oneToOne":

for line in fArr:

wordData = line[:len(line) - 1].split()

if len(wordData) > 0:

dic[wordData[0]] = wordData[1]

def addCssNote(linesArray, fileType="html"):

"""

自动给css添加注释，并返回列表

原文件中的 css代码格式必须遵守规范，使用此方法才能很好的添加注释

:param linesArray: html或css文件转成的列表

:param fileType: 传入数组的原型类型，比如是由html文件转成的数组还是css，只有 "html","css"

:return: 添加注释后的列表

"""

if fileType == "html": # todo html 和下面的 css做的一样，但不应该一样

newArray = []

# 遍历每一行

for line in linesArray:

# 获取一行里的内容，删掉末尾换行符并删除左右空白

lineContent = line[:len(line) - 1].strip()

# 如果这行内的纯内容不是空的

if len(lineContent) > 0:

# 如果这一行是以分号结尾

if lineContent[-1] == ';':

# print(lineContent)

propertyName = lineContent.split(':')[0]

# 如果这个属性名能在库存的css属性名里找到

if propertyName in CSS_DICT:

newArray.append(f"{spaceLeft(line)}/* {CSS_DICT[propertyName]} */\n")

newArray.append(line)

else:

newArray.append(line)

else:

newArray.append(line)

else:

newArray.append(line)

return newArray

elif fileType == "css":

newArray = []

# 遍历每一行

for line in linesArray:

# 获取一行里的内容，删掉末尾换行符并删除左右空白

lineContent = line[:len(line) - 1].strip()

# 如果这行内的纯内容不是空的

if len(lineContent) > 0:

# 如果这一行是以分号结尾

if lineContent[-1] == ';':

# print(lineContent)

propertyName = lineContent.split(':')[0]

# 如果这个属性名能在库存的css属性名里找到

if propertyName in CSS_DICT:

newArray.append(f"{spaceLeft(line)}/* {CSS_DICT[propertyName]} */\n")

newArray.append(line)

else:

newArray.append(line)

else:

newArray.append(line)

else:

newArray.append(line)

return newArray

def addHtmlNote(linesArray):

"""

自动给html添加注释，并返回列表

:param linesArray: .html文件通过 readlines 方法返回的列表

:return: 返回列表

"""

newLinesArray = []

for line in linesArray:

if line != '\n':

wordArr = []

for char in line.lstrip():

if line.lstrip()[0] != '

break

if char == '

pass

elif char == '/':

# 说明这是一个闭合标签

wordArr.clear()

break

elif char == '>' or char == ' ':

break

else:

wordArr.append(char)

if len(wordArr) != 0:

# 得到了标签词

word = "".join(wordArr)

if word in HTML_DICT:

# 标签词在库存中存在

newLinesArray.append(f"{spaceLeft(line)}\n")

newLinesArray.append(line)

else:

# 标签词在库存中不存在

newLinesArray.append(line)

else:

# 没有提取到标签词

newLinesArray.append(line)

return newLinesArray

def spaceLeft(string):

"""

传入一段字符串，以字符串的格式返回该字符串左侧的空格或tab

:param string: 传入字符串

:return: 字符串string左侧的空格或tab组成的空白部分

"""

spaceArr = []

for char in string:

if char == ' ' or char == '\t':

spaceArr.append(char)

else:

break

return "".join(spaceArr)

if __name__ == '__main__':

main()

html_list.txt

该文件在上述py文件的同一文件目录下，其内部的内容为：(只写了一些常用的，不全)

!doctype 声明这是一个html5的文件 头文件声明 就是声明用的 让人感觉很标准的标签

!DOCTYPE 声明这是一个html5的文件 头文件声明 就是声明用的 让人感觉很标准的标签

html 最根本的开头标签 包裹整个文档内容的标签

head 头部标签 主要用于存放一些信息 这里面的内容一般都显示不来，但是有用

body 波多野 身体 html的身体 主要内容

meta 设置文档的属性 设置一些相关的属性

title 标题 浏览器左上角标签的标题

style 这个标签里存放css样式 存放样式 存放css css

ol 有序列表的标签 里面存放li用 有序列表

ul 这个标签表示无序列表，里面的子元素需要全部存放li标签

li 这个标签表示无序列表的一个项 一个项目 一项

div 这是一个盒子 盒子 存放东西的容器

span 和div差不多，但是不会占据一整行 存放东西的容器

p 这个标签表示一个段落 段落文字

a 这个是跳转 跳转标签

table 表格标签，里面的内容需要全部存放tr，tr表示一行 表格

tr 表格里的一行元素 表格行

td 表格里一行元素的一个块儿元素 表格行内的格 格子 嗝儿~

h1 这个是一个大标题 大标题

h2 二级大标题 最大的标题 最厉害的标题 最雄壮的标题

h3 三级大标题

h4 四级大标题

h5 五级大标题

h6 六级大标题 最小的标题 比文字还小的标题

input 输入框 输入内容 可能内容多种多样的输入内容

img 图片 容易让人产生愉悦感的标签 华丽的图片 好看的图片 非常好看的图 图图 图 挺好看的图片 牛逼的图片

br 换行 且换一行 回车一行 仅仅为了能够换行

textarea 输入区域

css_property.txt

该文件和html_list.txt 一样，也在py文件的同一目录下，下面为该文件的内容

width 宽度

height 高度

line-height 行高

max-height 最大高度

max-width 最大宽度

min-width 最小宽度

min-height 最小高度

clear 它侧面其他可浮

cursor 指向它显示指针类

display 是否如何显示

float 哪个方向浮动

visibility 是否可见

padding 内边距

border 边框

border-style 边框风格

border-left-style 左侧边框风格

border-width 边框宽度

border-color 边框颜色

border-top-color 边框顶部颜色

border-radius 边框圆角[3]

box-shadow 边框阴影[3]

border-image 边框图片[3]

margin 外边距

margin-bottom 外边距

margin-left 外边距

margin-top 外边距

margin-right 外边距

padding-bottom 内边距

padding-top 内边距

padding-left 内边距

padding-right 内边距

content 内容

color 字体颜色

font-size 大小

font-family 字体

direction 文本方向

line-height 行高

letter-spacing 字符间距

text-align 对齐文本

text-decoration 文本修饰

text-indent 缩进首行

font-weight 字体加粗

text-transform 字母

unicode-bidi 设置文本方向

white-space 空白处理方式

word-spacing 字间距

text-shadow 阴影[3]

word-wrap 换行方式1

word-break 换行方式2

user-select 字不可选

opacity 透明度

list-style-type 标签

list-style-image 项图片

list-style-position 标志位置

list-style-type 类型

border-collapse 双变单边框tb

background 背景

background-color 背景颜色

column-count 栏数

column-gap 间距

column-rule 线条

outline-style 边框线条

outline-color 颜色

outline-width 粗细

position 位置

top 上偏移量

left 左偏移量

right 右偏移量

bottom 下偏移量

overflow 溢出发生的事

clip 元素显示形状

vertical-align 垂直对齐方式

z-index 元素堆叠顺序

clear 取消浮动

transform 2D3D变换

transition-property 过渡名称

transition-duration 过渡时长

transition-timing-function 过渡时间曲线

transition-delay 过渡开始时间

当前问题与改进计划

当前存在的问题：

两个txt里文件存储的内容并不全，甚至大部分注释内容还不够细致。

addCssNote 函数还没有完善，给html文件添加注释的操作可能会出现问题。

如果css行尾没有加分号，当前程序还不能识别

打算改进的内容：

能够输入一个文件夹的路径，该程序能够给该文件夹里的所有html和css文件添加注释，当前只能一个一个文件添加注释，但是通常一个网页项目会有很多html文件和css文件。

能够给js添加一点注释

对于css添加注释，不止能够给属性添加注释，还需要给属性的主体、选择器添加注释

添加一种外联css自动改为内联css，或者内联css自动转变成html内置标签css属性的功能