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();