原子都
原子都

java学习笔记-HTML01

课程相关

内容

0. 前端的学习和目标

  1. 为什么要学习前端的技术

    /*
	后台程序员，肯定会和前端程序员沟通。
	没办法正常开展工作。
	所以要对的基础的前端知识要一个了解。
*/

  2. 前端学习的内容

    /*
	前端三剑客
	先学HTML、CSS、
	后面再学JS
*/

  3. 前端的学习目标

    /*
	了解
	看到能大概读懂，复制一份改改就可以运行
*/

1. 基本概念

1.1 网页

java学习笔记-HTML01_第1张图片

​ 上图中我们是通过浏览器访问网站的，一个网站可以有N多个网页，每个网页可以由Html、CSS、JS这些技术组成。

1.2 HTML概念

HTML(HyperText Markup Language)：超文本标记语言

超文本：比普通文本更强大

标记：就是标签。HTML中基本上所有的内容呈现都是通过标签来实现的。

2014年10月，万维网联盟宣布，经过8年时间的艰苦努力，HTML5 的规范终于制作完成。

HTML4是之前比较主流的HTML版本；目前比较火的版本是HTML5，功能更强大，效果更绚丽。

1.3 标签

HTML 页面是由一系列的元素(Element)组成的，元素是通过标签创建出来的。

标签可以用于设置文本、图片、超链接等等。用<>表示

多数标签是成对出现的。


<h1 >今天是个好日子h1>

1.4 标签的结构

开始标签(Opening tag)：前面的一组尖括号，括号中间是标签的名称。表示元素的开始。

结束标签(Closing tag)：后面的一组尖括号，括号中间元素名之前包含了一个斜杠。表示元素的结束。

标签体（元素内容）：开始标签和结束标签之间的内容，就是标签体，也叫元素内容

标签图示：

java学习笔记-HTML01_第2张图片

效果展示：java学习笔记-HTML01_第3张图片

1.4 标签的属性

标签中还可以拥有属性，标签的附加信息。

属性只能添加到开始标签中。格式为：属性名=“属性值”


<h1 align=“center”>今天是个好日子h1>

图示：

​ java学习笔记-HTML01_第4张图片

标签效果：

java学习笔记-HTML01_第5张图片

2. 快速入门

准备：在Idea中新建一个static Web项目，并在建好的项目下新建一个web文件夹（名字任意）

2.1 实现步骤

java学习笔记-HTML01_第6张图片

2.2 代码

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-入门案例title>
head>


<body>
<h1 align="center">这是我的入门案例h1>
body>
html>

2.4 总结

HTML页面由众多元素组成，元素用标签来表示，使用标签的属性来丰盈标签。

我们要学习的内容：

  1. 掌握各个标签代表的含义
  2. 掌握标签中属性的含义

3. HTML基础语法

3.1 注释

注释用于解释说明程序

格式：

特点:

被注释掉的标签，不会被浏览器解析

3.2 标签

3.2.1 标签的分类

  • 普通标签：

    ，有标签体，标签体可以是其他标签
  • 自闭合标签：
    、
    ，无标签体，通过属性调整标签样式和内容

3.2.2标签的嵌套

外层标签不能是自闭和标签，因为没有标签体。

  • 正确的嵌套格式：

    文本

  • 错误的嵌套格式：

    文本

3.2.3 块级元素和行内元素

  • 块级元素：自己独占一行，该元素后面的内容会被挤到下一行。

  • 行内元素：不独占一行，一行内可以有多个行内元素。

div和span

仅仅是通用的内容容器，没有特殊语义

一般用他们两个实现页面的布局

作为块元素，可以把需要独占一行的内容，放在div中

作为行内元素，如果多个元素需要并列一行显示，每个元素都可以用span包裹。

3.3 属性

属性可以提供一些额外的信息，这些信息不会直接显示在内容中。但可以改变标签的样式或提供数据使用

属性的规范

  • 同一个标签中属性的名称必须唯一
  • 不区分大小写，建议使用小写
  • 属性值可以使用单引号或双引号括起来，但引号一般配合双引号嵌套使用。
  1. 常用的属性
属性名 作用
class 定义元素类名，用来选择和访问特定的元素
id 定义元素唯一标识符，在整个文档中必须是唯一的
name 定义元素名称，主要指的是表单项元素的名称，可以用于提交服务器的表单项的key
value 定义在元素内显示的默认值
style 定义CSS样式，这些样式会覆盖之前设置的样式（第一天简单了解，第二天主要内容）

3.4 特殊字符

在 html 中，像< > ” 是语法本身的一部分。

如果要表示这些符号的本身，就需要使用特殊的表示方式了

常见的特殊符号

等价字符引用 原义字符
< <
> >
" "
' ’
& &
  不换行空格，该空格占据宽度受字体影响明显。
  半角空格，占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。
  全角空格，占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

4. 常用标签

4.1 文本标签

标签名 作用 常用属性
p 表示文本的一个段落
h 表示文档标题，

–

，呈现了六个不同的级别的标题，

级别最高，而
级别最低
hr 表示段落级元素之间的主题转换，一般显示为水平线 size-大小 color-颜色
li 表示（有序/无序）列表里的条目。 放在ul/ol标签内使用
ul 表示一个无序列表，可含多个元素，无编号显示。 type-列表样式(disc实心圆、circle空心圆、square实心方块)
ol 表示一个有序列表，通常渲染为有带编号的列表 type-列表样式(1数字、A或a字母、I或i罗马字符) start-起始位置
em 表示文本着重，一般用斜体显示，语义化 同i
strong 表示文本重要，一般用粗体显示，语义化 同b
font 表示字体，可以设置样式（已过时） size-大小 color 颜色

演示代码：

<body>
    
    <p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。p>
    <p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:p>

    
    <h1>一级标题h1>
    <h2>二级标题h2>
    <h3>三级标题h3>
    <h4>四级标题h4>
    <h5>五级标题h5>
    <h6>六级标题h6>

    
    <hr size="4" color="red"/>

    
    <ul type="circle">
        <li>javaEEli>
        <li>HTMLli>
    ul>

    
    <ol type="1" start="10">
        <li>传智播客li>
        <li>黑马程序员li>
    ol>

    
    <i>我倾斜了i>
    <em>我倾斜了em>
    <br/>

    
    <strong>加粗文本strong>
    <b>加粗文本b>
    <br/>
    
    <font size="5" color="yellow">这是一段文字font>

4.2 图片标签

img标签：可以显示一张图片(本地或网络)

<img src="../img/lyf1.jpg" alt="xxx">

  • 必须属性
    src：这是一个必需的属性，表示图片的地址。

  • 其他属性

    • title：鼠标悬停（hover）时显示文本。
    • alt：图形不显示时的替换文本。
    • height：图像的高度。不指定时默认使用图片的高度。
    • width：图像的宽度。不指定时默认使用图片的宽度。
    • 宽度和高度，只指定一个时，另一个会自动等比例调整。两个都设定，容易让图片变形。

  • 相对路径&绝对路径

    相对路径，相对于当前位置来说，要找的资源在哪里。 ./ 当前目录，../上级目录 ../../……

    绝对路径，一般是相对于项目的资源的根目录，要找的资源在哪里。 /

4.3 超链接

a标签：表示超链接。点击超链接可以跳转到一个页面或打开一个文件等等.

<a href="01案例二：样式演示.html" target="_blank">点我跳转到样式演示a>

相关属性：

  • href属性：表示超链接指向的URL地址。非必选属性。

  • target属性：页面的打开位置

    • _self：当前页打开
    • _blank：新标签页打开

样式相关：

超链接有默认的显示样式，字体颜色、悬停动作、下划线等。可以通过CSS样式修改掉

锚点

  • 作用：快速定位到页面中指定位置

    定义锚点：name属性：设置锚点名 name="anchor"

    使用锚点：href属性：使用锚点href='#锚点名'

相关代码

<head>
    <meta charset="UTF-8">
    <title>超链接标签演示title>
    <style>
        a{
            /*去掉超链接的下划线*/
            text-decoration: none;
            /*超链接的颜色*/
            color: black;
        }

        /*鼠标悬浮的样式控制*/
        a:hover{
            color: red;
        }
    style>
head>
<body>
    
    <a href="01案例二：样式演示.html" target="_blank">点我跳转到样式演示a>  <br/>
    <a href="http://www.itcast.cn" target="_blank">传智播客a>  <br/>
    <a href="http://www.itheima.com" target="_self">黑马程序员a>  <br/>
    <a href="http://www.itheima.com" target="_blank"><img src="../img/itheima.png" width="150px" height="50px"/>a>


    
    <br>
    <a href="#achor3" > 跳转a>
    1. 小时候 <br>
    <a href=""  name="achor1">
        <img src="../img/lyf1.jpg" alt="">a> <br>
    <br>
    2. 初出道
    <br>
    <a href="" name="achor2"> <img src="../img/lyf1.jpg" alt="">a> <br>

    3. 现状 <br>
    <a href=""
       name="achor3"> <img src="../img/lyf1.jpg" alt="">a> <br>
    
     
    <a href="mailto:[email protected]" target="_blank">发送邮件a>  <br/>
body>

4.4 表单标签

收集用户填写的数据。

标签名 作用 备注
form 表示表单，是用来收集用户输入信息并向 Web 服务器提交的一个页面标签元素

举例：

//表单标签
<form action="#" method="  " autocomplete="  ">
    //表单项元素
    
    <button type="  ">在按钮显示的文本内容button>
    ...
form>

4.4.1 表单和表单项的关系

表单中收集用户输入信息的选项称为一个表单项
如果表单标签中没有任何表单项，该表单就没有任何意义；
表单项如果不写在表单中，表单项收集的用户输入数据将不能被提交到后台。

4.4.2表单的属性

  • <form action="#" method="  " autocomplete="  ">form>
属性名 作用 备注
action 处理此表单信息的Web服务器的URL地址 # 表示请求到当前页面
method 提交此表单信息到Web服务器的方式 可能的值有get和post，默认为get
autocomplete 自动补全，根据历史输入记录自动提示补全 HTML5

举例：


<form action="#" method="get">form>


<form action="#" method="post">form>

4.4.3 表单提交方式

method属性用于表示当前表单提交的方式，有两个取值：post和get

  • post：对应 HTTP 中POST ；表单数据会包含在请求体中，发送到后台服务器。

  • get：对应 HTTP 中GET；表单数据会作为参数添加在 action 属性的URL中，明文提交后台服务器。

    • 参数和URL用 ‘?’ 作为分隔符
    • 表单项的name值作为key，用户输入的值作为value，以key=value的形式拼接进URL
    • 多组参数之间使用&拼接
    • eg：http://localhost?username=zhangsan&password=123456

  • GET与POST对比：

    地址栏可见 数据安全 数据大小
    GET 参数可见 不安全 有限制（取决于浏览器）
    POST 参数不可见 相对安全 无限制

    http ==> https

  • 演示代码

    

<form action="#" method="post" autocomplete="off">
    用户名：<input type="text" name="username"/>
    <button type="submit">提交button>
form>


<form action="#" method="post" autocomplete="off">
    用户名：<input type="text" name="username"/>
    <button type="submit">提交button>
form>

4.5 表单项标签

表单中一个个收集用户输入信息的选项，称为表单项。

表单项需要在表单中，表单项中用户输入的数据才会在表单提交的时候被提交到后台服务器

常用表单项：

表单项标签： 解释说明其他表单项的（input）
表单项标签： 多种类型数据
按钮标签：


<form action="#" method="post" autocomplete="off">
    <label for="username1">用户名：label>
    
    <input type="text" id="username1" name="username2" value="" placeholder=" 请在此处输入用户名"
           required/>
    <input type="text"  name="password" value="" placeholder=" 请在此处输入密码"/>

    
    <button type="submit">提交button>

    
    <button type="reset">重置button>
    
    <button type="button">按钮button>
form>

4.5.1 不同的表单项input:type

type属性值 作用 细节
text 单行文本输入框
password 密码框，自动脱敏
radio 单选框 在同一个”单选按钮组“中，所有选项的 name 属性使用同一个值，否则不能互斥
必须为每个选项的value属性赋值，该值用于提交到后台
每一个选项可以书写说明性文字，用于展示给用户查看
一个单选选项组中，同一时间只有一个选项被选中。
某个选项可以使用checked属性，表示缺省选择。
checkbox 多选框 在同一个”多选选项组“中，所有选项的 name 属性使用同一个值
必须为每个选项的value属性赋值，该值用于提交到后台
一个多选选项组中，同一时间可以有多个选项被选中。
选中多个值时，所有选项的value值会构成一个数组后提交到Web服务器
每一个选项可以书写说明性文字，用于展示给用户查看
某个选项可以使用checked属性，表示缺省选择。
datetime-local HTML5 用于输入日期时间的控件 不包含时区
number HTML5 用于输入浮点数的控件
hidden 隐藏域 此控件用户在页面上不可见，但它的值会被提交到服务器，用于传递隐藏值ID
****** ************************* ********************************************
reset 重置表单 同
submit 提交表单 同
button 普通按钮，点击无反应 同
****** ************************* ********************************************
image 提交表单的图片表单项 点击会复发表单提交
file 此控件可以让用户选择文件，用于文件上传。 使用 accept 属性可以定义控件可以选择的文件类型。
email HTML5 用于电子邮件输入框 H5，有简单校验
date HTML5 用于输入日期的控件 年，月，日，不包括时间
time HTML5 用于输入时间的控件 不含时区
range HTML5 用于输入不精确值控件 max-规定最大值
min-规定最小值
step-规定步进值
value-规定默认值
search HTML5 用于输入搜索字符串的单行文本字段 可以点击x清除内容
tel HTML5 用于输入电话号码的控件
url HTML5 用于编辑URL的字段 可以校验URL地址格式

java学习笔记-HTML01_第7张图片

  • button标签的type属性

    属性值 作用 备注
    submit 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。 同
    reset 此按钮重置所有组件为初始值。 同/>
    button 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。 同

  • 其他表单项标签

    标签名 作用 备注
    select 下拉选项表单项 与option配合使用
    option select的子标签，表示一个选项 与select配合使用
    textarea 文本域，多行文本输入框 rows表示行高度， cols表示列宽度（字符为单位）
    optgroup option的分组标签 与option配合实用

4.5.2 演示代码


<form action="#" method="get" autocomplete="off">
    <label for="username">用户名：label>
    <input type="text" id="username" name="username"/>  <br/>

    <label for="password">密码：label>
    <input type="password" id="password" name="password"/> <br/>

    <label for="email">邮箱：label>
    <input type="email" id="email" name="email"/> <br/>

    <label for="gender">性别：label>
    <input type="radio" id="gender" name="gender" value="men"/>男
    <input type="radio" name="gender" value="women" checked/>女
    <input type="radio" name="gender" value="other"/>其他<br/>

    <label for="hobby">爱好：label>
    <input type="checkbox" id="hobby" name="hobby" value="music" checked/>音乐
    <input type="checkbox" name="hobby" value="game"/>游戏 <br/>

    <label for="birthday">生日：label>
    <input type="date" id="birthday" name="birthday"/> <br/>

    <label for="time">当前时间：label>
    <input type="time" id="time" name="time"/> <br/>

    <label for="insert">注册时间：label>
    <input type="datetime-local" id="insert" name="insert"/> <br/>

    <label for="age">年龄：label>
    <input type="number" id="age" name="age"/> <br/>

    <label for="range">心情值(1~10)：label>
    <input type="range" id="range" name="range" min="1" max="10" step="1"/> <br/>

    <label for="search">可全部清除文本：label>
    <input type="search" id="search" name="search"/> <br/>

    <label for="tel">电话：label>
    <input type="tel" id="tel" name="tel"/> <br/>

    <label for="url">个人网站：label>
    <input type="url" id="url" name="url"/> <br/>

    <label for="file">文件上传：label>
    <input type="file" id="file" name="file"/> <br/>

    <label for="hidden">隐藏信息：label>
    <input type="hidden" id="hidden" name="hidden" value="itheima"/> <br/>

    
    <input type="submit" value="点我提交">
    
    <input type="image" src="../img/1.svg" alt="提交图片">
    
    <button type="submit">提交button>
    <button type="reset">重置button>
    <button type="button">普通按钮button>
form>

5. 样式&布局(理解)

5.1 div简单布局

div和span都能进行页面布局，比较常用的是div基本布局。可以通过css样式批量修改div的样式。

css样式的基本格式：


<head>
    <style>
        标签名{
            /* 可以为当前标签同时指定多个属性和值，这些属性和样式同时生效 */
            属性名1:属性值1;
            属性名2:属性值2;
            属性名3:属性值3;
            
            /* 一个属性名可以有多个属性值，这是复合属性 */
            属性名4:属性值4 属性值5 属性值6;
        }
    style>
head>

演示代码

<head>
    <meta charset="UTF-8">
    <title>样式演示title>
    <style>
        div{
            /*显示边框*/
            border: 1px solid red;

            /*宽度 占屏幕的60%*/
            width: 60%;

            /*高度 500像素*/
            height: 500px;

            /*边框外边距*/
            margin: auto;
        }
    style>
head>
<body>
    <div>第一个divdiv>
body>

5.2 浮动布局

通过让页面元素像水面上的冰一样漂浮的方式进行布局。通过CSS的属性float进行布局。

5.2.1 浮动布局概念：

float 属性定义了元素往哪个方向浮动。

在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框（不独占一行的特殊块），而不论它本身是何种元素。

生成的块级元素就像漂浮在水上的几个冰块一样，让他们往左浮，他们就统一从左边开始排队；让他们往右浮动，就统一从右开始排队。

如果在一行之上剩余的宽度不足以提供给浮动的元素，那么这个元素会贴着上一个元素的底边，滑至下一行，直到某一行拥有足够的空间为止。

注意：

设置浮动的元素从网页的正常文档流中移除，其他元素保持正常文档流顺序。

5.2.2 float属性值

  • left 元素向左浮动
    right 元素向右浮动
    none 默认值。元素不浮动，相当于不设置浮动，仍存在正常的文档流之中排列。
    inherit 规定应该从父元素继承 float 属性的值

5.2.3 clear属性

clear：清除浮动。规定当前元素的哪一侧不允许其他浮动元素。

设置浮动的元素会总正常的文档流中脱离，按照指定的浮动方向进行排布。所以会出现下面重叠的情况。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KXxa1RPm-1608823860668)(day03_HTML-课堂笔记.assets/1605339568792-1605403696783.png)]

清除footer左侧浮动，即可让footer出现在left的下方。

clear属性值：

  • left 在左侧不允许浮动元素。
  • right 在右侧不允许浮动元素。
  • both 在左右两侧均不允许浮动元素。 此时该元素不再受浮动元素布局影响
  • none 默认值。允许浮动元素出现在两侧。

5.3 text-align：文本对

  • left 左对齐
    center 居中
    right 右对齐

5.4 background：背景

  • background: 颜色 背景色

    值可以是表示颜色的英文。

    ​ eg：red、green、blue

    也可以是RGB颜色的16进制表示形式。

    ​ eg：#FFFF00

  • background: url("") 背景图片

  • background是一个复合属性，可以设置多种类型的背景

    一次性设置所有的背景属性

    background: #00FF00 url(bgimage.gif) no-repeat fixed top;

    也可以拆分成多个背景设置

    background-color 规定要使用的背景颜色。 
background-image 规定要使用的背景图像。
background-repeat 规定如何重复背景图像。 
background-position 规定背景图像的位置。 
background-size 规定背景图片的尺寸。 
background-origin 规定背景图片的定位区域。 
background-clip 规定背景的绘制区域。 
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。

    如果不设置其中的某个值，也不会出问题，比如下面的写法

    background:#ff0000 url('smiley.gif')

    通常建议使用background这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

​

5.5 浮动文本对齐背景色代码

<head>
    <meta charset="UTF-8">
    <title>样式演示title>
    <style>
        /*给div标签添加边框*/
        div{
            border: 1px solid red;
        }

        /*左侧图片的div样式*/
        .left{
            width: 10%;
            float: left;
            height: 600px;
        }

        /*中间正文的div样式*/
        .center{
            width: 25%;
            float: left;
            height: 500px;
        }

        /*右侧广告图片的div样式*/
        .right{
            width: 25%;
            float: left;
            height: 500px;
        }

        /*底部超链接的div样式*/
        .footer{
            /*
                清除浮动效果
                设置当前标签左右是否清除浮动
            */
            /*clear: both;*/
            clear: left;
            /*文本对齐方式*/
            text-align: center;
            /*背景颜色*/
            background: blue;
        }
    style>
head>
<body>
    
    <div>topdiv>

    
    <div>navibardiv>

    
    <div class="left">leftdiv>

    
    <div class="center">centerdiv>

    
    <div class="right">rightdiv>

    
    <div class="footer">footerdiv>
body>

案例一：文本新闻

本案例使用到了文本标签和div简单布局。案例代码：

<head>
    <meta charset="UTF-8">
    <title>新闻文本title>
    <style>
        div{
            /*宽度  60%*/
            width: 60%;

            /*外边距*/
            margin: auto;
        }
    style>
head>
<body>
    <div>
        
  
    
    <div>
        <h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？h1>
    div>

    
    <div>
        <i><font size="2" color="gray">作者：itheima 2088-08-08font>i>
        <hr/>
    div>

    
    <div>
        <h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？h3>
    div>

    
    <div>
        <p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。p>
        <p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:
            <ol>
                <li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。li>
                <li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大li>
                <li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆li>
            ol>
        p>
        <p>说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。p>
        <p><b>一、芝麻分600以上福利之信用购。b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯p>
        <p><b>二、芝麻分600以上福利之信用免押。b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。p>
        <p><b>三、芝麻分600以上福利之国际驾照。b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？p>
        <p>随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？p>
    div>
      div>
body>

案例二：头条页面

思路：先布局，后填充；先留边框，最后去除。

图片标签、超链接，float布局

案例步骤

  1. 创建初始页面，拷贝图片等素材。
  2. 整体布局。
  3. 实现顶部条（图片）。
  4. 实现导航条（图片）。
  5. 实现左侧分享区域（图片）。
  6. 实现中间正文区域（文本+图片）。
  7. 实现右侧广告区域（图片）。
  8. 实现底部页脚（链接）。

案例代码

<head>
    <meta charset="UTF-8">
    <title>头条页面title>
    <style>
        /*给div标签添加边框*/
        /*div{
            border: 1px solid red;
        }*/

        /*左侧图片的div样式*/
        .left{
            width: 20%;
            float: left;
        }

        /*中间正文的div样式*/
        .center{
            width: 60%;
            float: left;
        }

        /*右侧广告图片的div样式*/
        .right{
            width: 20%;
            float: left;
        }

        /*底部超链接的div样式*/
        .footer{
            /*清除浮动效果*/
            clear: both;
            /*文本对齐方式*/
            text-align: center;
            /*背景颜色*/
            background: blue;
        }

        /*超链接的样式控制*/
        a{
            color: white;
            text-decoration: none;
        }
    style>
head>
<body>
    
    <div>
        <img src="../img/j1.png" width="100%"/>
    div>

    
    <div>
        <img src="../img/j2.png" width="100%"/>
        <hr/>
    div>

    
    <div class="left">
        <img src="../img/j3.png" width="100%"/>
    div>

    
    <div class="center">
        <div>
            <h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？h1>
        div>

        
        <div>
            <i><font size="2" color="gray">作者：itheima 2088-08-08font>i>
            <hr/>
        div>

        
        <div>
            <h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？h3>
        div>

        
        <div>
            <p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。p>
            <p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:
            <ol>
                <li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。li>
                <li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大li>
                <li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆li>
            ol>
            <img src="../img/1.jpg" width="100%"/>
            p>
            <p>说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。p>
            <p><b>一、芝麻分600以上福利之信用购。b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯p>
            <p><b>二、芝麻分600以上福利之信用免押。b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。p>
            <img src="../img/2.jpg" width="100%"/>
            <p><b>三、芝麻分600以上福利之国际驾照。b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？p>
            <p>随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？p>
        div>
    div>

    
    <div class="right">
        <img src="../img/ad1.jpg" width="100%"/>
        <img src="../img/ad2.jpg" width="100%"/>
        <img src="../img/ad3.jpg" width="100%"/>
        <img src="../img/ad1.jpg" width="100%"/>
        <img src="../img/ad2.jpg" width="100%"/>
        <img src="../img/ad3.jpg" width="100%"/>
    div>

    
    <div class="footer">
        <a href="#">关于黑马a>  
        <a href="#">帮助中心a>  
        <a href="#">开放平台a>  
        <a href="#">诚聘英才a>  
        <a href="#">联系我们a>  
        <a href="#">法律声明a>  
        <a href="#">隐私政策a>  
        <a href="#">知识产权a>  
        <a href="#">廉政举报a>  
    div>

案例三：注册页面

使用标签

img：图片标签

form：表单及常见表单项

使用样式

div基本布局，居中显示

background：背景图片

实现步骤

1. 创建HTML页面
2. 使用两个div划分区域（顶部 中间）
3. 使用style设置样式
4. 使用form设置表单
5. 实现页面跳转，从案例2跳转到案例3。

案例代码

<head>
    <meta charset="UTF-8">
    <title>注册页面title>
    <style>
        body{
            background: url("../img/bg.png");
        }

        .center{
            /*背景颜色*/
            background: white;
            /*宽度*/
            width: 400px;
            /*文本对齐方式*/
            text-align: center;
            /*外边距*/
            margin: auto;
        }
    style>
head>
<body>
    
    <div >
        <img src="../img/logo.png"/>
    div>

    
    <div class="center">
        <div>注册详情div>
        <hr/>

        
        <form action="#" method="get" autocomplete="off">
            <div>
                <label for="username">姓名：label>
                <input type="text" id="username" name="username" value="" placeholder=" 在此输入姓名" required/>
            div>

            <div>
                <label for="password">密码：label>
                <input type="password" id="password" name="password" value="" placeholder=" 在此输入密码" required/>
            div>

            <div>
                <label for="email">邮箱：label>
                <input type="email" id="email" name="email" value="" placeholder=" 在此输入邮箱" required/>
            div>

            <div>
                <label for="tel">手机：label>
                <input type="tel" id="tel" name="tel" value="" placeholder=" 在此输入手机" required/>
            div>
            <hr/>

            <div>
                <label for="gender">性别：label>
                <input type="radio" id="gender" name="gender" value="men"/>男         
                <input type="radio" name="gender" value="women"/>女         
            div>

            <div>
                <label for="hobby">爱好：label>
                <input type="checkbox" id="hobby" name="hobby" value="music"/>音乐
                <input type="checkbox" name="hobby" value="movie"/>电影
                <input type="checkbox" name="hobby" value="game"/>游戏
            div>

            <div>
                <label for="birthday">出生日期：label>
                <input type="date" id="birthday" name="birthday" value=""/>
            div>

            <div>
                <label for="city">所在城市：label>
                <select id="city" name="city">
                    <option>---请选择所在城市---option>
                    <optgroup label="直辖市">
                        <option>北京option>
                        <option>上海option>
                        <option>广州option>
                        <option>深圳option>
                    optgroup>
                    <optgroup label="省会市">
                        <option>西安option>
                        <option>杭州option>
                        <option>郑州option>
                        <option>武汉option>
                    optgroup>
                select>
            div>
            <hr/>
            <div>
                <label for="desc">个性签名：label>
                <textarea id="desc" name="desc" rows="5" cols="40" placeholder=" 请写下您的与众不同">textarea>
            div>
            <hr/>
            <button type="submit">注册button>
            <button type="reset">重置button>
        form>
    div>
body>

            电影
            游戏
```

你可能感兴趣的:(JavaWeb学习笔记,html,javaweb)

  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
    作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
  • 斟一小组鸡血视频 和自己一起成长
    http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
  • Dockerfile命令详解之 FROM 清风怎不知意 容器化java前端javascript
    许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
    【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • spring mvc @RequestBody String类型参数 zoyation spring-mvcspringmvc
    通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
  • ubuntu安装opencv最快的方法 Derek重名了
    最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
  • 处理标签包裹的字符串，并取出前250字符 周bro 前端javascript开发语言
    //假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
  • h5小游戏定制开发 红匣子实力推荐
    随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
  • 探索Zebra4J：构建高效企业级Web应用的微服务框架 叶准鑫Natalie
    探索Zebra4J：构建高效企业级Web应用的微服务框架ZebraZebra4J/Zebra4Js基于SpringBoot的JavaWeb/Nodejs框架项目地址:https://gitcode.com/gh_mirrors/zebra/Zebra项目介绍在当今快速发展的技术环境中，构建高效、可扩展的企业级Web应用是每个开发团队的追求。Zebra4J作为一款基于SpringBoot的全新微服务
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 非关系型数据库 天秤-white nosql
    一、为什么要用Nosql1.单机MySQL的时代。一个基本的网站访问量一般不会太大，单个数据库完全足够。那时候更多使用的静态网页html，服务器根本没有太大压力。这时候网站的瓶颈是什么？-数据量如果太大，一个机器放不下。-数据量太大需要建立数据的索引（B+Tree），一个服务器内存放不下。-访问量读写混合，一个服务器承受不了。2.memcached缓存+MySQL+垂直拆分（读写分离）。网站80%
  • 基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台 网顺技术团队 成品程序项目javavue.js汽车课程设计springboot
    基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台作者主页网顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式查看下方微信号获取联系方式承接各种定制系统精彩系列推荐精彩专栏推荐订阅不然下次找不到哟Java毕设项目精品实战案例《1000套》感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人文章目录基
  • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
    Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
  • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
    爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
  • 七.正则化 愿风去了
    吴恩达机器学习之正则化（Regularization）http://www.cnblogs.com/jianxinzhou/p/4083921.html从数学公式上理解L1和L2https://blog.csdn.net/b876144622/article/details/81276818虽然在线性回归中加入基函数会使模型更加灵活，但是很容易引起数据的过拟合。例如将数据投影到30维的基函数上，模
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 利用frp实现内网穿透（需要云主机） heiyumiao 网络工具githubwindowslinux
    详细实现教程：https://www.iplaysoft.com/frp.htmlhttps://blog.csdn.net/u013144287/article/details/78589643/项目官网地址：https://github.com/fatedier/frp/releases按照系统下载相应的程序包什么是frp内网穿透工具有很多，其中Frp(FastReverseProxy)是比较
  • word转html制作操作手册,Word文档转换为HTML帮助文档操作手册范本.pdf 想吃草莓干 word转html制作操作手册
    Word文档转换为HTML帮助文档操作手册一、使用到的软件DOC2CHMDreamweaverCS3Helpandmanual4二、操作步骤1.先建立一个工作目录。如hhwork。2.将需要转换的文件复制到此工作目录下。如果是中文文件名，最好将其改为英文文件名。例：现在要将《小神探点检定修信息管理系统使用手册0.3.6.doc》转换为Html格式的帮助文档，首先将此文档复制到hhwork目录下并将
  • WORD批量转换器MultiDoc Converter uolian 工作word
    WORD批量转换器MultiDocConverterhttps://www.52pojie.cn/thread-1318745-1-1.html可批量将doc、docx等文件格式转成doc、docx、pdf、rtf、txt、html、epub等格式。安装包下载地址：https://wws.lanzouj.com/irvVbiz0pkd最终下载文件打包地址（未作成单文件，不确定是否可以直接使用）：h
  • HTML中"bgcolor"与"background-color"的区别 Sardar_ html
    bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
  • scala的option和some 矮蛋蛋 编程scala
    原文地址： http://blog.sina.com.cn/s/blog_68af3f090100qkt8.html 对于学习 Scala 的 Java™ 开发人员来说，对象是一个比较自然、简单的入口点。在 本系列 前几期文章中，我介绍了 Scala 中一些面向对象的编程方法，这些方法实际上与 Java 编程的区别不是很大。我还向您展示了 Scala 如何重新应用传统的面向对象概念，找到其缺点
  • NullPointerException Cb123456 androidBaseAdapter
        java.lang.NullPointerException: Attempt to invoke virtual method 'int android.view.View.getImportantForAccessibility()' on a null object reference     出现以上异常.然后就在baidu上
  • PHP使用文件和目录 天子之骄 php文件和目录读取和写入php验证文件php锁定文件
    PHP使用文件和目录 1.使用include()包含文件 (1)：使用include()从一个被包含文档返回一个值 (2)：在控制结构中使用include()   include_once()函数需要一个包含文件的路径，此外，第一次调用它的情况和include()一样，如果在脚本执行中再次对同一个文件调用，那么这个文件不会再次包含。   在php.ini文件中设置
  • SQL SELECT DISTINCT 语句 何必如此 sql
    SELECT DISTINCT 语句用于返回唯一不同的值。 SQL SELECT DISTINCT 语句 在表中，一个列可能会包含多个重复值，有时您也许希望仅仅列出不同（distinct）的值。 DISTINCT 关键词用于返回唯一不同的值。 SQL SELECT DISTINCT 语法 SELECT DISTINCT column_name,column_name F
  • java冒泡排序 3213213333332132 java冒泡排序
    package com.algorithm; /** * @Description 冒泡 * @author FuJianyong * 2015-1-22上午09:58:39 */ public class MaoPao { public static void main(String[] args) { int[] mao = {17,50,26,18,9,10
  • struts2.18 +json,struts2-json-plugin-2.1.8.1.jar配置及问题！ 7454103 DAOspringAjaxjsonqq
    struts2.18  出来有段时间了！ （貌似是 稳定版）   闲时研究下下！  貌似 sruts2 搭配 json 做 ajax 很吃香！   实践了下下！ 不当之处请绕过！ 呵呵   网上一大堆 struts2+json  不过大多的json 插件 都是 jsonplugin.34.jar   strut
  • struts2 数据标签说明 darkranger jspbeanstrutsservletScheme
    数据标签主要用于提供各种数据访问相关的功能，包括显示一个Action里的属性，以及生成国际化输出等功能 数据标签主要包括： action ：该标签用于在JSP页面中直接调用一个Action，通过指定executeResult参数，还可将该Action的处理结果包含到本页面来。 bean ：该标签用于创建一个javabean实例。如果指定了id属性，则可以将创建的javabean实例放入Sta
  • 链表.简单的链表节点构建 aijuans 编程技巧
    /*编程环境WIN-TC*/ #include "stdio.h" #include "conio.h" #define NODE(name, key_word, help) \  Node name[1]={{NULL, NULL, NULL, key_word, help}} typedef struct node {  &nbs
  • tomcat下jndi的三种配置方式 avords tomcat
    jndi(Java Naming and Directory Interface，Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。命名服务将名称和对象联系起来，使得我们可以用名称 访问对象。目录服务是一种命名服务，在这种服务里，对象不但有名称，还有属性。          tomcat配置
  • 关于敏捷的一些想法 houxinyou 敏捷
    从网上看到这样一句话：“敏捷开发的最重要目标就是：满足用户多变的需求，说白了就是最大程度的让客户满意。” 感觉表达的不太清楚。 感觉容易被人误解的地方主要在“用户多变的需求”上。 第一种多变，实际上就是没有从根本上了解了用户的需求。用户的需求实际是稳定的，只是比较多，也比较混乱，用户一般只能了解自己的那一小部分，所以没有用户能清楚的表达出整体需求。而由于各种条件的，用户表达自己那一部分时也有
  • 富养还是穷养，决定孩子的一生 bijian1013 教育人生
    是什么决定孩子未来物质能否丰盛？为什么说寒门很难出贵子，三代才能出贵族？真的是父母必须有钱，才能大概率保证孩子未来富有吗？-----作者：@李雪爱与自由 事实并非由物质决定，而是由心灵决定。一朋友富有而且修养气质很好，兄弟姐妹也都如此。她的童年时代，物质上大家都很贫乏，但妈妈总是保持生活中的美感，时不时给孩子们带回一些美好小玩意，从来不对孩子传递生活艰辛、金钱来之不易、要懂得珍惜
  • oracle 日期时间格式转化 征客丶 oracle
    oracle 系统时间有 SYSDATE 与 SYSTIMESTAMP； SYSDATE：不支持毫秒，取的是系统时间； SYSTIMESTAMP：支持毫秒，日期，时间是给时区转换的，秒和毫秒是取的系统的。 日期转字符窜： 一、不取毫秒： TO_CHAR(SYSDATE, 'YYYY-MM-DD HH24:MI:SS') 简要说明， YYYY 年 MM   月
  • 【Scala六】分析Spark源代码总结的Scala语法四 bit1129 scala
    1. apply语法   FileShuffleBlockManager中定义的类ShuffleFileGroup，定义：   private class ShuffleFileGroup(val shuffleId: Int, val fileId: Int, val files: Array[File]) { ... def apply(bucketId
  • Erlang中有意思的bug bookjovi erlang
      代码中常有一些很搞笑的bug，如下面的一行代码被调用两次（Erlang beam） commit f667e4a47b07b07ed035073b94d699ff5fe0ba9b Author: Jovi Zhang <[email protected]> Date: Fri Dec 2 16:19:22 2011 +0100 erts:
  • 移位打印10进制数转16进制-2008-08-18 ljy325 java基础
    /** * Description 移位打印10进制的16进制形式 * Creation Date 15-08-2008 9:00 * @author 卢俊宇 * @version 1.0 * */ public class PrintHex { // 备选字符 static final char di
  • 读《研磨设计模式》-代码笔记-组合模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; abstract class Component { public abstract void printStruct(Str
  • 利用cmd命令将.class文件打包成jar chenyu19891124 cmdjar
    cmd命令打jar是如下实现： 在运行里输入cmd，利用cmd命令进入到本地的工作盘符。(如我的是D盘下的文件有此路径 D:\workspace\prpall\WEB-INF\classes) 现在是想把D:\workspace\prpall\WEB-INF\classes路径下所有的文件打包成prpall.jar。然后继续如下操作： cd D: 回车 cd workspace/prpal
  • [原创]JWFD v0.96 工作流系统二次开发包 for Eclipse 简要说明 comsci eclipse设计模式算法工作swing
                           JWFD v0.96 工作流系统二次开发包 for Eclipse 简要说明     &nb
  • SecureCRT右键粘贴的设置 daizj secureCRT右键粘贴
    一般都习惯鼠标右键自动粘贴的功能，对于SecureCRT6.7.5 ，这个功能也已经是默认配置了。 老版本的SecureCRT其实也有这个功能，只是不是默认设置，很多人不知道罢了。 菜单： Options->Global Options ...->Terminal 右边有个Mouse的选项块。 Copy on Select Paste on Right/Middle
  • Linux 软链接和硬链接 dongwei_6688 linux
    1.Linux链接概念Linux链接分两种，一种被称为硬链接（Hard Link），另一种被称为符号链接（Symbolic Link）。默认情况下，ln命令产生硬链接。 【硬连接】硬连接指通过索引节点来进行连接。在Linux的文件系统中，保存在磁盘分区中的文件不管是什么类型都给它分配一个编号，称为索引节点号(Inode Index)。在Linux中，多个文件名指向同一索引节点是存在的。一般这种连
  • DIV底部自适应 dcj3sjt126com JavaScript
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
  • Centos6.5使用yum安装mysql——快速上手必备 dcj3sjt126com mysql
    第1步、yum安装mysql [root@stonex ~]#  yum -y install mysql-server 安装结果： Installed:     mysql-server.x86_64 0:5.1.73-3.el6_5                   &nb
  • 如何调试JDK源码 frank1234 jdk
    相信各位小伙伴们跟我一样，想通过JDK源码来学习Java，比如collections包，java.util.concurrent包。 可惜的是sun提供的jdk并不能查看运行中的局部变量，需要重新编译一下rt.jar。 下面是编译jdk的具体步骤：         1.把C:\java\jdk1.6.0_26\sr
  • Maximal Rectangle hcx2013 max
    Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ones and return its area.   public class Solution { public int maximalRectangle(char[][] matrix)
  • Spring MVC测试框架详解——服务端测试 jinnianshilongnian spring mvc test
    随着RESTful Web Service的流行，测试对外的Service是否满足期望也变的必要的。从Spring 3.2开始Spring了Spring Web测试框架，如果版本低于3.2，请使用spring-test-mvc项目（合并到spring3.2中了）。   Spring MVC测试框架提供了对服务器端和客户端（基于RestTemplate的客户端）提供了支持。 &nbs
  • Linux64位操作系统（CentOS6.6）上如何编译hadoop2.4.0 liyong0802 hadoop
    一、准备编译软件   1.在官网下载jdk1.7、maven3.2.1、ant1.9.4，解压设置好环境变量就可以用。     环境变量设置如下：   （1）执行vim /etc/profile （2）在文件尾部加入: export JAVA_HOME=/home/spark/jdk1.7 export MAVEN_HOME=/ho
  • StatusBar 字体白色 pangyulei status
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent]; /*you'll also need to set UIViewControllerBasedStatusBarAppearance to NO in the plist file if you use this method
  • 如何分析Java虚拟机死锁 sesame javathreadoracle虚拟机jdbc
    英文资料： Thread Dump and Concurrency Locks   Thread dumps are very useful for diagnosing synchronization related problems such as deadlocks on object monitors. Ctrl-\ on Solaris/Linux or Ctrl-B
  • 位运算简介及实用技巧（一）：基础篇 tw_wangzhengquan 位运算
    http://www.matrix67.com/blog/archives/263    去年年底写的关于位运算的日志是这个Blog里少数大受欢迎的文章之一，很多人都希望我能不断完善那篇文章。后来我看到了不少其它的资料，学习到了更多关于位运算的知识，有了重新整理位运算技巧的想法。从今天起我就开始写这一系列位运算讲解文章，与其说是原来那篇文章的follow-up，不如说是一个r
  • jsearch的索引文件结构 yangshangchuan 搜索引擎jsearch全文检索信息检索word分词
    jsearch是一个高性能的全文检索工具包，基于倒排索引，基于java8，类似于lucene，但更轻量级。   jsearch的索引文件结构定义如下：     1、一个词的索引由=分割的三部分组成：        第一部分是词        第二部分是这个词在多少
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他