1.Web概念概述
1）JavaWeb：使用Java语言开发基于互联网的项目。
2）软件架构：
1.1C/S：Client/Server 客户端/服务器
在用户本地有一个客户端程序，在远程有一个服务器端程序。
优点：用户体验好
缺点：安装部署，开发维护麻烦
1.2B/S Browser/Server 浏览器/服务器
只需要一个浏览器，用户通过不同的网址可以访问不同的服务器程序
优点：安装部署，开发维护简单
缺点：1.如果应用过大，用户的体验可能会受到影响
2.对硬件要求过高
B/S构架详解：
资源分类：
1）静态资源：使用静态网页开发技术发布的资源。
特点：所有用户访问，得到的结果是一样的。
如：文本，图片，视频，音频，HTML，CSS，JavaScript
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。
2）动态资源：使用动态网页技术发布的资源
特点：所有用户访问，得到的结果可能不一样
如：jsp/Servlet,php,asp...
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。
我们要学习动态资源，必须先学习静态资源！
静态资源：
1）HTML：用于搭建基础网页，展示页面的内容
2）CSS：用于美化页面，布局页面
3）JavaScript：控制页面的元素，让页面有一些动态的效果。
一.HTML（超文本标记语言）
1.概念：是最基础的网页开发语言
1）超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
2）标记语言：由标签构成的语言。<标签名称> 如 html，xml（标记语言不是变成语言）2.快速入门
1）语法：html文档后缀名.html或者.htm
2）标签分为：围堵标签：有开始标签和结束标签，<html></html>
自闭和标签：开始标签和结束标签在一起，如<br/>
3）标签可以嵌套：
需要正确的嵌套，不能你中有我我中有你.
错误：<a><b></a></b>
正确：<a><b></b></a>
4）在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可以）引起来
5）html的标签不区分大小写，但是建议使用小写3.标签学习：
1）文件标签：构成html最基本的标签
html:html文档的根标签
head:头标签。用于指定html文档的一些属性。引入外部的资源。
title:标题标签
body:体标签
<!DOCTYPE html>:html5中定义该文档是html文档<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 指定字符集utf-8可以显示中文--> <title>Title</title> <!-- 网页标题--> </head> <body> helloWorld </body> </html>2）文本标签：和文本有关的标签
注释：<!-- 注释内容 --> (快捷键 ctrl+/)
<h1> to <h6>：标题标签
h1-h6：字体大小逐渐递减
<p>:段落标签
<br>:换行标签
<hr>:展示一条水平线
属性：color:颜色
width：宽度
1.数值：width="200",数值的单位默认是px（像素）
2.数值%：占比相对于父元素的比例
size：高度
align：对齐方式
center：居中
left：左对齐
right：右对齐
<b>:字体加粗
<i>:字体斜体
<font>: 字体标签
color：颜色
1.英文单词：red，blue，green
2.rgb(值1，值2，值3）：值的范围0-255 如：rgb（0,0,255）
3.#值1值2值2：值的范围00-FF 如：#FF00FF
size：大小
face：字体
<center>:文本居中<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标签</title> </head> <body> <!-- 注释 --> <!-- 标题标签 --> <h1>标题标签</h1> <h2>标题2标签</h2> <!-- 段落标签 --> <p>都和你我爱凡帝罗撒酒疯阿胶浆覅而无法费覅额偶玩</p> <p>佛二维【请佛诶覅偶恶案件佛为反腐</p> <!-- 换行标签 --> 会为强化的武器的华为<br/> <!-- 水平线标签 --> <hr color="blue" width="200" size="5" align="center" /> <!-- 加粗文字 --> <b>>会场内外</b><br /> <!-- 倾斜文本 --> <u>十多万</u><br /> <!-- 居中 --> <center>敦煌舞偶发后尾崎丰</center><br /> <!-- 字体标签 --> <font size="9" color="#3366">hi菲欧我怕</font> </body> </html>3）图片标签：<img>：展示
<!-- 图片 --> <img src="./imag/1.jpg"> <!-- 相对路径： 以.开头的路径 ：./:代表当前目录 ：../:daibiao 上一级目录 -->4）列表标签：
有序列表：<ol><li></li></ol>
无序列表：<ul><li></li></ul><!-- 有序列表 --> 早上起来做什么 <ol type="A"> <li>睁眼</li> <li>起床</li> </ol> <!-- 无序列表 --> <ul type="circle"> <li>睁眼</li> <li>起床</li> </ul>5）链接标签：
<a>定义一个超链接
href:指定访问资源的URL（统一资源定位符）
target：指定打开资源的方式
_self：默认值，在当前页面打开
_blank：在空白页面打开<!-- 超链接 --> <a href="https://www.baidu.com">这是一个百度超链接</a> <a href="./html1.html" target="_blank">这是自己写的一个页面连接</a> <!-- 用图片作为一个链接方式 --> <a href="https://www.baidu.com"><img src="./imag/1.jpg"/></a>6）div和span
<!-- div:每一个div占满一整行，块级标签 span:文本信息在一行展示，行内标签，内敛标签 没有任何样式，以后结合css使用 --> <div>对哦我</div> <div>对哦啊</div> <span>蝴蝶</span> <span>会否为</span>7）语义化标签：html5中为了提高程度的可读性，提供了一些标签
<header>：把头部分出来（页眉）
<footer>：把尾部分出来（页脚）
分出来的作用是便于和css样式结合使用
8）表格标签
table:定义表格
width:宽度
border：边框
cellpadding:定义内容和单元格的距离
cellspacing:定义单元格之间的距离。如果指定为0，则单元格的线会合为一条。
bgcolor：背景色
align：对齐方式
tr:定义行
td:定义单元格
th:定义表头单元格
caption:表格标题
thead:表示表格的头部分
tbody：表示表格的体部分
tfoot：表示表格的脚部分
（头体脚这三个部分知识一个标记，没有样式，以后可以用来和css结合使用）<!-- 表格 --> <table width="200" border="2" cellpadding="0" cellspacing="0" bgcolor="crimson" align="center"> <thead> <caption>学生表</caption> <tr> <th rowspan="2">姓名</th> <th>年龄</th> <th>编号</th> </tr> </thead> <tbody> <tr> <td>25</td> <td>1</td> </tr> </tbody> <tfoot> <tr> <td>易烊千玺</td> <td colspan="2">23</td> </tr> </tfoot> </table>9）表单标签：用于采集用户输入的数据的。用于和服务器进行交互
表单：form标签<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标签</title> </head> <body> <!-- form 用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围 属性：action 指定提交数据的URL method指定提交方式 分类：一共七种，2种比较常用 get和post get:请求参数会在地址栏中显示，会封装在请求行中（浏览器地址栏那里可看到） 请求参数大小有限制 不太安全 post:请求参数不会显示在地址栏，会封装在请求体中（HTTP协议后讲解）（浏览器按F12可查看到） 请求参数大小没有限制 较为安全 表单项中的数据要想被提交，必须指定其name属性 --> <form action="#" method="get"> 用户名:<input name="username"><br /> 密码:<input name="password"><br /> <input type="submit" value="登录"> </form> </body> </html>表单项：
input:可以通过type属性值，改变元素展示的样式
type属性：
text：文本输入框，默认值
placeholder：指定输入框的提示信息，当输入框的内容发生变化时，会
自动清除提示信息。
password：密码输入框
radio:单选框
1.1要想实现单选，他们的name属性值要一样
1.2一般会给每个单选框提供value属性，指定其被选中后提交的值
1.3checked属性，可以指定默认值
checkbox:复选框
1.1一般会给每个单选框提供value属性，指定其被选中后提交的值
1.2checked属性，可以指定默认值
file:文件选择框
hidden：隐藏域，用于提交一些隐藏的数据
按钮：
submit：提交按钮，可以提交表单
button：和JavaScript一起使用，实现动态效果
image：图片提交按钮 src属性指定图片的路径
lable属性：指定输入项文字描述信息
lable的for属性一般会和input的id属性值对应。如果对应了，则点击lable区
域，会让input输入框获取焦点。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标签</title> </head> <body> <form action="#" method="get"> <label for="username">用户名</label>:<input name="username" placeholder="请输入用户名" id="username"/><br /> 密码:<input name="password" placeholder="请输入密码"/><br /> 性别:<input type="radio" name="sex" value="man" checked="checked"/>男<input type="radio" name="sex" value="woman"/>女 <br /> 爱好:<input type="checkbox" name="hobby" value="sing" checked="checked"/>唱歌 <input type="checkbox" name="hobby1" value="dance"/>跳舞 <input type="checkbox" name="hobby2" value="game"/>游戏 <br /> 图片:<input type="file" name="file" /> <br /> 隐藏域:<input type="hidden" name="id" value="aaa"/> <br /> <input type="submit" value="登录"/> <input type="button" value="这是一个普通按钮"/> <br /> <!-- 图片提交按钮 --> <input type="image" src="./imag/1.jpg" /> <br /> 取色器:<input type="color" /> <br /> 生日:<input type="date" name="brithday" /><br /> 生日:<input type="datetime-local" name="brithday" /><br /> 邮箱:<input type="email" name="email" /><br /> 年龄:<input type="number" name="age" /> </form> </body> </html>select:下拉列表
子元素：option，指定列表项
selected：默认项<form action="#" method="get"> 省份:<select name="provice"> <option>--请选择--</option> <option value="1" selected="selected">北京</option> <option value="2">上海</option> </select> </form>textarea:文本域
<!-- cols:指定列数，每一行有多少个字符 rows:默认多少行，行不够会自动加 --> 自我描述:<textarea cols="5" rows="5" name="des"></textarea>
二、CSS页面美化和布局控制
1.概念：层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效
2.好处：
1）功能强大
· 2）将内容展示和样式控制分离
提高耦合度，解耦
让分工协作更容易
提高开发效率
3.CSS的使用：CSS与html结合方式
1）内联样式（当前标签中作用）
2）内部样式（当前页面中作用）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标签</title> <!-- 内部样式：在head标签内定义style标签，style标签的标签体内容就是css代码 --> <style> div{ color: aqua; } </style> </head> <body> <!-- 内联样式：在标签内使用style属性指定css代码 --> <div style="color: aqua;">你好</div> <!-- 内部样式：在head标签内定义style标签，style标签的标签体内容就是css代码 --> <div>hello</div> </body> </html>3）外部样式（连接css文件都可用）
div{ color: aqua; }<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标签</title> <!-- <link rel="stylesheet" href="css1.css" /> --> <style> @import url("css1.css"); </style> <!-- 这个和上面链接写法作用一样 --> </head> <body> <!-- 外部样式： 1.定义css资源文件 2.在head标签内，定义link标签，引入外部的资源文件 --> <div>hello</div> </body> </html>4.css语法
格式：
选择器{
属性名1：属性值1；
属性名1：属性值2;
...
}
选择器：筛选具有相似特征的元素
注意：每一对属性需要使用；隔开，最后一对属性可用不加；5.选择器：筛选具有相似特征的元素
1）分类：1.1基础选择器（id选择器，元素选择器，类选择器）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标签</title> <style> #div1{ color: red; } div{ color: green; } .cls1{ color: blue; } </style> </head> <body> <!-- 基础选择器： 1.id选择器：选择器具体的id属性值的元素,建议在一个html页面中id值唯一 语法：#id属性值{} 2.元素选择器：选择具有相同标签名称的元素 语法：标签名称{} 注意：id选择器优先级高于元素选择器 3.类选择器：选择具有相同的class属性值的元素 语法：.class属性值{} 注意：类选择器优先级高于元素选择器 --> <div id="div1">hello</div> <div>HELLO</div> <p class="cls1">你好</p> </body> </html>1.2扩展选择器：
1）选择所有元素：
语法：*{}
2）并集选择器：
语法：选择器1，选择器2{}
3）子选择器：筛选选择器1元素下的选择器2元素
语法：选择器1 选择器2{}
4）父选择器：筛选选择器2的父元素选择器1
语法：选择器1 > 选择器2{}
5）属性选择器：选择元素名称，属性名=属性值的元素
语法：元素名称[属性名=“属性值”]{}
6）伪类选择器：选择一些元素具有的状态
语法：元素：状态{}
如：<a>
状态：
link：初始化的状态
visited：被访问过的状态
active：正在访问的状态
hover：鼠标悬浮状态<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标签</title> <style> /* 子类选择器 */ div p{ color: red; } /* 父类选择器 :让div有边框*/ div > p{ border: 1px solid; } /* 属性选择器 */ input[type='text']{ border: 5px solid; } /* 伪类选择器 */ /* 初始化状态 */ a:link{ color: #FF0000; } /* 鼠标悬浮状态 */ a:hover{ color: #00FFFF; } /* 正在访问的状态 */ a:active{ color: blue; } /* 被访问过的状态 */ a:visited{ color: chartreuse; } </style> </head> <body> <div> <p>hello</p> </div> <p>HELLO</p> <!-- 属性选择器 --> <input type="text" /> <!-- 伪类选择器 --> <a href="#">百度点我</a> </body> </html>6.属性
1）字体，文本
font-size：字体大小
color：文本颜色
text-align：对其方式
line-height：行高
2）背景：background
3）边框：border：设置边框，符合属性
4）尺寸
width：宽度
height：高度<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标签</title> <style> p{ color: #00FFFF; font-size: 30px; text-align: center; line-height: 200px; /* 边框 */ border: 1px solid brown; } div{ border: 1px solid #00FFFF; /* 尺寸 */ height: 200px; width: 200px; /* 背景 */ background: url(imag/1.jpg) no repeat center; } </style> </head> <body> <p>世界你好</p> <div>你好</div> </body> </html>5）盒子模型：控制布局
margin：外边距
padding：内边距
默认情况下内边距会影响整个盒子的大小
box-sizing:border-box；设置盒子的属性，让width和height就是最终盒子的大小
float：浮动（left和right）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标签</title> <style> div{ border: 1px solid red; width: 100px; } .div1{ width:100px; height: 100px; /* 外边距 */ /* margin:50px; */ } .div2{ width:200px; height:200px; padding: 50px; /* 设置盒子的属性，让width和height就是最终盒子的大小 */ box-sizing: border-box; } .div3{ float: left; } .div4{ float: left; } .div5{ float: right; } </style> </head> <body> <div class="div2"> <div class="div1"></div> </div> <div class="div3">aaa</div> <div class="div4">bbb</div> <div class="div5">ccc</div> </body> </html>
2055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
