【Java Web】HTML/CSS/Javascript

一、概述

B/S架构：浏览器（Browser）/服务器（Server）结构：在这种结构下，通过浏览器来进入工作界面，极少部分事务逻辑在前端（Browser）实现，主要事务逻辑在服务器端（Server）实现，形成三层（3-tier）结构。
BS的主要特点是分布性强、维护方便、开发简单且共享性强、总体拥有成本低。但数据安全性问题、对服务器要求过高、数据传输速度慢、软件的个性化特点明显降低，难以实现传统模式下的特殊功能要求。
分类：

  1. 静态资源：
    所有用户访问，得到的结果是一样的
    如：文本，图片，音频、视频, HTML,CSS,JavaScript
    如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
  2. 动态资源：
    所有用户访问，得到的结果可能不一样。
    如：jsp/servlet,php,asp...
    如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

HTML：用于搭建基础网页，展示页面内容。
CSS：用于美化页面，布局页面
Javascript：控制页面元素，让页面有一些动态的效果

二、HTML

超文本标记语言（Hyper Text Markup Language）。不是编程语言，而是使用标签的标记语言。
语法：

  1. html文档后缀名：.html或.htm

  2. 标签分类：

    • 围堵标签：有开始标签与结束标签，如 <html></html>
    • 自闭和标签：开始标签与结束标签在一起，如 <br/>

  3. 标签嵌套使用

  4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来

  5. html的标签不区分大小写，但是建议使用小写。

2.1 文档结构

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页内容
    </body>
</html>

2.2 基本标签

  1. 文件标签：
    <html>:html文档的根标签
    <head>：头标签。用于指定html文档的一些属性。引入外部的资源
    <title>：标题标签。
    <body>：体标签
    <!DOCTYPE html>：html5中定义该文档是html文档
  1. 文本标签：
    <!-- 注释内容 -->：注释标签
    <h1> to <h6>：标题标签
    <p>：段落标签
    <br/>：换行，不产生新段落
    <hr>：展示一条水平线
    <b>：字体加粗
    <i>：斜体
    <font>:字体标签
    <center>:文本居中
  1. 超链接标签
    <a>：超链接标签
        属性：
            href：访问目标URL
            target：指定打开资源方式
                _self：默认值，在当前页面打开
                _blank：在空白页面打开
  1. 图片标签
    <img>：图片标签
        属性：
            src：图片路径
            alt：简单说明
            width：宽度
            height：高度
            border：边框宽度
  1. 列表标签
    有序列表：
        <ol>
        <li>
    无序列表：
        <ul>
        <li>
  1. div和span
    <div>:每一个div占满一整行。块级标签
    <span>：文本信息在一行展示，行内标签 内联标签

2.3 表格标签

    <table>：定义表格
        width：宽度
        border：边框
        cellpadding：定义内容和单元格的距离
        cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
        bgcolor：背景色
        align：对齐方式
    tr：定义行
        bgcolor：背景色
        align：对齐方式
    td：定义单元格
        colspan：合并列
        rowspan：合并行
    th：定义表头单元格
    <caption>：表格标题
    <thead>：表示表格的头部分
    <tbody>：表示表格的体部分
    <tfoot>：表示表格的脚部分

2.4 表单标签

用于采集用户输入的数据的。用于和服务器进行交互。

    <form>：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
        属性：
            action：向何处提交表单的URL
            method：指定提交方式
                分类：一共7种，2种比较常用
                   * get：
                        1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
                        2. 请求参数大小是有限制的。
                        3. 不太安全。
                   * post：
                        2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
                        2. 请求参数的大小没有限制。
                        3. 较为安全。

常用元素：

    1. <input>：表单的最重要的元素，定义表单中的各类输入域
        属性：
            name：定义<input>元素名称，对提交到服务器的表单数据进行标识。表单项中的数据要想被提交，必须指定其name属性
            type：元素输入类型，有以下几种：
                text：默认值，文本输入字段
                password：密码字段，不会明文显示
                radio：单选框，在多个选项中选择一个
                    * 多个单选框的name属性值必须一样
                    * 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                    * checked属性，可以指定默认值
                checkbox：复选框，在多个选项中选择多个
                    * 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                    * checked属性，可以指定默认值
                file：文件选择框
                hidden：隐藏域，用于提交一些信息。
                submit：提交按钮。可以提交表单
                button：普通按钮
                image：图片提交按钮
		    src属性，指定图片的路径	
            value：输入字段的初始值
            readonly：规定输入字段为只读，不可修改，该属性不需要赋值
            disabled：规定输入字段为禁用，被禁用元素不可用禁用和被单击，且不会被提交，该属性不需要赋值
            size：输入域分类的显示空间大小，单位是字符
            maxlength：用户能输入的字符数
    2. <select>：下拉列表
        子元素：option，指定列表项
    3.<textarea>：文本域
        cols：指定列数，每一行有多少个字符
        rows：默认多少行。

三、CSS

层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

3.1 使用方式：css与html结合

  1. 内联样式：在标签内使用style属性指定css代码，如：
<div style="color: blue;">hello</div>
  1. 内部样式：在head标签内，定义style标签，如：
<style>
    div{
        color:blue;
    }
</style>

<div>hello</div>
  1. 外部样式：定义css资源文件，在head标签内，定义link标签，引入外部资源文件，如：
<!-- a.css文件：-->
    div{
        color:green;
    }
    <link rel="stylesheet" href="css/a.css">
    <div>hello css</div>
    <div>hello css</div>

<!-- 也可写为：-->
    <style>
        @import "css/a.css";
    </style>

3.2 css语法

格式：

选择器 {
    属性名1:属性值1;
    属性名2:属性值2;
    ...
}

📌 每一对属性需要使用；隔开，最后一对属性可以不加；

posted @ 2020-10-24 22:32  KJee  阅读(134)  评论(0)  编辑  收藏  举报