html+css+js 简易笔记

文章目录

html
- 基本结构
- 标签
- 列表
- 表格
- 属性
- 常用标签
- 表单
- 举例
- 上传文件
- iframe
- HTML实体
- url编码
css
- 三种添加方式
- 选择器
js
- 三种添加JavaScript的方式
- 0.1+0.2为什么不等于0.3？
- 常量&变量
- 关于作用域
- 改变html内容
- 类型相关
- do while循环
- for循环
- switch循环
- 三元运算符
- 对象
- 数组
- 遍历数组
- 其他一些
- 函数
- 函数举例
- 函数闭包
- 回调函数
- 表单

html

基本结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

head标签内的内容不会被浏览器渲染，body标签为可见内容

HTML可以做什么？

可以设置文本的格式，比如标题、字号、文本颜色、段落等
可以创建列表
可以插入图像和媒体
可以创建表格
可以创建超链接

列表

<ul><li>列表1</li>                      <li>列表2</li><li>列表3</li><li>列表4</li>
</ul>
<ol><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li><li>有序列表4</li>
</ol>

表格

<table>//定义表格<thead>//定义表格页眉<tr>//定义行<th>姓名</th>//定义表头<th>年龄</th><th>地址</th><th>职业</th></tr></thead><tbody>//定义表格主体<tr><th>小明</th><th>18</th><th>赣水路</th><th>三和大神</th></tr><tr><th>小红</th><th>22</th><th>学府路</th><th>家里蹲</th></tr></tbody>
</table>

属性

通过属性实现更多设置

<a href="http://www.baidu.com" target="_blank">百度跳转新标签页打开</a>
<!-- 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，点击这些内容跳转到新的文档或者当前文档中的某个部分 -->
<img src="fz.jpg" width="258" height="390">

适用于大多数HTML元素的属性

属性	定义
class	为html元素定义一个或多个类名
id	定义元素唯一id
style	规定元素的行内样式
title	描述了元素的额外信息

常用标签

link

定义了文档与外部资源之间的关系，通常用于链接到样式表

<link rel="stylesheet" type="text/css" href="mystyle.css">

style

定义了HTML文档的样式文件引用地址，也可以直接添加样式来渲染HTML文档

<style type="text/css">body {background-color:yellow}p {color:blue}
</style>

表单

<form><div><lable>手机号/邮箱</lable><input type="text" name="phone&email" placeholder="请输入手机号或邮箱"></div><div><label>密码</label><input type="password" name="password" placeholder="请输入密码">、</div><input type="submit" name="submit" value="submit">
</form>

提交表单的几种方式

<form action="form.js" method="POST">
<form name="input" action="html_form_action.php" method="GET">
<form action="http://localhost:3308/user" method="POST" name="post">

form默认method属性为GET，提交后会跳转刷新到action页面，其默认的请求头的content-type为x-www-form-urlencoded==，当一个form表单内部，所有的input中只有一个type="text"时，enter键会有默认的提交行为（没有验证）

无刷新页面提交，设置隐藏的iframe页面，将target指向它，则不会跳转

<form action="http://localhost:3308/user" method="POST" name="post" target="targetIfr"><p>name:<input type="text" name="username"></p><p>password:<input type="password" name="password"></p><input type="submit" value="提交">
</form>
<iframe name="targetIfr" style="display: none"></iframe>

ajax 和 js 提交不详细讲解、

举例

一个百度搜索框（传递参数是通过name定位符，并不是通过url）

<form action="https://www.baidu.com/s" method="GET"><img src="http://www.baidu.com/img/baidu_jgylogo3.gif" alt="百度Logo" /><input type="text" name="wd"><input type="submit">
</form>

上传文件

<form name="form名称" action="请求地址"  method="请求类型" enctype ="multipart/form-data"><input type="file" name=""><input type="text" name=""><input type="submit" value="提交">
</form>

iframe

<iframe src="http://www.runoob.com" name="iframe_a"></iframe>

HTML实体

区分保留字符和文本，常用实体编码，对大小写敏感

显示结果	描述	实体名称	实体编号
	空格
＜	小于号	<	<
＞	大于号	>	>
&	和号	&	&
"	引号	"	"
’	单引号	'(IE不支持)	'

url编码

url传输只支持ascii字符集，在传输其他字符比如汉字是需要进行编码转换的

eg:百度搜索"测试"，会自动进行url编码，是utf8的编码加上%，测->E6B58B，试->E8AF95

常见状态码

状态码	说明
200	请求成功
301	页面已经转移至新的url
302	页面临时转移至新的url
304	未按预期修改文档。客户端有缓冲的文档并发出一个条件性的请求，服务器告诉客户，原来缓冲的文档还可以继续使用
400	因为语法错误，服务器未能理解请求
401	合法请求，但对被请求页面的访问被禁止。因为需要身份验证，客户端没有提供或身份验证失败
403	合法请求，但访问被禁止
404	服务器无法找到被请求的页面
405	请求中的方法不被允许
500	请求未完成，服务器遇到不可预知的情况
501	请求未完成，服务器不支持所请求的功能，或服务器无法完成请求
502	请求未完成，服务器充当网关或代理的角色时，从上游服务器收到一个无效的响应
503	服务器当前不可用（过载或宕机）
504	网关超时，服务器充当网关或代理时，未能从上游服务器收到一个及时的响应

css

什么是css？

层叠样式表，定义如何显示HTML元素，样式，布局，不是一种编程语言

三种添加方式

外部样式表：保存在 .css 文件中，在HTML里使用引用

css/style.css

p{color:brown;
}

a.html

<head>
<link rel="stylesheet" href="./css/style.css">
</head>
<p>HELLO WORLD!</p>

内部样式表：不是用外部css文件，放在HTML

<style>p{color: chartreuse;}
</style>
<p> HELLO WORLD! </p>

内联样式：仅影响一个元素，在HTML元素的style属性中添加

<p style="color: cornflowerblue;">HELLO WORLD!</p>

选择器

id一般是唯一的，class和tag没有要求

js

什么是js？

HTML定义了网页的内容，css描述了网页的布局，JavaScript控制了网页的行为

它是一种真正的编程语言

三种添加JavaScript的方式

内部的JavaScript

<script>//your script
</script>

外部的JavaScript

<script src="js/script.js"></script>

内联的JavaScript

<button οnclick="creatParagraph()">Click me
</button>

0.1+0.2为什么不等于0.3？

js遵循 IEEE 754 尾数位限制，转换为二进制为无限小数，会将后面多余的位截掉，产生误差

常量&变量

const A = 'aa';         //定义常量
var b = 'bb';           //定义变量
console.log(A,b);       //打印到控制台

关于作用域

var定义的变量可以在任何地方访问到

const和let（定义变量的另一种）有作用域，即只能在当前的代码块访问到，至于是函数还是类不清楚。

改变html内容

x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

类型相关

x = "3" + 4 + 5;    // 345
y = 3 + 4 + "5";    // 75
console.log(x,y)

console.log(123=="123");    //true 会进行强制类型转换
console.log(123==="123");   //false

do while循环

先执行do语句，再进行while判断，条件为真再执行do语句，直到不满足while语句，跳出循环

var age = 20;
var a = 19;
do {a++;console.log(a);
}while (age==a);

for循环

var age = 20;
for (let i=0;i<5;i++){age++;console.log(age);
}

switch循环

没有break跳出循环会继续执行下一个case

names = "小明";
switch(names){case "小明":console.log("你好，小明");break;case "小红":console.log("你好，小红");break;default:console.log("你好，新朋友")
}

三元运算符

var age = 20;
var allowed = age >= 18 ? "yes" : "no";
console.log(allowed);

对象

是一些数据（属性）和函数（方法）的集合体

var obj = new Object();
var obj2 = {};
obj = {names:"xixi",age:"20",email:"xixi@haha.com",contact:{phone:"1235855",Telegram:"@xixi"}
}
console.log(obj)
console.log(obj.names)
console.log(obj.contact.phone)
console.log(obj['contact']['phone'])

数组

空值会显示

var a = new Array();
a[0] = "dog";
a[1] = "cat";
a[5] = "tiger";
console.log(a)

遍历数组

b = ["dog","cat","tiger"];
for (let i = 0; i < b.length; i++){console.log(b[i],a[i]);
}

遍历数组for in 会跳过空值

for (let i in a){console.log(a[i]);
}

其他一些

b = ["dog","cat","tiger"];
b.push("sheep");    //从最后添加一个值
b.pop();            //从最后删除一个值
b.reverse();        //倒序输出
console.log(b)

b.shift();                 //删除第一个值
b.unshift("elephant");     //从第一位增加值

函数

直接调用，不传参，它调用同名变量

let a =1;
function add(){a++;
}
add();
console.log(a);

不要直接传入变量名，直接传具体值

let a = 1;
function add(x=6){a+=x;
}
add(4);             //定义变量x传入x不能执行
console.log(a);     //结果为5，x=6为函数没传参的默认值

函数举例

function add(){let sum = 0;for (let i=0, j=arguments.length; i<j; i++ ){sum += arguments[i];}return sum;
}
let sum = add(1,2,3,4,5,6,7,8,9,10);
console.log(sum)     //结果为55

函数闭包

function makeAdder(a){return function(b){return a+b;};
}
var x = makeAdder(5);
var sum = x(6);
console.log(sum);

回调函数

function func1(callback){callback(1,2);
}
function add(a,b){document.write(a+b);
}
func1(add);

闭包函数是函数套函数，里面的函数能访问外层函数的值，回调函数是可以将函数作为参数传递并执行的

回调函数是异步调用，加快效率

表单

HTML教程提到过的

function validateForm() {var x = document.forms["myForm"]["fname"].value;if (x == null || x == "") {alert("需要输入名字。");return false;}
}

调用

<form name="myForm" action="demo_form.php" οnsubmit="return validateForm()" method="post">名字: <input type="text" name="fname"><input type="submit" value="提交"></form>
<script src="js/script.js"></script>