网站的组成
DNS域名解析
DNS（Domain Name System，域名系统），是互联网 （Internet）上作为域名和IP地址相互映射的一个分布式数据库， 能够使用户更方便的访问互联网，而不用去记住能够被机器直 接读取的IP地址。 DNS（域名系统）在互联网中扮演着非常重要的角色，可以不 夸张的说，离开该系统互联网将会彻底乱套。
<!DOCTYPE html> <html lang="en"> <head> <!-- …… --> </head> <body> <!-- …… --> </body> </html>
HTML网页
HTMLLeabharlann 页头部 网页头部中包含的标签是页面的标题、序言、说明等内容，它本身不 作为内容来显示，但影响网页显示的效果。 网页头部中最常用的标签是标题标签和meta标签，其中标题标签用于 定义网页的标题，其内容显示在网页窗口的标题栏中；而meta标签可 以被浏览器用作书签和收藏的清单。 另外，还可以在网页头部设置文档标题和其它在网页中不显示的信息， 例如：方向（direction）、语言代码（Language Code）、指定字典 中的元信息、等等。
HTML网页
HTML网页结构
HTML网页由一个<html>标签来开始，再由一个</html>标签来结束。 在HTML网页内部由“头”（Head）和“主体”（Body）两部分所组 成。其中，“头”部由一个<head>标签来开始，再由一个</head>标 签来结束，用于提供关于网页的信息；“主体”部分由一个<body>标 签来开始，再由一个</body>标签来结束，用于提供网页的具体内容。
员需要花费非常大的力气才能设计出来的界面效果，对于HTML5来说
可谓是易如反掌。
HTML5初步
HTML5新特性
语义特性
• HTML5赋予了网页更好的意义和结构，更加丰富的标签，增加了对微数据 与微格式等方面的支持，将真正形成以数据驱动的Web应用。
本地存储特性
• 基于HTML5开发的网页应用拥有更短的启动时间和更快的联网速度，这全 是因为HTML5具有的APP Cache、以及本地存储功能。
• IIS服务器与ASP和语言 • Tomcat服务器与JSP语言 • Nginx服务器与PHP语言
IIS、Tomcat和Nginx是目前非常流行的轻量级Web服务器，这 三款Web服务器也全部支持HTML网页。
HTML网页
HTML网页介绍
HTML（Hyper-Text Markup Language，超文本标签语言）网 页，就是我们常说的超文本标签语言网页。 而所谓“超文本”，就是指页面内可以包含图片、链接，甚至 音乐、程序等非文字元素。
HTML网页
HTML网页主体
网页主体部分用于显示网站的具体内容，其包含的HTML标签也很多。
<body> <h1>HTML网页 - 主体（Body）</h1> <p>HTML网页 - 主体（Body）</p> </body>
HTML5初步
HTML5介绍
HTML5是万维网的核心语言、标准通用标签语言下的一个应用超文本 标签语言（HTML）的第五次重大修改版本。 目前，国外支持HTML5的主流浏览器包括Firefox（火狐浏览器）、 IE9及其更高版本、Chrome（谷歌浏览器）、Safari、Opera、等等； 国内支持HTML 5的浏览器包括傲游浏览器、360浏览器、搜狗浏览器、 QQ浏览器、猎豹浏览器、等等，不过国内的很多浏览器的内核都是基 于Firefox、Chrome或IE开发的。 HTML5的最大优势就是开发移动端应用。最初，移动端应用的开发人
网站的组成
网站程序与数据库
我们简单列举几个常用的网站程序与数据库相搭配组合。
• ASP语言与Access数据库 • 语言与MSSQL数据 • JSP语言与Oracle数据库 • JSP语言与DB2数据库 • PHP语言与MySQL数据库
网站的组成
Web服务器
网站有了空间、程序和数据库，基本就算完成了。但还差最关 键的一部分才能让网站跑起来，这个就是Web服务器。
网站的组成
域名
域名是由一串用点分隔的字母组成的互联网（Internet）上某一 个网站的名称，相当于网站的地址。一个标准的域名由三部分 组成，包括网络名、域名主体和域名后缀。
网站的组成
网站空间
网站空间（Website Host），简单来说可以理解为存放网站内 容（包括网页、文件、数据库、图片、动画、多媒体资源等） 的空间。 一般意义上，网站空间通常也称为虚拟主机空间，大多数的中 小企业网站都不会自己架设服务器，而是选择以虚拟主机空间 作为放置网站内容的网站空间。 而大型企业的专业网站，虚拟主机空间就不适用了，通常会购 买单独的服务器作为网站空间，其安全性能很高、且网站访问 速度也快，自然成本也会成倍的增长。
HTML网页
HTML网页头部
<head> <meta charset="UTF-8"> <meta name="Generator" content="WebStorm"> <meta name="Author" content="KING"> <meta name="Keywords" content="HTML HEAD"> <meta name="Description" content="HTML Page"> <title>HTML网页 - 头部（Head）</title> </head>
HTML开发工具与HTML5网页实例
文本编辑器 EditPlus编辑器 Sublime Text 3编辑器 WebStorm开发平台 DreamWeaver开发平台
课程小结
• • • • • 网站的组成 HTML网页 HTML5初步 网页开发编辑工具概览 课程小结
Thanks
HTML5+CSS3+JavaScript 网页设计实战
第一章 网站与HTML网页
课程内容
• • • • •
网站的组成 HTML网页 HTML5初步 网页开发编辑工具概览 课程小结
网站的组成
网站与网页
网站（Website）或称万维网，是指在因特网（Internet）上依 据一定的规则所创建的、用于展示特定内容的、由相关网页及 图片、动画、视频等多媒体元素的集合。 网页（Webpage）则是构成网站的主体元素，一个网站通常由 一个或多个网页所组成，且各个网页间均有相应的逻辑关系， 网站其实是由网页组成的一个有机整体。 通常我们讲的网页就是HTML网页，HTML的英文全拼是HyperText Markup Language，即超文本标签语言或超文本链接标示 语言。
网页多媒体特性
• HTML5支持网页端的Audio、Video等多媒体功能，可与网站自带的影音多 媒体功能互为助力。
三维、图形及特效特性
• HTML5支持基于SVG、Canvas、WebGL及CSS3的3D功能，这些功能会 在浏览器中呈现出相当绚丽的视觉效果。
HTML开发工具与HTML5网页实例
