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>文档类型声明，<html>根标记，<head>头部标记，<body>主体标记。
1.<!DOCTYPE>
标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。
必须在开头处使用此标记为所有的XHTML文档指定XHTML版型和类型，只有这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。
2.<html>
<html>位于.<!DOCTYPE>标记之后，也被称为跟标记。它标志着HTML的开始，</html>标记标志着HTML文档的结束，在他们之间的是文档的头部和主体内容。在<html>之后有一串代码“xmlns=“http：//www。w3.org/1999/xhtml””用于声明XHTML的默认命名空间。
3.<head>
<head>用于定义HTML文档的头部信息，也称为头标记，紧跟在<html>标记之后，主要用来封装其他位于文档的标记，例如<title>,<meta>,<link>及<style>等。，用来描述文档的标题，作者以及和其他文档的关系等。（一个HTML文档只能含有一对head标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中）
4.body
.body标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本，图像，音频和视频等信息必须位于.body标记内，.body标记中的信息才是最终展示给用户看的。（一个HTML文档只能由一对.body标记，且.body标记必须在heml标记内，位于head头部标记之后，与head标记是并列关系。）5.<!--注释语句-->
.***HTML的样式
…（起就近原则）
二.HTML标记
分为单标记和双标记
1.单标记：也称空标记，指用一个标记符即可完整的表述某个功能的标记。格式：<标记名 />
2.双标记：也称体标记，是指由开始和结束两个标记符组成的标记。格式：<标记名>内容</标记名>
三.标记的属性
1.eg:字体为“黑体”，“居中”。格式：<标记名 属性1=“属性值1” 属性2=“属性值2”…> 内容 </标记名>
四.HTML文档头部相关标记
1.设置页面标题标记<title>
<title>标记用于定义HTML页面的标题，及给网页取一个名字，必须位于head标记内。一个HTML文档只能含有一对<title></title>标记，<title></title>之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下：<title>网页标题名称</title>
2.定义页面元信息标记<meta/>
<meta/>标记用于定义页面的元信息，可重复出现在<head>头部标记中，在HTML中是一个单标记。
下面介绍<meta/>标记常用的几组设置，具体如下：
（1）<meta name=“名称"content"值”/>
在<meta>标记中使用name，content 属性可以为搜索引擎提供信息，其中name属性提供搜索内容名称，content属性提供对应搜索内容值。如：
①设置网页关键字。
<meta name="keywords"content"Java培训，net培训，PHP培训，C++培训"/>②设置网页描述。
<meta name="description"content"IT 培训的优秀培训机构，口碑最好的Java培训、.net培训、php培训，平面设计培训，UI设计培训谁与争锋？"/>③设置网页作者。
<meta name="author" content="传智播客网络部"/>(2)<meta http-equiv="名称" conrent="值"/>
在<meta>标记中使用 http-equiv/content属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数。其中，http-equiv属性提供参数类型，content属性提供对应的参数值。默认会发送<meta http-equiv="Content-Type" conrent="text/html"/>，通知浏览器发送的文件类型是HTML。
①设置字符集
<meta http-equiv="Content-Type" conrent="text/html"；charset=utf-8"/>②设置页面自动刷新与跳转
<meta http-equiv="refresh" conrent="10；url=http://www.itcast.cn" />3.引用外部文件标记<link>
一个页面往往需要多个外部文件的配合，在<head>中使用<link>标记可引用外部文件，一个页面允许使用多个<link>标记引用多个外部文件。格式：<link 属性="属性值"/>
4.内嵌样式标记<style>
<style>标记用于为HTML文档定义样式信息，位于<head>头部标记中，其基本语法格式如下：<style 属性=“属性值”>样式内容</style>
三.HTML文本控制标记
1.标题和段落标记
①标题标记
HTML提供了6个等级的标记，即<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
格式如下：<hn aligh="对齐方式">标题文本</hn>该语法中n的取值为1~6，align属性为可选属性，用于指定标题的对齐方式。
left，center，right分别设置标题文字左，居中，右对齐。
如：<h2 align="left">2级标题，左对齐。</h2>
②段落标记
和平常写文章一样，整个网页也可以分为若干个段落。而段落的标记就是<p>,其格式入下：<p align="对齐方式">段落文本</p>
align属性为<p>标记的可选属性，和标题<h1>~<h6>一样，同样可以使用align属性设置段落文本的对齐方式。
<p>是HTML文档中最常见的标记，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。如：<p align="left">JAVA学院</p>
③水平线标记<hr/>
格式：
<hr 属性="属性值" />
<hr/>是单标记，在网页中输入一个<hr/>，就添加了一条默认样式的水平线，<hr/>标记的常用的属性表如图：
| 属性名 | 含义 | 属性值 |
| align | 设置水平线的对齐方式 | 可选择left、right、center三种值，默认为center，居中对齐 |
| size | 设置水平线的粗细 | 以像素为单位，默认为2像素 |
| color | 设置水平线的颜色 | 可用颜色名称、十六进制#RGB、rgb（r，g，b） |
| width | 设置水平线的宽度 | 可以是确定的像素值，也可以是浏览窗口的百分比，默认为100% |
<font 属性="属性值">文本内容</font>| 属性名 | 含义 |
| 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.图像标记
<img/>
思维导图
5396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
