前端_HTML

web概念概述

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

软件架构：

        1. C/S: Client/Server 客户端/服务器端
            * 在用户本地有一个客户端程序，在远程有一个服务器端程序
            * 如：QQ，迅雷...
            * 优点：
                1. 用户体验好
            * 缺点：
                1. 开发、安装，部署，维护 麻烦
        2. B/S: Browser/Server 浏览器/服务器端
            * 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
            * 优点：
                1. 开发、安装，部署，维护 简单
            * 缺点：
                1. 如果应用过大，用户的体验可能会受到影响
                2. 对硬件要求过高
    
    * B/S架构详解
        * 资源分类：
            1. 静态资源：
                * 使用静态网页开发技术发布的资源。
                * 特点：
                    * 所有用户访问，得到的结果是一样的。
                    * 如：文本，图片，音频、视频, HTML,CSS,JavaScript
                    * 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
            2. 动态资源：
                * 使用动态网页及时发布的资源。
                * 特点：
                    * 所有用户访问，得到的结果可能不一样。
                    * 如：jsp/servlet,php,asp...
                    * 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

        * 我们要学习动态资源，必须先学习静态资源！
    
        * 静态资源：
            * HTML：用于搭建基础网页，展示页面的内容
            * CSS：用于美化页面，布局页面
            * JavaScript：控制页面的元素，让页面有一些动态的效果

HTML

    1. 概念：是最基础的网页开发语言
        * Hyper Text Markup Language 超文本标记语言
            * 超文本:
                * 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
            * 标记语言:
                * 由标签构成的语言。<标签名称> 如 html，xml
                * 标记语言不是编程语言
    
    2. 快速入门：
        * 语法：
            1. html文档后缀名 .html 或者 .htm
            2. 标签分为
                1. 围堵标签：有开始标签和结束标签。如 <html> </html>

 

HTML标签：表单标签

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

       * 表单项中的数据要想被提交：必须指定其name属性

* 表单项标签：

* input：可以通过type属性值，改变元素展示的样式

       * type属性：

              * text：文本输入框，默认值

              * placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

              * password：密码输入框

              * radio:单选框

                     * 注意： 1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。 2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 3. checked属性，可以指定默认值

              * checkbox：复选框

                     * 注意： 1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 2. checked属性，可以指定默认值

              * file：文件选择框
                     * hidden：隐藏域，用于提交一些信息。
              * 按钮：
                     * submit：提交按钮。可以提交表单
                     * button：普通按钮
                     * image：图片提交按钮
                            * src属性指定图片的路径    

              * label：指定输入项的文字描述信息
                     * 注意：label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
              * select: 下拉列表
                     * 子元素：option，指定列表项
              * textarea：文本域
                     * cols：指定列数，每一行有多少个字符
                     * rows：默认多少行。