整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
tmlq能够对 HTML 数据进行 sed 或 grep 操作。我们可以使用 htmlq 搜索、切片和过滤 HTML 数据。让我们看看如何在 Linux 或 Unix 上安装和使用这个方便的工具并处理 HTML 数据。 |
什么是htmlq？
htmlq类似于 jq，但用于 HTML。使用 CSS 选择器从 HTML 文件中提取部分内容。在 CSS 中，选择器用于定位我们想要设置样式的网页上的 HTML 元素。例如，我们可以使用此工具轻松提取图像或其他 URL。
安装htmlq
首先需要在系统中安装cargo然后使用cargo来安装htmlq：
[root@localhost ~]# yum -y install cargo
[root@localhost ~]# cargo install htmlq
设置可执行的路径
确保将 $HOME/.cargo/bin 添加到 PATH 变量中，以便能够使用 export 命令运行已安装的二进制文件：
[root@localhost ~]# echo 'export PATH="$PATH:$HOME/.cargo/bin"' >> ~/.bash_profile
[root@localhost ~]# . ~/.bash_profile
如何使用 htmlq 从 HTML 文件中提取内容？
下面是使用curl和htmlq的用法：
curl -s url | htmlq '#css-selector'
curl -s url2 | htmlq '.css-selector'
curl -s https://www.linuxprobe.com | htmlq --pretty '#content' | more
让我们找到页面中的所有链接。例如：
[root@localhost ~]# curl -s https://www.linuxprobe.com | htmlq --attribute href a
人性化显示HTML:
[root@localhost ~]# curl --silent https://mgdm.net | htmlq --pretty '#posts'
帮助手册
使用下面命令查看帮助页面：
[root@localhost ~]# htmlq --help
htmlq 0.3.0
Michael Maclean <michael@mgdm.net>
Runs CSS selectors on HTML
USAGE:
htmlq [FLAGS] [OPTIONS] [selector]...
FLAGS:
-B, --detect-base Try to detect the base URL from the <base> tag in the document. If not found, default to
the value of --base, if supplied
-h, --help Prints help information
-w, --ignore-whitespace When printing text nodes, ignore those that consist entirely of whitespace
-p, --pretty Pretty-print the serialised output
-t, --text Output only the contents of text nodes inside selected elements
-V, --version Prints version information
OPTIONS:
-a, --attribute <attribute> Only return this attribute (if present) from selected elements
-b, --base <base> Use this URL as the base for links
-f, --filename <FILE> The input file. Defaults to stdin
-o, --output <FILE> The output file. Defaults to stdout
ARGS:
<selector>... The CSS expression to select [default: html]
总结
htmlq能够对 HTML 数据进行 sed 或 grep 操作。我们可以使用 htmlq 搜索、切片和过滤 HTML 数据。
寻找热爱表达的你#
"一键将网页截图制作成HTML网页"是指一种技术，它允许用户通过简单的操作，将网页的截图转换成HTML代码的网页。这通常涉及到自动布局、样式提取和代码生成。以下是实现这一功能的相关技术和步骤：
1. 截图捕捉：首先，需要有一个方法来捕捉网页的截图，这可以通过浏览器插件、屏幕捕获工具或专门的应用程序来完成。
2. 图像处理：捕捉到的截图可能需要进行预处理，比如裁剪、压缩或调整分辨率，以确保图像的质量。
3. 元素识别：使用图像识别技术来分析截图，识别网页中的元素，比如文本、按钮、图片等。
4. 布局分析：基于识别出的元素，分析页面的布局信息，包括元素的大小、位置和层级。
5. 样式解析：提取页面的样式信息，包括颜色、字体、间距等，并将它们转换为CSS代码。
6. HTML生成：根据布局和样式信息，生成HTML结构代码，将截图中的元素转换为HTML标签。
7. 代码优化：对生成的HTML代码进行优化，确保代码的可读性、维护性和性能。
8. 响应式设计：确保生成的网页代码能够适应不同的屏幕尺寸和设备，实现响应式布局。
9. 交互性实现：如果截图中的页面包含交互元素，需要添加相应的JavaScript代码来实现这些交互。
10. 一键操作：提供一个简单的用户界面，用户只需点击一个按钮，就可以完成截图到HTML的转换。
11. 预览功能：在转换过程中提供实时预览，让用户可以实时看到转换效果。
12. 自定义选项：允许用户对生成的HTML代码进行自定义，比如修改布局、添加额外的样式或功能。
13. 保存和导出：用户可以保存或导出生成的HTML代码，以便进一步使用或分享。
14. 错误处理：在转换过程中识别和处理潜在的错误，比如布局冲突或样式问题。
15. 兼容性测试：确保生成的网页在不同的浏览器和设备上都能正常显示和工作。
16. 安全性考虑：生成的代码应遵循安全最佳实践，避免潜在的安全风险。
17. 用户反馈：收集用户反馈，不断改进转换算法和用户体验。
18. 开源和社区支持：作为开源项目，鼓励社区参与贡献代码和改进功能。
这种一键转换技术可以大大提高网页开发的效率，尤其是对于快速原型设计和演示目的。然而，需要注意的是，自动生成的代码可能需要进一步的人工审查和调整，以确保最终产品的质量和性能。此外，一些复杂的网页效果和动态交互可能需要手动编写代码来实现。
在完成了花架子的搭建之后，现在需要看一下前端的Html代码了。
Html代码
打开这几份代码进行横行对比，可以发现里面好大一部分都是一样的
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="author" content="Kodinger"> 6 <title>My Login Page — Bootstrap 4 Login Page Snippet</title> 7 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> 8 <link rel="stylesheet" type="text/css" href="css/my-login.css"> 9</head> 10<body class="my-login-page"> 11 <section class="h-100"> 12 <div class="container h-100">
每一个的头部都是这样的，作为一个懒惰的程序员，当然是要把他们拎出来了。
我们写一个base.html来当作模版。
以forgot.html为例，可以看出只有红框框选中的地方和其他几个文件不一样
forgot
那么我们的base.html可以写出这样
1{% load static %}
2<!DOCTYPE html>
3<html>
4<head>
5 <meta charset="utf-8">
6 <meta name="author" content="Kodinger">
7 <title>
8 {% block title %}
9 登录
10 {% endblock %}
11 </title>
12 <link rel="stylesheet" type="text/css" href={% static 'bootstrap/css/bootstrap.min.css' %}>
13 <link rel="stylesheet" type="text/css" href={% static 'css/my-login.css' %}>
14</head>
15<body class="my-login-page">
16<section class="h-100">
17 <div class="container h-100">
18 {% block main %}
19
20 {% endblock %}
21 </div>
22</section>
23
24<script src={% static "js/jquery.min.js" %}></script>
25<script src={% static "bootstrap/js/bootstrap.min.js" %}></script>
26<script src={% static "js/my-login.js" %}></script>
27</body>
28</html>
留出了{% block main %} {% endblock %}来摆放差异的内容
模块化后的forgot
新的forgot.html如图所示。
同理，完成其他几个html的模版提取。
编写代码可以通过url访问几个页面
首先是首页
有两种方式可以实现：
1from django.shortcuts import render 2from django.views import View 3 4class LoginView(View): 5 def get(self, request): 6 return render(request, 'login/index.html')
定义类视图的路由：
1from django.urls import path
2from . import views
3
4urlpatterns=[
5 path('', views.LoginView.as_view(), name='login'),
6]
同理，完成其他几个页面的类视图GET代码编写：
1from django.shortcuts import render 2from django.views import View 3 4 5class LoginView(View): 6 def get(self, request): 7 return render(request, 'login/index.html') 8 9 10class ForgotView(View): 11 def get(self, request): 12 return render(request, 'login/forgot.html') 13 14 15class RegisterView(View): 16 def get(self, request): 17 return render(request, 'login/register.html') 18 19 20class ResetView(View): 21 def get(self, request): 22 return render(request, 'login/reset.html')
路由配置
1from django.urls import path
2from . import views
3
4urlpatterns=[
5 path('', views.LoginView.as_view(), name='login'),
6 path('forgot/', views.ForgotView.as_view(), name='forgot'),
7 path('register/', views.RegisterView.as_view(), name='register'),
8 path('reset/', views.ResetView.as_view(), name='reset'),
9]
下面修改index.html里面的a标签完成页面上直接跳转
image.png
改为 <a href={% url 'forgot' %} class="float-right">
同理找到全部需要修改的a标签
运行后点击页面上仅有的几个按钮测试跳转是否正常。
再把里面的一些英文改成中文，到此这个抄来的前端页面，大半都变成我们自己的东西了。
本土化
以上就完成了页面模版的提取与简单的类视图。
后续再讲POST的实现。
由于代码的量已经增加的有点多，全部贴出来不太美观，所以上库进行版本管理量。
Git地址：https://github.com/zx490336534/Zxapitest.git
*请认真填写需求信息，我们会在24小时内与您取得联系。
