首页 前端知识 html,css,js速成

html,css,js速成

2024-02-21 10:02:31 前端知识 前端哥 533 752 我要收藏

准备:vscode配好c,python,vue环境,并下载live server插件。
命令行里code . 意思是vscode把当前文件夹当作项目打开。

1. html

hypertext markup language(超文本标记语言)

1. 基础语法

一个html元素由开始标签,填充文本,结束标签构成。

常见标签说明
<b></b>粗体
<i></i>斜体
<ins></ins>下滑线
<del></del>删除线
<br>换行
<hr>水平线
<ul><li></li></ul>无序列表
<ol><li></li></ol>有序列表
<!DOCTYPE html><!-- 解释文档的类型-->
<html>
    <head>
        <meta charset='utf-8'>
        <title>hello world</title>
        <!-- 注释 -->
    </head>
    <body>
        <h1>有1-6级标题</h1>
        <p>这是一个段落标签</p>
        <ul>
            <li>coffee</li>
            <li>tea</li>
        </ul>
    </body>
</html>

2. 元素与属性

块级元素

<div><h1><p><ul><table>

在页面以块的形式展现

出现在新的一行

占全部宽度

内联元素

<a><img><span><strong><td>

通常在块级元素内

不会导致文本换行

只占必要的部分宽度

<p>hello <strong>world</strong>!</p>
<a href='www.baidu.com' target='_blank'>百度</a>
href和target都是a标签的属性
<img src='./1.jpg'alt='没找到图片'>

3. 表格

表格由table标签定义

在这里插入图片描述

<table>
    <thead><!--标题栏-->
        <tr>
            <th>菜品</th>
            <th>价格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>双皮奶</td>
            <td>8</td>
        </tr>
        <tr>
            <td>肠粉</td>
            <td>7</td>
        </tr>
    </tbody>
</table>

4. 表单

​ 使用form元素创建表单,action属性定义表单元素提交的目标url,method属性定义提交数据的http方法。

​ 常见的表单元素有label,input,select,option

​ input的type属性有text,password,radio(单选框),checkboxes(复选框),submit

在这里插入图片描述

<form action='form.js' method='post'>
    <div>
        <label>username:</label>
        <input type='text' name='u' placeholder='input your username'></input>
	</div>
    <div>
        password:<input type='password' name='p'></input>
    	<input type='submit' name='s' value='提交'></input>
    </div>
</form>

2. css

1. 基础语法

Cascading Style Sheets,层叠样式表

css规则由选择器和声明构成。

选择器主要有元素选择器,类选择器,id选择器。

<style>
h4{/*元素选择器*/
    color:red;
}
.class1{ /* .号开头为类选择器*/
    color:green;
}
#id1{/* #号开头id选择器*/
    color:blue;
}
</style>
<h4>123</h4>
<p class='class1'>123</p>
<p id='id1'>123</p>

2. 层级关系

可以定义父类和子类,方便嵌套的时候区分。

<style>
.outside{
    color:red;
    .inner2{
        text-align:right;
    }
}
.outside .inner1{
    text-align:center;
}
.b{
    font-size:30px;
}
</style>
<div class='outside'>
<p>123</p>
<p class='inner1 b'>123</p><!--使用多个类-->
<p class='inner2 '>123</p>
</div>

3. 颜色和文本

颜色主要有名称,rgb和hex格式

green 绿色

rgb(0,0,255) 蓝色

#FF0000 红色

文本属性说明
background-color:#f2f2f2;背景颜色
background-image:url(‘1.jpg’);背景图片
font-family:“Times New Roman”,Georgia;字体
text-indent:50px;首行缩进
line-height:32px;行间距
text-align:left;水平对齐方式
font-size:30px;字体大小
font-weight:200;字体粗细
word-spacing:20px;字间距

4. 盒子模型

在这里插入图片描述

​ 一般盒子模型包括:边距(margin),边框(border),填充(padding),和实际内容(content)。

​ 盒子的四个方位为top,right,bottom,left

.box1{
    /*border:1px solid #98bf21;*/
    /*border-width:1px;*/
    /*border-style:dashed;*/
    
    /*margin-right:10px;右侧边距10px*/
	/*margin: 10px;上下左右等宽*/
    /*margin: 6px 12px;上下6px,左右12px*/
    /*padding:6px 10px 4px 7px solid red;*/
    /*分别指定上右下左*/
    
}

5. display布局

块级元素(block)

内联元素(inline)

内联块级元素(inline-block)

隐藏元素(none)

灵活布局(flex)

网格布局(grid)

<style>
.none{
    display:none;
}
.inline-block{ <!--可设置宽高填充行间距-->
 	display:inline-block;
    width:100px;
    height:120px;
}

</style>
<p class='none'>看不见我</p>
<span class='inline-block'>good</span>
<span>job</span>

6. 定位

相对定位 relative,相对于正常位置移动

绝对定位 absolute,比如h2放在什么位置

静态定位 static ,不受top,bottom等影响

固定定位 fixed,窗口滚动它不移动。

<style>
h2.pos_abs{
    position:absolute;
    left:100px;
    top:150px;
}
h2.pos_rel{
    position:relative;
    top:100px;
}
</style>
<h2>正常位置</h2>
<h2 class='pos_abs'>绝对位置</h2>
<h2 class='pos_rel'>相对位置</h2>

3. javaScript

JS可以操作浏览器(BOM)和网页(DOM)。

vscode下载live server插件。

在index.html里输入!,然后按Tab生成html模板。

在这里插入图片描述

1. 基础

新建index.js文件写入<script>console.log('hello')</script>,然后在index.html里面写入如下代码。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>新手入门</p>
    <script src="index.js"></script>
</body>
</html>

用live server打开html文件,再F12就可以在console看到结果。

在这里插入图片描述

此外,还可以用node运行js文件。

在这里插入图片描述

2. 变量与常量

var声明变量(全局作用域),函数内部声明var,函数外访问不到,函数外声明则整个脚本可见。在 for 循环中,使用 var 声明的循环变量在循环结束后仍然存在,并且可以在循环外部访问。

let声明变量(块级作用域),例如for循环内声明let变量,在for循环外部不可见。使用 let 声明的循环变量在每次循环迭代时都会创建一个新的绑定,因此循环结束后这些变量就不存在了。

const声明常量。

var a=5;
let b;
b=4;
const c=6;//常量必须在声明时定义

function fun(){
    var i=55;
    console.log(i);
    for(var i=0;i<5;i++){
        console.log(i);
    }
    console.log(i);
}
fun();//55 0 1 2 3 4 5,for语句块外部var i被改变。

function fun2(){
    var i=55;
    console.log(i);
    for(let i=0;i<5;i++){
        console.log(i);
    }
    console.log(i);
}
fun2();//55 0 1 2 3 4 55,for语句块外部var i未被改变。
基本数据类型说明
String字符串
Number数字
Boolean布尔
nullnull的类型标记为0,null表示null指针,返回值为object
undefined未定义
const a='John';
const price=65.5;
const is_not=false;
const x=null;
const y=undefined;
console.log(typeof y);
console.log("my name is "+a);
console.log(`A pair of shorts costs ${price} yuan.`);//写模板字符串记得用反引号
字符串内置属性和方法说明
s.length字符串长度
s.split(“”)分割字符串成数组
s.toUpperCase()全大写
s.toLowerCase()全小写
s.substring(0,5)起始0号位,左闭右开截取字符串

3. 引用数据类型

​ 引用数据类型主要有:对象Object,数组Array,函数Function

//数组
const a=new Array(1,2,3,4,5);
const b=["a",123,"abc",true];
b[3]=567;
console.log(b[3]);

a.push(6)//末尾添加元素
a.pop()//去除末尾元素
a.unshift(0)//开头添加元素
a.indexOf(2)//返回元素2的位置
Array.isArray(a)//判断a是否是个数组

//对象
const p={
    f:"jkloli",
    a:18,
    homies:['miku','あずませれん','A-SOUL'],
    address:{
        detail:"Platform 9-3/4",
        state:"UK",
    },
};
p.n=66;//添加属性
console.log(p.homie[2]);
const {a,address:{state}}=p;//抽取同名变量
console.log(state);

4. 对象数组和JSON

//对象数组
const t=[
    {id:1,text:"apple"},
    {id:2,text:"banana"},
    {id:3,text:"coconut"}
];
console.log(t[2].text);
const j=JSON.stringify(t);//将一个JavaScript对象或值转换为JSON格式字符串
const k=JSON.parse(j);//转化成JSON对象
console.log(j);//[{"id":1,"text":"apple"},{"id":2,"text":"banana"},{"id":3,"text":"coconut"}]

5. if…switch…for…while

==相等,只比较值

===严格相等,比较值和类型

var x=0;
if(x===10){
    console.log("10");
}else if(x>10){
    console.log(">10");
}else{
    console.log("<10");
}
color="khaki";
switch(color){
	case "darkviolet":
        console.log("darkviolet");
        break;
    case "khaki":
        console.log("khaki");
        break;
    default:
        console.log("other");
}
let sum=0;
for(let i=0;i<10;i++){
    sum+=i;
}
console.log(sum);
let num=1;
i=1;
while(i<5){
    num*=i;
    i++;
}
console.log(num);
let a=[1,2,3,4,5];
for(let i of a){
    console.log(i);//1 2 3 4 5
}
let obj=[1,2,3,4];
for(var i in obj){
	console.log(obj[i]);//1 2 3 4
}
for (var i=0; i < 10; i++){
    console.log(1);//注意,这里只输出1
}

6. 函数

1. 常见函数
function add(a,b){
    return a+b;
}
//匿名函数
const sub= function (a,b){
    return a-b;
}
console.log(sub(5,1));
//匿名函数自调用,立即执行函数
(function(a,b){
    console.log("a="+a);
    console.log("b="+b);
})(1,2);
2. 声明提前

使用 var 声明的变量会发生变量提升(hoisting),即 JavaScript 解释器会将变量的声明提升到其所在作用域的顶部。但是,只有声明会被提升,初始化(即赋值)不会。

console.log(a);//undefined
var a=10;
function fun(){}
function t(){
    a=100;//局部变量
    console.log(a);//100
    var a;
    console.log(a);//100
}
t();
console.log(a);//10

//实际声明提前的写法
var a;
function fun(){}
function t(){
    var a;//局部变量
    a=100;
    console.log(a);//100
    console.log(a);//100
}
console.log(a);//undefined
a=10;
t();//100 100
console.log(a);//10
3. 闭包
function createFunctions(){
    var result = new Array(); 
    for (var i=0; i < 10; i++){
        result[i] = function(){
            return i;
        };
    }
    return result;
}
var funcs = createFunctions();
//funcs是个数组,每个数组元素是个匿名函数
for (var i=0; i < funcs.length; i++){
    console.log(funcs[i]());
    //匿名函数返回for循环后的i
}//只输出10

//解决
法一:函数内forvar i改成let i
法二:使用立即执行函数
function createFunctions(){
    var result = new Array(); 
    for (var i=0; i < 10; i++){
        result[i] = (function(){
            return i;
        })(i);
    }
    return result;
}
var funcs = createFunctions();
for (var i=0; i < funcs.length; i++){
    console.log(funcs[i]);
}//0 1 2 3 4 5 6 7 8 9

更多参考

HTML + CSS + JavaScript 两小时快速入门教程 枯木何日可逢春
b站关注vue-pure-admin作者 乐于分享的程序员小铭

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2386.html
标签
评论
发布的文章

【jQuery详细介绍】

2024-03-10 11:03:26

jQuery核心函数

2024-03-10 11:03:10

vue echarts GL3d中国地图

2024-03-10 11:03:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!