Web应用及XHTML基础篇

最新推荐文章于 2024-03-17 01:42:31 发布

陌听

最新推荐文章于 2024-03-17 01:42:31 发布

阅读量399

点赞数

分类专栏： XHTML 文章标签：前端 xhtml

本文链接：https://blog.csdn.net/she_rryn/article/details/47089769

版权

XHTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、企业应用计算的演变

1、主机/终端模式（Mainframe/Terminal）：使用者一般通过只有一个屏幕、一个键盘和一根主机连接线的“哑终端”与主机的应用程序进行交互。

超市收银
航空售票
小型储蓄所

2、客户机/服务器（Client/Server)：在网络技术的支持下，应用程序不仅可利用本机资源，还可通过网络方便地共享网上其它计算机资源

3、计算机分类

服务器：向其它计算机提供各种服务
客户机：享受服务器提供服务的计算机

4、浏览器/服务器（Browser/Server,简称B/S）

特征：只需安装浏览器

减少了客户端的维护工作量，方便了用户使用

5、网页内容

用户登录用户名： <输入用户名的文本框> 密码：<输入密码的文本框> <确定按钮><取消按钮>

6、Web浏览器

最流行的浏览器：Microsoft Interner Explorer(IE)、Mozilla系列的FireFox

IE	tredent
Firefox	gecko
chrome	uebkit
Opera	proste
Sufari	webkit

7、HTTP请求格式

请求行 GET（HTTP方法） /lovobok/index.html(请求的URL) HTTP/1.1(HTTP版本)

请求头 Host:：127.0.0.1:80

空行

消息体 username=lovo

8、HTTP响应格式

状态行 HTTP/1.0（HTTP版本） 200（响应码） OK（响应描述）

响应头

空行

消息体 <html></html>

9、网页分类

静态网页

保存形式：.tml或.htm

发布后，页面内容（文本、图像、超链接）和外观总是保持不变

优点：访问效率高

网站的架设与开发相当容易

客户端动态网页

网页技术包括：JavaScript、Active控件、Java Applet

优点：充分利用了计算资源

减轻了服务器和网络上的计算压力

方便地实现基于图形的用户交互界面

服务器端动态网页

不管采用静态或动态网页技术开发的网页，最终由Web服务器解析，通过HTTP协议发送到客户端

10、网页编程工具的选择

编辑器：记事本、UltraEdit、EditPlus、Emacs

图形化的网页编辑工具：Microsoft FrontPage、Macromedia Dreamweaver、TopStyle

二、XHTML基础

1、语法规则

<开始标记或打开标记>元素内容<结束标记或关闭标记>

例如：<p>语法规则</p>

2、定义标题

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

3、定义段落（Paragraph）

4、定义列表

<p>无序列表实例</p>
<ul>
   <li>编写XHTML文件</li>
   <li>编写XML文件</li>
   <li>编写JSP文件</li>
</ul>

<p>有序列表实例</p>
<ol>
   <li>编写XHTML文件</li>
   <li>编写XML文件</li>
   <li>编写JSP文件</li>
</ol>

<p>定义列表实例</p>
<dl>
<dt>猫</dt>
<dd>一只可爱的猫</dd>
<dt>手电筒</dt>
<dd>使用电池的设备</dd>
<dt>cute</dt>
<dd>可爱</dd>
</dl>

5、定义预编排文本

功能：可以使文本按照源文件中的编排格式，一模一样的在浏览器中显示

<pre>
  2.9
+1.2
--------
  4.1
</pre>

6、定义分区块文本

功能：把文档的某个部分用边框围起来

<html>
  <head>
     <style>
        .bodered{ boder-style:solid;}
      </style>
   </head>
<body>
   <p>这是一个常规的段落</p>
   <div class="bodered">
        <p>这是 一个用div样式界定的段落</p>
    </div>
  </body>
<ml>

7、跨越多个字符

功能：可指定文本为粗体、红色、带下划线

<html>
  <head>
     <style>
        .emphasis{  color:red;text-decoration:underline;font-weight:blod;}
      </style>
   </head>
<body>
   <p><span class="emphasis">这段文本被着重强调</span>，而这段没有</p>
   <div class="bodered">
        <p>这是 一个用div样式界定的段落</p>
    </div>
  </body>
<ml>

8、特殊字符

9、创建超链接

web连接有两个基本的组件：

①链接：指在主文档中指向其它文档的文本

②目标：指链接所指向的文档或者主文档中的某个位置

格式：

<a><href="目标URL">描述文本</a>

目标：

target="_blank" (打开新页面)

target="_self"(默认本页面)