爬虫基础(二)Web网页的基本原理

打印 上一主题 下一主题

主题 942|帖子 942|积分 2826

一、网页的组成

网页由三部分构成:HTML、JavaScript、CSS。
(1)HTML

   HTML 相当于网页的骨架,它通过使用标签来定义网页内容的布局。
  举个例子:
它把图片标签为img、把视频标签为video,然后组合到一个界面里,这种出现方式就是HTML
假如你想找到它,
比如我们打开恣意一个网站:
然后右键打开“查抄”,进入Elements面板:

可以看到,当我们鼠标放置在某一标签上时,该标签标志的东西会被锁定,然后出现出来。
当很多个标签组合,就成了我们看到的网页界面,
(2)CSS

经过上文得知HTML 负责网页内容的布局
那么 CSS 则控制这些内容的样式和布局
   即CSS通过选择器决定网页元素的字体、颜色、间距、对齐方式、配景、边框等。
  比如:
打开Styles面板,下面的各种各样就是在设置样式

(3)JavaScript

假如说:HTML构建了网页、CSS装饰了网页。
那么JavaScript则提供了交互性
比如下图框中,带js后缀的代码,就是引入互动举动 

二、制作一个简朴网页

首先打开文本文件:
   第一步,来定义文档范例
  1. <!DOCTYPE html>
复制代码
  第二步要写:
  1. <html lang="zh">
  2. ……你的HTML代码
  3. </html>
复制代码
<html lang="zh">我们可以理解为,告诉电脑我们要开始写了
正常来说我们可以直接写<html>,但加上 lang="zh"就表现指定语言为中文。
结尾的</html>代表,到这里就结束了。
而中间部分,则是我们要写的设置网页内容
   第三部,写head标签和body标签
  <html>包括head标签和body标签
以是我们要写:
  1. <head>
  2. ……
  3. </head>
  4. <body>
  5. ……
  6. </body>
复制代码
head标签意思是网页头,即阐明一下页面必要的配置,比如我们可以写:
<meta charset="UTF-8">来表现指定网页编码为UTF-8
body标签的意思是网页体,就是网页正文里要展现的东西,比如我们可以写:
<div id="word">其中div表现定义一个区块,这个区块的id是word,之后我们就可以通过id来获得这个区块,并进行相应的修改设置。
   到此为止,我们的完整代码如下:
  1. <!DOCTYPE html><html lang="zh"><head>    <meta charset="UTF-8">    <title>简朴网页</title></head><body>    <header>        <h1>接待访问我的网站</h1>    </header>        <div class="container">        <h2>关于我们</h2>        <p>这是一个简朴的网页示例,展示了HTML和CSS怎样一起工作来构建网页布局和样式。</p>    </div></body></html>
复制代码
其中h几表现几级标题,p标签表现一个段落
之后我们把文件后缀改为html,然后双击打开,展示如下;

三、相关概念

(1)节点和节点树

在HTML中,我们把所有的标签内容都看出节点
而所有的节点构成了节点树(HTML DOM树)
至于节点树的构成,相信假如你假如看了第二部分就明白了,其构成如下:

最顶端的节点称之为根节点
每个节点(假如有的话)上一个节点称为父节点,下一个节点称为子节点。
同级的子节点称为兄弟节点
这些概念同理于 树 部分概念
(2)选择器

在说到CSS时,我们提到了选择器,那么这是什么呢?
   首先,选择器是用来定位节点的
  比如,我们之前通过div来确定了一个id为word的节点
那么我们要去定位这个id,有三个常用办法:
   第一,类选择器,以“ . ”开头
  1. .word {
  2.     background-color: yellow;
  3. }
复制代码
这会选中所有 class="word" 的元素,并给它们加上黄色配景。
   第二,ID选择器,以“#”开头
  1. #word {
  2.     font-size: 24px;
  3. }
复制代码
这会选中具有 id="word" 的元素,并将字体大小设置为 24px。
   第三,元素选择器,选择所有指定标签的元素
  1. p {
  2.     color: blue;
  3. }
复制代码
这会选中页面中的所有 <p> 标签,并将它们的文字颜色设置为蓝色。

常见的 CSS 选择器及其语法规则,汇总如下:
元素选择器


  • 选中指定标签的所有元素。
    p { color: red; }
    这会选中页面中的所有 <p> 元素并将它们的文字颜色设置为红色。
2. 类选择器


  • 选中所有具有指定类的元素。类选择器以 . 开头。
    .highlight { background-color: yellow; }
    这会选中所有 class="highlight" 的元素,并为它们设置黄色配景。
3. ID 选择器


  • 选中具有指定 ID 的元素。ID 选择器以 # 开头。
    #header { font-size: 24px; }
    这会选中 ID 为 header 的元素,并将字体大小设置为 24px。
4. 通配符选择器


  • 选中所有元素。
    * { margin: 0; }
    这会把页面中所有元素的外边距(margin)设置为 0。
5. 后代选择器


  • 选中某个元素内部的所有指定子元素。空格表现层级关系,选中某个元素的所有后代元素。
    div p { color: blue; }
    这会选中所有位于 <div> 内部的 <p> 元素,并将它们的文字颜色设置为蓝色。
6. 子元素选择器


  • 选中某个元素的直接子元素,使用 > 符号表现。
    div > p { color: green; }
    这会选中所有直接位于 <div> 元素内部的 <p> 元素,而不会选中更深层嵌套的 <p> 元素。
7. 并列关系选择器(兄弟选择器)


  • **相邻兄弟选择器 (+)**:选中某个元素后紧跟的第一个兄弟元素。
    h1 + p { color: orange; }  这会选中紧接在 <h1> 元素后面的第一个 <p> 元素。
  • **通用兄弟选择器 (~)**:选中所有在指定元素后面的兄弟元素。
    h1 ~ p { color: purple; }
    这会选中所有位于 <h1> 后面的 <p> 元素。
8. 属性选择器


  • 根据元素的属性和属性值来选择元素。
    input[type="text"] { border: 1px solid black; }
    这会选中所有 type="text" 的 <input> 元素,并给它们加上玄色边框。
9. 伪类选择器


  • 选择元素的特定状态。

    • :hover:当鼠标悬停在元素上时应用样式。
      a:hover { color: red; }
    • :first-child:选中某元素是其父元素的第一个子元素。
      p:first-child { font-weight: bold; }

10. 伪元素选择器


  • 选中元素的特定部分,如首字母、首行等。

    • ::before:在元素的内容前插入内容。
      p::before { content: "Note: "; font-weight: bold; }
    • ::after:在元素的内容后插入内容。
      p::after { content: "."; }

11. 组合选择器


  • 多个选择器联合起来使用,达到更准确的选中结果。

    • 后代选择器:div p,选中 <div> 内的所有 <p> 元素。
    • 类和元素选择器组合:p.highlight,选中所有同时拥有 highlight 类的 <p> 元素。

12. 通用选择器


  • **:not()**:选中所有不符合某种条件的元素。
    p:not(.special) { color: blue; }
    这会选中所有不具有 special 类的 <p> 元素,并将它们的颜色设置为蓝色。
13. 组选择器


  • 通过逗号 , 组合多个选择器,用于多个元素应用雷同样式。
    h1, h2, h3 { color: black; }
    这会将 <h1>、<h2>、<h3> 元素的文字颜色设置为玄色。






免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

渣渣兔

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表