python 为html页面增加背景_Python 给html css自动添加注释
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屬性的功能
總結
以上是生活随笔為你收集整理的python 为html页面增加背景_Python 给html css自动添加注释的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java注销对话框_【java小程序实战
- 下一篇： python实现数字形式转换