2.2 网页基础
????浏览器浏览的网页，均是浏览器根据超文本，CSS,以及，JS，的解解析规则，对服务器返回的数据进行解析加载，进而变成我们所见的页面。
?
2.21 网页的组成
????1 HTML 构成网页的框架 定义网页的内容
????2 CSS 构成框架中的元素的样式 规定网页的布局
????3 JavaScript 对网页行为进行编程 动画，酷炫的效果等
?
????1 HTML
????网页 括文字、按钮、图片 视频等各 复杂的元素，其基本就是 HTML 。
不同类型的文字通过不同类型的标签来表示 ，
标签之间的布局又常通过布局标签 div 嵌套组合而戚 ，
各种标签通过不同的排列和嵌套形成网页的框架
?
常见标签：详细内容见https://www.jianshu.com/p/04e541183329 （转载总结很棒）
分区标签
<header> 表示一组引导性的帮助
<nav> 导航
<section> 表示文档中的一个区域（或节），通过是否含一个标题作为子节点来辨识<section>
<aside> 表示与其余页面无关的内容部分
<footer> 表示最近一个章节内容或者根节点元素的页脚
<h1>~<h6> 标题
<article> 表示文档、页面、应用或网站中的独立结构
<address> 地址信息
<hgroup> 代表一个段的标题
?
文本内容标签：
<main> 文档<body>或应用的主体部分
<div> 文档分区元素， 通用型流内容容器
<p> 段落
<pre> 预定义格式文本
<ol> 有序列表
<ul> 无序列表
<li> 列表条目元素
<dl> 描述列表元素
<dt>术语定义元素
<dd> 描述元素，描述列表 (<dl>) 的子元素，<dd>与 <dt> 一起用。
<figure> 代表一段独立的内容, 经常与说明(caption) <figcaption> 配合使用
<figcaption>图片说明/标题，于描述其父节点 <figure> 元素里的其他数据
<blockquote> HTML 块级引用元素
<hr> 表示段落级元素之间的主题转换，视觉上看是水平线
?
HTML 支持各种多媒体资源，例如图像，音频和视频。
<img> 图片
<audio> 音频内容
<video> 视频内容
<track> 被当作媒体元素—<audio> 和 <video>的子元素来使用。它允许指定计时字幕（或者基于事件的数据），例如自动处理字幕。
<map> 与 <area> 属性一起使用来定义一个图像映射(一个可点击的链接区域).
<area> 在图片上定义一个热点区域，可以关联一个超链接。<area>元素仅在<map>元素内部使用。
?
2 CSS
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达"这是标题"、"这是段落"、"这是表格"之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签,这样的文档内容单调，不够美观。
????于是，就有了CSS来美化，为HTML中的元素设定显示效果。
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
?
3 JavaScript
????????简称JS，脚本语言，HTML和CSS配合只能显示静态的彩色的网页，没有动态效果。网页中的动态交互效果例如
????????进度条，弹窗，轮播，，，都是由JS提供。
????????JS以单独的文件加载，后缀为.js， 在HTML标签中通过<script>标签引入
?
因此 网页组成中：
????HTML 定义网页文档的基本结构
????CSS 描述网页的布局
????JS 描述网页的动态行为
?
????
?
2.22 网页的结构
????网页的结构由HTML标签决定， 因此要熟悉各种标签的含义以及代表的内容和功能。
?
2.23 网页HTML节点以及节点书树的关系
????节点：
????HTML 文档中的所有内容都是节点，通过 HTML DOM ，所有的节点构成节点树，树中的所有节点均可通过 Java Script 访问，所有 HTML 节点元素均可被修改，也可以被创建或删除
????
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
?
节点树：
????HTML DOM HTML 文档视作树结构，这种结构被称为节点树，除了root 根节点每个节点都有父节点，也可能由子节点兄弟节点。
?
?
?
?
?
?
?
?
?
2.24 CSS 选择器
????网页由多个节点构成，CSS选择器会根据不同的节点设置为不同的样式，如何定位节点，选择要提取的内容？ 通过CSS选择器来选择节点
????
????使用 css 选择器来定位节点
?
例如div 节点的 id 为container ，那么就可以表示为＃container ，其中＃开头代表选择id 其后紧跟 id 的名称
?
想选择 class wrapper 的节点 ，便可以使用 .wrapper ，这里以点 . 开头代表选择 class ，其后紧跟 class 的名称
?
根据标签名筛选，例如想选择二级标题 ，直接用 h2 即可 这是最常用的 种表示，分别是根据id, class 、标签名筛选 ，
?
css 选择器还支持嵌套选择 ，各个选择器之间加上空格分隔开便可以代表嵌套关系，
#container .wrapper 则代表先选择 id为container 的节点，然后选中其内部的 class wrapper 的节点，然后再进一步选中其内部的p节点
?
如果不加空格，代表并列关系
如 div#container . wrapper p.text 代表先选择 id为container div 节点，然后选中其内部的 class wrapper 的节点，再进步选中其内部的 class text 节点 这就是CSS择器，其筛选非常强大
?
?
?
?
?
?
?
Css选择器语法规则：
|
选择器 |
例子 |
例子描述 |
CSS |
|
|
.class |
.intro |
选择 class="intro" 的所有元素。 |
1 |
|
|
#id |
#firstname |
选择 id="firstname" 的所有元素。 |
1 |
|
|
* |
* |
选择所有元素。 |
2 |
|
|
element |
p |
选择所有 <p> 元素。 |
1 |
|
|
element,element |
div,p |
选择所有 <div> 元素和所有 <p> 元素。 |
1 |
|
|
element?element |
div p |
选择 <div> 元素内部的所有 <p> 元素。 |
1 |
|
|
element>element |
div>p |
选择父元素为 <div> 元素的所有 <p> 元素。 |
2 |
|
|
element+element |
div+p |
选择紧接在 <div> 元素之后的所有 <p> 元素。 |
2 |
|
|
[attribute] |
[target] |
选择带有 target 属性所有元素。 |
2 |
|
|
[attribute=value] |
[target=_blank] |
选择 target="_blank" 的所有元素。 |
2 |
|
|
[attribute~=value] |
[title~=flower] |
选择 title 属性包含单词 "flower" 的所有元素。 |
2 |
|
|
[attribute|=value] |
[lang|=en] |
选择 lang 属性值以 "en" 开头的所有元素。 |
2 |
|
|
:link |
a:link |
选择所有未被访问的链接。 |
1 |
|
|
:visited |
a:visited |
选择所有已被访问的链接。 |
1 |
|
|
:active |
a:active |
选择活动链接。 |
1 |
|
|
:hover |
a:hover |
选择鼠标指针位于其上的链接。 |
1 |
|
|
:focus |
input:focus |
选择获得焦点的 input 元素。 |
2 |
|
|
:first-letter |
p:first-letter |
选择每个 <p> 元素的首字母。 |
1 |
|
|
:first-line |
p:first-line |
选择每个 <p> 元素的首行。 |
1 |
|
|
:first-child |
p:first-child |
选择属于父元素的第一个子元素的每个 <p> 元素。 |
2 |
|
|
:before |
p:before |
在每个 <p> 元素的内容之前插入内容。 |
2 |
|
|
:after |
p:after |
在每个 <p> 元素的内容之后插入内容。 |
2 |
|
|
:lang(language) |
p:lang(it) |
选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 |
2 |
|
|
element1~element2 |
p~ul |
选择前面有 <p> 元素的每个 <ul> 元素。 |
3 |
|
|
[attribute^=value] |
a[src^="https"] |
选择其 src 属性值以 "https" 开头的每个 <a> 元素。 |
3 |
|
|
[attribute$=value] |
a[src$=".pdf"] |
选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 |
3 |
|
|
[attribute*=value] |
a[src*="abc"] |
选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 |
3 |
|
|
:first-of-type |
p:first-of-type |
选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 |
3 |
|
|
:last-of-type |
p:last-of-type |
选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 |
3 |
|
|
:only-of-type |
p:only-of-type |
选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 |
3 |
|
|
:only-child |
p:only-child |
选择属于其父元素的唯一子元素的每个 <p> 元素。 |
3 |
|
|
:nth-child(n) |
p:nth-child(2) |
选择属于其父元素的第二个子元素的每个 <p> 元素。 |
3 |
|
|
:nth-last-child(n) |
p:nth-last-child(2) |
同上，从最后一个子元素开始计数。 |
3 |
|
|
:nth-of-type(n) |
p:nth-of-type(2) |
选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 |
3 |
|
|
:nth-last-of-type(n) |
p:nth-last-of-type(2) |
同上，但是从最后一个子元素开始计数。 |
3 |
|
|
:last-child |
p:last-child |
选择属于其父元素最后一个子元素每个 <p> 元素。 |
3 |
|
|
:root |
:root |
选择文档的根元素。 |
3 |
|
|
:empty |
p:empty |
选择没有子元素的每个 <p> 元素（包括文本节点）。 |
3 |
|
|
:target |
#news:target |
选择当前活动的 #news 元素。 |
3 |
|
|
:enabled |
input:enabled |
选择每个启用的 <input> 元素。 |
3 |
|
|
:disabled |
input:disabled |
选择每个禁用的 <input> 元素 |
3 |
|
|
:checked |
input:checked |
选择每个被选中的 <input> 元素。 |
3 |
|
|
:not(selector) |
:not(p) |
选择非 <p> 元素的每个元素。 |
3 |
|
|
::selection |
::selection |
选择被用户选取的元素部分。 |
3 |
|
?
?
????除了css选择器，还有更高效的xpath选择器可使用。
原文地址：https://www.cnblogs.com/binyang/p/10990939.html