# 今日内容
1. web概念概述
2. HTML
## web概念概述
* JavaWeb:
* 使用Java语言开发基于互联网的项目
* 软件架构:
1. C/S: Client/Server 客户端/服务器端
* 在用户本地有一个客户端程序,在远程有一个服务器端程序
* 如:QQ,迅雷...
* 优点:
1. 用户体验好,例如玩游戏。
* 缺点:
1. 开发、安装,部署,维护 麻烦
2. B/S: Browser/Server 浏览器/服务器端
* 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
* 优点:
1. 开发、安装,部署,维护 简单
* 缺点:
1. 如果应用过大,用户的体验可能会受到影响
2. 对硬件要求过高
* B/S架构详解
* 资源分类:
1. 静态资源:
* 使用静态网页开发技术发布的资源。
* 特点:
* 所有用户访问,得到的结果是一样的。
* 如:文本,图片,音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态资源
2. 动态资源:
* 使用动态网页及时发布的资源。
* 特点:
* 所有用户访问,得到的结果可能不一样。
* 如:jsp/servlet,php,asp...
* 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
* 我们要学习动态资源,必须先学习静态资源!
* 静态资源:
* HTML:用于搭建基础网页,展示页面的内容
* CSS:用于美化页面,布局页面
* JavaScript:控制页面的元素,让页面有一些动态的效果
## HTML
1. 概念:是最基础的网页开发语言
* Hyper Text Markup Language 超文本标记语言
* 超文本:
* 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.
* 标记语言:
* 由标签构成的语言。<标签名称> 如 html,xml
* 标记语言不是编程语言
2. 快速入门:
* 语法:
1. html文档后缀名 .html 或者 .htm
2. 标签分为
1. 围堵标签:有开始标签和结束标签。如 <html> </html> 。
2.自闭合标签。<br/> 开始结束在一起。
3. 标签可以嵌套。但是需要正确嵌套。
4. 开始标签中还可以定义属性。属性是由键值对构成,值需要用引号(单引号,双引号都可以);
5. html标签不区分大小写,建议小写。
<!DOCTYPE html> H5特别标记
<html>
<head>
<title>这是标题书写位置</title>
</head>
<body>
<font color = "red">HELLO WORLD</font> <br/>
<font color = "blue">HELLO WORLD</font>
</body>
<html>
效果图
3. 标签学习
1.文件标签。构成html最基本的标签
html: html根标签。
head: 头标签。用于指定html文档的一些属性;引入外部的资源。
title:
body :体标签
meta 标签,用以说明主页制作所使用的文字以及语言
<!DOCTYPE html> html5中定义该文档是html文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!--用以说明主页制作所使用的文字以及语言-->
<title>Title</title>
</head>
<body>
</body>
</html>
2.文本标签,和文本相关的标签
<!--注释内容-->
标题标签,h1 最大,h6最小
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<p> 段落标签
<br/> 换行标签
<hr> 一条水平直线
属性: color 颜色
width 宽度
size 高度
align :对齐方式
center :居中
left:左对齐
right:右对齐
<b> 字体加粗
<i> 字体斜体
<font> 字体标签
属性:color 颜色
size 字体大小
face 字体
属性定义:
color :
方式1:英文单词: red ,green,blue
方式2:rgb(红值1,绿值2,蓝值3) 值的范围:0~255 如rgb(0,0,255)表示蓝色。通过配比来
方式3:#红值绿值蓝值 值的范围:00-ff之间。 如:#00FF00 表示绿色
width:
数值 width='20' 数值的单位是px,像素
数值% :占比相对于父元素的比例
3.图片标签
./代表当前目录。默认可以不写,即 ./image 和image是一个意思
<img src="./image/a.jpg">
<img src="../image/a.jpg">
4 列表标签
有序列表 ol order list 显示时会有序号 type默认为1 2 3 4.。。
<ol type="a">
<li>第一部</li>
<li>第二部</li>
<li>第三部</li>
<li>第四部</li>
</ol>
无序列表 显示时无序号
<ul>
<li>第一部</li>
<li>第二部</li>
<li>第三部</li>
<li>第四部</li>
</ul>
5 链接标签
<!--在本页面打开 -->
<a href="http://www.baidu.com" target="_self">点我</a>
<!--新开一个页面用于展示-->
<a href="http://www.baidu.com" target="_blank">点我</a>
<!--链接本地资源 -->
<a href="./jvm.png" >点我</a>
<!--绑定图片链接-->
<a href="http://www.baidu.com"> <image src="./jvm.png"></a>
6 div 和 span
div 标签: 每一个div占满一整行。这种叫块级标签。
span 标签:文本信息在一行展示,行内标签 内联标签
7 语义标签 html5为了提高程序的可读性,提供了一些标签
<header></header>
<footer></footer>
8表格标签
table :定义表格
border:边框
cellpadding 定义内容与表格单元格之间的距离
cellspacing 定义单元格之间的距离。如果指定为0,则相邻的两个单元格的边就成了一条公共的线
bgcolor :背景色
align:对齐方式
tr: 定义行
td: 定义单元格
colspan 合并列
rowspan 合并行
th: 定义表头单元格
<caption>表格标题
<thead> 表格的头部分
<tbody> 表示表格的体部分
<tfoot> 表示表格的尾部分
表单
概念: 用户采集用户输入的数据。用于和服务器进行交互。
form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围。
属性:
action:指定提交数据的URL;
method: 指定提交方式
分类 一共有7种,其中post和get常见。
get:请求参数会在地址栏中进行显示。会封装到请求行中(http协议讲解)
请求参数的大小是有限制的。
不太安全。
post:
请求参数不会再地址栏中显示。
请求参数的大小没有限制
较为安全
在form标签内的input标签中的name中的数据会被提交。因此一定要有name属性
input 可以通过type属性的取值来展示不同的效果
type="text" 文本输入框
type="password" 密码输入框
placeholder="如果需要提示,可以使用这个属性",当输入框发生改变,会自动清空提示
type = "radio" 单选框
1.要想多个单选框实现单选的效果,则多个单选框的name需要是一个值。
2.一般会给每一个单选框提供value属性,指定其被选中后被提交的值。
提交的时候提交的就是value值
3.check属性 ,可以指定默认
<hr>默认选中男
男<input type="radio" name="sex" value="male" checked><br/>
女<input type="radio" name="sex" value="female">
<hr>
type="checkbox"
一般会给每一个单选框提供value属性,指定其被选中之后提交的值。
check属性可以指定默认
label :指定输入项的文字描述信息。主要for属性会和input的id属性值对应,如果对应,则当我们点击lable区域的时候,input输入框会获得焦点。
如: <label for="pname"><input id="pname"type="text" name="name" placeholder="请输入姓名"> <label>
select 下拉列表
textArea 文本域