传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

[学习交流] 【成都校区】

© 一抹曙光 初级黑马   /  2019-1-10 09:17  /  12 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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的语法完成查询

分享至 : QQ空间
收藏

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /5 下一条