一、基础知识

HTML主要通过包括元素、标签、属性、内容组成。

元素&标签&属性的关系.png

常见的页面结构如下图所示。

基础知识.png

• 标签：如图中的<div><p>， 还有<span><h1>，详见 MDN Web Docs-HTML元素大全
• 属性：如图中的class，还有id/style/name等常见的属性。详见MDN Web Docs-HTML 属性参考

常用的定位页面元素的方式有2种，Css选择器 和 Xpath，Css选择器基本所有的浏览器都支持。Xpath使用前需要确认运行环境是否支持。

二、Css 选择器

Css选择器是通过样式选择器的模式，通过标签、属性等方式定位到元素，常用的选择方式如下所示。

图3 Html页面样例.png

1. ID选择器

通过id属性定位元素，id前添加#，如图3中可以使用 #asideProfile

2. 类选择器

通过class属性定位元素，类前添加.，如图3中可以使用 .item-rank

3. 标签选择器

通过标签名定位元素，标签前不添加符号标签名，如图3中可以使用aside

4. 属性选择器

可以使用模糊查询value的方式匹配属性，常用的关键字如下所示。 如图3中可以使用[class~='profile-intro']唯一定位class为profile-intro d-flexdiv元素。

// attr 属性的意思
[attr]：只使用属性名，但没有确定任何属性值
[attr="value"]：指定属性名和属性值(值完整)
[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词
[attr^="value"]：属性值是以value开头的(一部分也可以)
[attr$="value"]：属性值是以value结束的(一部分也可以)
[attr*="value"]：属性值中包含了value(一部分也可以)
[attr|="value"]：属性值是value或者以“value-”开头的值

也可通过上述选择器的组合用法，如div[class~='profile-intro']

5. 高级用法

• css 子元素选择器
  采用>符合承接，标识明确的下一级元素，严格按照一级一级的向下查找，不能跳级，如图3中的#asideProfile>.item-rank
• css 相邻兄弟选择器
  采用+符合链接上一个元素，如图三中#asideProfile+a,a元素是asideProfile下面的相邻元素，只能选择下面的相邻元素，不能选择上面的
• css伪类选择器
  :nth-child(n)函数 ，比如选择#asideProfile下的第2个元素，而且元素类型必须是div类型， 可以书写为#asideProfile>div:nth-child(2)，定位图3中的元素。

三、 Xpath（Xml path Language）

基于页面结构来进行定位，比Css选择器更灵活，但也更消耗系统性能。

绝对路径：从Html根目录一层一层查找
相对路径：基于匹配制度来查找

例如 //*[@id="asideProfile"]
/: 从根节点选取
//: 从匹配选择的当期节点选择文档中的节点，而不考虑他们的位置
*: 任意元素
[]:表示筛选条件
..: 选取当前节点的父节点
@: 选取属性，例如 @id="asideProfile" 表示基于id属性值为asideProfile来进行筛选