网页结构-HTML与CSS和JS
网页结构-HTML与CSS和JS
网页由 HTML/CSS/JS 三部分组成，各自负责结构、表现与行为；HTML 标签的写法与属性
一个网页由三部分组成
| 部分 | 全称 | 负责 | 类比 |
|---|---|---|---|
| HTML | HyperText Markup Language（超文本标记语言） | 网页的结构（页面元素和内容） | 毛坯房：墙和房间 |
| CSS | 层叠样式表 | 网页的表现（外观、位置等样式，如颜色、大小） | 装修：刷漆、布局 |
| JS | JavaScript，简称 JS | 网页的行为（交互效果） | 电器：灯开关、门铃 |
Note
爬虫最关心的是 HTML——数据都在网页结构里；CSS 和 JS 只是”穿在结构外面的东西”。
HTML：超文本标记语言
- 超文本：超越了文本的限制，比普通文本更强大——除了文字，还可以定义图片、音频、视频等内容
- 标记语言：由标签
<标签名>构成的语言 - HTML 标签都是预定义好的：
<h1>展示标题、<img>展示图片、<video>展示视频 - HTML 代码直接在浏览器中运行，标签由浏览器解析
标签的写法
<a href="https://www.itcast.cn">传智教育-黑马程序员</a>| 部分 | 例子 |
|---|---|
| 开始标签 | <a> |
| 属性 | href="https://www.itcast.cn" |
| 内容 | 传智教育-黑马程序员 |
| 结束标签 | </a> |
一个最小页面
<html lang="zh-CN"><head> <meta charset="UTF-8"> <title>仙逆人物志 - 修真世界</title></head><body> <h1>Python</h1> <p>一门简介、快速、易用的编程语言。</p> <a href="https://www.itcast.cn">传智教育-黑马程序员</a></body></html>三部分在真实页面里的位置
课程资料里的 仙逆人物志.html 一次性用到了三部分：
<style>块里写的是 CSS（.title { color: #ffd700; ... }控制标题颜色）<script>块里写的是 JS（监听鼠标进入/离开标题，切换颜色）- 其余的
<h1>、<nav>、<footer>等标签是 HTML 结构
小结（复习自测）
| 题目 | 答案 |
|---|---|
| 网页由哪几部分组成？ | HTML：负责结构（内容）；CSS：负责样式（美化）；JS：负责动作（行为） |
| 爬虫主要解析哪一部分？ | HTML（数据在结构里） |
相关
练习题
一、回忆填空（写完再展开对答案）
- 网页三部分：____ 负责结构、____ 负责表现（样式）、____ 负责行为（交互）
- HTML 全称 ____，中文 ____
- “超文本”的意思是：超越了文本的限制，除了文字还能定义 、、____ 等内容
- HTML 标签都是____好的，由____解析运行
<a href="https://www.itcast.cn">黑马</a>里：开始标签是 ____，属性是 ____，结束标签是 ____- CSS 写在页面的 ____ 块里；JS 写在 ____ 块里
填空答案（做完再点开）
- HTML / CSS / JS 2. HyperText Markup Language / 超文本标记语言 3. 图片、音频、视频 4. 预定义 / 浏览器 5.
<a>、href="https://www.itcast.cn"、</a>6.<style>/<script>
二、概念自测
- 2-1 一段代码是控制颜色还是监听鼠标点击，怎么一眼区分是 CSS 还是 JS？
- 2-2 爬虫为什么只需要盯着 HTML 解析，CSS 和 JS 可以先不管？
- 2-3 写出一个带 class 属性的
<p>标签，内容是”人生苦短，我用Python”。
参考答案（做完再点开）
2-1 写在 <style> 里、形如 选择器 { 属性: 值; } 的是 CSS；出现在 <script> 里、带 addEventListener 等函数调用的是 JS。
2-2 网页上的数据（标题、列表、表格）都存在于 HTML 标签之间；CSS 只决定它们长什么样，JS 通常负责交互。抓数据就是从 HTML 标签里把内容抠出来。
2-3 <p class="intro">人生苦短，我用Python</p>（class 名字可以自取）
评论区
[ 标签 ]
[ 分类 ]
[ 公告 ]
如果你喜欢，那么欢迎来到我的世界！
了解更多[ 音乐 ]
音乐
暂未播放
0:000:00
找不到相关结果。
[ contents ]
[ 全部文章 ]
