文章目录

  • Web网页基础
  • 网页的组成
  • HTML
  • CSS
  • JavaScript
  • 网页的结构
  • 节点树及节点间的关系
  • 选择器
  • 写在最后


Web网页基础

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

网页的组成

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

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

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

HTML

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

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

python编写简单网页代码 网页编程python_javascript

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来设定样式

页面展示的效果如下图所示：

python编写简单网页代码 网页编程python_HTML_02

节点树及节点间的关系

在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

选择被用户选取的节点部分