前端HTML与CSS初步认识

什么是HTML？

HTML： 超文本标记语言，标准通用标记语言下的一个应用。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

超级文本标记语言的定义又是什么？

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

HTML特点：超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：

简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。

可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

什么是CSS？

CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS特点：CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

总体来说，CSS具有以下特点：

丰富的样式定义：CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

易于使用和修改：CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

多页面应用：CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

层叠：简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

页面压缩：在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。

教学课程：前端HTML+CSS课程

（课程从基础语法入门，讲解了HTML的常用标签，表单，排版等实用技术，同时深入讲解了CSS样式表的使用和如何使用DIV CSS设计网页布局。同时还介绍CSS3.0的新特性，阴影，圆角边框等实用案例。）

教学大纲

课时1：互联网起源 11:44

课时2：HTML概念 10:07

课时3：标签 10:47

课时4：HTML属性 05:25

课时5：HTML固定基本结构 12:11

课时6：第一个网页 07:43

课时7：工具使用 06:45

课时8：标题 06:52

课时9：基本标签 11:05

课时10：图像IMG标签 10:07

课时11：路径概念 15:33

课时12：超级链接 12:10

课时13：列表 05:12

课时14：表格 24:24

课时15：表单 08:27

课时16：文本框 06:27

课时17：密码框 06:38

课时18：单选 06:55

课时19：复选框 03:38

课时20：下拉菜单 07:29

课时21：上传 02:22

课时22：多行文本 04:41

课时23：提交按钮 06:01

课时24：重置按钮 03:14

课时25：CSS介绍 23:45

课时26：DIV和SPAN标签介绍 08:51

课时27：CSS样式规则 04:24

课时28：CSS样式加载方式 28:01

课时29：CSS选择符 32:29

课时30：伪类 09:18

课时31：颜色 06:59

课时32：背景 07:23

课时33：33文本 06:44

课时34：字体 05:51

课时35：列表 05:20

课时36：CSS表格 07:39

课时37：div和span区别 06:44

课时38：盒子模型概念 11:03

课时39：盒子模型属性介绍camrec 12:00

课时40：盒子模型属性和默认值编写camrec 17:18

课时41：display属性和实例 39:46

课时42：浮动与清除浮动 16:40

课时43：浮动案例 14:24

课时44：图层的定位 15:37

课时45：图像的背景 08:01

课时46：背景颜色 06:17

课时47：图像的透明 04:44

课时48：渐变 05:36

课时49：圆角 07:17

课时50：阴影 07:25

课时51：准备工作 09:34

课时52：顶部 33:19

课时53：搜索区域 17:01

课时54：广告区域 02:35

课时55：主区域 13:33

课时56：点评区域 21:03

课时57：脚部信息 03:56

课程目标

掌握HTML使用和CSS的使用

适合人群

0基础人群