前端(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)    收藏  举报