前端（bs、HTML基础标签、css基础）

前端笔记

1.B/S架构

B是browser（浏览器也被称为客户端） 包括所有浏览器网页，移动app，小程序等等，S是serve（服务器），B端发起请求，S端收到请求后会把对应的信息发送给B端，B端拿到信息或者代码后，由浏览器进行解析。

2.HTML基础标签

<!DOCTYPE html>
<!-- html5的标识，告诉浏览器这是一个html5的页面  -->
<!-- 请按照解析html5的方式解析 -->
<html><!--开标签  -->
<head><!--头部 -->
    <meta charset="utf-8">
    <!-- 等号左边是属性 -->
    <!-- meta:元标签 -->
    <!-- charset:编码格式 -->
    <!-- utf-8：几乎包含了200多种语言里的所有字符 -->
    <!-- GB-2312国家标准
    GBK国家标准扩展包 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello,World!</title>
</head>
<body><!--主体-->
    <div>无实意标签</div>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <p>段落标签</p>
    <img src="https://cms-bucket.ws.126.net/2021/1101/30942773j00r1vh8c00pec001e000goc.jpg">
    <input type="text" name="">
    <input type="number" name="">
    <input type="password" name="">
    性别：
    <input type="radio" checked name="gender">
    男
    <input type="radio" name="gender">
    女
    <br>
    兴趣爱好：
    <input type="checkbox" name="">
    看书
    <input type="checkbox" name="">
    看电视
    <input type="checkbox" name="">
    睡觉
    <input type="checkbox" name="">
    干饭
    <input type="checkbox" name="">
    <ul type="square"><!--circle-->
        <!-- 无序列表 -->
        <li>aaaaaa</li>
        <li>bbbbbb</li>
        <li>cccccc</li>
    </ul>
    <ol type="a"><!--A,i,I -->
        <li>aaaaaa</li>
        <li>bbbbbb</li>
        <li>cccccc</li>
    </ol>
    <a href="https://www.baidu.com">
        wangyanbaidu
    </a>
    
</body>
</html><!--闭标签-->

 

3.css基础

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- css:层叠样式表
    特点：
    1.继承性，继承父级的某些样式
    2.层叠性，可被后来者覆盖 -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <style type="text/css">/*尖头括号是html*/
        /*头部样式表*/
        ul{
        background: yellow;
        }/*此为css*/
    </style>
</head>
<body>
<div style="width:100px;height:100px;background:lightblue;">
    <!-- 行内样式表，极差，不允许使用 在项目中绝对不允许这样使用-->
    
</div>
<ul>
    <li>aaaaaa</li>
    <li class="aaa">bbbbbb</li>
    <li class="aaa" id="li3">cccccc</li>
    <li class="aaa">dddddd</li>
    <!-- class名可以重复，id名不可以重复，当需要选中多个时用class -->
    <li>eeeeee</li>
</ul>
</body>
</html>
li{
    color: red;
}
#li3{
background: green;
color: red;
}
.aaa{
    background: pink;
    color: purple;
}
li{
    color: lightblue !important;
}
/*css优先级：
1.后来者居上，越往后越说了算；
2.id>class>标签；
3.    !important优先级最最高，不可能被后者覆盖，不到最迫不得已不要使用；
4.头部样式和外部样式
*/
/*.代表class*/
/*#代表id*/
 

 

posted @ 2022-05-06 10:37  赴人间惊鸿艳  阅读(345)  评论(0)    收藏  举报