html,css,js速成

2024-02-26 1471阅读

温馨提示:这篇文章已超过393天没有更新,请注意相关的内容是否还可用!

准备:vscode配好c,python,vue环境,并下载live server插件。

命令行里code . 意思是vscode把当前文件夹当作项目打开。

1. html

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

1. 基础语法

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

常见标签说明
粗体
斜体
下滑线
删除线

换行

水平线
无序列表
有序列表

    
        
        hello world
        
    
    
        

有1-6级标题

这是一个段落标签

  • coffee
  • tea

2. 元素与属性

块级元素

    在页面以块的形式展现

    出现在新的一行

    占全部宽度

    内联元素

    通常在块级元素内

    不会导致文本换行

    只占必要的部分宽度

    hello world!

    百度 href和target都是a标签的属性 html,css,js速成

    3. 表格

    表格由table标签定义

    html,css,js速成

    菜品 价格
    双皮奶 8
    肠粉 7

    4. 表单

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

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

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

    html,css,js速成

        
    username:
    password:

    2. css

    1. 基础语法

    Cascading Style Sheets,层叠样式表

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

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

    h4{/*元素选择器*/
        color:red;
    }
    .class1{ /* .号开头为类选择器*/
        color:green;
    }
    #id1{/* #号开头id选择器*/
        color:blue;
    }
    
    

    123

    123

    123

    2. 层级关系

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

    .outside{
        color:red;
        .inner2{
            text-align:right;
        }
    }
    .outside .inner1{
        text-align:center;
    }
    .b{
        font-size:30px;
    }
    
    'outside'>
    

    123

    123

    123

    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. 盒子模型

    html,css,js速成

    ​ 一般盒子模型包括:边距(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)

    .none{
        display:none;
    }
    .inline-block{ 
     	display:inline-block;
        width:100px;
        height:120px;
    }
    
    

    看不见我

    'inline-block'>good job

    6. 定位

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

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

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

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

    h2.pos_abs{
        position:absolute;
        left:100px;
        top:150px;
    }
    h2.pos_rel{
        position:relative;
        top:100px;
    }
    
    

    正常位置

    绝对位置

    相对位置

    3. javaScript

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

    vscode下载live server插件。

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

    html,css,js速成

    1. 基础

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

    
        
        Document
    
    
        

    新手入门

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

    html,css,js速成

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

    html,css,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
            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
            console.log(i);
        }
        console.log(i);
    }
    fun2();//55 0 1 2 3 4 55,for语句块外部var i未被改变。
    price} yuan.`);//写模板字符串记得用反引号
    
        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);
    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"}]
    
        console.log("10");
    }else if(x10){
        console.log("10");
    }else{
        console.log("
VPS购买请点击我

免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

目录[+]