Javaweb备忘录1

最新推荐文章于 2023-05-26 09:57:19 发布

郑先锋

最新推荐文章于 2023-05-26 09:57:19 发布

阅读量678

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/qq_16580279/article/details/66968077

版权

java 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

day1-HTML

【字体标签】

<font>标签
<font 属性名=”属性值”>文字</font>
size:控制字体大小.最小1 最大7
color：控制字体颜色. 使用英文设置 ，使用16进制数设置
face：控制字体.

【排版标签】

<hn>标题标签
<h1>b标题</h1>
<p>段落标签
<p>一段文字</p>
<br/>换行标签
<br/>代表换行
<hr/>水平线标签
<hr/>水平线标签
<b>字体加粗
<b>文字</b>
<i>斜体标签
<i>斜体</i>

【图片标记】

<img />
src：图片的路径
width：图片宽度
height：图片的高度
alt：图片提示

图片路径：
分成相对路径和绝对路径
相对路径:
./  :代表当前路径
../ :代表上一级路径

eg.<img src="../img/logo2.png"/>
   <img src="../img/header.png" />

【列表标签】

无序列表
    <ul>
        <li>内容1</li>
        <li>内容2</li>
    </ul>
有序列表
    <ol>
        <li>内容1</li>
        <li>内容2</li>
    </ol>

【超链接标签】

<a>超链接</a>
href：超链接跳转的路径
 target：打开方式
  _self：在自身页面打开
  _blank：打开一个新窗口

【表格标签】

【HTML的表格标签】
<table>
    <tr>
        <td></td>
           <td></td>
    </tr>
    <tr>
        <td></td>
           <td></td>
    </tr>
</table>

表格的属性：
border  ：表格边框
width   ：表格宽度
height  ：表格高度
align   ：水平方向对齐方式 left center right
bgcolor ：背景色

【表单标签】

表单标签：
需要提交的表单需要使用<form></form>括起来
action：提交路径
method：提交方式

文本框:
<input type=”text”/>
name
value
size
maxlength
readonly

密码框：
<input type=”password”/>

单选按钮：
<input type=”radio”/>
Checked：默认选中

复选框
<input type=”checkbox”/>
Checked：默认选中

下拉列表框
<select><option></option></select>
Selected：默认选中
Multiple：全部显示

文件上传项
<input type=”file” name=”file”/>

文本区
<textarea name=”” cols=”” rows=””></textarea>

提交按钮
<input type=”submit” value=”注册”>

重置按钮
<input type=”reset” value=”重置”>

普通按钮
<input type=”button” value=”普通按钮”>

隐藏字段
<input type=”hidden” name=”id”/>

提交方式：
GET ：默认值
提交的数据都会在地址栏中进行显示
提交的数据的时候是有大小的限制
POST：
提交的数据不会再地址栏中进行显示
提交的数据没有大小限制

【框架标记】

<frameset>
</frameset>
* 使用了frameset标签，不需要使用body.
* 属性：
* rows：横向切分页面
* cols：纵向切分页面
<frame>标签代表切分每个部分的页面
* src：引入页面的路径

eg.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <frameset rows="15%,*">
        <frame src="top.html" />
        <frameset cols="15%,*">
            <frame src="left.html" />
            <frame src="right.html" />
        </frameset>
    </frameset>
</html>

【转义字符】

        空格      &nbsp;
<       小于      &lt;
>       大于      &gt;
&       和号      &amp;

day2-div-css-js

【HTML的DIV标签】

HTML中有两个块标记：
<div></div>
<span></span>

【CSS的概述】

CSS的使用：
语法：选择器{属性1:属性值;属性2:属性值;..}
<style>
    h2{
        color:red;
        font-size:100px;
    }
</style>

【CSS的引入方式】

行内样式：直接在html的元素上使用style的属性编写CSS：
<span style="color:#00FF00 ;font-size: 100px;">黑马训练营</span>

内部样式：
在html的<head>标签中使用<style>标签来定义CSS
<style>
    span{
        color:blue;
        font-size: 200px;
    }
</style>

外部样式：将CSS定义成一个.css的文件，在html中将该文件引入到html中
<link href="style.css" rel="stylesheet" type="text/css"/>

【CSS的基本选择器】

CSS的选择器为了更能精确的找个某个元素来设计的
元素选择器：
div{
    color: red;
}

id选择器：
<style>
    #d1{
        color: red;
    }
</style>
<div id="d1">王凤</div>
//id通常都是唯一的.

类选择器：
HTML:
<div class="d1">王守义</div>
<div>王凤</div>
<div class="d1">王如花</div>

CSS:
    <style>
        .d1{
            color: green;
        }
    </style>

【CSS的悬浮】

CSS的float属性：
float属性中常用取值:
Left    :悬浮到左边
Right   :悬浮到右边
使用clear属性清除浮动：
Left    ：清除左侧浮动
Right   ：清除右侧浮动
Both    ：清除两侧的浮动

【CSS的其他选择器】

//属性选择器：选中带有某个属性的元素：
<style>
    input[type="text"]{
        background-color: yellow;
    }
    input[type="password"]{
        background-color: green;
    }
</style>

//层次选择器：父选择器 子孙选择器 {  }
<style>
    #d1 div{
        color: red;
    }
</style>

//伪类选择器：主要用来描述超链接
<style>
    a:link{
        color:blue;
        font-size: 40px;
    }
    a:visited{
        color:red;
        font-size:40px;
    }
    a:hover{
        color: green;
        font-size: 100px;
    }
    a:active{
        color: brown;
        font-size: 200px;
    }
</style>

【CSS的盒子模型】

这里写图片描述

设置盒子的外边距：margin
Margin-top          Margin-right
Margin-bottom       Margin-left
设置盒子的内边距：padding
Padding-top         Padding-right
Padding-bottom      Padding-left

【JS语法】

区分大小写
语法要求不是特别严格
变量是弱变量类型
var i = 3;
var s = “aa”;
< script>JS代码需要写在中间< /script>

【JS的数据类型】

原始类型：
1.string 2.number 3.boolean 4.null
5.undefined//未赋值的

引用类型：
基于对象而不是面向对象.内置对象.对象类型的默认值是null.

【JS的运算符和语句】

运算符、语句与Java中一致.
全等于 === ：类型和值都一致返回true

【JS的输出】

alert()
向页面中弹出一个提示框！！
innerHTML:
向页面的某个元素中写一段内容，将原有的东西覆盖
document.write();
向页面中写内容

day3-JS

【JS的定时操作】

setInterval(code,毫秒数):周期执行
setTimeout(code,毫秒数):延迟多长事件后只执行一次.

清除定时器
clearInterval(id):
clearTimeout(id):

【CSS控制显示和隐藏的属性】

display:
block :显示的
none :隐藏的

【html和js的整合】

方式1:内部编写js

<script type="text/javascript">js代码</script>

方式2:
外部有一个独立的js文件后缀名:.js
在html中通过script的src属性导入

<script src="js的路径"></script>

注意:一旦使用了src属性,那么script标签体中的js代码将不再执行了

【JS中的事件】

焦点事件:★
    onfocus
    onblur
表单事件:★
    onsubmit
    onchange 改变
页面加载事件:★
    onload

鼠标事件(掌握)
    onclick
鼠标事件(了解)
    ondblclick:双击
    onmousedown:按下
    onmouserup:弹起
    onmousemove:移动
    onmouserover:悬停
    onmouserout:移出
键盘事件(理解)
    onkeydown:按下
    onkeyup:弹起
    onkeypress:按住

【JS控制向HTML的某个元素中写入内容】

document.getElementById(“”).innerHTML = “”;

【数组对象的使用】

new Array();//长度为0
new Array(size);//指定长度的
new Array(e1,e2..);//指定元素
非官方
var arr4=[“aa”,”bb”];
注意:
数组是可变的
数组可以存放任意值

常用方法:(了解)

//存放值:对内容的操作
pop():弹 最后一个
push():插入 到最后
shift():删除第一个
unshift():插入到首位
//打印数组:
join(分隔符):将数组里的元素按照指定的分隔符打印
//拼接数组:
concat():连接两个或更多的数组，并返回结果。
//对结构的操作:
sort();排序
reverse();反转

【location:定位信息】

常用属性:
href:获取或者设置当前页面的url(定位信息)
location.href; 获取url
location.href=”…”;设置url 相当于 a标签

【history:历史】

back();后退
forward():向前
★go(int)
go(-1) 相当于 back()
go(1) 相当于 forward()

dom(文档对象模型)

当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)
节点(Node)
文档节点 document
元素节点 element
属性节点 attribute
文本节点 text
常用方法:

document.getElementById("id值"):获取一个特定的元素
document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)
document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)
document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)

    设置获取获取节点的value属性
        dom对象.value;获取
        dom对象.value="";设置
    设置或者获取节点的标签体
        dom对象.innerHTML;获取
        dom对象.innerHTML="";设置
    获取或者设置style属性
        dom对象.style.属性;获取
        dom对象.style.属性="";设置
    获取或者设置属性
        dom对象.属性

day4-JQ

JQuery的作用：
大大简化的JS的代码编写.
将页面与JS分离
【JQ的获得元素】
$(“#id”)

【JQ的效果】

show(); –显示某个元素
hide(); –隐藏某个元素
slideDown(); –向下滑动
slideUp(); –向上滑动
fadeOut(); –淡出
fadeIn(); –淡入
animate(); –自定义动画
toggle(); –单击事件的切换

【基本选择器】

ID选择器：$(“#id”)
类选择器：$(“.class”)
元素选择器：$(“元素”)
通配符选择器：$(“*”)
选择器,选择器：$(“#id,.class”)

郑先锋

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Javaweb备忘录1

day1-HTML【字体标签】<font>标签<font 属性名=”属性值”>文字</font>size:控制字体大小.最小1 最大7color：控制字体颜色. 使用英文设置，使用16进制数设置face：控制字体.【排版标签】<hn>标题标签<h1>b标题</h1><p>段落标签<p>一段文字</p><br/>换行标签<br/>代表换行<hr/>水平线标签<hr/>水平线标签
复制链接

扫一扫