网页设计基础——01

认识网站

• 网站有网页构成，网页有静态和动态之分。
• 所谓静态网页是指用户无论何时何地访问，网页都会显示固定的信息 ，除非网页源代码被重新修改上传。静态网页更新不方便 ，但是，访问速度快。
• 而动态网页显示的内容则会随着用户操作和时间的不同而变化 ，这是因为动态网页可以和服务器数据库进行实时的数据交换 。

名词解释

• Internet 所谓Internet 就是通常所说的因特网，是由一些使用公用语言互相通信的计算机连接而成的网络 。Internet 实现了全球信息资源的共享。
• WWW（英文World Wide Web的缩写）中文译为“万维网”，它只是Internet提供的一种服务─网页浏览服务。
• URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符”，其实就是Web地址，俗称“网址”。
• DNS（英文Domain Name System的缩写）是域名解析系统。
• HTTP（英文Hypertext Transfer Protocol的缩写）中文译为超文本传输协议，它是一种详细规定了浏览器和万维网服务器之间互相通信的规则 。是非常可靠的协议 它具有强大的自检能力。
• Web 对于普通用户来说，Web仅仅只是一种环境 ─互联网的使用环境、氛围、内容等。而对于网页设计、制作者来说，Web是一系列技术的复合总称（包括网站的前台布局、后台程序、 美工、数据库开发等），通常称其为网页。
• W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联盟”，是国际最著名的标准化组织 。W3C 最重要的工作是d发展Web规范 。

Web标准

• Web标准并不是某一个标准，而是一系列标准的集合， 主要包括结构、表现和行为三方面。
• 结构标准：结构用于对网页元素进行整理和分类 ，主要包括XML和XHTML两部分。使内容更清晰 有逻辑性 。
• 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。用于修饰内容的样式。
• 行为标准：行为是指网页模型的定义及交互的编写，主要包括 DOM和ECMAScript两部分。内容的交互及操作效果。

HTML和CSS

• HTML和CSS是网页制作的标准语言。

HTML

• HTML，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述 。HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等。
• HTML的发展史：
  ①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
  ②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
  ③HTML 3.2：1997年1月14日，W3C推荐标准。
  ④HTML 4.0：1997年12月18日，W3C推荐标准。
  ⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
  ⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。

CSS

• CSS，主要用于设置HTML页面中的文本内容 （字体、大小、对齐方式等），图片的外形（宽高、边框模式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能。
• CSS非常灵活，既可以嵌入到HTML文档，也可以是一个单独的外部文件，如果是独立的文件，则必须以.css为扩展名。
• CSS的发展史：
  1996年12月，W3C发布了第一个有关样式的标准CSS1,又在 1998年5月发布了CSS2.目前，最新的版本是CSS3，但是各个浏览器对它的支持不统一，所以流行的版本仍然是CSS2。

HTML文档基本格式

HTML文档基本格式主要包含文档类型声明、根标记、头部标记和主体标记

1. < DOCTYPE>标记
   < DOCTYPE>标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTMIA标准规范。网页必须在开头处使用< DOCTYPE>标记为所有的HTML文档指定HTML版本和类型，只有这样浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。< DOCTYPI>标记和浏览器的兼容性相关，删除标记会把展示HTML页面的权利交给浏览器。这时有多少种浏览器，页面便会有多少种显示效果，这在实际开发中是不被允许的。
2. < html >标记
   < html >标记位于< DOCTYPE>标记之后，也称根标记。根标记主要用于告知浏览器其自身是一个HTML文档。< html >标记标志着HTML文档的开始，< /html >标记则标志着HTML文档的结束，在它们之间是文档的头部和主体内容。
3. < head >标记
   < head >标记用于定义HTML文档的头部信息，也称头部标记，紧跟在< htmb >标记后。头部标记主要用来封装其他位于文档头部的标记，例如< tite >、< meta >、< link >及< style >等，用来描述文档的标题、作者以及与其他文档的关系。需要注意的是，一个HTML文档只能含有一对< head >标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
4. < body >标记
   < body >标记用于定义HTML文档所要显示的内容，也称主体标记。浏览器中显示所有文本、图像、音频和视频等信息都必须位于< body >标记内。< body >标记中的信息能最终展示给用户看。一个HTML文档只能含有一对< body >标记，且< body >标记必须在< html >标记内，创 头部标记之后，与< head >标记是并列关系。

HTML标记

单标记

(1).<标记名称>单一型，无属性值。如：< br />在xhtml中，规定，所有HTML标记，都要小写，所有的标记都要有关闭。
(2).<标记名称 属性=“属性值”>单一型，有属性值。
如：< hr width=“80%”/>

双标记

（3）.<标记名称>…没有属性值。如：< title >…
(4）.<标记名称 属性=”属性值“>…有属性。如：< font color=“pink”>…
说明：标记与属性，属性之间以空格分隔。
属性不区分先后顺序；且属性不是必要的。

注释标记

语法格式：< !-- 注释的内容 – >
注意：
html 注释标签不支持任何的标准属性和事件！
注释标记中不能嵌套注释标记。

HTML文档头部的相关标记

设置页面标题标记< title >
定义网页标题，显示在浏览器的标题栏中。
语法格式：< title >网页标题名称< /title >
定义页面元信息标记< meta />
< meat name="" content="">
　　1.keywords：网页的关键字
　　2.description：网页的描述
　　3.robots：（meta name=“robots” content=“all”），允许搜索引擎收录，
　　4.author：作者
　　5.copyright：版权
< meat htttp-equiv="" content="">
　　1.Content-Type：字符集（< meta http-equiv=“Content-Type” content=“text/html;charset=utf-8”>）
　　2.Refresh：页面自动刷新与跳转（< meta http-equiv=“refresh” content=“3000;url=http://www.baidu.com”>)
　引用外部文件标记< link >
　一个页面往往需要多个外部文件的配合，在< head >中使用< link >标记可引用外部文件，一个页面允许使用多个< link >标记引用多个外部文件。

"stylesheet" type="text/css" href="mystyle.css">
//表示引用当前HTML页面所在文件夹中，文件名为style.css的CSS样式表文件

内嵌样式标记< style >
用于为HTML文档定义样式信息

二级标题
段落

HTML文本控制标记

标题标记

"对齐方式">标题文本

该语法中n的取值为1~6
align属性为可选属性：
①left 设置标题文字左对齐（默认值）
②center 设置标题文字居中对齐
③right 设置标题文字右对齐
注意： 一个页面中只能使用一个< h1 >标记
段落标记

"对齐方式">段落文本

水平线标记

"属性值" />

属于单标记，在网页中输入< hr />,就添加了一条默认样式的水平线

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

换行标记

这是
一个
段落

文本样式标记

"属性值">文本内容

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

文本格式化标记

标记	显示效果
< b>和< strong>	文字以粗体方式显示（b定义文本粗体.strong定义强调文本)
< i>和< em>	文字以斜体方式显示(i定义斜体字，em定义强调文本)
< s>和< del>	文字以加删除线方式显示(HTML5不赞成使用s)
< u>和< ins>	文字以加下划线方式显示（HTML5不赞成使用u）

特殊字符标记

特殊字符	描述	字符的代码
	空格	；
<	小于号	<；
>	大于号	>；
&	和号	&；
¥	人民币	¥；
©	版权	©；
®	注册商标	®；
°	摄氏度	°；
±	正负号	±；
x	乘号	×；
÷	除号	÷；
²	上标2	²；
³	上标3	³；