html分析（html结构分析）
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
本篇文章给大家谈谈html分析，以及html结构分析对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
html是什么意思?
HTML是超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术，可以创造出功能强大的网页。因而，超级文本标记语言是万维网编程的基础，也就是说万维网是建立在超文本基础之上的。
扩展资料：
HTML语言作为一种网页编辑语言，易学易懂，能制作出精美的网页效果，其作用如下：
1、格式化文本。如设置标题、字体、字号、颜色;设置文本的段落、对齐方式等。
2、建立超链接。通过超链接检索在线的信息，只需用鼠标单击，就可以到达任何一处。
3、创建列表。把信息用一种易读的方式表现出来。
4、插入图像。使网页图文并茂，还可以设置图像的各种属性，如大小、边框、布局等。
5、建立表格。表格为浏览者提供快速找到需要信息的显示方式，还能用表格来设定整个网页布局。
6、加入多媒体。可以在网页中加入音频、视频、动画，还能设定播放的时间和次数。
7、交互式窗体、计数器等。为获取远程服务而设计窗体，可用于检索信息、定购产品等。
参考资料：百度百科-HTML
几个C#关于Html解析的类
第一种方法：
用System.Net.WebClient下载Web Page存到本地文件或者String中，用正则表达式来分析。这个方法可以用在Web Crawler等需要分析很多Web Page的应用中。
using System;
using System.Net;
using System.Text;
using System.Text.RegularExpressions;
namespace HttpGet
{
class Class1
{
[STAThread]
static void Main(string[] args)
{
System.Net.WebClient client = new WebClient();
byte[] page = client.DownloadData("");
string content = System.Text.Encoding.UTF8.GetString(page);
string regex = "href=[\\\"\\\'](http:\\/\\/|\\.\\/|\\/)?\\w+(\\.\\w+)*(\\/\\w+(\\.\\w+)?)*(\\/|\\?\\w*=\\w*(\\w*=\\w*)*)?[\\\"\\\']";
Regex re = new Regex(regex);
MatchCollection matches = re.Matches(content);
System.Collections.IEnumerator enu = matches.GetEnumerator();
while (enu.MoveNext() enu.Current != null)
{
Match match = (Match)(enu.Current);
Console.Write(match.Value + "\r\n");
}
}
}
}
第二种方法：
利用Winista.Htmlparser.Net 解析Html。这是.NET平台下解析Html的开源代码，网上有源码下载
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using Winista.Text.HtmlParser;
using Winista.Text.HtmlParser.Lex;
using Winista.Text.HtmlParser.Util;
using Winista.Text.HtmlParser.Tags;
using Winista.Text.HtmlParser.Filters;
namespace HTMLParser
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
AddUrl();
}
private void btnParser_Click(object sender, EventArgs e)
{
#region 获得网页的html
try
{
txtHtmlWhole.Text = "";
string url = CBUrl.SelectedItem.ToString().Trim();
System.Net.WebClient aWebClient = new System.Net.WebClient();
aWebClient.Encoding = System.Text.Encoding.Default;
string html = aWebClient.DownloadString(url);
txtHtmlWhole.Text = html;
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
#endregion
#region 分析网页html节点
Lexer lexer = new Lexer(this.txtHtmlWhole.Text);
Parser parser = new Parser(lexer);
NodeList htmlNodes = parser.Parse(null);
this.treeView1.Nodes.Clear();
this.treeView1.Nodes.Add("root");
TreeNode treeRoot = this.treeView1.Nodes[0];
for (int i = 0; i htmlNodes.Count; i++)
{
this.RecursionHtmlNode(treeRoot, htmlNodes[i], false);
}
#endregion
}
private void RecursionHtmlNode(TreeNode treeNode, INode htmlNode, bool siblingRequired)
{
if (htmlNode == null || treeNode == null) return;
TreeNode current = treeNode;
TreeNode content ;
//current node
if (htmlNode is ITag)
{
ITag tag = (htmlNode as ITag);
if (!tag.IsEndTag())
{
string nodeString = tag.TagName;
if (tag.Attributes != null tag.Attributes.Count 0)
{
if (tag.Attributes["ID"] != null)
{
nodeString = nodeString + " { id=\"" + tag.Attributes["ID"].ToString() + "\" }";
}
if (tag.Attributes["HREF"] != null)
{
nodeString = nodeString + " { href=\"" + tag.Attributes["HREF"].ToString() + "\" }";
}
}
current = new TreeNode(nodeString);
treeNode.Nodes.Add(current);
}
}
//获取节点间的内容
if (htmlNode.Children != null htmlNode.Children.Count 0)
{
this.RecursionHtmlNode(current, htmlNode.FirstChild, true);
content = new TreeNode(htmlNode.FirstChild.GetText());
treeNode.Nodes.Add(content);
}
//the sibling nodes
if (siblingRequired)
{
INode sibling = htmlNode.NextSibling;
while (sibling != null)
{
this.RecursionHtmlNode(treeNode, sibling, false);
sibling = sibling.NextSibling;
}
}
}
private void AddUrl()
{
CBUrl.Items.Add("");
}
}
}
HTML网页结构分析
比如说这个链接，前面的就是这个网站的根目录，对应的一个文件夹
后面的question就是另一个文件夹被根目录包含着然后下面的454801449941981325.html就是question这个文件夹下的一个html文件他们的结构就是
网站根目录
question
454801449941981325.html
一层包含一层
java中几种解析html的工具
HTML分析是一个比较复杂的工作，Java世界主要有几款比较方便的分析工具：
1.Jsoup
Jsoup是一个集强大和便利于一体的HTML解析工具。它方便的地方是，可以用于支持用jQuery中css selector的方式选取元素，这对于熟悉js的开发者来说基本没有学习成本。
String content = "blabla";
Document doc = JSoup.parse(content);
Elements links = doc.select("a[href]");
Jsoup还支持白名单过滤机制，对于网站防止XSS攻击也是很好的。
2.HtmlParser
HtmlParser的功能比较完备，也挺灵活，但谈不上方便。这个项目很久没有维护了，最新版本是2.1。HtmlParser的核心元素是Node，对应一个HTML标签，支持getChildren()等树状遍历方式。HtmlParser另外一个核心元素是NodeFilter，通过实现NodeFilter接口，可以对页面元素进行筛选。这里有一篇HtmlParser的使用文章：使用 HttpClient 和 HtmlParser 实现简易爬虫。
3.Apache tika
tika是专为抽取而生的工具，还支持PDF、Zip甚至是Java Class。使用tika分析HTML，需要自己定义一个抽取内容的Handler并继承org.xml.sax.helpers.DefaultHandler，解析方式就是xml标准的方式。crawler4j中就使用了tika作为解析工具。SAX这种流式的解析方式对于分析大文件很有用，我个人倒是认为对于解析html意义不是很大。
InputStream inputStream = null;
HtmlParser htmlParser = new HtmlParser();
htmlParser.parse(new ByteArrayInputStream(page.getContentData()),
contentHandler, metadata, new ParseContext());
4.HtmlCleaner与XPath
HtmlCleaner最大的优点是：支持XPath的方式选取元素。XPath是一门在XML中查找信息的语言，也可以用于抽取HTML元素。XPath与CSS Selector大部分功能都是重合的，但是CSS Selector专门针对HTML，写法更简洁，而XPath则是通用的标准，可以精确到属性值。XPath有一定的学习成本，但是对经常需要编写爬虫的人来说，这点投入绝对是值得的。
auto.js如何解析html
URL：
编写思路(入门级别)
1、打开谷歌浏览器
2、打开博客园登录网页地址
3、在用户名输入框内输入用户名
4、在密码输入框内输入密码
5、点击登录
6、检测是否跳转到了登录成功的页面
脚本如下图:
4feb5d799ae52eea8c1b063cc8c60f85.png
现在我们来分解下输入用户名这个动作
1、首先找到用户名输入框
2、在输入框中输入用户名
【找到用户名输入框】实现此步骤的前提就是需要掌握控件的定位。具体在脚本中实现也就是图中的第11行：
('//*[@autocomplete="username"]')
WEB控件定位所做的事情，就是通过特定的方式找到我们需要操作的页面控件
那么如何才能学会这个控件定位呢？第一步就是简单了解下前端的语言。和我一起往下看即可轻松学会。
二、WEB网页文本—HTML5
要想掌握WEB自动化测试的控件定位，我们首选要了解控件是什么。
控件就是浏览器展示的前端语言生成对象。
web前端的基础语言就是HTML5
依旧是老套路，拿博客园举例：
5faa8b60ca05f50f4c0d6430574214fd.png
用户打开浏览器，看到的用户名输入框、密码输入框、登陆按钮、立即注册等等所有，都是浏览器展示的HTML5语言的对象。
我们按下F12键即可打开浏览器的调试模式，来查看网页的HTML5源代码。
如下图：
按下F12后右边页面中Elements选项对应的就是网页的html5代码
第一次接触肯定觉得非常晦涩难懂、云里雾里。但是相信我，万事开头难！你在看我自动化测试思维的文章以前不也是觉得自动化测试非常高大上吗?
不了解什么是自动化测试思维？戳下方5分钟即可学会☟☟☟
【自动化测试入门】自动化测试思维
00a821b679ab09e913981cf6a655f861.png
HTML5一个控件的写法一般是2个尖括号成对出现。
一、第一个尖括号的第一个单次为控件类型，之后是控件属性。
二、第二个尖括号表示此控件的尾部。
三、2个尖括号中间为控件在前端显示的文字部分。
举例说明的话。控件类型是狗的类型(中华田园犬、哈巴狗、牧羊犬等)，控件属性就是这条狗的名字、性别、体重、毛发颜色等。2个尖括号中间的文字，就是你想在此页面上展示的这个狗的'名字'。
还是拿博客园的登陆界面举例来说：
点击'小箭头'定位控件，或者在控件处右键选中'检查元素'，即可定位到指定的控件
7b1de1397c71dcde07d8d9da72e61ab5.png 控件的源码为：
input _ngcontent-miv-c141=""matinput=""formcontrolname="username"placeholder="登录用户名 / 邮箱"autocomplete="username" id="mat-input-0" aria-describedby="mat-error-0" aria-invalid="true" aria-required="false"
input就是控件类型
input以外的就都是控件属性
这个输入框的控件属性有：
_ngcontent-miv-c141=""
matinput=""
formcontrolname="username"
placeholder="登录用户名 / 邮箱"
autocomplete="username"
id="mat-input-0"
aria-describedby="mat-error-0"
aria-invalid="true"
aria-required="false"
三、基于控件的唯一控件属性定位
了解了什么是控件，现在我们在上手控件的定位。
selenium有八种定位控件的方式，有6种都是基于HTML5原生控件的单一控件属性来定位的。
id定位：
find_element_by_id()
name定位：
find_element_by_name()
class定位：
find_element_by_class_name()
tag定位：
find_element_by_tag_name()
link定位：
find_element_by_link_text()
partial_link定位：
find_element_by_partial_link_text()
以下两种为特定的2种控件定位方法，下一篇文章再做详解。 xpath定位：find_element_by_xpath() CSS定位：find_element_by_css_selector()
下面我将举例来讲解这6种基于单一控件属性的定位方法。
还是拿博客园的登陆界面举例来说：
833005656b1e6d0fa4a7e2cc58d875a5.png
登陆用户名的输入框的HTML5源码为：
input _ngcontent-miv-c141=""matinput=""formcontrolname="username"placeholder="登录用户名 / 邮箱"autocomplete="username" id="mat-input-0" aria-describedby="mat-error-0" aria-invalid="true" aria-required="false"
这个输入框的控件属性有：
_ngcontent-miv-c141=""
matinput=""
formcontrolname="username"
placeholder="登录用户名 / 邮箱"
autocomplete="username"
id="mat-input-0"
aria-describedby="mat-error-0"
aria-invalid="true"
aria-required="false"
对应的定位方法：
id属性来定位此控件
写法为：
find_element_by_id(mat-input-0)
name属性来定位此控件
此控件前端开发没有定义name属性，则无法使用此定位方法
tag属性来定位此控件(控件的类型)
写法为：
find_element_by_tag_name('input')
class属性来定位此控件
写法为：
find_element_by_class_name(mat-input-0)
另外两种定位是针对link属性的控件，也就是链接控件。如下图：
依旧是老老路。使用博客园登陆页举例：
【立即注册】就是页面中的一个link控件，其作用就是跳转到注册页面。
fe0c7b4e9f770591aeaa13a7a9e5ec43.png
_ngcontent-arq-c141="" href="/signup?returnUrl=https:%2F%2F"立即注册
他的控件属性有
link定位(通过link控件的文本值)
find_element_by_link_text('立即注册')
但是部分页面会存在，link的文本值非常长，所以就发明了partial_link定位。
如下图中的百度文库的某一页面：
5ddb0ca6201cd203245824c06c9e7932.png link的文本值为：全国2018年10月04741计算机网络原理真题以及答案解析
定位的脚本就可以写成：(只取文本的某一段值即可)
find_element_by_link_text('04741计算机网络')
但是这样的定位方式存在一个致命且常见的问题：
随着前端的技术不断的发展，页面的复杂度越来越高。一个页面的控件越来越多(tag不唯一)，id、name、class_name可能有很多重名或者完全是动态的一串字母(id、name、class_name、link_name可能都不唯一)，我们基于唯一控件属性定位的在特别复杂的项目上可能完全无法完成UI自动化测试的定位工作。
浏览器如何解析 HTML？
浏览器渲染引擎从网络层取得请求的文档，一般情况下文档会分成 8KB 大小的分块传输。
HTML 解析器的主要工作是对 HTML 文档进行解析，生成解析树。
解析树是以 DOM 元素以及属性为节点的树。DOM 是 文档对象模型（Document Object Model） 的缩写，它是 HTML 文档的对象表示，同时也是 HTML 元素面向外部（如 JavaScript）的接口。树的根部是 Document 对象。整个 DOM 和 HTML 文档几乎是一对一的关系。
解析算法
HTML 不能使用常见的自顶向下或自底向上方法来进行分析。主要原因有以下几点:
由于不能使用常用的解析技术，浏览器创造了专门用于解析 HTML 的解析器。解析算法在 HTML5 标准规范中有详细介绍，算法主要包含了两个阶段： 标记化（tokenization）和树的构建 。
解析结束之后
浏览器开始加载网页的外部资源（CSS，图像，JavaScript 文件等）。
此时浏览器把文档标记为 可交互的（interactive） ，浏览器开始解析处于 推迟（deferred） 模式的脚本，也就是那些需要在文档解析完毕之后再执行的脚本。之后文档的状态会变为 完成（complete） ，浏览器会触发 加载（load） 事件。
注意解析 HTML 网页时永远不会出现 无效语法（Invalid Syntax） 错误，浏览器会修复所有错误内容，然后继续解析。
关于html分析和html结构分析的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
