Web网页基础

用浏览器访问不同的网站时，展现的页面各不相同。下面从网页的组成、网页的结构、节点树及节点间的关系、选择器几个方面了解网页。

网页的组成

网页可以分为三大部分：HTML、CSS、JavaScript。

如果把网页比作一个人，那么HTML相当于人的骨架，JavaScript相当于肌肉，CSS相当于皮肤。三者结合起来才能形成一个完善的网页。

HTML定义了网页的内容和结构、CSS定义了网页的样式、JS定义了网页的行为

HTML

html 是超文本标记语言，是一种来描述网页的语言。
网页中包括文字、按钮、图片、视频等各种复杂的元素。
网页通过不同类型的标签来表示不同类型的元素。

打开google浏览器，访问百度，按F12进入开发者工具，默认就是Elements面板(如果不是，就切换到Elements面板)。这时呈现出来的就是百度的HTML页面。如下图所示。可以看出HTML有明显的层级结构，并且有各种标签元素，每种标签元素都有各自的含义。浏览器解析这些标签之后，便会在网页中将它们渲染成一个个节点，也就成了我们看到的网页。
在这里插入图片描述

CSS

HTML定义了网页的架构，但是只有HTML的页面并不美观。CSS是层叠样式表，它可以让网页变得美观起来。

在网页中，一般会统一定义整个网页的样式规则，并写入css文件(现在样式文件有很多，如scss)。在HTML文件中，只需要使用link标签将写好的css文件写入，便可以使整个页面变得美观。

JavaScript

JavaScript简称JS(与JAVA无关)，是一种脚本语言(可以百度搜索一下什么是脚本语言)。HTML+CSS提供的只是一种静态信息，我们在网页里会看到各种交互或动画效果，这就是JS的作用。

JS可以写在HTML页面中，也可以写入到.js文件中，通过script标签进行引入。

网页的结构

创建一个test.html文件，代码内容如下：

<!DOCTYPE html>  <!--用DOCTYPE 定义了文档类型是 html-->
<html>
<head>
    <meta charset="UTF-8">  <!--指定网页的编码格式是UTF-8-->
    <title>我是head中的title标签</title>
</head>
<body>
  <div id="container">
    <div class="wrapper">
      <h2 class="title">我是二级标题标签</h2>
      <p clss="text">我是p标签</p>
    </div>

  </div>
</body>
</html>

从上面代码可以看出HTML基本结构：

使用DOCTYPE定义文档类型
最外层是html标签，有开始标签，有结束标签
接着是head标签(网页头)和body标签(网页体)，同样它们也是有开始标签和结束标签
head标签中定义了两个标签
- 一个meta标签，表明网页的编码格式是UTF-8
- 一个title标签，表明网页的标题，会显示在选项卡中，不显示在正文
body标签在网页正文中显示。
- body标签内定义了一个id为container的div (div表示一个区块)
  - 又在其内部定义了一个class为wrapper的div，其内部又有两个标签
    - h2标签，表示二级标题
    - p标签，表示一个段落

代码中出现的id和class，都是标签中常用的属性：

id是唯一的，可以通过id找到对应的区块。
class 也是常用的属性，通常配合CSS来设定样式

页面展示的效果如下图所示：
在这里插入图片描述

节点树及节点间的关系

在HTML中，所有标签定义的内容都是节点，这些节点构成了一个HTML节点树，即HTML DOM树。

通过HTML DOM，节点树中所有的节点都可以通过JS访问、修改、删除、创建。

选择器

网页由一个个节点组成，CSS选择器会为不同的节点设置不同的样式规则。

在CSS中，使用CSS选择器来定位节点：

使用id : #container
使用class: .wrapper
使用标签名：h2

在CSS中，可以进行嵌套选择：

#container .wrapper p 表示先选择id为container的节点，接着在其内部选择class为wrapper的节点, 最后选择其内部的p节点
div#container .wrapper p.text 表示先选择id为container的div，接着在其内部选择class为wrapper的节点，最后在其内部选择class为text的p节点

CSS其他语法规则如下表所示：

选择器	例子	例子描述
.class	.intro	选择class='intro’的所有节点
#id	#firstname	选择id="firstname"的所有节点
*	*	选择所有节点
element	p	选择所有p节点
element,element	div,p	选择所有的div节点和所有的p节点
element element	div p	选择div节点内部的所有的p节点
element>element	div > p	选择父节点为div的所有的p节点
element+element	div+p	选择紧接在div节点之后的所有的p节点
[attribute]	[target]	选择带有target属性的所有节点
[attribute=value]	[target=blank]	选择target="blank"的所有节点
[attribute~=value]	[title~=flower]	选择title属性包含flower的所有节点
:link	a:link	选择所有未被访问的链接
:visited	a:visited	选择所有已被访问的链接
:active	a:active	选择活动链接
:hover	a:hover	选择鼠标指针位于其上的链接
:focus	input:focus	选择获得焦点的input节点
:first-letter	p:first-letter	选择每个p节点的首字母
:first-line	p:first-line	选择每个p节点的首行
:first-child	p:first-child	选择属于父节点的第一个子节点的所有p节点
:before	p:before	在每个p节点的内容之前插入内容
:after	p:after	在每个p节点的内容之后插入内容
:lang(language)	p:lang	选择带有以it开头的lang属性值的所有p节点
element1~element2	p~ul	选择前面有p节点的所有ul节点
[attribute^=value]	a[src^=“https”]	选择src属性值以https开头的所有a节点
[attribute$=value]	a[src$=“.pdf”]	选择src属性值以.pdf结尾的所有a节点
[attribute*=value]	a[src*=“abc”]	选择src属性中包含abc子串的所有a节点
:first-of-type	p:first-of-type	选择属于对应父节点的首个p节点的所有p节点
:last-of-type	p:last-of-type	选择属于对应父节点的最后一个p节点的所有p节点
:only-of-type	p:only-of-type	选择属于对应父节点的唯一p节点的所有p节点
:only-child	p:only-child	选择属于对应父节点的唯一子节点的所有p节点
:nth-child(n)	p:nth-child	选择属于对应父节点的第二个子节点的所有p节点
:nth-last-child(n)	:p:nth-last-child	从最后一个节点开始计数，选择属于对应父节点的第二个子节点的所有p节点
:nth-of-type(n)	:p:nth-of-type	选择属于对应父节点的第二个p节点的所有p节点
:nth-last-of-type(n)	:p:nth-last-of-type	从最后一个节点开始计数，选择属于对应父节点的第二个p节点的所有p节点
:last-child	p:last-child	选择属于对应父节点的最后一个子节点的所有p节点
:root	:root	选择文档的根节点
:empty	p:empty	选择没有子节点的所有p节点(包括文本节点)
:target	#news:target	选择的当前活动的#news节点
:enabled	input:enabled	选择每个启用的input节点
:disabled	input:disabled	选择每个禁用的input节点
:checked	input:checked	选择每个被选中的input节点
:not(selector)	:not	选择非p节点的所有节点
::selection	::selection	选择被用户选取的节点部分