|
#今日内容 web概念概述 HTML ##web概念概述 *JavaWeb *使用Java语言开发基于互联网的项目 *软件架构 C/S：Client/Server 客户端/服务器端（⬇） *在用户本地有一个客户端程序，在远程有一个服务器端程序 *如QQ,迅雷... *优点： 1.用户体验好 *缺点： 开发、安装、部署、维护 麻烦 2.B/S：Browser/Server 浏览器/服务器端（⬆）（随着网速越来越快 越来越吃香） *只需要一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序 *优点： 开发、安装、部署、维护 简单 *缺点： 如果应用过大，用户的体验可能会受到影响 对硬件要求过高 ###B/S架构详解 *资源分类： 静态资源： *使用静态网页开发技术发布的资源 *特点： *所有用户访问，得到的结果是一样的。 *如：文本、图片、音频、视频，HTML,CSS,JavaScript *如果用户请求的是静态资源，那么服务器会直接讲静态资源发送给浏览器，浏览器中内置了静态资源的解析引擎，可以展示静态资源。 动态资源（****）： *使用动态网页及时发布的资源 *特点： *所有用户访问，得到的结果可能不一样。 *如：jsp/servlet，php，asp.....
*如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器（浏览器只能解析静态资源） *我们要学习动态资源，必须先学习静态资源！！ *静态资源： *HTML：用于搭建基础网页，展示页面的内容 *CSS：用于美化页面，布局页面 *JavaScript：控制页面的元素，让页面有一些动态的效果 ####HTML 概念： *Hyper Text Markup Language 超文本标记语言 *超文本： *超文本是用超链接的方法，讲各种不同空间的文字信息组织在一起的网状文本 *标记语言： *由标签构成的语言，<标签名称> 如heml，xml *标记语言不是编程语言 快速入门： 语法： html文档后缀名 .html或者.htm 标签分为 。围堵标签：有开始标签和结束标签，如<html> </html> .自闭标签：开始标签和结束标签在一起，如<br/> 标签可以嵌套 *需要正确嵌套，不能你中有我，我中有你 在开始标签中可以定义属性，属性是由键值对构成，值需要用引号（单双都可以）引起来 html的标签不区分大小写，建议使用小写 标签学习： 文件标签：构成html最基本的标签 *html：html文档的根标签 *head：头标签，用于指定html文档的一些属性，引入外部的资源 *title：定义标题的标签 *body：体标签 *<!DOCTYPE html>：html5中定义该文档为html文档 文本标签：和文本有关的标签 *注释：<!--注释内容--> *<h1> to <h6>：标题标签 改变字体大小（h1~h6字体逐渐递减） 自动换行 *<p>：段落标签 *<br>：换行（自闭合） *<hr>：（自闭合）一条水平线 *属性： *color：颜色， * width：宽度， *size：高度， *align：对齐方式： *center：居中 *left：左对齐 *right：右对齐 *<b>：字体加粗 *<i>：字体斜体 *<font>：字体 *属性： *color：颜色 *size：大小 *face：字体 *<center>:文本居中 *属性定义： *color： 英文单词：red，green，blue rgb（红绿蓝）（值1，值2，值3）：值的范围：0~255 如 rgb（0，0，255）（蓝色） #值1值2值3：值的范围：00~FF之间 *width： 数值：width = ‘20’，数值的单位，默认是px（像素） 数值%：占比相对于父元素的比例， 图片标签：图片 *img：展示图片 *属性： *src：指定图片的位置（相对路径：以.开头的路径， ./：代表当前目录->默认 ./image/1.jpg ../：代表上一级目录） 列表标签： *有序列表 *ol file:///C:\Users\zhou\AppData\Local\Temp\ksohtml57012\wps1.jpg *li *无序列表 *ul *li 链接标签： *a：定义一个超链接 *href：指定访问资源的URL（统一资源定位符） *target：指定打开资源的方式 *_self：默认值 在当前页面打开 *_blank：在空白页面打开 块标签： *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：表示表格的脚部分(永远在最下面展示) 表单标签 *表单： 概念：用于采集用户输入的数据的，用于和服务器交互 *form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。 *属性 *action：指定提交数据的URL *method：指定提交方式 *分类：一共7种，2种比较常见 get： 请求参数会在地址栏中显示，会封装在请求行中（HTTP协议后讲解） 请求参数大小是有限制的 不太安全 post: 1.请求参数不会在地址栏中 显示，会封装在请求体中（HTTP协议后讲解） 2.请求参数的大小没有限制 3.较为安全 *表单项中的数据要想被提交：必须指定name属性 *表单项标签： *input：可以通过type属性值，改变元素展示的样式 *type属性 *text：文本输入框(默认值) *placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息 *password：密码输入框 *radio：单选框 *注意： 要想让多个单选框实现单选的效果则多个单选框的name属性值必须一样。 一般会给每一个单选框提供value属性，指定其被选中后提交的值 chenked属性：可以指定默认值 *checkbox：复选框 * 注意： 1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 2. checked属性，可以指定默认值 * file：文件选择框 * hidden：隐藏域，用于提交一些信息。 * 按钮： * submit：提交按钮。可以提交表单 * button：普通按钮 * image：图片提交按钮 * src属性指定图片的路径 *label：指定输入项的文字描述信息 *注意： *lable的for属性一般会和input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。 *select：下拉列表 *子列表：option，指定列表项 *textarea：文本域 *cols：指定列数，每一行有多少个字符 *rows：默认多少行 ####CSS：页面美化和布局控制 1. 概念：Cascading Style Sheets 层叠样式表 *层叠：多个样式可以作用在同一个html的元素上，同时生效 2. 好处： (1) 功能强大 (2) 将内容展示和样式控制分离 ① 降低耦合度。解耦 ② 让分工协作更容易 ③ 提高开发效率 3. CSS的使用：CSS与html结合方式 (1) 内联样式 ① 在标签内使用style属性指定css代码 (2) 内部样式：在head标签内，定义style标签的标签体 内容就是css代码。 (3) 外部样式： ① 定义css资源文件 ② 在head标签内，定义link标签 引入外部资源文件 *注意： *1，2，3种方式 css作用范围越来越大 *1方式不常用，2，3常用 *3种格式可以写为：
| 
收藏
淘帖
踩
