八、Web概念&HTML

web概念&HTML

Web概念概述

JavaWeb：
- 使用Java语言开发基于互联网的项目
软件架构：
- C/S：Client/Server 客户端/服务器端
  - 在用户本地有一个客户端程序，在远程有一个服务器端程序
  - 优点：
    - 用户体验好
  - 缺点：
    - 开发、安装、部署、维护麻烦
- B/S：Brower/Server 浏览器/服务器端
  - 只需要一个浏览器，用户通过不同的网址(URL)，可以访问不同的服务器端程序
  - 优点：
    - 开发、安装、部署、维护简单
  - 缺点：
    - 如果应用过大，用户的体验可能会受到影响
    - 对硬件要求过高
B/S架构详解
- 资源分类：
  - 静态资源：
    - 使用静态网页开发技术发布的资源
    - 特点：
      - 所有用户访问，得到的结果是一样的
      - 如：文本、图片、音频、视频、HTML、CSS、JavaScript
      - 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
  - 动态资源：
    - 使用动态网页开发技术发布的资源
    - 特点：
      - 所有用户访问，得到的结果可能不一样
      - 如：jsp/servlet，php，asp……
      - 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
- 注意：我们要学习动态资源，必须先学习静态资源
- 静态资源：
  - HTML：用于搭建基础网页，展示页面的内容
  - CSS：用于美化页面，布局页面
  - JavaScript：控制页面的元素，让页面有一些动态的效果

HTML(最基础的网页开发语言)

概念：
- Hyper Text Markup Language 超文本标记语言
  - 超文本：
    - 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
  - 标记语言：
    - 由标签构成的语言。<标签名称> 如html、xml
    - 标记语言不是编程语言
快速入门：
- 语法：
  - html文档后缀名 .html 或者 .htm
  - 标签分为：
    - 围堵标签：有开始标签和结束标签。如<html></html>
    - 自闭和标签：开始标签和结束标签在一起。如
  - 标签可以嵌套：
    - 需要正确嵌套，不能你中有我，我中有你
  - 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可）引起来
  - html的标签不区分大小写，但是建议使用小写
标签学习：
- 文件标签：构成html最基本的标签
  - html：html文档的根标签
  - head：投标签：用于指定html文档的一些属性，引入外部资源
  - title：标题标签
  - body：体标签
- 文本标签：和文本有关的标签
  - 注释：
  - <h1~6>：标题标签，字体大小（由1~6逐渐变小）
  - p ：段落标签
  - br：换行标签
  - b：字体加粗
  - i：字体斜体
  - font：字体标签
    - 属性：
      - color：颜色
      - size：大小
      - face：字体
  - hr：展示一条水平线
    - 属性：
      - color：颜色
      - width：宽度
      - size：高度
      - align：对齐方式
        
        center：居中
        
        left：左对齐
        
        right：右对齐
  - center：文本居中
  - 属性定义：
    - color：
      - 英文单词：red，green，blue
      - red(值1，值2，值3)：值的范围：0~255 如rgb(0,0,255)
      - #值1值2值3：值的范围：00~FF之间如FF00FF
    - width：
      - 数值：width='20'，数值的单位，默认是px(像素)
      - 数值%：占比相对于父元素的比例
- 图片标签：
  - img：展示图片
    - 属性：
      - src：指定图片的位置
    - 相对路径：
      - 以.开头的路径：
        
        ./:代表当前目录
        
        ../:代表上一级目录
- 列表标签：
  - 有序列表：
    - ol：
    - li：
  - 无序列表：
    - ul：
    - li：
- 链接标签：
  - a：定义一个超链接
    - 属性：
      - href：指定访问资源的URL（统一资源定位符）
      - target：指定打开资源的方式
        
        _self：默认值，在当前页面打开
        
        _blank：在空白页面打开
- div和span：
  - div：每一个div占满一整行。块级标签
  - span：文本信息在一行展示，行内标签内联标签
- 语义化标签：html5中为了提高程序的可读性，提供了一些标签
  - header：页面
  - footer：页脚
- 表格标签：
  - table：定义表格
    - width：宽度
    - border：边框
    - cellpadding：定义内容与单元格的距离
    - cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
    - bgcolor：背景色
    - align：对齐方式
  - tr：定义行
    - bgcolor：背景色
    - align：对齐方式
  - td：定义单元格
    - colspan：合并列
    - rowspan：合并行
  - th：定义表头单元格
  - caption：表格标题
  - thead：表示表格的头部份
  - tbody：表示表格的体部分
  - tfoot：表示表格的脚部分