本课主题：HTML、CSS和XML

授课老师：张军祥

一、什么是HTML

HTML是用来描述网页的一种语言。

· HTML指的是超文本标记语言（Hyper Text Markup Language）

· HTML不是一种编程语言，而是一种标记语言（markup language）

· 标记语言是一套标记标签（markup tag）

· HTML使用标记标签来描述网页

类比：对讲呼叫的开始结束语。

HTML文档基本结构举例

上图HTML文档显示效果

Tip：draggable="true"这一属性表示这个标签内的内容可以被拖动。

HTML大致由：标签、属性、事件来组成，另有注释部分"<!-->"，注释不在页面显示。编写注释是一个非常优秀的习惯，方便自己及他人了解文档含义。

随着网页需求的增加，各大浏览器厂商不断有新的标签加入网络，例如：加粗标签< b >......< /b >。由于各厂商推出形式繁多冗杂，W3C组织统一发布CSS。

二、什么是CSS

CSS指层叠样式表（Cascading Style Sheets）

样式定义如何显示HTML元素

多重样式层叠为一个

层叠次序：（显示优先级）

内连样式>内部样式表>外部样式表>浏览器缺省设置

列举三种CSS的使用方法：

第一、二种使用方法

第一、二种使用方法对应显示效果

第三种方法：外部样式表。创建一个CSS文件，引入文档。

第三种使用方法

上述对应外部CSS文件

第三种使用方法对应显示效果

HTML与CSS的关系：

CSS是用来修饰HTML的一种语言，同一HTML文件支持引用多个CSS文件，同一CSS文件支持被多个HTML文件引用，便于开发过程中必要情况下样式的统一修改。

三、三层分离（重要）

结构层（HTML）、表示层（CSS）、行为层（JS）

目的：

为了实现“高内聚、低耦合”。采用“分而治之”的思想，把问题划分开来各个解决，易于控制，易于延展，易于分配资源。

列举：表示一个段落：< p >< /p >；表示分割标记，一般用于内容与事件：< div >< /div >；表示标题加粗：< h1 >< /h1 >。

四、什么是XML

XML指可扩展标记语言（EXtensible Markup Language）

· XML是一种标记语言，很类似HTML

· XML的设计宗旨是传输数据，而非显示数据

· XML标签没有被预定义，您需要自行定义标签

· XML被设计为具有自我描述性

独立于软件与硬件的存储方法，XML克服了大部分软硬件不兼容问题，因为它的自我描述性，大部分程序都能支持解读XML文件。

XML文档基本结构举例

五、XML和HTML的差异

XML和HTML为不同的目的而设计

XML被设计为传输和存储数据，其焦点是数据的内容

HTML被设计用来显示数据，其焦点是数据的外观

HTML旨在显示信息，而XML旨在传输信息

XML作为一种通用格式的出现，为数据共享、数据交换提供了极大地便利。XML具有非常严格的语言模式，HTML语法相对宽松，部分尾部标签省略不影响显示，举例< input>< /input>标签，而XML非常严格。

问答1：编辑器的快捷输入，支持代码补全。编辑器的插件功能支持写一个标签，按tab键可自动补全。

问答2：课后讨论区会提供如何调用XML，每种语言都有不同的调用方法。

问答3：有如此多的标签，初期记忆可能比较困难，宗旨：可以不会，但不能不知道，首先要多看，多了解这些用途。（参考标签课后将发放）

新大编程幼儿园学习第二课——HTML、CSS和XML