前端_HTML

最新推荐文章于 2023-07-31 17:59:07 发布

chipeize

最新推荐文章于 2023-07-31 17:59:07 发布

阅读量91

点赞数 1

分类专栏：前端 HTML

本文链接：https://blog.csdn.net/chipeize/article/details/99080271

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

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：默认多少行。