JavaWeb:使用Java语言开发基于互联网的项目
软件架构:
- C/S:Client/Server 客户端/服务器端
- B/S:Browser/Server 浏览器/服务器
B/S架构
资源分类:
- 静态资源:使用静态网页开发技术发布得到的资源。所有用户访问得到的结果都一样
- 动态资源:使用动态网页开发技术发布得到的资源。所有用户访问得到的结果都可能不一样
静态资源三语言:
- HTML:用于搭建基础网页,展示页面的内容
- CSS:用于美化页面,布局页面
- JavaScript:控制页面的元素,让页面有一些动态的效果
HTML:超文本标记语言,最基础的网页开发语言
超文本:超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
标记语言:由标签构成的语言<标签名称>,标记语言不是编程语言,没有任何的逻辑性
快速入门:
- 以html或htm后缀结尾
- 标签分为:围堵标签 自闭和标签
- 标签可以嵌套
- 在开始标签中可以定义属性,属性由键值对构成,值要用引号引起来
- html的标签不区分大小写,但是建议使用小写
HTML标签:
- 文件标签:构成html最基本的标签
html:html文档的根标签
head:头标签。用于指定html文档的一些属性,引入外部的资源
title:标题标签
body:体标签
<!DOCTYPE html>html5中定义该文档是html文档
- 文本标签:和文本有关的标签
注释<!-- 注释 -->
<h1> to <h6>:标题标签 1至6字体大小逐渐递减
<p>:段落标签
<br>:换行标签
<hr>:显示一条水平线 属性:color,width,size,align
<b>:字体加粗
<i>:字体斜体
<font>:字体标签 属性:color,size,face
<center>:文本居中
- 图片标签:
<img>:图片标签 属性:src表示路径(相对路径./表示当前目录 ../表示上一级目录)alt若图片加载失败则改为文字显示
- 列表标签:
有序列表:
ol: 属性:type表示递增的符号 start表示起始的数字
li:
无序列表:
ul:属性:type表示项目符号的类型
li:
- 链接标签:
<a>:定义一个超链接 属性:href规定链接的目标 target规定在何处打开目标URL,当值为_blank时网页在新建的页面打开;当href属性值为"javascript:void(0);"时,其跳转到指定URL的功能会消失
- 表格标签:
<table>:定义表格 属性:width,border(边框),cellpadding(内容和单元格的距离),cellspacing(单元格之间的距离),bgcolor(背景色)
<tr>:定义行
<td>:定义单元格 属性colspan(合并列) rowspan(合并行)
<th>:定义表头单元格
<caption>:表格标题
<thead>:表头
<tbody>:表身体
<tfoot>:表脚
- 语义化标签:提高程序的可读性,提供了一些标签
<header>
<footer>
- 块标签:
<span>:文本信息在一行展示,行内标签 内联标签
<div>:每一个div占满一整行 块级标签
-
表单标签:表单用于采集用户输入的数据。和服务器进行交互
使用的标签定义一个范围,范围代表采集用户数据的范围,数据想要被提交,必须指定其name属性属性:action(指定提交数据的URL) method(指定提交方式 get请求参数在地址栏中显示,请求参数有限制不安全,post不在地址栏中显示,会封装在请求体中,参数无限制安全)
表单项标签:
input:可以通过type属性值,改变元素展示的样式。
placeholder属性:指定输入框的提升信息,当输入框的内容发生变化,会清空提示信息;
label属性:指定输入项的文字描述信息,其for属性若和input的id对应,则点击label区域,会让input输入框获取焦点
type属性: -
text:文本输入框,默认
-
password:密码输入框
-
radio:单选框 实现单选name值需要一样,给单选和复选框value指定其被选中后提交的值;checked属性可以指定默认值
-
check:复选框
-
file:文件选择框
-
hidden:隐藏域,用于提交信息
-
submit:提交表单
-
button:普通按钮
-
image:图片按钮,可以提交表单
-
color:选择颜色
-
date:输入日期
-
datatime-local:日期包括时和分
-
email:输入邮箱必须有@符号
-
number:只能输入时间
select:下拉列表 <option>选择项,子元素 textarea:文本域 属性:cols:指定列数,每一行有多少字符 rows:默认多少行
CSS:页面美化和布局控制
概念:层叠样式表,层叠:多个样式可以作用在用一个html元素上,同时生效
好处:功能强大,将内容展示和样式控制分离
CSS与HTML结合
内联样式:在标签内使用style属性指定css代码。如:
内部样式:在head标签内,定义style标签,style标签的标签体内容就是css代码。如
外部样式:定义css资源文件,在head标签内用link引入文件,如
CSS语法:
格式:选择器{
属性名1:属性值1;
属性名2:属性值2;
…
}
选择器:筛选具有相似特征的元素
分类:
基本选择器:
- id选择器:选择具体的id属性值。语法:#id属性值{ } 优先级最高
- 元素选择器:选择具有相同标签名称的元素 语法:标签名称{ } 优先级最低
- 类选择器:选择具有相同的class属性值的元素 语法:.class属性值{ } 优先级中
扩展选择器:
4. 选择所有元素:语法*{ }
5. 并集选择器:选择器1,选择器2{ }
6. 子选择器:筛选选择器1元素下的选择器2元素 语法:选择器1 选择器2{ }
7. 父选择器:筛选选择器2的父元素选择器1 语法:选择器1 > 选择器2{ }
8. 属性选择器:选择元素名称,属性名=属性值的元素 语法:元素名称[属性名=“属性值”]{ }
9. 伪类选择器:选择一些元素具有的状态,控制标签 语法:元素:状态{ }
CSS属性
- 字体,文本
font-size:字体大小
color:文本颜色
text-align:对齐方式
light-height:行高 - 背景
background:内有多属性 - 边框
border:边框 - 尺寸:
width:宽度
height:高度 - 盒子模型:控制布局
margin:外边距
padding:内边距
box-sizing:border-box 设置盒子的属性,让width和height就是盒子的最终大小
float:浮动