网页的组成

网页由相当于骨架的 HTML、相当于皮肤的 CSS 以及相当于肌肉的 JavaScript 三大部分组成。HTML 定义了网页的内容和结构，CSS 描述了网页的样式，JavaScript 赋予了网页的行为。

HTML

HTML (Hypertext Markup Language) 即超文本标记语言，用于定义网页的内容与结构，是网页呈现的基础。网页中的元素涉及文本、图像、视频等内容，这些内容通过不同的标签表示：用img标签表示图片、用video标签表示视频、用p标签表示段落，用div标签表示文档节……标签间可以相互排列或嵌套，形成最终具有层次关系的网页框架。
为了查看 https://www.baidu.com/ 网页对应的 HTML，可在浏览器打开网页后，在开发者工具中的 Elements (元素)面板即可看到 该网页的 HTML 源码。
image.pngimage.png
HTML 中包含一系列可被浏览器解析渲染成节点的标签。如上图，网页的输入框对应input标签，用于输入并提交文字。

CSS

CSS (Cascading Style Sheets) 即层叠样式表，用于为结构化文档（如 HTML 或 XML）添加样式，呈现网页风格，使网页更美观。当结构化文档中引用了多个样式而可能产生冲突时，样式将按照层叠顺序依次处理，样式的定义涉及元素大小、颜色、间距、排列等方面。
CSS 的语法为：
selectors {
attribute_name: attribute_value;
···
}
这是一段 CSS 样式：

  1. #head_wrapper #kw {
  2.     width: 512px;
  3.     height: 16px;
  4.     padding: 12px 16px;
  5.     font-size: 16px;
  6.     margin: 0;
  7.     vertical-align: top;
  8.     outline: 0;
  9.     box-shadow: none;
  10.     border-radius: 10px 0 0 10px;
  11.     border: 2px solid #c4c7ce;
  12.     background: #fff;
  13.     color: #222;
  14.     overflow: hidden;
  15.     box-sizing: content-box;
  16.     -webkit-tap-highlight-color: transparent;
  17. }

CSS 样式由 CSS 选择器和样式规则组成。示例中，大括号前的是 CSS 选择器，选择 HTML 中的特定元素；大括号内的 CSS 样式规则指定了元素的宽度、高度、边距、字体大小等内容。这样，上述样式即可配合 HTML 文档中的link标签生效在特定元素上。

JavaScript

JavaScript 是一种脚本语言，简称 JS。HTML 和 CSS 只为用户提供了静态网页而缺乏交互能力。为了给网页提供实时、动态、交互的页面功能（如下载进度条、提示框、轮播图等），需要用到 JavaScript。
image.png
JavaScript 源码文件以.js为扩展名。可由 HTML 用script标签引入，如：<script src="jquery-1-edb203c114.10.2.js"></script>。

网页的结构

将文本文件命名为test.html并写入如下内容：

<IDOCTYPE html>
    <html>

    <head>
        <meta charset="UTF-8">
        <title>This is a Demo</title>
    </head>

    <body>
        <div id="container">
            <div class="wrapper">
                <h2 class="title">Hello World</h2>
                <p class="text">Hello, this is a paragraph.</p>
            </div>
        </div>
    </body>

    </html>

DOCTYPE定义了文档类型，包括最外层的html标签，大多数标签都成对存在。html标签中由head标签和body标签分别代表网页头和网页体。

  • 在head标签内定义了一些页面相关的配置和引用：指定网页编码、指定网页标题等；
  • 在body标签内定义了要在网页正文显示的内容：
    • 用div标签分隔网页区块，并可指定具有唯一性的id属性、与 CSS 配合的class属性
    • 用h2定义二级标题
    • 用p标签定义段落
    • ……

用浏览器打开test.html后呈现如下：
image.png
标签页上显示的This is a Demo字样来自于head标签中的title；网页正文中的标题与段落内容则来自于body标签中的元素。这就是网页的基本结构：html标签内嵌套head标签和body标签，由head标签定义网页配置和引用、由body标签定义网页正文。

节点树及节点间的关系

根据 W3C (万维网联盟) 的标准，由 HTML 中任意标签定义的内容均是节点，根据节点间的层次关系梳理的结构就是 HTML 节点树，亦称为 HTML 文档对象模型 (HTML Document Object Model)，即 HTML DOM 树。

  • 网站的各文档都是文档节点；
  • 文档中的html标签属于文档中的根节点；
  • 节点内的文本是文本节点：节点a表示超链接，其内部的文本亦是文本节点；
  • 各节点的属性是属性节点：节点a有一个href属性，表示属性节点；
  • 注释是注释节点。

htmltree.gif
节点树是一种层级关系。常用父 (parent)、子 (child) 和兄弟 (sibling) 等描述。父节点分支出了子节点，同级的子节点互为兄弟节点。除了根 (root) 节点外，各节点都有父节点，且可拥有任意数量的子节点或兄弟节点。JavaScript 可根据 HTML DOM实现对各节点的增删改查。

选择器

CSS 用 CSS 选择器在 HTML 中定位特定节点。

基本选择器

通配选择器：*。使用选择器*匹配文档的所有元素；
元素选择器：elementname。使用选择器input匹配任何<input>元素；
类选择器：
.classname。使用选择器.index匹配class属性为"index"的元素；
element.class。使用选择器p.intro匹配class属性为"intro"的<p>元素；
ID 选择器：#idname。使用选择器#toc匹配id属性为"toc"的元素；
属性选择器：
[attr]。使用选择器[target]匹配带有target属性的元素；
[attr=value]。使用选择器[target=_blank]匹配target属性值为"_blank"的元素；
[attr~=value]。使用选择器[title~=flower]匹配title属性包含单词"flower"的元素；
[attr|=value]。使用选择器[lang|=en]匹配lang属性值以"en"开头的元素；
[attr^=value]。使用选择器a[src^="https"]匹配src属性值以"https"开头的<a>元素；
[attr$=value]。使用选择器a[src$=".pdf"]匹配src属性以".pdf"结尾的<a>元素；
[attr*=value]。使用选择器a[href*="tully"]匹配href属性值中包含"abc"子串的<a>元素；

分组选择器

选择器列表：A, B。使用选择器div, span同时匹配<span>元素和<div>元素；

组合器

后代组合器：A B。使用选择器div span匹配位于<div>元素内的<span>元素；
直接子代组合器：A > B。使用选择器ul > li匹配直接嵌套在<ul>元素内的所有<li>元素；
一般兄弟组合器：A ~ B。使用选择器p ~ span匹配同一父元素下，<p>元素后的所有<span>元素；
紧邻兄弟组合器：A + B。使用选择器h2 + p匹配紧邻于<h2>元素后的<p>元素；
列组合器：A || B。使用选择器col || td匹配所有<col>元素作用域内的<td>元素；

伪选择器

伪选择器支持按照未被包含在文档树中的状态信息来选择元素，用于表示无法用 HTML 语义表达的实体。

伪类：

语法 示例 描述
:active a:active 选择活动链接
:link a:link 选择所有未访问过的链接
:visited a:visited 选择所有已访问的链接
:checked input:checked 选择每个被选中的<input>元素
:default input:default 选择默认的<input>元素
:disabled input:disabled 选择每个被禁用的<input>元素
:empty p:empty 选择没有子元素的每个<p>元素（包括文本节点）
:enabled input:enabled 选择每个启用的<input>元素
:first-child p:first-child 选择属于父元素的第一个子元素的每个<p>元素
:first-of-type p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素
:focus input:focus 选择获得焦点的input元素
:fullscreen :fullscreen 选择处于全屏模式的元素
:hover a:hover 选择鼠标指针位于其上的链接
:indeterminate input:indeterminate 选择处于不确定状态的input元素
:in-range input:in-range 选择其值在指定范围内的input元素
:invalid input:invalid 选择具有无效值的所有input元素
:lang(language) p:lang(it) 选择lang属性等于”it“ (意大利语) 的每个<p>元素
:last-child p:last-child 选择属于其父元素最后一个子元素每个

元素
:last-of-type p:last-of-type 选择属于其父元素的最后

元素的每个

元素
:not(selector) :not(p) 选择非<p>元素的每个元素
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个<p>元素的每个<p>元素
:only-child p:only-child 选择属于其父元素的唯一子元素的每个<p>元素
:only-of-type p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素
:optional input:optional 选择不带"required"属性的input元素
:out-of-range input:out-of-range 选择值超出指定范围的input元素
:read-only input:read-only 选择已规定"readonly"属性的input元素
:read-write input:read-write 选择未规定"readonly"属性的input元素
:required input:required 选择已规定"required"属性的input元素
:root :root 选择文档的根元素
:target #news:target 选择当前活动的#news元素
:valid input:valid 选择带有有效值的所有input元素

伪元素：

语法 示例 描述
::after p::after 匹配每个<p>的内容之后插入内容
::before p::before 匹配每个<p>的内容之前插入内容
::first-letter p::first-letter 匹配每个<p>元素的首字母
::first-line p::first-line 匹配每个<p>元素的首行
::placeholder input::placeholder 匹配已指定"placeholder"属性的input元素
::selection ::selection 匹配用户已选取的元素部分

用开发者工具根据 CSS 选择器查找 (Ctrl+F) 元素：
image.png
除了 CSS 选择器，还有 XPath 选择器也较为常用。