HTML与CSS网页设计概述
网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以 包含音频、视频以及Flash等。
除了首页之外,一个网站通常还包含多个子页面,网页与网页之间通过超链接互相访问。
网站由网页构成,网页有静态和动态之分。所谓静态网页是指用户无论何时何地访问,网页都会显示固定的信息,除非网页源代码被重新修改上传。静态网页更新不方便,但访问速度快。而动态网页显示的内容则会随着用户操作和时间的不同而变化,这是因为动态网页可以和服务器数据库进行实时的数据交换,例如传智播客的技术论坛。
现在互联网上的大部分网站都是由静态网页和动态网页混合组成,两着各有千秋,用户在开发网站时可根据需求的酌情采用。
对于从事网页制作的人员来说,与互联网相关的一些专业术语是必须要了解的,例如常见的“Internet、WWW、URL、DNS、HTTP、Web、W3C组织等。
1.Internet
所谓internet就是通常所说的因特网,是由一些使用公共语言互相通信的计算机连接而形成的网络。 Internet实现了全球信息资源的共享,形成了一个能够共同参与、相互交流的互动平台,也可以说Internet的出现是人类通信技术史上的一次革命。
2.WWW
WWW中文译文”万维网“,但它不是网络,也不代表Internet,它只是Internet提供的一种服务——网页浏览服务。(WWW是Internet上最主要的服务)
3.URL
URL中文译为”统一资源定义符“,其实就是Web地址,俗称”网址“。在万维网上的所有文件(HTML、CSS、图片、音乐、视频等)都有唯一的URL只要知道资源的URL,就能够对其进行访问。
4.DNS
DNS是域名解析系统。
5.HTTP
HTTP中文译为超文本传输协议,它是一种详细规定了浏览器和万维网服务器之间互相通信的规则。HTTP是非常可靠的协议,它具有强大的自检能力搜友用户请求的文件到达客户端时,一定是准确无误的。
6.Web
Web仅仅只是一种环境——互联网的使用环境、氛围、内容等。而对于网站设计、制作者来说,他是一系列技术的复合总称(包括网站的前台布局、后台程序、美工、数据库开发等)‘通常称其为网页。
7.W3C
W3C中文译为“万维网联盟”,是国际最著名的标准化组织。
了解WEB标准
Web标准并不是某一个标准,而是一系列标准的集合,主要包括结构、表现和行为三方面。
1.结构标准
结构用于对网页元素进行整理和分类,主要包括XML和XHTML两部分。
2.表现标准
表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS。
3.行为标准
行为是指网页模型的定义及交互的编写,主要包括DOM和ECMAScript两部分。
HTML简介
HTML主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。HTML提供了许多标记,如段落标记、标题标记、超链接标记、图片标记等,网页中需要定义什么内容,就可用相应的HTML标记描述。HTML通过标记描述网页内容,通过超链接将网站与网页以及各种网页元素链接起来构成丰富多彩的Web页面。
CSS简介
CSS通常称为CSS样式或样式表,主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
CSS非常灵活,既可以嵌入在HTML文档中,也可以是一个单独的外部文件,如果是独立的文件,则必须以.css为扩展名。
用HTML编写简单网页
HTML:超文本标记语言 (xml的前身【可扩展的标记语言,标签可以自定义】)
标记语言:解释性语言。(由应用程序解释) C++、java等是编译型语言。
HTML:主要做网页
超链接:
超文本:文档间 建立联系,
网站:一组由相互关联的网页。
采用:HTML语言
工具:Dreamweaver 、记事本、
如何编写一个网页?
//标准基础标签
<html>
<head>
<title> 第一次网页设计 </title>
</head>
<body>
welcome!!
</body>
</html>
HTML文档基本格式
这些自带的源代码构成了HTML文档的基本格式,其中主要包括<!DOCTYPE>文档类型声明,根标记,头部标记,主题标记。
HTML标记:在HTML页面中,带有"<>“符号的元素被称为HTML标记,如果上面提到的、、都是HTML标记。所谓标记是放在”<>"标记符中表示某个功能的编码命令,也称为HTML标签或HTML元素,本书统一称作HTML标记。
双标记:也称体标记,是指由开始和结束两个标记符组成的标记。其中基本语法格式如下:<标记名>内容</标记名>
单标记:也称空标记,是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下:<标记名/>
注释标记:
在HTML中还有一种特殊的标记——注释标记。如果需要在 HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标记。其基本语法如下:
注视内容不会显示在浏览器窗口中,但是作为HTML文档的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。
~
水平分割线标签
属性
分割线粗度5 noshade设置为实线
换行标签
段落标签
段落间有一空行
标记的常用属性 1.align,含义:设置水平线的对齐方式 属性值:可选择left、right、center三种值,默认为center,居中对齐 2.size, 含义:设置水平线的粗细 属性值:以像素为单位,默认为2像素 3.color,含义:设置水平线的颜色 属性值:可用颜色名称,十六进制#RGB、rgb(r,g,b) 4.width,含义:设置水平线的宽度 属性值:可以是确定的像素值,也可以是浏览器窗口的百分比,默认为100%
文本样式标记
多种多样的文字效果可以使网页变得更加绚丽,为此HTML提供了文本样式标记,用来控制网页中文本的字体,字号和颜色。其基本语法如下:
<font属性=“>文本内容
标记的常用属性
1.face,含义:设置文字的字体,例如微软雅黑、黑体、宋体等
2.size,含义:设置文字的大小,可以取1~7之间的整数值
3.color,含义:这只文字的颜色