欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

书小宅之网页设计——基本概念

程序员文章站 2024-03-20 10:29:10
...

网页和网站

网页通常是HTML格式的文件，经由网址URL来识别，其拓展名可以为.html、.htm、.asp、.aspx、.php、或.jsp。

网站是具有特定内容的网页的集合。网站的主页（又称为首页）相当于具有导航作用的目录。

静态网页和动态网页

划分依据：是否使用服务器技术
动态网页的程序都在服务器端运行，最后把运行的结果返回到客户端浏览器上显示；
静态网页是事先制作好的，直接通过服务器传递给客户端浏览器。

  • 静态网页：
    • 一般以.html或.htm为文件扩展名；
    • 只能通过手工方式更新页面信息；
    • 不论用户是否访问，静态网页的内容独立地保存在网站服务器上；
    • 静态网页没有数据库的支持。
  • 动态网页：
    • 一般以.asp、.aspx、.php、或.jsp为文件扩展名；
    • 动态网页通过网页脚本语言自动处理、自动更新页面；
    • 网页文件并不独立存在于服务器上，只有当用户请求时服务器才返回一个完整的网页；
    • 动态网页以数据库为基础；

伪静态网页：为了提高网站的访问速度，把大型的动态网页生成静态网页 。
动态效果：如网页中嵌入动画，可称特效网页，但不是动态网页。

动态网页类型

开发动态网站时，需要指定一种服务器端技术，罗列下述几种：

通用网关接口CGI【Common Gateway Interface】：可以将用C/C++等语言编写的CGI代码放在网页服务器的计算机上运行，再将其运行结果通过网页服务器传输到客户端的网页浏览器上。
动态服务器页面ASP【Active Server Pages】：服务器端执行的嵌入HTML文档的脚本语言，ASP中的VBScript代码被ASP引擎解释执行。快速、简便。
ASP.NET：建立在微软新一代.Net平台架构上，采用效率较高的、面向对象的方法来创建动态web应用程序。
超文本预处理器PHP【Hypertext Preprocessor】：服务器端执行的嵌入HTML文档的脚本语言，源代码开放，类似于C语言。
java服务器页面JSP【Java Server Pages】：将纯Java代码嵌入HTML中实现动态功能，JSP中的脚本在第一次执行时被编译成Servlet并由Java虚拟机执行。

网页的构成

  • 1、文本：中文常用黑色、宋体、9磅或12像素大小；
  • 2、图像：支持.JPG、.GIF、.PNG等格式；
  • 3、动画：包括SWF动画、GIF动画、脚本动画；
    -4、 链接：从一个网页指向另一个目的端的链接，靠近有链接的地方鼠标自动转化为小手状。
  • 5、导航条：一组超链接，方便访问网站内部各个栏目；
  • 6、表格：用于布局网页，方便显示大量的数据；
  • 7、表单：收集用户信息，实现浏览者和服务器之间的信息交互，如用于登录、注册时的数据传输；
  • 8、其他元素：视频、音频等。

网页规范化设计要求

网页应该遵循结构（Structure）、表现（Presentation）和行为（Behavior）分离的原则。
结构：使用HTML、XHTML或者XML语言规范设计的网页标签代码，即网页的结构和内容的代码；
表现：使用CSS语言规范设计的网页样式代码，即网页呈现效果；
行为：使用JavaScript语言和DOM规范设计的网页脚本代码，即网页特效、动画或者互动行为。

网页配色

不同平台和浏览器有自己的调色板，为了防止颜色失真，应尽量使用网络安全色，网络安全色几乎在所有的彩色环境中都能显示。

XHTML基础

HTML【Hypertext Markup Language】超文本标识语言：用于描述网页文档，可被浏览器识别、解析并呈现。

XHTML【The Extensible Hypertext Markup Language】可扩展标识语言，是HTML的升级版。

DTD(Document Type Definition)文档类型定义：是一套为了进行程序间的数据交换而建立的关于标签的语法规则，DTD文件是一个ASCII的文本文件，后缀为.dtd。

1、定义文档类型：DOCTYPE【document type】表示文档类型，决定网页文档的显示规则。
在文档类型声明语句的上面不能够包含任何HTML代码，也不能包含HTML注释标签。
书小宅之网页设计——基本概念

  • 过渡形：对标签和属性的语法要求不是很严格。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w1.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 严格型：不允许使用任何表现层的标签和属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w1.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 框架型：针对框架页面使用的DTD。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w1.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2、声明命名空间：xmlns（XHTML NameSpace）表示命名空间，是收集元素类型和属性名字的一个详细DTD，指定语义的限制空间，避免用户自定义的标签与其他人发生冲突。

<html xmlns="http://www.w1.org/1999/xhtml">
<!--*元素html的名字空间，固定-->

<document xmlns ="http://www.mysite.cn/shuxiaozhai">
<!--document的名字空间-->
	<name>姓名</name>
	<location>住址</location>
	<number>学号</number>

3、所有标签必须闭合：单独不成对的标签用<br/>来关闭。
4、所有元素和属性都必须小写：大小写敏感。
5、所有属性都必须用“”括起来。
6、所有属性都必须被赋值。
7、特殊符号有编码：如小于号为&lt；大于号为&gt。
8、注释的内容部分不识别“–”。
9、废除name属性：id属性作为统一名称。

HTML元信息

标签中的信息不会显示在网页正文中，但是搜索引擎会搜索这些信息。其中，\标记网页的元信息。

<meta>标签的属性主要分为两组
1、name和content：name是网页元信息的名称，content描述name属性值的内容。
2、http-equiv和content：http-equiv声明HTTP协议的相应报头，content描述http-equiv属性值的内容。

  • 定义网页的描述信息
<meta name="description" content="标准网页设计专业技术咨讯"/>
  • 定义页面关键字
<meta name="keywords" content="HTML,DHTML,CSS,XML,XHTML,JavaScript,VBScript"/>
  • 设置网页作者：
<meta name="author" content="http://www.css8.cn"/>
  • 设置网页版权：
<meta name="copyright" content="http://www.css8.cn"/>
  • 设置创作时间：
<meta name="date" content="2019-07-20T20:50:30+00:00"/>
  • 设置禁止搜索引擎检索：
<meta name="robots" content="none"/>
  • 设置网页编码信息
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
  • 定义页面语言，如中文版本语言：
<meta http-equiv="content-language" content="zh-CN"/>
  • 设置页面刷新时间或跳转（重定向），如5秒后刷新页面：
<meta http-equiv=“refresh" content="5"/>
<meta http-equiv=“refresh" content="5;url=http://www.baidu.com"/>
  • 设置网页缓冲时间，即过期时间：
<meta http-equiv="expires" content="Sunday 20 October 2009 01:00 GMT"/>
  • 设置页面不缓存：
<meta http-equiv="pragma" content="no-cache"/>

HTML完整的文档结构

  • （)、[]、{}在计算机语言中是关键字或运算符，为避免冲突，选用<>作为标签特定的固定标识符；
  • 如果使用（)、[]、{}自定义标记时，必须编写能够识别并转移这些自定义标记的脚本，否则浏览器将他们看作信息本身来一块显示。
  • 除少数空标签外，每个标签都是成对的。元素的名称和属性值必须在起始标签中，属性的有无和数量不确定，属性值需放在引号中。在起始标签和结束标签之间包含的是元素主体，结束标签中有“/”。
<tag a1="v1" a2="v2" a3="v3"……an="vn">元素主体</tag>
  • 一般使用标签在头部定义字符编码，常用的字符编码：简体中文（gb2312）、繁体中文（big5）、通用字符编码/国际化编码（utf-8）。
  • <!–单行注释–>
  • <!-----------------
    多行注释
    ----------------->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w1.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w1.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--设置文档字符编码-->
<title>文档标题</title>
</head>
<body></body>

敬请批评指正！

相关标签： 网页设计

上一篇： web前端学习笔记--Dom

下一篇： “百度杯” CTF比赛 十月场 Web-登录

推荐阅读