|
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的语法完成查询
| 
收藏
淘帖
踩
