1 网页概述

1.1 认识网页

网页是承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。

以CSDN首页为例，可以看到网页主要由文字、图像和超链接¹等元素构成。当然除了这些元素，网页中还可以包含音频、视频以及动画等。

下面是CSDN首页的源代码，这是一个纯文本文件，仅包含一些特殊的符号和文本。我们浏览网页时看到的图片、视频等，正是这些特殊的符号和文本组成的代码被浏览器渲染之后的结果。

网页设计时一般是静态网页与动态网页相结合形成。
静态网页：用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。静态网页更新不方便，但是访问速度快。
动态网页：显示的内容会随着用户操作和时间的不同而变化。动态网页可以和服务器数据库进行实时的数据交换。

1.2 网页名词解释

名词	名词释义
Internet网络	通常所说的互联网，是由一些使用公共语言互相通信的计算机连接而成的网络
WWW	英文World Wide Web的缩写，中文译为“万维网”，是Internet提供的一种网页浏览服务。
URL	英文Uniform Resource Locator的缩写，中文译为“统一资源定位符” URL其实就是Web地址，俗称“网址”。
DNS	英文Domain Name System的缩写，是域名解析系统。
HTTP和HTTPS	HTTP (英文Hypertext transfer protocol的缩写) 中文译为超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比HTTP协议安全。
Web	Web通常指互联网的使用环境。但对于网站制作者来说，它是一系列技术的复合总称，通常称之为网页。
W3C组织	英文World Wide Web Consortium的缩写，中文译为“万维网联盟”。万维网联盟是国际最著名的标准化组织。

1.3 web标准

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。包含我们所熟悉的HTML、XHTML、CSS、Javascript等等。

结构标准：结构标准用于对网页元素进行整理和分类，主要包括：HTML、XML和XHTML。
表现标准：表现标准用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为标准：行为标准是指网页模型的定义及交互的编写，主要包括两个部分：DOM和ECMAScript。

如果把Web标准看作一栋房子，结构标准相当于房子的框架，表现标准相当于房子的装修，让房子看起来更美观，行为标准相当于房间内部的设别，让房子具有功能性。

2 网页制作技术入门

2.1 HTML

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

2014年10月底，W3C宣布HTML5正式定稿，网页进入了HTML5开发的新时代。HTML语言发展至今，经历了六个版本，这个过程中新增了许多HTML标签，同时也淘汰了一些标签。

2.2 CSS

CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

2.3 JavaScript

JavaScript是网页中的一种脚本语言，其前身叫做LiveScript，由Netscape(网景)公司开发。后来在Sun公司推出著名的Java语言之后，Netscape公司和Sun公司于1995年一起重新设计了LiveScript，并把它改名为JavaScript。

2.4 网页的展示平台——浏览器

IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。

Mozilla Firefox中文通常称为“火狐”，是一个开源网页浏览器，使用Gecko引擎（非ie内核）。Firebug是火狐浏览器下的一款开发插件，它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发HTML、CSS、JavaScript等的得力助手。

IE浏览器的全称是Internet Explorer，由微软公司推出，直接绑定在windows操作系统中，无需下载安装。IE有6.0、7.0、8.0、9.0、10.0等版本，目前最新的是IE10.0。

Google Chrome又称谷歌浏览器，是由Google（谷歌）公司开发的开放原始码网页浏览器。该浏览器基于其它开放原始码软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单有效的使用界面。

什么是浏览器内核?

浏览器内核是浏览器最核心的部分，负责对网页语法的解释并渲染网页（也就是显示网页效果），是渲染引擎（标准叫法）的通俗叫法。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。

常见的浏览器内核

Trident内核：IE浏览器
Gecko内核：Firefox浏览器
Webkit内核：Safari（苹果浏览器）
Presto内核：Opera浏览器
Blink内核：由谷歌和Opera开发

3 阶段案例——创建第一个网页

在记事本中新建一个文本文件，如下图所示

在文本中写入以下内容：Hello HTML!

将扩展名从.txt改为.html

双击打开这个文件，就是第一个网页

超链接：单击可以跳转的网页元素 ↩︎

HTML5+CSS网页设计概述相关推荐

HTML5+CSS网页设计作业——传统节日-春节(8页) 学生网站模板
HTML5+CSS大作业--传统节日-春节(8页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育 ...
网页设计与制作：第一章HTML与CSS网页设计概述与第二章HTML入门
第一节:Web基本概念 1,认识网页 (1)网页主要有文字,图像和超链接等元素构成: 2,名词解释 (1)internet:就是通常所说的因特网,是由一些使用公用语言互相通信的计算机连接而成的网络. ...
HTML5+CSS网页设计——文字样式属性
1.font-size : 用于设置文字的字号 <!doctype html> <html> <head> <meta charset="utf-8 ...
网页设计与制作html5教学目标,HTML5+CSS3网页设计与制作—教学大纲（10页）-原创力文档...
博学谷--让IT 教学更简单,让IT 学习更有效 <HTML5+CSS3 网页设计与制作>课程教学大纲 (课程英文名称) 课程编号: 学分:5 学分学时:74 学时 (其中:讲课学时 ...
HTML+CSS网页设计期末课程大作——XXXXX (X页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作
HTML+CSS网页设计期末课程大作--XXXXX (X页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商 ...
html5+css3网页设计与网站布局从新手到高手,HTML5+CSS3网页设计与网站布局从新手到高手...
HTML5+CSS3网页设计与网站布局从新手到高手语音编辑锁定讨论上传视频 <从新手到高手:HTML 5+CSS 3网页设计与网站布局从新手到高手>是2013年1月清华大学出版社 ...
div css网页设计源代码_HTML+CSS网页设计，企业网站服务项目布局样式
大家好,本篇文章分享企业网站服务项目的布局样式,这种布局样式通常用于企业网站首页,企业可以向客户提供的服务内容,不同类型的企业服务项目样式也不同,这只是其中一种. 效果图: 服务项目 HTML代码: ...
html的详情页面设计,HTML5+CSS3网页设计与制作实用教程单元7 网页特效与制作商品详情页面（105页）-原创力文档...
单元7网页特效与制作商品详情页面HTML5+CSS3网页设计与制作实用教程本章导读The chapter's introduction 将JavaScript 程序嵌入HTML 代码中,对网页元素进行 ...
HTML CSS 网页设计作业「体育小站」(梅西足球 6页 )
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 校园篮球网页设计 | 足球体育运动 | 体育游泳运动 | 兵乓 ...
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码...
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML ...

HTML5+CSS网页设计概述