HTML web概念概述: JavaWeb:
* 使用Java语言开发基于互联网的项目 软件架构:
1. C/S:Client/Server 客户端/服务器端 2. B/S:Browser/Server 浏览器/服务器端 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. 标签可以嵌套:
需要正确嵌套,不能你中有我,我中有你
错误:<a><b></a></b>
正确:<a><b></b></a>
4. 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
5. html的标签不区分大小写,但是建议使用小写 3. 标签学习:
1. 文件标签:构成html最基本的标签
*html:html文档的根标签
* head:头标签。用于指定html文档的一些属性。引入外部的资源
* title:标题标签。
* body:体标签
*<!DOCTYPE html>:html5中定义该文档是html文档
2. 文本标签:和文本有关的标签
* 注释:<!-- 注释内容 -->
*<h1> to <h6>:标题标签
*h1~h6:字体大小逐渐递减
*<p>:段落标签
*<br>:换行标签
*<hr > :展示一条水平线
*属性:
*color:颜色
*width:宽度
*size:高度
*align:对其方式
*center:居中
*left:左对齐
*right:右对齐
*<b>:字体加粗
*<i>:字体斜体
*<font>:字体标签
*<center>:文本居中
*属性:
*color:颜色
*size:大小
*face:字体
* 属性定义:
*color:
1. 英文单词:red,green,blue
2. rgb(值1,值2,值3):值的范围:0~255 如 rgb(0,0,255)
3. #值1值2值3:值的范围:00~FF之间。如: #FF00FF
*width:
1. 数值:width='20' ,数值的单位,默认是 px(像素)
2. 数值%:占比相对于父元素的比例
3. 图片标签:
*img:展示图片
*属性:
*src:指定图片的位置
* 代码:
<!--展示一张图片 img-->
<imgsrc="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
<!--
相对路径
*以.开头的路径
*./:代表当前目录 ./image/1.jpg
*../:代表上一级目录
<imgsrc="./image/jiangwai_1.jpg">
<imgsrc="../image/jiangwai_1.jpg">
4. 列表标签:
* 有序列表:
*ol:
*li:
* 无序列表:
*ul:
*li:
*有三种方式
*disc实心圆
*square方形
*circle空心圆
5. 链接标签:
* a:定义一个超链接
*属性:
*href:指定访问资源的URL(统一资源定位符)
*target:指定打开资源的方式
*_self:默认值,在当前页面打开
*_blank:在空白页面打开 6. div和span:
*div:每一个div占满一整行。块级标签
* span:文本信息在一行展示,行内标签内联标签
7. 语义化标签:html5中为了提高程序的可读性,提供了一些标签。
1. <header>:页眉
2. <footer>:页脚
8. 表格标签:
* table:定义表格
*width:宽度
*border:边框
*cellpadding:定义内容和单元格的距离
*cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
*bgcolor:背景色
*align:对齐方式
* tr:定义行
*bgcolor:背景色
*align:对齐方式
* td:定义单元格
*colspan:合并列
*rowspan:合并行
* th:定义表头单元格
*<caption>:表格标题
*<thead>:表示表格的头部分
*<tbody>:表示表格的体部分
*<tfoot>:表示表格的脚部分 HTML&CSS 注册页面 <!DOCTYPE html>
<htmllang="ch">
<head>
<metacharset="UTF-8">
<title>案例二_注册页面</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/*定义页面背景*/
body {
background: url("img/timg(2).jpg") no-repeat center;
padding-top: 50px;
}
.yai {
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
margin: auto;
margin-top: 200px;
}
.zuo {
float: left;
margin: 20px;
}
.zuo1 {
font-size: 20px;
color: gold;
}
.zuo2 {
font-size: 20px;
color: #a6a6a6;
}
.zhong {
float: left;
padding-top: 40px;
}
.td1 {
width: 100px;
text-align: right;
height: 45px;
}
.td2 {
padding-left: 50px;
}
#username, #password, #Email, #name, #number, #date, #text {
width: 251px;
height: 32px;
border: 1px solid #a6a6a6;
border-radius: 5px; /*给边框加圆弧*/
padding-left: 10px;
}
#text {
width: 120px;
}
#jpg {
height: 32px;
vertical-align: middle;
}
#zhuce {
width: 120px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
}
.you {
float: right;
margin: 20px;
}
.you a {
color: pink;
}
</style>
</head>
<body>
<!--定义外页yai-->
<div class="yai">
<!--定义注册表左边信息-->
<divclass="zuo">
<pclass="zuo1">新用户注册</p>
<pclass="zuo2">USER REGISTER</p>
</div>
<!--定义注册表中间的信息-->
<divclass="zhong">
<formaction="#" method="post">
<tablewidth="500" align="center">
<tr>
<td class="td1"><labelfor="username">用户名</label></td>
<td class="td2"><inputtype="text" name="username" placeholder="请输入用户名" id="username"></td>
</tr>
<tr>
<td class="td1"><labelfor="password">密码</label></td>
<td class="td2"><inputtype="password" name="password" placeholder="请输入密码" id="password"></td>
</tr>
<tr>
<td class="td1"><labelfor="Email">Email</label></td>
<td class="td2"><inputtype="email" name="Email" placeholder="请输入Email" id="Email"></td>
</tr>
<tr>
<td class="td1"><labelfor="name">姓名</label></td>
<td class="td2"><inputtype="text" name="name" placeholder="请输入真实姓名" id="name"></td>
</tr>
<tr>
<td class="td1"><labelfor="number">手机号</label></td>
<td class="td2"><inputtype="number" name="number" placeholder="请输入您的手机号" id="number"></td>
</tr>
<tr>
<td class="td1">性别</td>
<td class="td2"><inputtype="radio" name="gender" value="man"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td1"><labelfor="date">出生日期</label></td>
<td class="td2"><inputtype="date" name="date" id="date"></td>
</tr>
<tr>
<tdclass="td1"><label for="text">验证码</label></td>
<td class="td2"><inputtype="text" name="text" id="text">
<imgid="jpg" src="img/verify_code.jpg" alt="验证码" width="60">
</td>
</tr>
<tr class="zhuc1">
<td align="center" colspan="2"><inputtype="submit" id="zhuce" value="注册"></td>
</tr>
</table>
</form>
</div>
<!--定义注册表右边的信息-->
<divclass="you">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html> 表单标签 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签_表单项标签</title>
</head>
<body>
<form action="#" method="post">
<label for="username">用户名</label>: <input type="text" name="username" placeholder="请输入用户名" id="username"><br>
密码: <input type="password" name="password" placeholder="请输入密码"><br>
性别: <input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女 <br>
爱好: <input type="checkbox" name="fondness" value="game"> 游戏
<input type="checkbox" name="fondness" value="money"> 钱
<input type="checkbox" name="fondness" value="travel"> 旅游 <br>
图片: <input type="file" src="img/regbtn.jpg"> <br>
隐藏域: <input type="hidden" name="id" value="FBI"> <br>
取色器: <input type="color" name="color"> <br>
生日: <input type="date" name="date"><br>
生日: <input type="datetime-local" name="date"><br>
邮箱: <input type="email" name="email"><br>
年龄: <input type="number" name="age"><br>
省份: <select name="province">
<option value="">--请选择省份--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select> <br>
自我描述: <textarea cols="20" rows="5"></textarea> <br>
<input type="submit" value="登陆"> <br>
<input type="image" src="img/regbtn.jpg">
</form>
</body>
</html>BootstrapBootstrap:
1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
* 框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。
* 好处:
1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2. 响应式布局。
* 同一套页面可以兼容不同分辨率的设备。
2. 快速入门
1. 下载Bootstrap
2. 在项目中将这三个文件夹复制
3. 创建html页面,引入必要的资源文件响应式布局
* 同一套页面可以兼容不同分辨率的设备。
* 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子 * 步骤: 1. 定义容器。相当于之前的table、 * 容器分类: 1. container:两边留白 2. container-fluid:每一种设备都是100%宽度 2. 定义行。相当于之前的tr 样式:row 3. 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目 * 设备代号: 1. xs:超小屏幕 手机 (<768px):col-xs-12 2. sm:小屏幕 平板 (≥768px) 3. md:中等屏幕 桌面显示器 (≥992px) 4. lg:大屏幕 大桌面显示器 (≥1200px)* 注意: 1. 一行中如果格子数目超过12,则超出部分自动换行。 2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。 3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。CSS样式和JS插件1. 全局CSS样式: * 按钮:class="btn btn-default" * 图片: * 图片形状 * <img src="..." alt="..." class="img-rounded">:方形 * <img src="..." alt="..." class="img-circle"> : 圆形 * <img src="..." alt="..." class="img-thumbnail"> :相框 * 表格 * table 无样式表格 * table-bordered 加上下方分割线 * table-hover 加上两侧分割线 * 表单 * 给表单项添加:class="form-control" 2. 组件: * 导航条 * 分页条3. 插件: * 轮播图XML1. 概念:Extensible Markup Language 可扩展标记语言 * 可扩展:标签都是自定义的。 <user> <student> * 功能 * 存储数据 1. 配置文件 2. 在网络中传输 * xml与html的区别 1. xml标签都是自定义的,html标签是预定义。 2. xml的语法严格,html语法松散 3. xml是存储数据的,html是展示数据 * w3c:万维网联盟2. 语法:
*基本语法:
1. xml文档的后缀名 .xml
2. xml第一行必须定义为文档声明
3. xml文档中有且仅有一个根标签
4. 属性值必须使用引号(单双都可)引起来
5. 标签必须正确关闭
6. xml标签名称区分大小写 组成部分:
1. 文档声明
1. 格式:<?xml 属性列表 ?>
2. 属性列表:
*version:版本号,必须的属性
*encoding:编码方式。告知解析引擎当前文档使用的字符集,默认值:ISO-8859-1
*standalone:是否独立
*取值:
*yes:不依赖其他文件
*no:依赖其他文件
2. 指令(了解):结合css的
*<?xml-stylesheet type="text/css" href="a.css" ?>
3. 标签:标签名称自定义的
*规则:
*名称可以包含字母、数字以及其他的字符
*名称不能以数字或者标点符号开始
*名称不能以字母 xml(或者 XML、Xml 等等)开始
*名称不能包含空格
4. 属性:
id属性值唯一
5. 文本:
*CDATA区:在该区域中的数据会被原样展示
*格式: <![CDATA[ 数据]]>
* 约束:规定xml文档的书写规则
* 作为框架的使用者(程序员):
1. 能够在xml中引入约束文档
2. 能够简单的读懂约束文档
* 分类:
1. DTD:一种简单的约束技术
2. Schema:一种复杂的约束技术
* DTD:
*引入dtd文档到xml文档中
*内部dtd:将约束规则定义在xml文档中
*外部dtd:将约束的规则定义在外部的dtd文件中
*本地:<!DOCTYPE 根标签名 SYSTEM"dtd文件的位置">
*网络:<!DOCTYPE 根标签名 PUBLIC"dtd文件名字" "dtd文件的位置URL"> 3. 解析:操作xml文档,将文档中的数据读取到内存中
* 操作xml文档
1. 解析(读取):将文档中的数据读取到内存中
2. 写入:将内存中的数据保存到xml文档中。持久化的存储
* 解析xml的方式:
1. DOM:将标记语言文档一次性加载进内存,在内存中形成一颗dom树
*优点:操作方便,可以对文档进行CRUD的所有操作
*缺点:占内存
2. SAX:逐行读取,基于事件驱动的。
*优点:不占内存。
*缺点:只能读取,不能增删改
* xml常见的解析器:
1. JAXP:sun公司提供的解析器,支持dom和sax两种思想
2. DOM4J:一款非常优秀的解析器
3. Jsoup:jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据。
4. PULL:Android操作系统内置的解析器,sax方式的。
* Jsoup:jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据。
* 快速入门:
*步骤:
1. 导入jar包
2. 获取Document对象
3. 获取对应的标签Element对象
4. 获取数据 对象的使用:
1. Jsoup:工具类,可以解析html或xml文档,返回Document
*parse:解析html或xml文档,返回Document
*parse(File in, String charsetName):解析xml或html文件的。
*parse(String html):解析xml或html字符串
*parse(URL url, int timeoutMillis):通过网络路径获取指定的html或xml的文档对象
2. Document:文档对象。代表内存中的dom树
*获取Element对象
*getElementById(String id):根据id属性值获取唯一的element对象
*getElementsByTag(String tagName):根据标签名称获取元素对象集合
*getElementsByAttribute(String key):根据属性名称获取元素对象集合
*getElementsByAttributeValue(String key, Stringvalue):根据对应的属性名和属性值获取元素对象集合
3. Elements:元素Element对象的集合。可以当做 ArrayList<Element>来使用
4. Element:元素对象
1. 获取子元素对象
*getElementById(String id):根据id属性值获取唯一的element对象
*getElementsByTag(String tagName):根据标签名称获取元素对象集合
*getElementsByAttribute(String key):根据属性名称获取元素对象集合
*getElementsByAttributeValue(String key, Stringvalue):根据对应的属性名和属性值获取元素对象集合
2. 获取属性值
*String attr(String key):根据属性名称获取属性值
3. 获取文本内容
*String text():获取文本内容
*String html():获取标签体的所有内容(包括字标签的字符串内容)
5. Node:节点对象
*是Document和Element的父类 快捷查询方式:
1. selector:选择器
*使用的方法:Elements select(String cssQuery)
*语法:参考Selector类中定义的语法
2. XPath:XPath即为XML路径语言,它是一种用来确定XML(标准通用标记语言的子集)文档中某部分位置的语言
*使用Jsoup的Xpath需要额外导入jar包。
*查询w3cshool参考手册,使用xpath的语法完成查询
|