标签：repeat 浏览器 前断 height color background css
1B/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国家标准扩展包 -->
<title>Hello，World！</title>
</head>
<body>
<div>无实意标签</div>
<p>段落</p>
<span>无实意标签</span>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180826%2F56195667faad4b97be4b66f55a9b1e9d.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638327866&t=063a07f5b16adc69b0d00fc04737bfbb">
<ul type="circle">
<!-- 无序列表 -->
<li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li>
</ul>
<ol type="i">
<li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li><li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li><li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li><li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li><li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</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>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
</html>
css基础
html代码
<!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">
/*头部样式表*/
ul{
background: lightgreen;
}
li{
color: blue;
}
/*后来者居上(在链入css后面,所以蓝色而非红色)*/
div{
background:lightgreen;
}
/*行内样式>头部样式>=外部样式,所以这里不生效*/
></style>
</head>
<body>
<div style="width:100px;height:100px;background: lightblue ;">
<!-- 这是行内样式表，极差，不允许使用 -->
</div>
<ul>
<li>aaaa</li>
<li class="xiaoHong">bbbb</li>
<li id="xiaoMing" class="xiaoHong">cccc</li>
<!-- 越精确越说了算id>class -->
<li class="xiaoHong">dddd</li>
<li >eeee</li>
</ul>
</body>
</html
css代码
li{
color: red;/*字体颜色*/
}
/*这是个标签选择器*/
#xiaoMing{
color: pink;
}
/*id选择器,id为一且不重复*/
.xiaohong{
color: lightblue !important;
}
/*class类名选择器的class不唯一*/
/*css优先级
1.后来者居上，越往后越说了算
2.行内样式优先级大于头部样式>=外部样式
3.越精确越说了算，id>class标签
4.!important优先级最最高，但是不到迫不得已的时候，不要用*/
驼峰命名法
xiaoMing小驼峰命名法 XiaoMing大驼峰命名法
下划线命名法 xiao-ming
xiao-ming
表现与结构分离
表现：css
结构：html
css常用属性
width：宽度；
height：高度；
background：背景(是一个复合属性)
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: 800px;
height: 800px;
/**/
/*background-image:url(https://img1.baidu.com/it/u=1126457770,3117789010&fm=26&fmt=auto) ;*/
/*background-repeat: no-repeat; 平铺*/
/*background-repeat-y: no-repeat ;*/
background: url(https://img1.baidu.com/it/u=1126457770,3117789010&fm=26&fmt=auto) no-repeat;
color: :red;
font-size: 20px;
/*chrome默认字体16px,最小支持字体12px*/
font-weight: 700;
text-indent: 40px;
line-height: 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>
标签：repeat,浏览器,前断,height,color,background,css 来源： https://www.cnblogs.com/FUCKKKYOU/p/15523034.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。