1.2 Web 网页基础

1. 网页的组成

• 网页可以分为三大部分：HTML、CSS和JavaScript。
• 把网页比作一个人，HTML相当于骨架，JavaScript相当于肌肉，CSS相当于皮肤，三者结合才能形成一个完善的网页。
• HTML(Hypertext Markup Language)，即超文本标记语言。
  • HTML是一种用来描述网页的语言。网页包括文字、按钮、照片和视频等这种负责的元素，其基础架构就是HTML。
  • 网页通过不同的标签来表示不同类型的元素，如用img标签标识图片、用video标签表示视频、用p标签表示段落，这些标签之间的布局常由布局标签div嵌套组合而成，各种标签通过不同的排列和嵌套形成最终的网页框架。
• CSS(Cascading Style Sheets),即层叠样式表
  • “层叠”是指当HTML中引用了多个样式文件，并且央视发生冲突时，浏览器能够按照层叠顺序处理这些样式。
  • “样式”指的是网页中的文字大小、颜色、元素间距、排列等格式。
  • CSS是目前唯一的网页页面排版是样式标准，有了它的帮助，页面才会变得更为美观。
• JavaScript，简称JS,是一种脚本语言
  • JavaScript在网页里提供交互和动画效果，比如下载进度条、提示框、轮播图等。
  • JavaScript的出现使得用户与信息不只是一种浏览与显示关系，还实现了一种实时、动态、交互的页面功能。
  • JavaScript通常也是以单独的文件形式加载的，后缀为js，在HTML中通过script标签即可引入。

2.网页的结构

• 用实例来感受HTML的基本结构。内容如下：
  
  • !DOCTYPE html:文档类型声明，告诉浏览器这是 HTML5 文档
  • html标签：根元素，包裹整个页面，lang 属性声明语言
  • head标签：头部区域，存放"关于网页的信息"，不显示在页面上
    • title标签:网页标题，显示在浏览器标签页上
    • meta标签：元信息：字符编码、页面描述、关键词、视口设置等
    • link标签:引入外部资源，最常见是 CSS 样式表
    • style标签：内嵌 CSS 样式
    • script标签：引入或内嵌 JavaScript 脚本
  • body标签：主体区域，用户在浏览器中看到的所有内容都在这里
    • div标签：块级容器，本身无含义，用于布局分组（占一整行）
    • h1 ~ h6p标签：标题，h1 最高级（一页最好只用一个），h6 最低
    • p标签:段落

3.节点树及节点间的关系

• 在HTML中，所有标签定义的内容都是节点，这些节点构成一个HTML节点树，也叫HTML DOM树。
• DOM是W3C(万维网联盟)的标准，英文全称是Document Object Model，即文档对象模型。它定义了访问HTML和XML文档的标准。根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点。
  • 整个网站文档是一个文档节点
  • 每个html标签对应一个根节点，比如html标签，它属于一个根节点
  • 节点内的文本是文本节点，比如a节点代表一个超链接，它内容的文本也被认为是一个文本节点
  • 每个节点的属性是属性节点，比如a节点有一个href属性，他就是一个属性节点
  • 注释是注释节点，在HTML中由特殊的语法会被解析为注释，它也会对应一个节点
• HTML DOM将HTML文档视做树结构，这种结构被称为节点树，如下图所示
  
• 通过HTML DOM，节点树中的所有节点均可通过JavaScript访问，所有HTML节点元素均可被修改，创建或删除
• 节点树中的节点批次拥有层级关系。我们常用父（parent）、子（child）和兄弟（sibling）等属于描述这些关系。父节点拥有子节点，同级的子节点被称为兄弟节点
• 在节点树中，顶端节点称为根（root）。除了根节点之外，每个节点都有父节点，同时可拥有任意数量的子节点或兄弟节点。如下所所示