网页设计1

HTML与CSS网页设计概述

Web基本概念

一.认识网页
1.Web中文译为“网页”。
2.网站的源文件是一个纯文本文件。而浏览器平常看到的图片，视频等，都是这些文本组成的代码被浏览器渲染后的结果。
3.网站是多个网页的集合，网页与网页之间通过超链接互相访问的。
*4.网页分为动态网页和静态网页。静态网页：用户无论何时何地地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。静态网页更新不方便但是访问速度快。动态网页会随着用户操作的时间不同而变化，这是因为动态网页可以和服务器数据库进行实时的数据交换。（大部分的网页是由静态网页和动态网页混合而成的）
二.名词解释
1.Internet
因特网。是网络。
2.WWW
万维网。他不是网络，只是Internet提供的一种服务-----网络浏览服务。
3.URL
统一资源定位符。eg:http://www.itcast.cn
4.DNS
域名解析系统
5.HTTP
超文本传输协议。
6.Web
只是一种环境-----互联网的使用环境，氛围u，内容等。
7.W3C组织
“万维网联盟”。是国际最著名的标准化组织。
三.了解Web标准
Web标准并不是某一个标准，而是一系列标准的集和，主要包括结构，表现，行为三方面。
1.结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两部分。
2.表现标准：表现用于设置网页元素的版式，颜色，大小等外观样式，主要指的是CSS。
3.行为标准：行为指网页模型的定义及互相编写，主要包括DOM和ECMAScript两部分。
四.网页制作入门
1.HTML简介
主要是通过HTML标记对网页中的文本，图片，声音等内容进行描述。HTML提供了许多标记，如段落标记，标题标记，超链接标记，图片标记等，网页中需要定义什么内容，就可用相应的HTML标记描述。
2.CSS简介
CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体，大小，对齐方式等），图片的外形（宽高，边框样式，边距等）以及版面的布局等外观显示样式。

HTML入门

一.HTML文档基本格式
<!DOCTYPE>文档类型声明，根标记，头部标记，主体标记。
1.
标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。
必须在开头处使用此标记为所有的XHTML文档指定XHTML版型和类型，只有这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。
2.
位于.标记之后，也被称为跟标记。它标志着HTML的开始，标记标志着HTML文档的结束，在他们之间的是文档的头部和主体内容。在之后有一串代码“xmlns=“http：//www。w3.org/1999/xhtml””用于声明XHTML的默认命名空间。
3.
用于定义HTML文档的头部信息，也称为头标记，紧跟在标记之后，主要用来封装其他位于文档的标记，例如标记，之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下：
2.定义页面元信息标记
标记用于定义页面的元信息，可重复出现在头部标记中，在HTML中是一个单标记。
下面介绍标记常用的几组设置，具体如下：
（1）
在标记中使用name，content 属性可以为搜索引擎提供信息，其中name属性提供搜索内容名称，content属性提供对应搜索内容值。如：
①设置网页关键字。

"keywords"content"Java培训，net培训，PHP培训，C++培训"/>

②设置网页描述。

"description"content"IT 培训的优秀培训机构，口碑最好的Java培训、.net培训、php培训，平面设计培训，UI设计培训谁与争锋？"/>

③设置网页作者。

"author" content="传智播客网络部"/>

(2)
在标记中使用 http-equiv/content属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数。其中，http-equiv属性提供参数类型，content属性提供对应的参数值。默认会发送，通知浏览器发送的文件类型是HTML。
①设置字符集

"Content-Type" conrent="text/html"；charset=utf-8"/>

②设置页面自动刷新与跳转

"refresh" conrent="10；url=http://www.itcast.cn" />

3.引用外部文件标记
一个页面往往需要多个外部文件的配合，在中使用标记可引用外部文件，一个页面允许使用多个标记引用多个外部文件。格式：
4.内嵌样式标记
三.HTML文本控制标记
1.标题和段落标记
①标题标记
HTML提供了6个等级的标记，即

、

、

、

、

、

格式如下：标题文本该语法中n的取值为1~6，align属性为可选属性，用于指定标题的对齐方式。
left，center，right分别设置标题文字左，居中，右对齐。
如：

2级标题，左对齐。

②段落标记
和平常写文章一样，整个网页也可以分为若干个段落。而段落的标记就是

,其格式入下：

段落文本

align属性为

标记的可选属性，和标题

~

一样，同样可以使用align属性设置段落文本的对齐方式。

是HTML文档中最常见的标记，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。如：

JAVA学院

③水平线标记

---

格式：

---

---

是单标记，在网页中输入一个

---

，就添加了一条默认样式的水平线，

---

标记的常用的属性表如图：

属性名	含义	属性值
align	设置水平线的对齐方式	可选择left、right、center三种值，默认为center，居中对齐
size	设置水平线的粗细	以像素为单位，默认为2像素
color	设置水平线的颜色	可用颜色名称、十六进制#RGB、rgb（r，g，b）
width	设置水平线的宽度	可以是确定的像素值，也可以是浏览窗口的百分比，默认为100%

④换行标记 在HTML中一个段落的文字会从左端到右端排序，直到浏览器的右端，然后自动换行。如果希望强制性换行，则用`` (他虽然可以实现换行的效果，但不并不能取代结构标记h,p等。 五，文本样式标记 格式

"属性值">文本内容

属性名	含义
face	设置文字的字体，例如微软雅黑、黑体等
size	设置文字的大小，可以取1~7之间的整数值
color	设置文字的颜色

六.文本格式化标记

标记	显示效果
b、/b和strong、/strong	文字以粗体方式显示（XHTML推荐使用strong）
i、/i和em、/em	文字以斜体方式显示（XHTML推荐使用em）
s、/s和del、/del	文字以加删除方式显示（XHTML推荐使用del ）
u、/u和ins和/ins	文字以加下划线方式显示（XHTML不推荐使用u）

七，特殊字符标记 

八.HTML图像标记
1.常用图像格式
(1)GIF格式
（2）PNG格式
（3）JPG格式
2.图像标记

思维导图