黑马程序员技术交流社区

标题: <石家庄校区>前端部分复习 [打印本页]

作者: 马fei飞 时间: 2019-6-1 14:55
标题: <石家庄校区>前端部分复习
1. Web概念概述

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

软件架构:

C/S:客户端/服务器端
- 在用户本地有一个客户端程序,在远程有一个服务器端程序
- 如:QQ,迅雷..
- 优点:
  - 用户体验好
- 缺点:
  - 开发,安装,部署,维护,麻烦
B/S:浏览器/服务器端
- 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
- 优点:
  - 开发,安装,部署,维护,简单
- 缺点
  - 如果应用过大,用户的体验可能会受到影响
  - 对硬件要求过高

B/S架构详解
- 资源分类：
  - 静态资源：
    - 使用静态网页开发技术发布的资源。
    - 特点：
      - 所有用户访问，得到的结果是一样的。
      - 如：文本，图片，音频、视频, HTML,CSS,JavaScript
      - 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
  - 动态资源：
    - 使用动态网页及时发布的资源。
    - 特点：
      - 所有用户访问，得到的结果可能不一样。
      - 如：jsp/servlet,php,asp...
      - 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
- 我们要学习动态资源，必须先学习静态资源！
- 静态资源：
  - HTML：用于搭建基础网页，展示页面的内容
  - CSS：用于美化页面，布局页面
  - JavaScript：控制页面的元素，让页面有一些动态的效果

2. HTML2.1 概念

HTML是最基础的网页开发语言

Hyper Text Markup Language 超文本标记语言
- 超文本
  - 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
- 标记语言
  - 由标签构成的语言.<标签名称> 如 html,xml
  - 标记语言不是编程语言

2.2 快速入门

语法
- html文档后缀名 .html 或者 .htm
- 标签分为
  - 围堵标签:有开始标签和结束标签.如<html>和</html>
  - 自闭和标签:开始标签和结束标签在一起.如
- 标签可以嵌套
  - 需要正确嵌套,不能你中有我,我中有你
    错误示范:<a><b></a></b>
    正确示范:<a><b></b></a>
- 在开始标签中可以定义属性.属性是由键值对组成,值需要用引号(单双都可)引起来
- html的标签不区分大小写,但是建议使用小写

2.3 标签学习

文件标签:构成html最基本的标签
- html:标识html文档的根标签
- head:头部标签.用于指定html文档的一些属性.引入外部的资源
- title:标题标签
- body:体标签
- <!DOCTYPR>:html5中定义该文档是html文档
文本标签:和文本有关的标签
- 注释:<! - - 注释内容 -- >
- h1 to h6:标题标签
  - h1~h6:字体大小逐渐递减
- p:段落标签
- br:换行标签
- hr:显示一条水平线
  - 属性
    - color:颜色
    - width:宽度
    - size:高度
    - align:对齐方式
      - center:居中
      - left:左对齐
      - right:右对齐
- b:字体加粗
- i:字体斜体
- center:居中
- font:字体标签,控制字体属性
  - 属性
    - color:颜色
    - size:大小(1-7)
    - face:字体.如楷体,宋体等
- 属性定义
  - color
    - 英文单词:red,green,blue
    - rgb(值1,值2,值3):值的范围:0~255.如rgb(0,0,255)
    - ＃值1 值2 值3:值的范围:00~FF之间. 如 : ＃FF00FF
  - width
    - 数值:width=‘20’,数值的单位,默认是px(像素)
    - 数值%:表示了占比相对于父元素的比例
图片标签:
- img:展示图片
  - 属性
    - src:指定图片的位置
    - width:宽
    - height:高
    - alt:未找到图片显示的内容
    - 相对路径
      - 以.开头的路径
        ./:代表当前目录 ./image/1.jpg
        ../:代表上一级目录
列表标签:
- 有序列表
  - ol
    - type(1-数字,a-字母标号,i-罗马编号,)
    - start(起始位置)
  - li
- 无序列表
  - ul
    - type(circle-空心圆,disc-实心圆,square-实心框)
  - li
连接标签:
- a:定义一个超链接
  - 属性
    - href:指定访问资源的url(统一资源定位符)
    - target:指定打开资源的方式
      - _self:默认值,在本页面跳转连接
      - _blank:在新的页面打开连接
    - mailto:打开邮箱
块标签
- div:每一个div占满一整行.块级标签
- span:文本信息在一行展示,行内标签,内联标签
语义化标签:html5中为了提高程序的可读性,提供了一些标签
- header
- footer
表格标签
- table:定义表格
  - height:高度
  - width:宽度
  - border:显示边框
  - cellpadding:定义内容和单元格的距离
  - cellspacing:定义单元格之间的距离.如果指定为0,则单元格的线会合为一条
  - bgcolor:背景色
  - align:对其方式显示位置
- tr:定义行,行标签
  - bgcolor:背景色
  - align:对其方式显示位置
- td:定义单元格,列标签\
  - colspan:合并列
  - rowspan:合并行
- th:定义表头单元格
- caption:表格标题
- thead:表示表格的头部分
- tbody:表示表格的体部分
- tfoot:表示表格的脚部分

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2