详解JavaWeb体系，以及前端语言：html与css

  • 1、JavaWeb的概念以及C/S与B/S体系结构
  • 1.1 C/S体系结构说明
  • 1.2 B/S体系结构说明
  • 2、Web应用程序的工作原理
  • 2.1 静态Web项目
  • 2.2 动态Web项目
  • 3、网页的组成部分
  • 4.HTML介绍
  • 4.1 html文件结构分析
  • 4.2 html标签格式说明
  • 4.3 常用标签介绍
  • 4.3.1 标题标签
  • 4.3.2 font字体标签
  • 4.3.3 超链接
  • 4.3.4 列表标签
  • 4.3.5 表格标签
  • 4.3.6 跨行跨列表格
  • 4.3.7 表单标签
  • 4.3.8 其他标签
  • 总结



随着Java语言在编程语言中越来越被推崇，Java在网站和企业级应用的开发上应用越来普遍，Java Web开发已经成为 Java 企业级解决方案中不可或缺的重要组成部分。

1、JavaWeb的概念以及C/S与B/S体系结构

Java Web 是用 Java 技术来解决相关 web 互联网领域的技术总和。

Web 包括：web 服务器和web客户端两部分。Java 在客户端的应用有 java applet，不过使用得很少，Java 在服务器端的应用非常的丰富，比如 Servlet，JSP 和第三方框架等等。Java 技术对 Web 领域的发展 注入了强大的动力。Web 开发可以理解为做网站。

随着网络技术的不断发展，单机的软件程序已经难以满足网络计算的需要。为此，各种 各样的网络程序开发体系应运而生。其中，运用最多的网络应用程序开发体系结构可以分为两种，一种是基于浏览器/服务器的 B/S 结构，另一种是基于客户端/服务器的 C/S 结构。

1.1 C/S体系结构说明

C/S 是 Client/Server 的缩写，即客户端/服务器结构。在这种结构中，服务器通常采用高 性能的 PC 机或工作站，并采用大型数据库系统（如 Oracle 或 SQL Server）,客户端则需要安装专用的客户端软件。这种结构可以充分利用两端硬件环境的优势，将任务合理分配到客户端和服务器，从而降低了系统的通信开销。

java 前端 部门管理业务 javaweb前端技术_web

1.2 B/S体系结构说明

B/S 是 Browser/Server 的缩写，即浏览器/服务器结构。在这种结构中，客户端不需要开发任何用户界面，而统一采用如 IE、Firefox、Chrome 等浏览器，通过 Web 浏览器向 Web 服务器发送请求，由 Web 服务器进行处理，并将处理结果逐级传回客户端。这种结构利用不断成熟和普及的浏览器技术实现原来需要复杂专用软件才能实现的强大功能，从而节约了开发成本，是一种全新的软件体系结构。这种体系结构已经成为当今应用软件的首选体系结构。

java 前端 部门管理业务 javaweb前端技术_java_02

2、Web应用程序的工作原理

2.1 静态Web项目

Web 应用程序大体上可以分为两种，即静态网站和动态网站。早期的 Web 应用主要是静态页面的浏览，即静态网站。这些网站使用 HTML 语言来编写，放在 Web 服务器上，用户使用浏览器通过 HTTP 协议请求服务器上的 Web 页面，服务器上的 Web 服务器将接收到 的用户请求处理后，再发送给客户端浏览器，显示给用户。

java 前端 部门管理业务 javaweb前端技术_Web_03

2.2 动态Web项目

随着网络的发展，很多线下业务开始向网上发展，基于 Internet 的 Web 应用也变得越来越复杂，用户所访问的资源已不能只是局限于服务器上保存的静态网页，更多的内容需要根据用户的请求动态生成页面信息，即动态网站。这些网站通常使用 HTML 语言和动态脚本语言（如 JSP、ASP 或者是 PHP 等）编写，并将编写后的程序部署到 Web 服务器上，由 Web 服务器对动态脚本代码进行处理，并转化为浏览器可以解析的 HTML 代码，返回给客户端浏览器，显示给用户。

java 前端 部门管理业务 javaweb前端技术_html_04

3、网页的组成部分

页面有三部分内容组成。分别是结构、表现与行为。

java 前端 部门管理业务 javaweb前端技术_html_05

4.HTML介绍

HyperText Markup Language （超文本标记语言），简写：HTML。

4.1 html文件结构分析

<!--告诉浏览器用什么版本解析-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--html注释：
       快捷键：ctrl+shift+/
    -->
    <!--charset设置的编码集是用来给浏览器看的，告诉当前页面使用什么编码集-->
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
       helloworld!
</body>
</html>

html文件运行后的结果为：

java 前端 部门管理业务 javaweb前端技术_html_06

4.2 html标签格式说明

hml标签格式说明

1.标签的格式：<标签名>封装的数据</标签名>

2.标签名大小写不区分

3.标签具有自己的属性。其中分为基本属性与事件属性。基本属性：例如bgcolor=“blue”，它可以设置标签的简单样式。事件属性：onlick="alert(‘你好’);"可以设置事件（输入设备和页面的交互）的响应代码

4.标签又分为：单标签和双标签。单标签格式：<标签名/>：其中br换行、hr水平线都是单标签。双标签格式：<标签名>封装的数据</标签名>

java 前端 部门管理业务 javaweb前端技术_java_07

4.3 常用标签介绍

关于常用标签的介绍及使用详见W3school.chm手册。这里只介绍常用的一些标签。

4.3.1 标题标签

演示：标题标签中标题1到标题6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--需求：演示标题1与标题6
         标题标签：h1~h6表示标题
         h1表示最大
         h6表示最小
         align属性设置标题的对齐方式
    -->
    <h1 align="left">标题1</h1>
    <h2 align="right">标题2</h2>
    <h3 align="center">标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>

</body>
</html>

4.3.2 font字体标签

font是字体标签，可以设置文字的字体、字体的大小和字体的颜色等。

演示：在网页上显示 字体标签，设置字体为宋体，大小为5号，颜色为颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <!--font字体标签
           face  设置文字的样式
           size  设置文字的大小
           color 设置文字的颜色
   -->
    <!--需求：在网页上显示 字体标签，设置字体为宋体，大小为5号，颜色为红色-->
    <font face="宋体" size="5" color="red">字体标签</font>

</body>
</html>

4.3.3 超链接

演示：在网页上显示超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <!--超链接
         <a></a>表示超链接标签
         href属性：设置连接跳转的地址
         target属性：设置从哪个位置进行跳转
                 其中：_self(默认值)：表示当前窗口默认跳转
                      _blank:表示打开一个新窗口去跳转
     -->
    <a href="title.html">标题</a>
    <a href="title.html" target="_self">标题(_self)</a>
    <a href="title.html" target="_blank">标题(_blank)</a>

</body>
</html>

4.3.4 列表标签

ul-li标签组成了无序列表。

演示：使用无序列表，将西游记，孙悟空、猪八戒、唐僧、沙和尚，展示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <!--需求：使用无序列表，将西游记，孙悟空、猪八戒、唐僧、沙和尚，展示出来。
         ul是无序列表
            type是可以设置无序列表项前面的符号
         li表示列表项

     -->
      <h1>西游记</h1>
      <ul type="none">
          <li>孙悟空</li>
          <li>猪八戒</li>
          <li>唐僧</li>
          <li>沙和尚</li>
      </ul>

</body>
</html>

4.3.5 表格标签

演示：在网页上做一个3行3列的表格，并显示边框。并修改表格的宽度，高度以及表格的对齐方式，单元格间距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <!--需求：在网页上做一个3行3列的表格，并显示边框。并修改表格的宽度，高度以及表格的对齐方式，单元格间距-->
     <!--table是表格
         cellspacing：设置单元格的间距
         width：设置表格的宽度
         height:设置表格的高度
         border:设置边框大小

       tr：表示行
       td：表示单元格
           align：设置单元格的对齐方式
       th：表示表头
       -->
    <table border="1" align="center" width="300" height="300" cellspacing="0" >

        <tr>
            <th>姓名</th>
            <th>国籍</th>
            <th>职业</th>
        </tr>

        <tr>
            <td>陈奕迅</td>
            <td>中国</td>
            <td>歌手</td>
        </tr>

        <tr>
            <td>张艺谋</td>
            <td>中国</td>
            <td>导演</td>
        </tr>

        <tr>
            <td>张嘉译</td>
            <td>中国</td>
            <td>演员</td>
        </tr>
    </table>
</body>
</html>

运行后的结果为：

java 前端 部门管理业务 javaweb前端技术_html_08

4.3.6 跨行跨列表格

演示：新建一个4行4列的表格，第1行第1列的单元格跨两列，第2行第1列的单元格跨两行，第3行第3列的单元格跨两行两列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <!--演示：新建一个4行4列的表格，
          第1行第1列的单元格跨两列，
          第2行第1列的单元格跨两行，
          第3行第3列的单元格跨两行两列-->

    <table border="1" align="center" width="300" height="300">
        <tr>
            <td colspan="2">1.1</td>
            <td>1.3</td>
            <td>1.4</td>
        </tr>

        <tr>
            <td rowspan="2">2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
        </tr>

        <tr>
            <td>3.2</td>
            <td colspan="2" rowspan="2">3.3</td>
        </tr>

        <tr>
            <td>4.1</td>
            <td>4.2</td>
        </tr>
    </table>
</body>
</html>

运行后的结果为：

java 前端 部门管理业务 javaweb前端技术_java 前端 部门管理业务_09

4.3.7 表单标签

表单在html中占有很重要的作用，表单用来收集信息，收集到的信息都可以发送给服务器。

演示：创建个人信息注册的表单。包含用户名，密码，性别（单选），兴趣爱好（多选）,国籍（下拉列表）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--演示：创建个人信息注册的表单。
        包含用户名，密码，性别（单选），兴趣爱好（多选）,国籍（下拉列表）
        -->
   <!--
   input type=text		普通的文本输入框
			input type=password 密码输入框
			input type=radio	是单选框		name属性可以对它们进行分组
			input type=checkbox 是复选框
			input type=submit	提交按钮
			input type=reset	重置按钮
			input type=button	是按钮 	value属性设置按钮上显示的文本
			input type=file		是文件上传域
			input type=hidden	是隐藏域	它可以在表单中添加一些额外的信息，而这些信息，是不希望直接看到的。

			textarea	是多行文本输入框（多行文本域）
				rows 属性设置行数
				cols 属性设置每行显示几个字

			select 	下拉列表
			option	下拉列表项
   -->

    <form action="">
        用户名称：<input type="text"><br>
        用户密码：<input type="password"><br>
        性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br>
        兴趣：<input type="checkbox">打球<input type="checkbox">唱歌<br>
        国籍：<select>
        <option>--请选择国籍--</option>
        <option>中国</option>
        <option>英国</option>
        <option>美国</option>
        </select><br>
    </form>

</body>
</html>

运行后的结果为：

java 前端 部门管理业务 javaweb前端技术_web_10

4.3.8 其他标签

  • div标签：经常与CSS结合使用作页面布局
  • span内联标签可以用来封装文本
  • p标签：表示其他标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        div标签：默认独占一行
        span标签默认宽度只有封装的文本的长度
        p标签默认会在段落的上方和段落的下方个空出一行来
        -->
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <p>段落1</p>
    <p>段落2</p>

</body>
</html>

总结

本节对JavaWeb中相关知识进行学习。其次进入前端语言的学习：HTML相关标签，其中需要重点掌握的是html标签中的表格与表单标签。后面我们会继续对前端语言展开学习。

java 前端 部门管理业务 javaweb前端技术_java 前端 部门管理业务_11