html+css+js 简易笔记

重返太空

已于 2022-04-02 23:27:12 修改

阅读量1.1k

点赞数 3

分类专栏： x语言基础文章标签：前端

于 2022-04-02 23:24:21 首次发布

本文链接：https://blog.csdn.net/qq_40927195/article/details/123930934

版权

x语言基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>

在这里插入图片描述

重返太空

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html+css+js 简易笔记

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"> <ti
复制链接

扫一扫