黑马前端笔记

最新推荐文章于 2023-09-23 16:50:13 发布
最新推荐文章于 2023-09-23 16:50:13 发布
阅读量756 收藏 19
点赞数
文章标签： html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/czj981014/article/details/109775799
版权

1. HTML

1.1 概念

  1. http是超文本标记语言：超文本是用超链接的方法，将各种不同的空间的文字信息组织在一起的网状文本。标记语言是由标签构成的语言。

  2. 在开始标签可以定义属性，属性是由键值对构成，值需要用引号（单双都可）引起来

1.2 基本标签

  1. 文件标签：构成html最基本的标签

    • html/head/title/body/

  2. 文本标签：和文本有关的标签

    1. 标签名： /

      to

      /

      /
      /

      ////

    2. 属性定义：

      • color：
        1. 英文单词：red,green,blue
        2. rgb(值1，值2，值3)：值的范围（0-255）
        3. #值1值2值3：值的范围（00-FF）
      • width：
        1. 数值：width=‘20’,数值的单位，默认是px（像素）
        2. 数值%：占比相对于父元素的比例（如body的宽度）

  3. 图片标签：

    <img src = "image/jingxuan" align="right" alt="古镇" width="500" height="500"/>

    • 相对路径：以.开头的路径
      • ./代表当前目录（不写默认当前目录）
      • ./代表上一级目录

  4. 列表标签：

    1. 有序列表：oi/li
    2. 无序列表：ul/li

  5. 链接标签：

    1. a:定义一个超链接
    2. 属性：
      • href：指定访问资源的URL
      • target：指定打开资源的方式（当前页面或者空白页面打开）

  6. div和span：本身没有任何样式，白纸才好画画

    1. div：每一个div占满一整行。块级标签
    2. span：文本信息在一行展示。行内标签 内联标签

  7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签

    1. header:页眉
    2. footer页脚

  8. 表格标签：

    1. table：定义表格
      • width、border、cellpadding、cellspacing、bgcolor、align
    2. tr：定义行
    3. td：定义单元格
    4. th：定义表头单元格
1.3 表单标签

  1. 概念：用于采集用户输入的数据的。用于和服务器进行交互。

  2. form：用于定义表单的。可以定义一个范围代表采集用户数据的范围

    • 属性：
      • action：指定提交数据的URL
      • method：指定提交方式，2种比较常见
        • get：
          1. 请求参数会在地址栏中显示，封装到请求行中
          2. 请求参数大小有限制
          3. 不太安全
        • post：
          1. 请求参数不会在地址栏中显示，封装到请求体中
          2. 请求参数的大小没有限制
          3. 较为安全
    • 表单项中的数据要想被提交，必须指定其name属性

  3. 表单项标签：

    1. input：可以通过type属性值，改变元素展示的样式

      • 属性
        1. text：文本输入框，默认值
          • palceholder：指定输入框的提示信息，当输入框的内容发生变化，会自动情况提示信息
        2. password：密码输入框
        3. radio：单选框
          1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样
          2. 一般会给每个单选框提供value属性，指定其被选中后提交的值
          3. checked属性，可以指定默认值
        4. checkbox：复选框
          1. 一般会给每个单选框提供value属性，指定其被选中后提交的值
          2. checked属性，可以指定默认值
        5. file：文件选择框
        6. hidden：隐藏域，用于提交一些信息
        7. 按钮:
          1. submit：提交按钮，可以提交表单
          2. button：普通按钮
          3. image：图片提交按钮 src属性指定图片的路径
      • label：指定输入项的文字描述信息，其for属性一般会和input和id属性值相对应，如果对应了，点击lable区域可以让input输入框获取焦点
      • 总结：name是提交到服务器中的键值对的键，是隐式的；value是键值对中的值，会显式地显示在页面中；id是在设计的过程中两个样式进行彼此配对的

    2. select：下拉列表

      • 子元素：option，指定列表项
      • option指定value可以防止浏览器解析中文错误

    3. textarea：文本域

      • cols、rows

  4. 综合案例：

    <form action="#" method="get">
    <label for="username">用户名：</label><input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    密码：<input type="password" name="password" placeholder="请输入密码"><br>
    性别: <input type="radio" name="gender" value="male" checked>男
        <input type="radio" name="gender" value="female" >女
    <br>
    爱好：<input type="checkbox" name="hobby" value="shopping" checked>逛街
        <input type="checkbox" name="hobby" value="java">Java

    <br>
    <select name="province">
        <option value="">-请选择-</option>
        <option value="1">北京</option>
        <option value="2">上海</option>
    </select>
    <br>

    <input type="submit" value="登录">
</form>

2. CSS

2.1 概念
  • CSS是用于页面美化和布局控制的，全程Cascading Style Sheets，即层叠样式表，层叠意思是多个样式可以作用在同一个html的元素上，同时生效
2.2 好处
  • 将内容展示和样式控制分离，降低耦合度，让分工协作更容易，提高开发效率
2.3 CSS的使用

  1. 内联样式，在标签内使用style属性指定css代码：

    <body>
<div>
    hello,world!
</div>
</body>

  2. 内部样式，在head里面定义：

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
    </style>
</head>

  3. 外部样式，在head里面定义link标签：

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/a.css">
</head>

  • 注意：后期常用格式2、3，第3种格式link还可以写为

    <style>
    @import "css/a.css";
</style>
2.4 CSS语法

  • 格式：

    ​ 选择器{

    ​ 属性名1:属性值1;

    ​ 属性名2:属性值2;

    ​ …

    }

  • 选择器：筛选具有相似特征的元素

  • 注意：每一对属性需要使用:隔开，最后一个;可以不加

2.5 选择器

  1. 基础选择器，优先级从高到低

    1. id选择器
    2. 类选择器
    3. 元素选择器
    <head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
    	<!--id选择器-->
        #whut{
            color: red;
        }
        <!--类选择器-->
        .whut{
            color: yellow;
        }
    </style>

</head>
<body>
<div id="whut">
    武汉理工大学
</div>
<p class="whut">
    武汉理工大学
</p>
</body>

    • 注意：class可以在bai页面里面重复使用，id由于在页面里面只能出现一次，所以不能重复使用，所以尽量用class来写，这样能在页面里面重复引用你写的css，减小工作量和代码量。

      这种情况尽量用id：页面大的模块里面，用id来区分不同的模块。比如页面里面有这样的模块：最新新闻，推荐新闻等。就可以考虑用id来区分。还有一点，由于id是页面中唯一的，更多的是定义来留给给页面里面的javascript用。

  2. 扩展选择器

    1. 选择所有元素

      *{
    color:red;
}

    2. 并集选择器：

      div,p{
    color:red;
}

    3. 子选择器：

      div p{
    color:yellow;
}

    4. 第一级子选择器：

      div > p{
    color:yellow;
}

    5. 属性选择器：

      input[type='text']{
    border: 5px solid;
}

    6. 伪类选择器：

      a:link/hover/active/visited{
    color: pink;
}
2.6 属性
  1. 字体、文本
    • font-size
    • color
    • text-align
    • line-height
  2. 背景
    • background：可以有多个属性值，顺序无关
  3. 边框
    • border：可以有多个属性值，顺序无关
  4. 尺寸
    • width
    • height
  5. 盒子模型：控制布局
    1. margin：外边距
    2. padding：内边距
      • 默认情况下内边距会影响整个盒子的大小
      • box-sizing:border-box;设置盒子的属性，让width和height就是最终盒子的大小
    3. float：浮动
      • left
      • right

示例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid red;
        }
        .div1{
            height: 400px;
            width: 400px;
            padding: 100px;
            box-sizing: border-box;
        }
        .div2{
            height: 200px;
            width: 200px;
            /*margin: 100px;*/
        }
        .div3{
            float: left;
        }
        .div4{
            float: left;
        }
        .div5{
            float: right;
        }

    </style>
</head>
<body>
<div class="div1">
    <div class="div2">
    </div>
</div>
<div class="div3">
    aaa
</div>
<div class="div4">
    aaa
</div>
<div class="div5">
    aaa
</div>

</body>

3. JavaScript

3.1 概念

是一门客户端脚本语言，运行在客户端浏览器中的，每一个浏览器都有JavaScript的解析引擎

  • JavaScript = ECMAScript(客户端脚本语言的标准) + JavaScript自己特有的东西(BOM+DOM)
3.2 功能

可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验

3.3 ECMAScript
3.3.1 基本语法

  1. 与html结合方式

    1. 内部JS：定义
3.3.2 基本对象

  1. Funtion：函数（方法）对象

    1. 创建：

      var 方法名 = function (形式参数列表) {
    方法体
}

      function 方法名(形式参数列表) { //不写方法名可以当作匿名方法
    方法体
}

    2. 方法

    3. 属性：length：代表形参的个数

    4. 特点：

      1. 方法定义是形参的类型不用写，返回值类型也不写
      2. 方法是一个对象，如果定义名称相同的方法会覆盖
      3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
      4. 在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数

    5. 调用：同java

  2. Array：数组对象

    1. 创建：

      1. var arr = new Array(元素列表);
      2. var arr = new Array(默认长度);
      3. var arr = [元素列表];

    2. 方法：

      1. join(参数)：将数组中的元素按照指定分隔符拼接为字符串
      2. push() 向数组的末尾添加一个或更多元素，并返回新的长度

    3. 属性

      length：数组的长度

    4. 特点：

      • JS中，数组元素的类型和长度可变

  3. Date、Math同java

  4. Boolean、Number、String都是包装类对象

  5. RegExp：正则表达式对象

    1. 正则表达式：定义字符串的组成规则

      1. 单个字符：[]

        如：[a] [ab] [a-zA-Z0-9]

        \d就是[0-9]，\w就是[a-zA-Z0-9]

      2. 量词符号

        ？：出现0次或1次

        *： 出现0次或多次

        +：出现1次或多次

        {m,n}：表示m<=数量<=n，如果m/n缺省，可以直接不写m/n

      3. 开始结束

        • ^：开始
        • $：结束

    2. 正则对象

      1. 创建
        1. var reg = new RegExp(“正则表达式”);
        2. var reg = /正则表达式/;
      2. 方法
        1. test(参数)：验证指定的字符串是否符合正则定义的规范
      <script>

    var reg1 = new RegExp("^\\w{6,12}&"); //这个要加个转义字符\

    var reg2 = /^\w{6,12}$/;

    var flag = reg2.test("zhangsan");
    document.write(flag);

</script>

  6. Global

    1. 特点：全局对象，这个Globel封装的方法不需要对象就可以直接调用。方法名();

    2. 方法：

      ​ encodeURI():url编码

      ​ decodeURI():url解码

      ​ encodeURIComponent():url编码，编码的字符更多

      ​ decodeURIComponent():url解码

      ​ parseInt():将字符串转为数字，逐一判断每个字符是否是数字，知道不是数字为止，将前面的数字部分转为number

      ​ isNaN():判断一个值是否是NaN,因为NaN不仅六亲不认，连自己都不认，用这个方法才能正确判断

      ​ eval():将JavaScript字符串转成脚本来执行

3.4 DOM和事件的简单学习

  1. DOM

    • 功能：控制html文档的内容

    • 获取页面标签（元素）对象：Element

      • document.getElementById(“id值”)：通过元素的id获取元素对象

    • 操作Element对象

      1. 修改属性值：

        1. 明确获取的对象是哪一个
        2. 查看API文档，找其中有哪些属性可以设置

      2. 修改标签体内容：

        • 属性：innerHTML
        1. 获取元素对象
        2. 使用innerHTML属性修改标签体内容
      <body>

    <img id="image" src="img/1.jpg">
    <h1 id="name">马云</h1>

<script>
    var image = document.getElementById("image");
    alert("我要换图片了");
    image.src = "img/2.jpg";

    var title = document.getElementById("name");
    alert("我要换内容了");
    title.innerHTML = "刘强东";
</script>

</body>

  2. 事件

    • 功能：某些组件被执行了某些操作后，出发某些代码的执行。

    • 如何绑定事件

      1. 直接在html标签上，指定事件的属性（操作），属性值就是js代码

        <img id="light" src="img/1.jpg" onclick="fun()"> //onclick就是事件

      2. 通过js获取元素对象，指定事件属性，设置一个函数

        <img id="light" src="img/1.jpg">

<script>
    function fun() {
        alert('点击一次')
    }

    var light = document.getElementById("light");
    light.onclick = fun; //不用带括号

</script>
3.5 BOM
  1. 概念：Browser Object Model 浏览器对象模型
    • 将浏览器的各个组成部分封装成对象
  2. 组成：如下图五种，DOM对象在窗口对象里面，内容单独成一讲

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-za3ZUsln-1605952793427)(https://i.loli.net/2020/11/21/gu3cDRWkeyAjHw2.png)]

  1. window:窗口对象

    1. 创建

    2. 方法

      1. 与弹出框有关的方法：alert(),confirm(),prompt()
      2. 与打开关闭有关的方法：close(),open()
      3. 与定时器有关的方法：setTimeout(),clearTimeout(),setInterval(),clearInterval()
      <input id="openBtn" type="button" value="打开页面">
<input id="closeBtn" type="button" value="关闭页面">

<script>
    // var b = confirm("确定要退出吗？");
    // alert(b);

    var openBtn = document.getElementById("openBtn");
    var newWindow;
    openBtn.onclick = function () {
        newWindow = open("https://www.baidu.com");
    }
    var closeBtn = document.getElementById("closeBtn");
    closeBtn.onclick = function () {
        newWindow.close();
    }

	//一次性定时器
	var id = setTimeout(fun,2000); //也可以"fun()"
    clearTimeout(id);

    function fun() {
        alert("boom");
    }

</script>

    3. 属性

      • 可以获取其他BOM对象，也可以获取DOM对象：

        history,location,Navigator,Screen/document

      window.document == document //使用时window可以省略

    4. 特点

    • Window对象不需要创建可以直接使用: window.方法名();
    • Window引用可以省略：方法名();

  2. Location：地址栏对象

    1. 创建（获取）：window.location(window可L省略)
    2. 方法：reload() 加载当前文档。相当于页面的刷新按钮
    3. 属性：href 设置或返回完整的URL
      • 与window.open()方法区别：这个是属性，在当前页面重定向

  3. History：历史记录对象

    1. 创建（获取）：window.history(window可省略)

    2. 方法：back(),forward() 相当于页面的后退和前进

      ​ go(参数) 正负代表前进和后退，数字代表跳过的历史记录个数

    3. 属性：length 返回当前窗口历史列表中的URL数量

3.6 DOM

  1. 概念：Document Object Model 文档对象模型

    • 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

  2. 核心DOM模型

    1. Document：文档对象

      1. 创建：window.document(window)可省略
      2. 方法：
        1. 获取Element对象：getElementById(),getElementsByTagName(),getElementsByClassName(),getElementsByName()
        2. 创建其他DOM对象：createAttribute(name),createComment(),createElement(),createTextNode()
      3. 属性

    2. Element：元素对象

      1. 获取/创建：通过document来获取和创建
      2. 方法：setAttribute(),removeAttribute()
      <body>

    <a>百度</a>
    <input id="btn_set" type="button" value="点击变成超链接">

<script>

    var btn_set = document.getElementById("btn_set");
    btn_set.onclick = function () {
        var element_a = document.getElementsByTagName("a")[0]; //加[0]是代替通过id获取的方法
        element_a.setAttribute("href","https://www.baidu.com");
    };

</script>

    3. Node：结点对象，是其他5个的父对象

      1. 特点：所有dom对象都可以被认为是一个结点

      2. 方法：CRUD dom树

        appendChild(),removeChild(),repalceChild()

        <body>

    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>

	/*
		超链接功能
			1.可以被点击：样式
			2.点击后跳转到href指定的url
		需求：保留1功能，去掉2功能
		实现：href="javascript:void(0);"
	*/
    <a href="javascript:void(0);" id="del">删除div1</a>

<script>

    var del = document.getElementById("del");
    del.onclick = function () {
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);
    }

</script>

</body>

      3. 属性：parentNode 返回结点的父节点

  3. HTML DOM

    1. 标签体的设置和获取：innerHTML

      <script>
    var div = document.getElementById("div1");
    var innerHTML = div.innerHTML;
    div.innerHTML += "<input type='text'>"; //注意引号的嵌套
</script>

    2. 使用html元素对象的属性

    3. 控制元素样式

      1. 使用元素的Style属性来设置
      2. 提前定义好类选择器的样式，通过元素的className属性来设置class属性值
      <head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .d1{
            border: 1px solid red;
            height: 100px;
            width: 100px;
        }
    </style>

</head>
<body>

<div id="div1">
    div
</div>

<script>
    var div = document.getElementById("div1");
    div.onclick = function () {
        //修改样式方式1
        // div.style.border = "1px solid red";
        //font-size --> fontSize
        // div.style.fontSize = "20px";
        
        //修改样式方式2
        div.className = "d1";
    }


</script>
3.7 事件监听机制

  1. 概念：某些组件被执行了某些操作后，触发某些代码的执行

    • 事件：某些操作，如：单击 双击 键盘按下 鼠标移动了
    • 事件源：组件，如：按钮 文本输入框
    • 监听器：代码
    • 注册监听：将事件，事件源，监听器结合在一起，当事件源上发生了某个事件，则出发执行某个监听器代码

  2. 常见的事件

    1. 点击事件：
      1. onclick：单击事件
      2. ondblclick：双击事件
    2. 焦点事件
      1. onblur：失去焦点
      2. onfocus：元素获得焦点
    3. 加载事件：
      1. onload：一张页面或一幅图像完成加载
    4. 鼠标事件：
      1. onmousedown 鼠标按钮按下
      2. onmouseup 鼠标按键松开
      3. onmousemove 鼠标移动
      4. onmouseover 鼠标移到某元素之上
      5. onmouseout 鼠标从某元素移开
    5. 键盘事件：
      1. onkeydown 某个键盘按键被按下
      2. onkeyup 某个键盘按键被松开
      3. onkeypress 某个键盘按键被按下并松开
    6. 选择和改变
      1. onchange 域 的内容被改变
      2. onselect 文本被选中
    7. 表单事件
      1. onsubmit 确认按钮被点击
      2. onreset 重置按钮被点击
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        window.onload = function () {

            /*document.getElementById("text").onblur = function () {
                alert("失去焦点");
            };*/
            /*document.getElementById("text").onmousemove = function () {
                alert("鼠标来了");
            };*/
            /*document.getElementById("text").onmousedown = function (event) {
                //鼠标哪个键被按下
                alert(event.button);
            };*/
            /*document.getElementById("text").onkeydown = function (event) {
                //鼠标哪个键被按下
                // alert(event.keyCode);
                if(event.keyCode==13){
                    alert("提交表单");
                }
            }*/

            /*document.getElementById("form").onsubmit = function () {
                return false;//阻止提交表单
            }*/

        }
        function checkForm() {
            return false;
        }
    </script>

</head>
<body>

<!--<form action="#" id="form">-->
<form action="#" id="form" onclick="return checkForm();">
    <input id="text" name="text">
    <input type="submit" value="提交">
</form>
</body>
</html>
3.8 练习
  1. 全选，全不选和反选
  2. 用户名和密码格式

4. AJAX和Json

4.1 AJAX

  1. 概念：ASynchronous JavaScript And XML 异步的JavaScript 和 XML

    1. 异步和同步：客户端和服务器段相互通信的基础上
    2. Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，提升用户的体验

  2. 实现方式

    1. 原生的JS实现方式（了解）

    2. JQuery实现方式

      1. $.ajax()：使用ajax发送异步请求

        //语法：$.ajax({键值对});
$.ajax({
    url:"/ajaxServlet", //请求路径
    type:"post",    //请求方式
    data:{"username":"jack","age":23},  //请求参数
    success:function (data) {
        alert(data);
    }, //响应成功后的回调函数
    error:function () {
        alert("出错了")
    },//表示如果请求相应出现错误，会执行的回调函数
    dataType:"text" //设置接收到的相应数据的格式
});

      2. $.get()：发送get请求

        //语法：$.get(url,[data],[callback],[type])
$.get("ajaxServlet",{username:"rose"},function (data) {
    alert(data);
},"text");

      3. $.post()：发送post请求，同上

4.2 JSON

  1. 概念：JavaScript Object Notation JavaScript对象表示法

    Person p = new Person();

    p.setName(“张三”);

    p.setAge(23);

    p.setGender(“男”);

    var p = {“name”:“张三”,“age”:23,“gender”:“男”};

    • json现在多用于存储和交换文本信息的语法
    • 进行数据的传输
    • JSON比XML更小，更快，更易解析

  2. 语法：

    1. 基本规则

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eZV5CzhN-1605952793437)(https://i.loli.net/2020/11/21/ulOcKi29MovXTeI.png)]

    2. 获取数据：

      1. json对象.键名

      2. json对象[“键名”]

      3. 数组对象[索引]

      4. 遍历

        var person = {"name":"张三",age:23};

var ps = [
    {"name":"张三","age":23},
    {"name":"李四","age":24},
    {"name":"王五","age":25}
];

for(var key in person){
    //这样的方式获取不行，因为相当于 person."name"
    // alert(key + ":" + person.key);
    alert(key + ":" + person[key]);
}

for(var i = 0;i<ps.length;i++){
    var p = ps[i];
    for(var key in p){
        alert(key + ":" + p[key]);
    }
}

    3. JSON数据和Java对象的相互转换

      • JSON常见的解析器：Jsonlib,Gson,fastjson,jackson

      1. JSON转为JAVA对象

        1. 导入jackson的相关的jar包
        2. 创建Jackson核心对象 ObjectMapper
        3. 调用ObjectMapper的相关方法进行转换
          1. readValue(json字符串数据,Class)

      2. JAVA对象转为JSON

        1. 使用步骤：

          1. 导入jackson的相关的jar包

          2. 创建Jackson核心对象 ObjectMapper

          3. 调用ObjectMapper的相关方法进行转换

            1. 转换方法

              1. writeValue(参数,obj);

                参数：File,Writer,OutputStream

              2. writeValueAsAtring(obj)：将对象转为json字符串

        2. 注解

          1. @JsonIgnore：排除属性
          2. @JsonFormat：属性值的格式化
            • @JsonFormat(pattern = “yyyy-MM-dd”)

        3. 复杂java对象转换

          1. List：数组
          2. Map：对象格式一致
牧岭
关注
  • 0
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端Javascript第一天理论：初识 JavaScript
m0_46597922的博客
04-20 423
1. 初识 JavaScript 1.1 JavaScript 是什么 布兰登·艾奇（Brendan Eich，1961年～）。 神奇的大哥用10天完成 JavaScript 设计。 最初命名为 LiveScript，后来在与 Sun 合作之后将其改名为 JavaScript。 JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语...
最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了
热门推荐
m0_67401270的博客
03-07 1万+
基于黑马前端视频学习的CSS3笔记，每一天的知识点都放在一起，方便学习查阅 ==CSS第一天== 一、css简介 二、css语法规范 三、css代码风格 四、css选择器的作用 五、css基础选择器 1、标签选择器： 2、类选择器 3、多类名选择器 4、id选择器： 5、id选择器和类选择器的区别 6、通配符选择器 7、选择器总结 六、css字体属性: 1、字体大小： 2、字体粗细： 3、字体样式： 4、字体的综合写法 5、字体总结： 七、css文本属性： 1、文本颜色： 2、文本
2022年前端自学全套路线总结（黑马版）
qq_39950127的博客
07-04 4696
前端完整自学路线（黑马整理版）
黑马前端JS笔记（WebAPI部分）
weixin_51584115的博客
08-30 642
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。............
《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》学习笔记总目录
放下华子我只抽RuiKe5的博客
09-23 1113
本文是对《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》所有知识点的笔记进行总结分类。 学习时总结的目录笔记以及思维导图和实训，将在后续更新。
前端学习笔记-黑马程序员
01-09
前端学习笔记-黑马程序员 本篇文章主要介绍了 HTML 基础知识，涵盖了标签的基本概念、HTML 基本结构、文档类型声明、字符集、标签语义、标题标签、段落和换行标签、文本格式化标签、图像标签、路径、超链接标签、...
前端学习笔记-黑马程序员Vue
最新发布
01-09
前端学习笔记-黑马程序员Vue Vue.js 是一款流行的前端框架，它提供了强大的模板语法、数据绑定、MVVM 模型等特点，帮助开发者快速构建复杂的前端应用程序。下面是对 Vue.js 的一些重要知识点的总结： Vue.js ...
黑马前端学习JS高级md
11-15
【标题】：“黑马前端学习JS高级md” 【描述】：“黑马JS高级md复习资料” 【标签】：“JS高级”、“JS”、“黑马JS高级” 在前端开发领域，JavaScript（JS）是不可或缺的一部分，特别是在现代Web应用程序中。...
黑马前端css笔记.zip
08-14
总结，"黑马前端css笔记.zip"包含了CSS3的重要知识点，如选择器扩展、媒体查询、响应式设计、渐变效果、布局技术（Flexbox和Grid）以及动画过渡等。这些内容对于前端开发人员深入理解和运用CSS3至关重要，能帮助他们...
前端学习笔记-黑马程序员JS
01-09
"前端学习笔记-黑马程序员JS" 本资源主要介绍了 JavaScript 的基本概念和语法，包括变量、数据类型、运算符、流程控制、数组、函数、对象、内置对象等知识点。 变量 在 JavaScript 中，变量可以在三种位置书写：...
黑马前端第一天资料
01-02
黑马前端第一天的学习资料，html和css的学习资料，可自行下载
html教程课堂笔记（黑马程序员）
03-22
视频资料以及笔记代码（其实只有笔记资源）
黑马web 39期 nodejs笔记
03-17
黑马web 39期 nodejs笔记
黑马javascript笔记
firewrk的博客
01-17 1942
黑马js笔记
前端HTML5+CSS3学习笔记
Baucd的小博客
11-17 8599
前端HTML5+CSS3学习笔记
黑马前端pink老师——jQuery入门基础学习笔记
weixin_44566194的博客
10-31 2019
本文将黑马前端 pink老师讲解的 jQuery 入门基础课笔记整理了一遍，包括 jQuery 概述、基本使用、常用API、jQuery 事件、jQuery 插件其他方法等知识点。
黑马程序员05-Web前端学习笔记
Spring Lee的博客
10-24 4048
部分资源地址 绿叶学习网 前端开发系统化学习，包括html、css、PC端及移动端布局技巧、javascript、jquery、js特效制作、ajax前后台交互等。 HTML 一个HTML文档由4个基本部分组成： ① 一个文档声明：② 一个html标签对：③ 一个head标签对：④ 一个body标签对： html5是向下兼容的文档，用sublime text创建方法： h
前端教程-黑马程序员版
黑马程序员官方博客
07-01 1276
有关前端学习这件事，基础知识和编程实践是入门阶段最重要的。刚开始学习前端的时候，需要对照一套前端教程，将基础知识学习一遍，完成好课后的练习。基础学习之后，就是实战，从一个静态的页面开始，到最后自己设计网站。想要学习前端的同学还在苦苦找寻前端教程吗？发愁没有前端资源吗？黑马程序员为大家整理了2022年全新版的路线图，还带来了前端的学习方法。前端学习不管是入门阶段还是进阶阶段，一定都要梳理知识体系。但是对于一些刚入门的小伙伴来说，连每一个名称背后的用途的都不了解。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值