JavaWeb技术：html、css

JavaWeb基础知识

软件架构

C/S：Client/Server 客户端/服务器端

B/S: Browser/Server 浏览器/服务器端

B/S的资源分类

静态资源：使用静态网页开发技术发布的资源

动态资源

HTML:用于搭建基础网页，展示页面的内容

语法：

标签学习

文件标签

文本标签

图片标签

列表标签

链接标签

表格标签

语义化标签

form标签：用于定义表单

请求项标签input

label标签

select标签

textarea标签

CSS：页面美化和布局控制

css与html结合方式

内联样式

内部样式

外部样式（2种方法）

选择器：筛选具有相似特征的元素

基础选择器

扩展选择器

常用属性

JavaWeb基础知识

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

软件架构

C/S：Client/Server 客户端/服务器端

在用户本地有一个客户端程序，在远程有一个服务器端程序
优点：用户体验好
缺点：
- 开发、安装，部署，维护麻烦

B/S: Browser/Server 浏览器/服务器端

只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程
优点
- 开发、安装，部署，维护简单
缺点
- 如果应用过大，用户的体验可能会受到影响
- 对硬件要求过高

B/S的资源分类

静态资源：使用静态网页开发技术发布的资源

所有用户访问，得到的结果是一样的
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
例如：html、css、js

动态资源

使用动态网页及时发布的资源
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
例如:jsp、servlet、asp

HTML:用于搭建基础网页，展示页面的内容

Hyper Text Markup Language 超文本标记语言

语法：

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

标签学习

文件标签

html:html文档的根标签
head：头标签。用于指定html文档的一些属性。引入外部的资源
title：标题标签。
body：体标签
<!DOCTYPE html>：html5中定义该文档是html文档

文本标签

注释：
<h1> to <h6>：标题标签（自带加粗、换行）
<p>：段落标签（自带换行）
<br>：换行标签
<hr>：展示一条水平线
<b>：字体加粗
<i>：字体斜体
<font>:字体标签
<center>:文本居中

示例代码：古诗词展示

<body>
<h1>诗词赏析</h1>
<hr>
<center>
<h3>静夜思</h3>
<i><p>唐 &nbsp;&nbsp;李白</p></i>
<p><b>床前明月光，疑是地上霜。</b></p>
<p><b>举头望明月，低头思故乡。</b></p>
</center>
<hr>
</body>

图片标签

img：展示图片
- src：指定图片的位置
- alt：如果无法显示图像，浏览器将显示替代文本

列表标签

有序列表：ol、li
无序列表：ul、li

链接标签

a:定义一个超链接
- href：指定访问资源的URL(统一资源定位符)
- target：指定打开资源的方式
  - _self:默认值，在当前页面打开
  - _blank：在空白页面打开

示例代码：列表、图片超联接练习

<body>
<h1>列表、图片、超链接练习</h1>
<center>
<table><tr><td><ul><li>A</li><li>B</li><li>C</li></ul></td><td><ol><li>a</li><li>b</li><li>c</li></ol></td></tr><tr><td><img src="img/1.jpg"  alt="王宝钏" width="150"></td><td><img src="img/2.jpg"  alt="杨玉环" width="150"></td></tr><tr><td><a href="http://www.baidu.com" target="_self">百度</a></td><td><a href="https://www.sohu.com" target="_blank">搜狐</a></td></tr>
</table>
</center></body>

div标签：每一个div占满一整行。块级标签

span标签：文本信息在一行展示，行内标签内联标签

表格标签

table：定义表格
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
- bgcolor：背景色
tr：定义行
td：定义单元格
- colspan：合并列
- rowspan：合并行
th：定义表头单元格

thead、tbody、tfoot:在其内部再定义行和列

<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分

示例代码：功课表

<head><meta charset="UTF-8"><title>html练习</title><style>td{width: 80px;height: 30px;}</style>
</head>
<body>
<h1>功课表练习</h1>
<table border="1px " cellpadding="2px" cellspacing="1px"><thead><tr><th>项目</th><th colspan="4">上课</th><th colspan="4">休息</th></tr><tr><th>星期</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th><th>周日</th></tr></thead><tbody><tr><td rowspan="4">上午</td><td></td><td></td><td></td><td></td><td></td><td></td><td rowspan="4">休息</td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td rowspan="2">下午</td><td></td><td></td><td></td><td></td><td></td><td></td><td rowspan="2">休息</td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody><tfoot><tr><td colspan="8">学生姓名：</td></tr></tfoot>
</table>
</body>

语义化标签

html5中为了提高程序的可读性，提供了一些标签。（其实是一个div）
<header>：页眉
<footer>：页脚

表单

用于采集用户输入的数据的。用于和服务器进行交互

form标签：用于定义表单

action：指定提交数据的URL
method:指定提交方式常用post、get

post与get

post:请求参数不会在地址栏中显示，会封装在请求体中，请求参数大小没限制，较为安全

get：请求参数会在地址栏显示，会封装在请求行中，请求参数大小有限制，不太安全

请求项标签input

type：可以通过type属性值，改变元素展示的样式
- text：文本输入框，默认值
- placeholder：指定输入框的提示信息
- password：密码输入框
- radio:单选框
- checkbox：复选框
- file：文件选择框
- hidden：隐藏域，用于提交一些信息。
- 按钮
  - submit：提交按钮。可以提交表单
  - button：普通按钮
  - image：图片提交按钮
    - src属性指定图片的路径

label标签

指定输入项的文字描述信息

label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

select标签

下拉列表

子元素：option标签，指定列表项

textarea标签

文本域

cols：指定列数，每一行有多少个字符
rows：默认多少行

示例代码：用户注册

<body>
<h1>input练习：用户注册</h1>
<hr/>
<h3>用户注册</h3>
<form action="###" method="post"><label for="input1">姓名：</label> <input type="text" name="username" id="input1"><br/><br/><label for="input2">设置密码</label><input type="password" name="pwd" id="input2"><br/><br/>性别：<label for="input3">男</label> <input type="radio" name="sex" value="man" id="input3"><label for="input4">女</label> <input type="radio" name="sex" value="woman" id="input4"><br/><br/>爱好：<label for="input5">吃</label><input type="checkbox" name="hobby" value="eat" id="input5" ><label for="input6">喝</label><input type="checkbox" name="hobby" value="he" id="input6" ><label for="input7">玩</label><input type="checkbox" name="hobby" value="play" id="input7" ><label for="input8">乐</label><input type="checkbox" name="hobby" value="le" id="input8" ><br/><br/><label for="select">城市：</label><select id="select" name="chengshi"><option value="tj">天津</option><option value="bj">北京</option><option value="sh">上海</option></select><br/><br/><label for="are">自我介绍：</label><textarea cols="25" rows="5" name="aaa" id="are"></textarea><br/><br/><input type="submit" value="提交">
</form>
</body>

CSS：页面美化和布局控制

Cascading Style Sheets 层叠样式表

好处：

功能强大
将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率

css的语法

选择器 {
                属性名1:属性值1;
                属性名2:属性值2;
                ...
            }

css与html结合方式

内联样式

在标签内使用style属性指定css代码

<div style="color: red">内联样式</div>

内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码

<head><meta charset="UTF-8"><title>练习</title><style>#div1{color: blue;}</style></head>
<body>
<div id="div1">内部样式</div>
</body>

外部样式（2种方法）

定义css资源文件

在head标签内，定义link标签，引入外部的资源文件

<!--a.css-->
#div2{color: green;
}
<!--h_1.html（方法1）-->
<head><meta charset="UTF-8"><title>练习</title><link href="../css/a.css" rel="stylesheet">
</head>
<body>
<div id="div2">外部样式</div>
</body>
<!--h_1.html（方法2）-->
<head><meta charset="UTF-8"><title>练习</title><style>@import "../css/a.css";</style>
</head>
<body>
<div id="div2">外部样式</div>
</body>

选择器：筛选具有相似特征的元素

基础选择器

id选择器：选择具体的id属性值的元素
- 语法：#id属性值{}
元素选择器：选择具有相同标签名称的元素
- 语法：标签名称{}
类选择器：选择具有相同的class属性值的元素
- 语法：.class属性值{}

优先级：ID选择器 > 类选择器 > 元素选择器相同优先级会覆盖

扩展选择器

选择所有元素语法： *{}
并集选择器语法：选择器1,选择器2{}
子选择器：筛选选择器1元素下的选择器2元素语法：选择器1 选择器2{}
父选择器：筛选选择器2的父元素选择器1 语法：选择器1 > 选择器2{}
属性选择器：选择元素名称，属性名=属性值的元素语法：元素名称[属性名="属性值"]{}
伪类选择器：选择一些元素具有的状态语法：元素:状态{}

例如：<a>的状态

link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态

示例代码

<head><meta charset="UTF-8"><title>练习</title>
<style>/*设置div和p的共同属性*/div,p{color: red;}/*设置div中p的属性（子选择器）*/div p{color: blue;}/* 设置p的上层元素div（父选择器）*/div>p{border: black 1px solid;}/*设置属性type=text的input元素 属性选择器*/input[type="text"]{border: black 5px solid;}/*伪选择器*/a:link{color: green;}
</style>
</head>
<body>
<div><p>学习css</p>
</div>
<p>学习java</p>
<div>学习c</div>
<input type="text"><br>
<input type="password"><br>
<a href="#">链接</a>
</body>

常用属性

1. 字体、文本

font-size：字体大小
color：文本颜色
text-align：对其方式
line-height：行高

2. 背景

background：

3. 边框

border：设置边框，符合属性

4. 尺寸

width：宽度
height：高度

5. 盒子模型：控制布局

margin：外边距
padding：内边距
float：浮动 (可以做到文字包裹图片)
- left
- right

默认情况下内边距会影响整个盒子的大小

box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小

水平居中：margin: auto;