javaWeb学习笔记（前端基础）

最新推荐文章于 2024-08-15 18:19:19 发布

yongyuan.lzw

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量249

点赞数

文章标签：前端学习笔记

本文链接：https://blog.csdn.net/zongxuesheng_lzw/article/details/131130317

版权

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img width="300" src="lib" alt="6">
</body>
</html>
<head>:头文件
<body>:主体文件
<title>显示时的标题
<img>:图片 width宽度 src:图片来源 alt：如果图片出错的话 显示的视频
<link>:链接 rel:显示的样式

通过使用div标签，我们将整个页面按行划分，而高度就是内部元素的高度，那么如果只希望按元素划分，也就是说元素占多大就划分多大的空间，那么我们就以使用span标签来划分：

<body>
    <div>
        <span>我是第一块第一个部分</span>
        <span>我是第一块第二个部分</span>
    </div>
    <div>我是第二块</div>
</body>

br 换行
hr 分割线


<h>标题（会加粗）
<a>href是链接的位置 会编成超文本链接用于点击访问其他网站 也可以设置跳转的节点位置 在一个<div>设置id 然后在a标签的href设置#id
<ul>无序列表我们接着来看看列表元素，这是一个无需列表，其中每一个li表示一个列表项
<ol>有序列表
<table>表格
<body>
    <div>
        我是一段文字<br>我是第二段文字
    </div>
    <hr>
    <div>我是底部文字</div>


<h1>一级标题</h1>

<p>我是正文内容，真不错。</p>
<a href="https://www.bilibili.com">点击访问小破站</a>


<a href="#test">跳转锚点</a>
<img src="image.jpeg" width="500">

<div id="test">我是锚点</div>
<img src="image.jpeg" width="500">

</body>
<ul>
    <li>一号选项</li>
    <li>二号选项</li>
   
</ul>
<ol>
    <li>一号选项</li>
    <li>二号选项</li>
   
</ol>
<table>
    <thead>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年级</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>0001</td>
        <td>小明</td>
        <td>男</td>
        <td>2019</td>
    </tr>
    <tr>
        <td>0002</td>
        <td>小红</td>
        <td>女</td>
        <td>2020</td>
    </tr>
    </tbody>
</table>

输入与按钮：

输入框：对于一个输入框，我们一般会将其包括在一个lable标签中，它和span效果一样，但是我们点击前面文字也能快速获取输入框焦点。

input输入框的内容type：输入框的类型如：password是密码

按钮：可input:中的type设置为submit或者button 也可直接使用

输入文本框：textarea placeholder默认文本中的内容 checkbox为勾选项 radio为多选项中为下拉选择列表

<label>
  <textarea placeholder="文本内容..." cols="10" rows="10"></textarea>
</label>
<body>
<div>登陆我们的网站</div>
<hr>
<div>
    <label>
        账号：
        <input type="text">
    </label>
</div>
<div>
    <label>
        密码：
        <input type="password">
    </label>
</div>
</body>
<button>登陆</button>
<input type="submit" value="登陆">
<input type="button" value="登陆">

<body>
    <h1>登陆我们的网站</h1>
    <form>
        <div>
            <label>
                账号：
                <input type="text" placeholder="Username...">
            </label>
        </div>
        <div>
            <label>
                密码：
                <input type="password" placeholder="Password...">
            </label>
        </div>
        <br>
        <a href="https://www.baidu.com">忘记密码</a>
        <br>
        <br>
        <div>
            <input type="submit" value="登陆">
        </div>
    </form>
</body>
<label>
    这是我们的文本框<br>
    <textarea placeholder="文本内容..." cols="10" rows="10"></textarea>
</label>
<label>
    <input type="checkbox">
    我同意本网站的隐私政策
</label>
<label>
    <input type="radio" name="role">
    学生
</label>
<label>
    <input type="radio" name="role">
    教师
</label>
<label>
    登陆身份：
    <select>
        <option>学生</option>
        <option>教师</option>
    </select>
</label>

CSS:

css定义网站的样式

在文件夹中新建一个样式表首先在我们HTML文件的头部添加：让HTML文件与CSS文件相联系 href：中填css文件 rel写链接方式（当然也可以单独写样式）

<link href="style.css" rel="stylesheet">
css中 让body都居中
body {
    text-align: center;
}

可以在HTML中设置id 然后在CSS中选择对应的id不过前要加#

<h1 id="title">登陆我们的网站</h1>
#title {
    color: red;
}

可以加class类指定多个对象用（.）来指定

<form>
    <div >
        <label class="test">
            账号：
            <input type="text" placeholder="Username...">
        </label>
    </div>
    <div>
        <label class="test">
            密码：
            <input type="password" placeholder="Password...">
        </label>
    </div>
</form>
.test{
    color: blue;
}
//我们也可以让多个选择器，共用一个css样式：
.test, #title {
    color: red;
}
//我们还可以选择位于某个元素内的某个元素：
div label {
    color: red;
}

padding：内边距

background：背景颜色

margin：外边距

#outer {
    background: palegreen;
    width: 300px;
    height: 300px;
    padding: 10px;
}

body {
    //margin: 0;
}
#inner {
    background: darkorange;
    width: 100%;
    height: 100%;
}

JavaScript：

新建一个Javascript文件：写上内容然后再HTML中写上：写上就可以与js文件相链接了

src中填的是js文件

控制台输出：

弹窗：

console.info("")
window.alert("test")

let与var关键词定义变量var作用域不明显 let的类型可以变

变量类型：

Number：数字类型（包括小数和整数）
String：字符串类型（可以使用单引号或是双引号）
Boolean：布尔类型（与Java一致）

存在特殊值：

undefined：未定义 - 变量声明但不赋值默认为undefined（就是直接定义没赋初值后打印的话返回）
null：空值 - 等同于Java中的null
NaN：非数字 - 值不是合法数字，比如：

let a = 10;
a++;
window.alert(a)
let a = 10;
a = "HelloWorld！"
console.info(a)

大于（>）,小于（=）,相等（==），不等（!=），全等（===），不全等（!==）

全等会进行比较内容相等会去掉''

逻辑运算，JS中包括&&、||、&、|、?:等，我们先来看看位运算符：

我们发现，空串为false，非空串为true，我们再来看看：

console.info('10' == 10)
console.info('10' === 10)
console.info(4 & 7)
console.info(4 | 7)
console.info(!0)
console.info(!1)
console.info(!"a")
console.info(!"")
let a = true ? "xx" : 20
console.info(a)
if(""){
    console.info("!!!")
} else if(-666){
    console.info("???")
} else {
    console.info("O.O")
}
for (let i = 0; i < 10; i++) {
    console.info("??")
}
let i = 10
while(i--){
    console.info("100")
}

定义函数：

function f(a) {
    console.info("得到的实参为："+a)
    return 666
}

f("aa");
function f(a = "6666") {
    console.info("得到的实参为："+a)
    return 666
}

let k = f;
k();

数组：

可以动态扩容，如果我们尝试访问超出数组长度的元素，并不会出现错误，而是得到undefined，同样的，我们也可以直接往超出数组长度的地方设置元素：

也可以使用push和pop来实现栈操作：

//输出：(6) [1, 'lbwnb', false, undefined, NaN, '???']

//输出：bbb (5) [1, 'lbwnb', false, undefined, NaN]

let arr = [1, "lbwnb", false, undefined, NaN]
arr[5] = "???"
console.info(arr)
let arr = [1, "lbwnb", false, undefined, NaN]
arr.push("bbb")
console.info(arr.pop())
console.info(arr)

对象属性函数：

推荐下面可以动态的定义一个对象的属性和函数

我们可以在函数内使用this关键字来指定对象内的属性：

let obj = new Object()
let obj = {}
let obj = {}
obj.name = "伞兵一号"
console.info(obj)
let obj = {}
obj.f = function (){
    console.info("我是对象内部的函数")
}

obj.f()
let name = "我是外部变量"
let obj = {}
obj.name = "我是内部变量"
obj.f = function (){
    console.info("name属性为："+this.name)
}

obj.f()

事件：

事件相当于一个通知，我们可以提前设定好事件发生时需要执行的内容，当事件发生时，就会执行我们预先设定好的JS代码。

onclick：点击事件
oninput：内容输入事件
onsubmit：内容提交事件

oninput输入事件：("")中可以写js代码就是可以直接打印啥的

当然也可以写成一个函数用函数来调用

<input type="password" oninput="console.info('正在输入文本')">
<input type="password" oninput="f()">
function f(){
    window.alert("hi")
}

Document对象:

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），它将整个页面的所有元素全部映射为JS对象，这样我们就可以在JS中操纵页面中的元素。

就是将整个HTML中的元素都可以用Document来获取

设置一个id 如然后在控制台中用来指定id 用.value来获得值

还可以改值

<input id="test" type="password" oninput="">
document.getElementById("pwd").value
document.getElementById("test").value="123"

XHR:网络请求（随时更新）

动态的返回HTTP请求会向服务器发出请求服务器返回HTML代码

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.baidu.com');
xhr.send();

学习笔记来源(149条消息) JavaWeb笔记（四）前端基础_青空の霞光的博客-CSDN博客

yongyuan.lzw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
javaWeb学习笔记（前端基础）

输入与按钮：输入框：对于一个输入框，我们一般会将其包括在一个lable标签中，它和span效果一样，但是我们点击前面文字也能快速获取输入框焦点。input输入框的内容type：输入框的类型如：password是密码按钮：可input:中的type设置为submit或者button 也可直接使用输入文本框：textarea placeholder默认文本中的内容 checkbox为勾选项 radio为多选项中为下拉选择列表。
复制链接

扫一扫