B/S架构

B是browser（浏览器）用户使用的所有客户端（部分手机app、小程序），我们都可以把它视为浏览器，S是server（服务器）。浏览器发出请求，通过http等互联网协议，发送至S端服务器，S端把网页文件发送给前端，B端浏览器收到文件后，浏览器解析成图形界面，可供用户操作。

HTML基础标签

<!DOCTYPE html>
<!-- html5,html语言的第五个版本
超文本标记语言
一处发布，到处可以查看 
上面是html5的标识，告诉浏览器这是按照html5标准写的代码
-->
<html>
<head>
    <!-- 头部，页面背景上的设置 -->
    <meta charset="utf-8">
    <!-- meta元标签 -->
    <!-- charset编码格式 -->
    <!-- GB-2312 -->
    <!-- GBK国家标准拓展包 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello，World！</title>
</head>
<body>
<div>无实意标签</div>
<p>段落标签</p>
<span>无实意标签</span>
<img src="https://upload-bbs.mihoyo.com/upload/2021/03/01/247406968/4d2f29f1319fc672bfa5393099d7d5ec_2352860829135151924.jpg">
<ul type="c">
    <!-- 无序列表 -->
    <li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>
</ul>
<ol type="i"><li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>
<li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li><li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li><li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li><li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li><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>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>

css基础

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

</head>
<!--    css层叠样式表
    特点：
    1，继承性 
2,层叠性,可被覆盖-->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- 外部样式表/链入样式表 -->
<style type="text/css">
    /*头部样式表*/
    ul{
        background: yellow;
    }
    li{ color:red }
    div{background:lightblue;}
</style>
<body>
<div style="width:100px;
height: 100px;
background: lightblue;
/*行内样式表，极差不允许使用*/
"></div>
<ul>
    <li>aaaaa</li>
    <li class="xiaoHong">bbbbb</li>
    <li id="xiaoMing" >ccccc</li>
    <li class="xiaoHong">ddddd</li>
    <li>eeeee</li>
</ul>
</body>
</html>

1.css部分

li{
    color: green;
}
/*标签选择器*/
#xiaoMing{
    color: pink;
}
/*id选择器,id唯一且不重复*/
.xiaoHong{
    color: lightblue;
}
/*class类名选择器*/
/*css优先级*/
/*1,后来者居上,越往后越说了算
2.行内样式>头部样式=外部样式
3.越精确越说了算,id>标签
4.!important优先级最高,但是不到最
迫不得已的时候不要用*/

驼峰命名法

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

下划线命名法

xiao_ming

xiao-ming

表现与结构分离

表现:css

结构:html

css常用属性

width:宽度

height:高度

background:背景

background-color

background-repeat:no-repeat 不循环-x/-y横向竖向循环

font-weight 字体宽度

text-index 文本间距

line-height 行间距

chorome浏览器默认字体16px,最小支持字体12px

各类标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        div{
width: 300px;
height: 300px;
background: lightblue;
display: inline-block;
        }
        span{
width: 300px;
height: 300px;
background: lightgreen;
display: inline-block;
        }
        input{width: 400px;
height: 50px;
        }
    </style>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
<input type="text" name="">
<input type="text" name="">



<!-- 块标签
div,ul,li,ol,h1~h6,p
可以设置宽高
不可以与别人共处一行
不设置宽度的情况下,默认宽度100%
行内标签
span,strong,a
不可以设置宽高
可以与别人共处一行
其宽高由内容撑开
行内块标签
img,input
可以设置宽高
可以与别人共处一行 -->
</body>
</html>

盒模型

<!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: 500px;
height: 500px;
background: lightblue;
overflow: hidden;
border: 5px solid red;/*dashed,dotted,double*/
/*border-radius: 255px;*/
border-top-left-radius:50% ;
border-top-right-radius:50% ;
border-bottom-right-radius:50% ;
        }
        #div2{
width: 100px;
height: 100px;
background: greenyellow;
margin:100px auto 0;
/*margin: 50px 0 0 50px;
上右下左
margin: 0 50px 10px;上0左右50下10
margin: 20px 30px;上下20左右30
margin:10px;四个方向都是10px*/
        }
        #div3{
width: 0;
height: 0;
border-top:50px solid red ;
border-right:50px solid transparent ;
border-bottom:50px solid rgba(0, 0, 0, 0) ;
border-left:50px solid blue ;
border-radius: 50px;
        }
        
    </style>
</head>
<body>
<div id="div1">
<div id="div2">
    
</div><span>132123</span>
</div>
<div id="div3"></div>


</body>
</html>

margin

margin: 50px 0 0 50px; 上右下左 margin: 0 50px 10px;上0左右50下10 margin: 20px 30px;上下20左右30 margin:10px;四个方向都是10px

border

border: 5px solid red;/dashed,dotted,double/

solid实线

dashed线状虚线

dotted点状虚线

double双实线

浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        #father{
width: 700px;
height: 30px;
background: lightblue;
margin: 100px auto 0;

        }
        #son1{

            width: 500px;
height: 100%;
background: lightcoral;
/*float: left;*/
/*display: inline-block;*/
        }
        #son2{
width: 100px;
height: 100%;
background: yellowgreen;
float: right;
/*display: inline-block;*/
        }

    </style>
</head>
<body>
浮动的框可以向左或向右移动,直到它的外边缘
碰到包含框或另一个浮动框的边框为止.
文档流
<div id="father">
    <div id="son1"></div>
    <div id="son2"></div>
</div>
</body>
</html>

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.

posted on 2021-11-03 21:39 兮宇阅读(265) 评论(0) 收藏举报

刷新页面返回顶部

前段笔记