前端三剑客快速入门（一）

时间：2022-10-05 21:05:15

前言：

前端三剑客即HTML、CSS、JavaScript。本文只对其进行简单介绍，达到简单WEB程序所需。若想要深入学习，可以查看W3C教程，其对三者进行了详细的介绍。

HTML

  1. 简介：HTML是一种超文本标记语言，由浏览器来解析运行，其作用为编写网页的结构。

  2. 常见标签及代码：

  • 第一节：日常标签
<!-- 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>我的第一个网页</title>
</head>
<body>
    <div>
        <!-- 标题标签 -->
        <h1>hello world</h1>
        <h2>hello world</h2>
        <h3>hello world</h3>
        <h4>hello world</h4>
        <h5>hello world</h5>
        <h6>hello world</h6>
    </div>
    <!-- 段落标签 -->
    <p>这是我的第一个网页这是我的第一个网页这是我的第一个网页这是我的第一个网页</p>
    <p>这是我的第一个网页这是我的第一个网页这是我的第一个网页这是我的第一个网页这是我的第一个网页这是我的第一个网页</p>
    <!-- 列表标签 -->
    <!-- 无序列表 -->
    <ul>
        <li>香蕉</li>
        <li>鸭梨</li>
        <li>苹果</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>香蕉</li>
        <li>鸭梨</li>
        <li>苹果</li>
    </ol>
    <!-- 超链接标签 -->
    <a href="http://baidu.com">跳转到百度</a>
    <img src="coder.jpg" alt="图片加载失败">
    <!-- 重要属性id class -->
    <h1 >hehehe</h1>
    <h1 >hehehe</h1>
    
    <p class="hot">红</p>
    <p class="hot">黄</p>
    <p class="cool">蓝</p>
    <p class="cool">绿</p>
</body>
</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>第一个网页</title>
</head>
<body>
    <!-- 表格元素容器为table -->
    <table border="1">
        <!-- 表头：thead -->
        <thead>
            <!-- <th colspan="4">学生列表</th> -->
            
        </thead>
        <!-- 表体 -->
        <tbody>
            <tr>
                <td colspan="4">学生列表</td>
            </tr>
            <tr>
                <td rowspan="3">一班</td>
                <td>1</td>
                <td>小红</td>
                <td>7</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小鹿</td>
                <td>5</td>
            </tr>
            <tr>
                <td>3</td>
                <td>小张</td>
                <td>6</td>
            </tr>
        </tbody>
    </table>
    <!-- 表单容器：form标签 -->
    <form action="">
        <label for="usename">用户名</label>
        <input >
        <label for="password">密码</label>
        <input >
        <input name="sex" type="radio">公
        <input name="sex" type="radio">母
        <select name="" >
            <option value="">男</option>
            <option value="">女</option>
        </select><br>
        爱好<br>
        <input type="checkbox">足球
        <input type="checkbox">篮球<br>
        <input type="submit" value="登录">
        <input type="button" value="按钮">
    </form>
</body>
</html>

CSS

  1. 简介：CSS全称层叠样式表，用来控制网页的样式，其作用主要是美化网页。

  2. CSS选择器与常用属性及其代码

  • 第一节：选择器类型
<!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>
    <style>
        /* 选择器 */
        h1{
            color: brown;
            font-size: 12px;
        }
        .test{
            color: blue;
        }
        #name{
            color: purple;
        }
        *{
            color: green;
        }
    </style>
</head>
<body>
    <h1>hello world</h1>

    <h1 class="test">类选择器</h1>
    <p class="test">这是一个段落，它应该是蓝色的。这是一个段落，它应该是蓝色的。这是一个段落，它应该是蓝色的。</p>

    <span >一个块，它会是紫色的</span>
</body>
</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>css选择器常用属性</title>
    <style>
        .test{
            font-size: 18px;
            color: white;
            background-color: black;
            text-align: center;
            line-height: 100px;
        }
        img{
            width: 500px;
            height: auto;
        }
    </style>
</head>
<body>
   <h1 class="test">hello world</h1>
   <img src="coder.jpg" alt="图片正在加载ing">
</body>
</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>
    <style>
        /* 层级选择器  */
        /* .box1 h1{
            color: red;
        } */
        /* 组合选择器 */
        .box1 h1,.box1 h2{
            color:red;
        }
    </style>
</head>
<body>
    <div class="box1">
        <h1>hello h1</h1>
        <h2>hello h2</h2>
    </div>
    <div class="box2">
        <h1>box2容器</h1>
        <h2>hello world</h2>
    </div>
</body>
</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>
    <style>
        /* 伪类选择器 */
        /* .box{
            height: 100px;
            width: 100px;
            background-color: red;
        }
        .box:hover{
            background-color: blue;
        } */
        /* 伪元素选择器 */
        h1::before,h2::after{
            content: "aaaa";
            color:red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <h1>hello h1</h1>
    <h2>heloo h2</h2>
</body>
</html>

选择器权重

  1. 不同选择器权重：id（100）>class（10）>element（1）
  2. 相同选择器：后面的会覆盖前面的
  3. 层级选择器：将权重累加比较
<!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>
    <style>
        /* 选择器权重 */
        /* #hehehe{
            color: red;
        } */
        /* .box1{
            color: blue;
        } */
        /* h1{
            color: green;
        }
        h1{
            color: blue;
        } */
        .box1 #henghengheng{
            color: red;
        }
        .box1 h1{
            color: green;
        }
    </style>
</head>
<body>
    <div class="box1" >
        <h1  >hello world</h1>
    </div>
</body>
</html>
  • 设置最高权重
    !important
<!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>
    <style>
        /* 选择器权重 */
        /* #hehehe{
            color: red;
        } */
        /* .box1{
            color: blue;
        } */
        /* h1{
            color: green;
        }
        h1{
            color: blue;
        } */
        /* 10 + 100 */
        .box1 #hehehe{
            color: red ;
        }
        /* 10 + 1 */
        .box1 h1{
            color: green !important;
        }
    </style>
</head>
<body>
    <div class="box1" >
        <h1  >hello world</h1>
    </div>
</body>
</html>

引入CSS的方法

  1. 嵌入样式
  2. 内联样式
  3. 外部样式
<!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>
    <!-- 嵌入样式 -->
    <style>
       h1{
        color: red;
       }
    </style>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="style/demo06.css">
</head>
<body>
    <!-- 内联样式,行内样式,权重要比嵌入样式大 -->
    <h1 style="color: green;">hello world</h1>
    <h1>hello green</h1>
</body>
</html>

后续

因为内容实在是比较多，所以我分开来写了，CSS还没写完，JS也还没开始。后面还打算写node和vue，只能说路漫漫其修远兮，容不得一点懈怠啊！

相关文章