一、程序的分层
1、界面层：
　　某种类型的应用程序
　　a、DOS(控制台运行)
　　b、桌面应用程序--独立安装，独立运行
　　c、web类型--现在流行的
单机版：电脑上要安装，程序升级之后，电脑上也要升级--桌面应用程序
网络版：电脑上不装，输入一个url地址，直接用--web类型
2、业务逻辑层：数据访问--数据交互
3、数据存储层：myssql jdbc
二、web类型的应用程序：应用程序位于服务器，用户只需要通过浏览器就能访问和交互的
　　理解：和前端网站开发的区别
　　1、网站--最常见
　　2、程序--OA、CRM
三、需要掌握的知识
　　1、客户端：
　　　　页面的创建：搭建--美化--动态的显示效果
　　　　HTML--CSS--JS
　　2、服务器端：页面和数据库的交互--JSP&Servlet>>>>>Ajax&Jqery
　　　　Web基础相关的技术：HTML--CSS--JS 不要求学的很精细，但是前端给你必须能看的懂
　　　　JSP&Servlet对于学Java的必须学
　　　　学习时间：HTML--3天 JS--3天
四、HTML 课程
1、概述：
　　定义：超文本标记语言，一种纯文本类型的语言
　　作用：设计网页
　　特点：文件以.html/htm为后缀；由浏览器解释执行；扩展性很强，可嵌套脚本语言编写程序段，如VBScript,JavaScript
2、web浏览器：
　　主要功能：代理访问者提交请求；作为HTML的解释器和内嵌脚本程序执行器；以图形化界面的方式显示HTML文档
　　主流产品：IE,Firefox,Chrome,Opera,Safari
　　注意：同样的HTML代码在不同的浏览器上，效果上可能有所不同
3、基本概念：
　　标记/标签：<>包围的单词；大多成对，有开始标记和结束标记之分
　　元素：<>包围的部分：<body>body的元素<body/>用谁包围的就称是谁的元素
　　属性：用来修饰元素；每个属性都有值；属性放在开始标签中
　　单标签（空标记）和双标签之分：<br />--标准和<br>--早期版本写法
　　元素和标签的概念并没有严格的区分。
4、HTML的文档结构：
　　版本信息：<!DOCTYPE> 版本声明
　　分类：

　　　    Strict DTD 严格型 按照W3C定义的标准
　　　　Transitional DTD 传统/过渡型 兼容最新的标准和就的标准
　　　　Frameset DTD 框架型
　　　　选择问题：从头写 用严格型；在别人的基础上维护 过渡型　　　
　　html页面：
　　　　文档头部：<head></head> 定义和整个文档相关的信息
　　　　<title>标题<title>
　　　　<meta charset=utf-8 />--定义网页基本信息--元数据 常用属性：content/http-equiv
　　　　<meta http-requiv="refresh" comtent="10" />刷新页面
　　文档主体：<body></body> 定义文档显示的内容
　　整个文档：<html></html> 定义文档的范围
　　注 释：<!--文档注释-->

5、<body>元素：
　　<1>文本标记
　　作用：文本是网页上的基本成分
　　直接书写的文本会用浏览器默认的样式显示
　　包含在标记中的文本则会被显示为标记所拥有的样式
　　分类：
　　特殊字符：&nbsp;
　　注 释：<!-- 内容-->
　　标题元素：<h1></h1>...
　　段落元素：<p></p>元素前后会有间距 元素内容独占一行
　　换行元素：<br > 单标签一般不需要添加内容 所以也就只有一个标签 间距比段落小
　　分区元素：需要进行统一设置时使用
　　　　　　<span></span>单行设置，格式没有变化不会影响布局 <div>会独占一行，块元素，用于多行设置
　　　　　　块元素(block)和行内元素（inline）：块--独占一行的元素，前后会自动换行 div/p/h1-h6
　　　　　　行内元素--和其他元素位于一行 如 ：span/a
　　注：空格折叠：html默认多个空格或制表符压缩成单个空格即显示为一个空格
　　　　特殊字符可以用转义字符，也称字符实体

　　<2>图像和链接
　　　　　　img:引入图像 单标签<img src="资源路径" />
　　　　写法：

　　　　　　<img src="d:/a.jpg">--绝对路径 在web里面是行不通的 不推荐
　　　　　　<img src="a.jpg">--相对路径 当前文件夹下（同一目录）在当前站点下找资源
　　　　　　<img src="http://tts.tarena.com.con/a.jpg">url路径 去其他地方找资源
　　　　　　注：图片显示的大小默认和原来一样，一般在引入时会设置width或height 不清楚比例时 就写一个 因为原图会等比例缩小/放大
　　　　超链接：点击去往其他资源/页面
　　　　　　　　<a href="url">被单击的内容：文字/图片<a /> href 是引用的意思
　　　　　　　　写法：<a href="a.html"><a />去当前路径的去找a.html的文件
　　　　　　　　<a href="http://tts6.tarena.com.con/ target="blank"></a> 引用一个网页
　　　　　　　　target默认值_self：替换当前 _blank:在新窗口打开
　　　　　　　　实际应用中可以图片链接:img嵌套a标签
　　　　锚点：当前页面不同位置的跳转
　　　　　　　　第一步 定点：在目标位置定义一个锚点 如<a name="link1"></a>是一个隐藏标记 不显示
　　　　　　　　第二步 链接：使用链接href指向link1 <a href="#link1">to link1</a> #是告知浏览器这不是页面而是锚点
　　　　　　　　注：锚点是针对有滚动效果的页面 才会有效果 内容较少时 看不出效果 理解上 这样的跳转无意义
　　　　　　　　　　有目录结构使用的较多
　　特殊用法：直接回到页面顶端的情况使用比较多，经常使用，因此有一种简化的写法：<a href="#">text</a>--返回界面顶端 相当于刷新的效果

　　<3>列表
　　　　什么是列表？将具有相似或先后顺序的几项文字进行对齐排列
　　　　特点：所有的列表都由列表类型和列表项组成
　　　　列表类型：有序列表--<ol>和无序列表<ul> ol指ordered list 排完序的列表 ol和ul只代表列表的开始和结束
　　　　列表项： <li>用于指示具体列表内容
　　　　嵌套列表：实际应用中最多 嵌套是嵌套在<li>标签当中
　　　　　　<ul>
　　　　　　　　<li>书籍
　　　　　　　　　　<ul>
　　　　　　　　　　　　<li>童话</li>
　　　　　　　　　　　　<li>诗歌</li>
　　　　　　　　　　　　<li>散文</li>
　　　　　　　　　　</ul>
　　　　　　　　</li>
　　　　　　　　<li>家电</li>
　　　　　　　　<li>电子</li>
　　　　　</ul>

　　<4>表格
　　　　a、作用：显示网格数据和页面布局
　　　　　　如：在表单注册时冒号对齐，使用表格的align右对齐
　　　　b、创建表格：表格的基本结构--table/tr(table row)/td(table defination)
　　　　　　注：表格的高宽默认自适应 如果设置了宽高，宽高会按原有比例进行分配
　　　　　　对列设置宽--影响整列，对列设置高--影响整行
　　　　　　对齐方式：默认水平居左--align(水平对齐属性)，垂直居中--valign(垂直对齐属性)
　　　　c、常用属性：
　　　　　表格的属性：border(外边框)/width/height/align/cellpadding(内容与边框--内边距)/cellspacing(单元格与单元格的间距--外边距)
　　　　　单元格的属性：width/height/align/valign
　　　　　标题：位于<table>元素中 <caption> 并且是第一个子元素
　　　　d、分组：如果用div就破坏了表格的结构所以不能用
　　　　　行分组，只能包含tr元素：
　　　　　thead 只能出现一次
　　　　　tbody 可以出现多次
　　　　　tfoot 只能出现一次
　　　　e、不规则表格：单元格的合并/拆分--实现跨行/跨列
　　　　　　表格无法同时既跨行又跨列。
　　　　　　对于td元素而言，有colspan,rowspan属性设置单元格跨行/跨列
　　　　　　colspan:单元格跨列--横着长
　　　　　　rowspan:单元格跨行--竖着长
　　　　f、表格的嵌套：<table>元素嵌套在<td>里 嵌套不能破坏原有表格的结构 和列表嵌套一类似

web基础笔记整理(一)的更多相关文章

  1. 知了课堂 Python Flask零基础 笔记整理

    目录 起步 安装Python2.7: Python虚拟环境介绍与安装: pip安装flask: 认识url: URL详解 web服务器和应用服务器以及web应用框架: Flask 第一个flask程序 ...

  2. HTML基础笔记整理

    「学习笔记」HTML基础 前言 勤做笔记不仅可以让自己学的扎实,更重要的是可以让自己少走弯路.有人说:"再次翻开笔记是什么感觉",我的回答是:"初恋般的感觉". ...

  3. web前端笔记整理，从入门到上天，周周更新

    由于大前端知识点太多,所以一一做了分类整理,详情可见本人博客 http://www.cnblogs.com/luxiaoyao/ 一.HTML 1.注释 格式:<!-- 注释内容 --> ...

  4. web基础笔记

    浏览器渲染页面的过程 浏览器渲染页面前需要先构建 DOM 和 CSSOM 树.因此,我们需要确保尽快将 HTML 和 CSS 都提供给浏览器. 参考:https://developers.google ...

  5. Web前端笔记整理

    不使用Ajax无刷新提交: header('HTTP/1.1 204 No Content'); var a=document.createElement('img'); a.setAttribute ...

  6. web前端笔记整理一---HTML

    一 HTML标签1 页面及标记 1 HTML 文件结构 拓展名 .html或者.htm <!DOCTYPE html>// 声明 <html> html 主体 <head ...

  7. web前端笔记整理---CSS

    一   Css  文件 Css: 美化HTML的 4种选择器: 元素选择 类选择 ID选择 伪类选择 常用的布局方案 1 写在什么位置能好用. 1.1 元素里面 优先级是最高的 1.2 元素外,文件内 ...

  8. java概念基础笔记整理

    1.构造方法没有类型,有类型的不是不叫构造方法. 2.一个类的的成员变量可以是java允许的任何数据类型,一个类可以把某个对象作为自己的一个成员变量,如果用这样的类创建对象,那么该对象中就会其他对象, ...

  9. Git 基础笔记整理1

    Git 官网:http://git-scm.com/ git教程1:http://www.yiibai.com/git/home.html git教程2 :http://www.liaoxuefeng ...

随机推荐

  1. 如何用Python写一个计算器软件 附带效果图

    该计算器使用Python  tkinter模块开发 效果如下图 import tkinter #导入tkinter模块 root = tkinter.Tk() root.minsize(280,500 ...

  2. 说说缓存，说说Redis

    无论是客户端还是服务端,缓存都是必不可少的一种提升用户体验的策略,大家在平时开发中,有意无意都会用到缓存,比如说 Android 开发的同学们,所有的图片框架,基本都有用到缓存技术,服务端那就完全不用 ...

  3. jq实现全选或者全不选

    $("#all").click(function () { if($(this).is(":checked")){ $("input[name='pr ...

  4. select into

    IN 子句可用于向另一个数据库中拷贝表: SELECT * INTO Persons IN 'Backup.mdb' FROM Persons

  5. h5前端流行的框架

    很多时候别人问你,上手的框架有哪些,其实我们都是知道的,只是一时却也说不上哪些比较,这里想给大家介绍一下,我所遇到的,还算好用的框架,做个分享 1 Bootstrap 官网:http://getboo ...

  6. Vue-Access-Control：前端用户权限控制解决方案

    原文地址:http://refined-x.com/2017/11/28/Vue2.0用户权限控制解决方案/ Vue-Access-Control是一套基于Vue/Vue-Router/axios 实 ...

  7. Numpy入门 - 数组排序

    本节主要讲解numpy数组的排序方法sort的应用,包括按升序排列和按降序排列. 一.按升序排列 import numpy as np arr = np.array([[3, 1, 2], [6, 4 ...

  8. toastr 通知提示插件

    table.sb-tb td,table.sb-tb th { padding: 5px 10px !important } jquery toastr 一款轻量级的通知提示框插件. 网页开发中经常会 ...

  9. nyoj 2 括号配对问题 栈

    nyoj 2 括号配对问题 题目链接: http://acm.nyist.net/JudgeOnline/problem.php?pid=2 思路: 栈:'(' '['入栈,遇到 ']' ')'出栈 ...

  10. PHP 获取ip地址

    public function getIP() { if (getenv("HTTP_CLIENT_IP")) $ip = getenv("HTTP_CLIENT_IP& ...