目录

JavaWeb基础知识

软件架构

C/S：Client/Server 客户端/服务器端

B/S: Browser/Server 浏览器/服务器端

B/S的资源分类

静态资源：使用静态网页开发技术发布的资源

动态资源

HTML:用于搭建基础网页，展示页面的内容

语法：

标签学习

文件标签

文本标签

图片标签

列表标签

链接标签

表格标签

语义化标签

form标签：用于定义表单

请求项标签input

label标签

select标签

textarea标签

 CSS：页面美化和布局控制

css与html结合方式

内联样式

内部样式

外部样式（2种方法）

选择器：筛选具有相似特征的元素

基础选择器

扩展选择器

常用属性

JavaWeb:使用Java语言开发基于互联网的项目

软件架构

C/S：Client/Server 客户端/服务器端

• 在用户本地有一个客户端程序，在远程有一个服务器端程序
• 优点：用户体验好
• 缺点：
  • 开发、安装，部署，维护 麻烦

B/S: Browser/Server 浏览器/服务器端

• 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程
• 优点
  • 开发、安装，部署，维护 简单
• 缺点
  • 如果应用过大，用户的体验可能会受到影响
  • 对硬件要求过高

B/S的资源分类

静态资源：使用静态网页开发技术发布的资源

• 所有用户访问，得到的结果是一样的
• 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
• 例如：html、css、js

动态资源

• 使用动态网页及时发布的资源
• 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
• 例如:jsp、servlet、asp

HTML:用于搭建基础网页，展示页面的内容

Hyper Text Markup Language 超文本标记语言

语法：

• html文档后缀名为.html 或者 htm
• 标签分为
  • 围堵标签：有开始标签和结束标签。如
  • 自闭合标签：开始标签和结束标签在一起。如
    
• 标签可以嵌套，但是不能你中有我，我中有你
• 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
• html的标签不区分大小写，但是建议使用小写。

标签学习

文件标签

• html:html文档的根标签
• head：头标签。用于指定html文档的一些属性。引入外部的资源
• title：标题标签。
• body：体标签
• ：html5中定义该文档是html文档

文本标签

• 注释：
• to ：标题标签（自带加粗、换行）

• ：段落标签 （自带换行）

• 
  ：换行标签

• ---

  ：展示一条水平线
• ：字体加粗
• ：字体斜体
• :字体标签
• :文本居中

示例代码：古诗词展示

诗词赏析


静夜思
唐   李白
床前明月光，疑是地上霜。
举头望明月，低头思故乡。

图片标签

• img：展示图片
  • src：指定图片的位置
  • alt：如果无法显示图像，浏览器将显示替代文本

列表标签

• 有序列表：ol、li
• 无序列表：ul、li

链接标签

• a:定义一个超链接
  • href：指定访问资源的URL(统一资源定位符)
  • target：指定打开资源的方式
    • _self:默认值，在当前页面打开
    • _blank：在空白页面打开

示例代码：列表、图片超联接练习

列表、图片、超链接练习


    

        

            

                
A
                
B
                
C
            
        
        

            

                
a
                
b
                
c
            
        
    
    

        

            
        
        

            
        
    
    

        
百度
        
搜狐
    

div标签：每一个div占满一整行。块级标签

span标签：文本信息在一行展示，行内标签 内联标签

表格标签

• table：定义表格
  • border：边框
  • cellpadding：定义内容和单元格的距离
  •  cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
  • bgcolor：背景色
• tr：定义行
• td：定义单元格
  • colspan：合并列
  • rowspan：合并行
• th：定义表头单元格

thead、tbody、tfoot:在其内部再定义行和列

• ：表示表格的头部分
• ：表示表格的体部分

• ：表示表格的脚部分

示例代码：功课表

    
    
    
        td{
            width: 80px;
            height: 30px;

        }
    


功课表练习

    

    

        
项目
        
上课
        
休息
    
    

        
星期
        
周一
        
周二
        
周三
        
周四
        
周五
        
周六
        
周日
    
    
    

    

        
上午
        

        

        

        

        

        

        
休息
    
    

        

        

        

        

        

        


    
    

        

        

        

        

        

        

    
    

        

        

        

        

        

        

    
    

        
下午
        

        

        

        

        

        

        
休息
    
    

        

        

        

        

        

        

    
    
    

    

        
学生姓名：
    
    

语义化标签

html5中为了提高程序的可读性，提供了一些标签。（其实是一个div）
 

：页眉