前端笔记

B/S架构

B是browser （浏览器）用户使用的所有客户端（部分手机app，小程序），我们都可以视为浏览器。

S是server（服务器）。浏览器发送请求，通过http等互联网协议，发送至s端（服务端），s端把网页文件发送给前端，b端浏览器接收到文件后，浏览器解析成图形界面，可供用户操作。

HTML基础标签

<!DOCTYPE html>
<html>
<head>
    <!--头部，页面背景上的设置-->
    <meta charset="utf-8">
    <!-- meta元标签 -->
    <!-- charset编码格式 -->
    <title>hello，world</title>
    <!--  -->
</head>
<body>
    <div>无实意标签</div>
    <p>段落标签</p>
    <span>无实意标签</span>
    <img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1030%2Fb5db2e4cj00r1rlps007kc000xc00o1c.jpg&thumbnail=650x2147483647&quality=80&type=jpg">
    <ul type="circle">
        <!-- 无序列表有且只有li -->
        <li>aaaa</li>
        <li>bbbb</li>
        <li>cccc</li>
    </ul>
    <ol type="I">
        <!-- 有序列表 -->
        <li>aaaa</li>
        <li>bbbb</li>
        <li>cccc</li>
    </ol>
    <input type="text" name="">
    <input type="number" name="">
    <input type="password" name="">
    <!-- 单选框 -->
    性别:
    <input type="radio" name="gender">
    男
    <input type="radio" name="gender">
    女
    <br>
    <!-- 复选框 -->
    <input type="checkbox" name="">
    <a href="https://www.baidu.com">百度一下</a>
​
​
​
</body>
</html>

 

 

css

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- css层叠样式表
    特点：
    1.继承性 
    2层叠性 可被覆盖-->
    <link rel="stylesheet" type="text/css" href="main.css">
    <!-- 外部样式表/链入样式表 -->
    <style type="text/css">
        /*头部样式表*/
        ul{
            background: lightgreen
​
        }
        li{
            color:blue;
        }
        div{
            background: 
            lightgreen;
        }
        
    </style>
</head>
<body>
    <div style="width:  100px;
                height:  100px;
                background: lightblue;"> </div>
                <!-- 行内样式表，极差，不允许使用 -->
                <ul>
                    <li>aaaa</li>
                    <li>bbbbb</li>
                    <li id="xiaoMing">ccccc</li>
                    <li class="xiaoHong">ddddd</li>
                    <li>eeeee</li>
​
                 </ul>
​
​
                    
                
</body>
</html>
li{
    color: red;
​
}
/*标签选择器*/
#xiaoMing{
    color: pink;
}
/*id选择器，唯一且不重复*/
.xiaoHong{
    color: lightblue;
}
/*类名选择器*/
/*css优先级*/
/*1后来者居上,越往后越说了算
2行内样式>
3头部样式>=外部样式
4!important 优先级最高 不到万不得已
*/

命名法

xiaoMing小驼峰命名法 XiaoMing大驼峰命名法

下划线命名法 xiao_ming

xiao-ming

|表现与结构分离|

css常用属性

width：宽度 height：高度 background：背景 backgro-color：背景颜色

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        #div1{
            width: 800px;
            height: 800px;
            background-color: lightblue;
            background: url(https://img1.baidu.com/it/u=3420059188,161474843&fm=253&fmt=auto&app=120&f=JPEG?w=139&h=156) no-repeat;
/*平铺*/
            /*background-repeat-x: no-repeat;*/
            color: red;
            font-size: 20px;
            /*chrome默认16px,最小支持12px*/
            font-weight: 700;
            text-indent: 40px;
​
        }
        #div2{
            width: 300px;
            height: 50px;
            background: lightblue;
            text-align: center ;
            line-height: 50px;
            /*单行垂直居中*/
        }
    </style>
</head>
<body>
<div id="div1">
    时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
</div>
<div id="div2">
    滕王高阁临江渚
</div>
</body>
</html>
​

 

 

 

 

 

 

 

更多文章请关注《万象专栏》