第一天笔记：HTML：是一种标识性的语言css：层叠样式表是一种用来表现HTML等文件样式(效果)的计算机语言JavaScript：简称“JS”，是一种属于网络的脚本语言 常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果 通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的jQuery：jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码bootstrap：简洁、直观、强悍的前端开发框架 它在jQuery的基础上进行了更为个性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。jq对js进行了功能封装，简化了操作提升了性能bootstrap是一个综合性质的混合框架，内部不单对js做了封装，还提供了很多css样式集合和现成组件前端？后端？ （B/S）Web服务的本质： 浏览器发请求 –> HTTP协议 –> 服务端接收请求 --> 服务端返回响应 –> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面 浏览器内嵌了一个socket客户端，默认TCP链接HTML是什么？ 超文本标记语言，是一种用于创建网页的标记语言，不是编程语言 本质上是浏览器可识别的规则 我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题） 网页文件的扩展名：.html或.htm（没有区别）HTML使用标签来描述网页。不像python或其他编程语言一样，有逻辑之类，这个标记语言是没有逻辑的浏览器自带socket客户端，自己编写的服务端也可以为浏览器服务：from socket import *s = socket()s.bind(("",8881))s.listen(5)new_s, addr = s.accept ()while True: data = new_s.recv(1024) print(data.decode()) new_s.send(b"HTTP/1.1 200 OK\r\n\r\n") #HTTP/1.1 是一个规范、200 代表请求成功、OK 表示一切正常 with open("test.html","rb") as f: data = f.read() new_s.send(data)new_s.close()s.close()<!DOCTYPE html> #HTML文件声明，声明为HTML5文档<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的<title>、</title>定义了网页标题，在浏览器标题栏显示<body>、</body>之间的文本是可见的网页主体内容注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。浏览器页面调试工具 F12 Elements（元素）：对浏览器看来，所有标签都是元素 标签对文本进行了标记，所以HTML叫超文本标记语言 浏览器有识别标签的机制HTML标签格式，严格封闭 HTML标签是由尖括号包围的关键字 通常是成对出现的 也有一部分标签是单独呈现的，比如meta 标签里面可以有若干属性，也可以不带属性 <!--注释内容-->head内常用标签（了解）： Meta标签 <meta>标签位于文档的头部 <meta>提供的信息是用户不可见的 <meta>是一个自封闭标签 全封闭标签<h1>XXX</h1><meta>元素可提供有关页面的元信息（meta-information）,可以用来定义文档字符编码以及针对搜索引擎和更新频度的描述<meta http-equiv="Refresh" content="3/">自动跳转 content="2;url=https://www.baidu.com"<meta http-equiv="Refresh" content="3;url=http://www.baidu.com">head内常用标签（了解）： Meta关键字： name="keyword" content="欧美，日韩，国产" "keywords" 是一个经常被用到的名称。它为文档定义了一组关键字 某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类网站描述：meta标签可以设置网站描述信息，用于在搜索引擎搜索时，显示网站基本描述信息<meta name="description" content="这是一个很随便的网站"/>浏览器内核（渲染引擎）：渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息渲染引擎是兼容性问题出现的根本原因，大部分渲染效果差不多IE ：IE比较个色 <meta http-equiv="X-UA-Compatible" cotent="IE=edge">head内常用标签（了解）： meta 触屏缩放 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> device-width：设备宽度 - initial-scale=1.0，初始显示缩放比例。 - minimum-scale=0.5，最小缩放比例。 - maximum-scale=1.0，最大缩放比例。 - user-scalable=yes，是否支持可缩放比例（触屏缩放） link 图标 <link rel="icon" href="图标文件路径">body标签 h1 - h6标签 ,标题标签<body> hehe #body中没有包裹的就是普通文本显示 <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题,大圣</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6></body>br标签 换行 <h1>123</h1> <br> <h2>4<br>5</h2>注意点:所有的回车空格等空白内容都被认为是一个空格hr 标签 一行横线 <h2>1<hr>2</h2>a 标签 超链接标签不加href属性,就是普通文本显示 <a>小视频</a>加上href属性,不加值 <a href="">小视频</a> 文字有颜色效果,还有下划线,并且点击后会刷新当前的html页面加上href属性,并且加上值 <a href="http://www.baidu.com" target="_self" >baidu</a> 跳转对应网址的页面 未访问之前是蓝色的字体颜色 访问之后是紫色的字体颜色 target属性: _self:在当前标签页打开 href属性值的那个网址 _blank:在新的标签页打开 href属性值的那个网址a 标签 超链接标签 锚点：页面内容进行跳转（在自己的页面跳）<body> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a><h1 id="i1">第一章 XXX</h1><p> #段落标签 第一章内容</p>...img标签 图片标签：<img src=""><img width="200" height="200" src="timg.jpg" alt="稍等片刻" title="李孝利"> src属性:图片路径 必须写 alt属性:图片加载失败或者正在加载时提示的内容 title属性:鼠标悬浮时显示的内容# 不常用,通过css来控制 width:设置宽度 height:设置高度div标签: <div> 可定义文档中的分区 <div>是一个块级元素。这意味着它的内容自动地开始一个新行 可以把文档分割为独立的、不同的部分 <div style="color:green"> #显示为绿色 <h3>This is a header</h3> <p>This is a paragraph.</p> </div>span标签: 和div类似，但是不开始新行 用来组合文档中的行内元素<p>我的车是 <span style="color:blue">蓝色</span> 的。</p> 如果不对 div和span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异练习：把上面小说的“第一章”“第二章”。。。标题底色变为红色 <div style="background: red">字体变为绿色实现一个返回顶部的功能列表标签 ul和ol标签 :兴趣爱好: <ul> #<ul>作为无序列表的声明，<li>作为每个列表项的起始 <li>抽烟</li> <li>喝酒</li> <li>烫头</li> </ul> 喜欢的姑娘: <ol type="I" start="2"> #<ol> 标签定义有序列表,有序列表的各个列表项有先后顺序，所以会使用数字进行标识 <li>韩红</li> <li>贾玲</li> <li>李宇春</li> </ol>dl标签(了解) <dl> <dt>河北省</dt> <dd>邯郸</dd> <dd>石家庄</dd> <dt>山西省</dt> <dd>太原</dd> <dd>平遥</dd> </dl>table表格标签:<table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr></table>table表格标签: 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成 tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元 border:规定表格边框的宽度标签分类 块级标签(行外标签):独占一行,h1-h6\p\br\hr\div\ul\li 块级标签能够包含内联标签,和某些块级标签 内联标签(行内标签):不独占一行,img\a\span 不能包含块级标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!--<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">--> <meta name="description" content="这是一个很随便的网站"> <meta name="viewport" content="width=device-width"> <title>皇家赌场</title> <link rel="icon" href="fa.ico"></head><body>兴趣爱好：<ul type="None"><li>抽烟</li><li>喝酒</li><li>烫头</li></ul>喜欢的姑娘：<ol type="I" start="5"><ul><li>韩红</li><li>贾玲</li><li>李宇春</li></ul></ol>兴趣爱好：<dl> <dt>河北省</dt> <dt>邯郸</dt> <dt>石家庄</dt> <dt>山西省</dt> <dt>太原</dt> <dt>平遥</dt></dl><table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> <td>qwerttryt</td> </tr></table><img width="200" height="200" src="timg.jpg" alt="美女正在走来..." title="迪丽热巴"><h1 id="m1">美女荷官在线发牌</h1><h2>好刺激啊</h2><h3>这里有</h3><br><h4>李孝利</h4><h5>迪丽<br>热巴</h5><h6>Alex</h6><hr><h1>宝元</h1><a href="http://www.baidu.com" target="_blank">点击打开真正的快乐</a><br><a href="www.bh1ilibili.com" target="_blank">小视频</a><br><a href="#i1"><div style="background: red"><div style="color: chartreuse">第一章</div></div></a><a href="#i2"><div style="background: red"><div style="color: chartreuse">第二章</div></div></a><div style="color:green" style="background: aqua">嘿嘿嘿</div><a href="#i3">第三章</a><a href="#i4">第四章</a><a href="#i5">第五章</a><a href="#d1">红色部分</a><h1 id="i1">第一章:穿越成功</h1><p>震惊,Alex被雷劈成功穿越到了异世界</p><div style="color: chartreuse"><p>震惊,Al<div style="color:aqua">ex被雷劈成功</div>穿越到了异世界</p><p>震惊,Alex被雷劈成功穿越到了异世界</p><p>震惊,Alex被雷劈成功穿越到了异世界</p><p>震惊,Alex被雷劈成功穿越到了异世界</p><p>震惊,Alex被雷劈成功穿越到了异世界</p><p>震惊,Alex被雷劈成功穿越到了异世界</p></div><p>震惊,Alex被雷劈成功穿越到了异世界</p><h1 id="i2">第二章:全是女的</h1><p>这个世界居然没有男的,只有女的</p><div id = "d1" style="background: red"><p>这个世界居然没有男的,只有女的</p><p>这个世界居然没有男的,只有女的</p><p>这个世界居然没有男的,只有女的</p><p>这个世界居然没有男的,只有女的</p><p>这个世界居然没有男的,只有女的</p></div><p>这个世界居然没有男的,只有女的</p><p>这个世界居然没有男的,只有女的</p><h1 id="i3">第三章:好刺激</h1><p>震惊,Alex居然不感到快乐</p><p>震惊,Alex居然不感到快乐</p><p>震惊,Alex居然不感到快乐</p><p>震惊,Alex居然不感到快乐</p><p>震惊,Alex居然不感到快乐</p><p>震惊,Alex居然不感到快乐</p><p>震惊,Alex居然不感到快乐</p><p>震惊,Alex居然不感到快乐</p><p>震惊,Alex居然不感到快乐</p><p>震惊,Alex居然不感到快乐</p><h1 id="i4">第四章:身心俱疲</h1><p>Alex有点想念宝元</p><p>Alex有点想念宝元</p><p>Alex有点想念宝元</p><p>Alex有点想念宝元</p><p>Alex有点想念宝元</p><p>Alex有点想念宝元</p><p>Alex有点想念宝元</p><p>Alex有点想念宝元</p><p>Alex有点想念宝元</p><p>Alex有点想念宝元</p><p>Alex有点想念宝元</p><p>Alex有点想念宝元</p><p>Alex有点想念宝元</p><p>Alex有点想念宝元</p><p>Alex有点想念宝元</p><h1 id="i5">第五章:大结局</h1><p>宝元也穿越来了</p><p>宝元也穿越来了</p><p>宝元也穿越来了</p><p>宝元也穿越来了</p><p>宝元也穿越来了</p><p>宝元也穿越来了</p><p>宝元也穿越来了</p><p>宝元也穿越来了</p><p>宝元也穿越来了</p><p>宝元也穿越来了</p><p>宝元也穿越来了</p><p>宝元也穿越来了</p><p>宝元也穿越来了</p><p>宝元也穿越来了</p><p>宝元也穿越来了</p><p>宝元也穿越来了</p><a href="#m1">回到顶部</a></body></html>第二天笔记：表格由 table 元素以及一个或多个 tr、th 或 td 元素组成tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元border:规定表格边框的宽度input标签 输入框：用户名：<input type="text">普通文本输入框密码: <input type="password">密文输入框form 表单标签使用 <form> 标签可以通过浏览器向服务器传输数据<form action="http://127.0.0.1:8001"></form>action属性: 指定提交路径,提交到哪里去<form action="http://192.168.3.18:8001">用户名：<input type="text" name="uname"> <!--uname:输入的内容 -->密码: <input type="password" name="pw"> <!--pw:输入的内容 --> <input type="submit" value="登陆"> submit 生成提交按钮</form>input的其他属性<input type="reset"> <!--生成重置按钮，清空输入内容--><input type="button" value="按钮"> <!--普通按钮，不会触发提交--><input type="date">、 <!--时间日期输入框--><input type="file"> <!--文件输入框，了解即可后面讲，需要特殊设置--><input type="number"> <!--纯数字输入框-->input的其他属性单选框 性别 <input type="radio" name="sex" value="1">男 <input type="radio" name="sex" value="2">女复选框(多选框) 喜欢的明星: <input type="checkbox" name="hobby" value="1"> baby <input type="checkbox" name="hobby" value="2"> 热巴 <input type="checkbox" name="hobby" value="3"> 艺昕下拉框（单选）<select name="city" id="city"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> <option value="4">惠州</option></select>下拉框（多选）（ctrl） <select name="citys" id="citys" multiple="multiple"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> <option value="4">惠州</option> </select>textarea 多行文本输入框 <textarea name="携带用户输入"></textarea>css：层叠样式表作用是为标签加效果 <div style="background: red">123</div>css样式引入方式第一种:head标签中引入<style> /*选择器{css属性名称:属性值;css属性名称:属性值;} */ div{ width: 200px; height: 200px; background-color: red; }</style>给所有div标签加样式第二种方式：外部文件引入 （工作中常用的）创建一个css文件,stylesheet文件,比如test.css文件。里面写上以下代码div{ /* css注释 */ width: 200px; height: 200px; }在想使用这些css样式的html文件的head标签中写上下面的内容<link rel="stylesheet" href="test.css"> href对应的是文件路径第三种方式：内联样式<div style="background-color: red;height: 100px;width: 100px;"></div>基本选择器 元素选择器div{width:100px;} 标签名称{css属性:值}id选择器css写法: #d1{ width: 100px; height: 100px; }<div id="d1"> </div>类选择器html代码:<div id="d1" class="c1"> baby</div><div id="d2" class="c2"> 热巴</div><div id="d3" class="c1"> 唐艺昕</div>css写法.c1{ width: 100px; height: 100px;}属性选择器html代码:<div id="d5" class="c1" xx="ss"> baby</div><div id="d2" class="c2" xx="kk"> 热巴</div>css写法[xx]{ /*属性查找*/ width: 100px; height: 200px; } [xx='ss']{ /*属性带属性值查找*/ background-color: green; width: 100px; height: 200px;}后代选择器<div id="d1" class="c1" xx="ss"> <span> <a href="http://www.baidu.com">baby</a> </span> </div> <div id="d2" class="c2" xx="kk"> <a href="http://www.baidu.com">热巴</a> </div> <div id="d3" class="c1"> 唐艺昕 </div> <a href="http://www.baidu.com">xxxxxxx</a>css写法：div a{ color:orange; }组合选择器css代码:注意:a标签字体颜色设置,必须找到a标签才能设置 #d1 a,#d3 a{ color:yellow; }高度宽度css写法: div{ height: 100px; width: 100px; background-color: pink; } span{ ！！！行级标签不能设置高度宽度 height: 100px; width: 100px; background-color: green; }高度宽度： 宽度高度可以设置百分比，会按照父级标签的高度宽度来计算<div class="c1"><div class="c2">234</div></div>css写法: .c1{ width: 200px; height: 100px; background: red; } .c2{ width: 50%; height: 50%; background: gold; }字体相关html代码: <div> 窗前明月光 </div>css写法: font-size: 50px; /* 默认字体大小是16px */ color:green; /* 字体颜色 */ font-family: '楷体', '宋体'; 浏览器如果不支持第一个选第二个。。。 font-weight: 400; /* 字体粗细 100-900,默认是400 */字体对齐html代码: <div> 窗前明月光 </div>css写法: height: 100px; width:200px; text-align: center; 水平居中 /*text-align: right;*/ line-height: 100px; 和height高度相同,标签文本垂直居中背景html代码: <div> 窗前明月光 </div>css写法: background-color: rgb(155, 255, 236); background-image: url("fage.png");url写图片路径,也可以是网络地址路径 background-repeat: no-repeat; background-repeat: repeat-y; background-position: right top; （lift top,center top,right top,center bpttom） background-position: 100px 50px; 简写方式 background: #ff0000 url("fage.png") no-repeat right bottom;颜色设置： 英文单词:red; 十六进制: #ff746d; rgb: rgb(155, 255, 236);背景颜色透明度: rgba(255, 0, 0,0.3); 单纯的就是颜色透明度标签透明度（例如背景图片透明度）: opacity: 0.3; 0到1的数字,这是整个标签的透明度边框：html代码: <div> 窗前明月光 </div>css写法: /* 边框简写方式,对四个边框进行设置 */ /*border:1px solid red;*/ 宽度/样式/颜色 /*border-left: 1px solid green;*/ /*border-top: 1px solid blue;*/ border-width: 5px; 边框宽度 border-style: dashed; 边框样式 border-color: aqua; 边框颜色盒子模型：标签在页面上占用空间大小margin: 外边距 距离其他标签或者自己父级标签的距离padding: 内边距 内容和边框之间的距离border: 边框content: 内容部分 设置的width和height标签占空间总大小=border+padding+content+margin盒子模型：html代码: <div> 窗前明月光 </div>css写法: width: 200px; height: 100px; border: 4px solid red;内边距：内容和边框之间的距离 /*padding: 6px 8px;*/ /*padding: 4px 2px 6px 8px;*/ 上4右2下6左8 /*padding-left: 20px;*/ /*padding-top: 20px;*/ /*padding-right: 20px;*/ /*padding-bottom: 20px;*/外边距：距离其他标签或者自己父级标签的距离html代码: <div> 窗前明月光 </div> <div class="c1"> <div class="c2"> </div> </div>css写法: .c1{ height: 100px; width: 100px; /*margin: 10px 15px;*/ 上下10，左右15 margin-left: -10px; } .c2{ background-color: green; height: 20px; width: 20px; /*margin: 10px 15px;*/ margin-left: 20px; }display属性：改变标签属性html代码: <span> 我是span标签 </span> <div class="c1"> 鹅鹅鹅,曲项向天歌! </div> <div class="c2"> 白毛浮绿水 </div>css写法: span{ /*display: block;*/ } .c1{ height: 100px; width: 100px; display: inline; /*display: inline-block;*/ }inline: 将块级标签变成了内联标签inline-block: 同时具备内联标签和块级标签的属性,也就是不独占一行,但是可以设置高度宽度display的几个值:inline: 将块级标签变成了内联标签block:将内联标签变成块级标签inline-block: 同时具备内联标签和块级标签的属性,也就是不独占一行,但是可以设置高度宽度none: 设置标签隐藏 （了解，后面用）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> 第一种方式给所有div加： <style> div{ width: 100px; height: 100px; background-color: red; } </style> 第二种方式外部文件引入： <link rel="stylesheet" href="test1.css"> 第三种内联样式： <div style="background-color: red;height: 100px;width: 100px">111</div> 基本选择器： <style> div{width:100px;} a{background-color:green} /*</style>*/</head><body><form action="http://192.168.19.138:8886">用户名:<input type="text" name="uname"><br>密码:<input type="password" name="pw"> <input type="submit" value="确定"> <input type="reset"> <input type="button" value="按一下"> <input type="date"> <input type="file"> <input type="number"> 男<input type="radio" name="sex" value="1"> 女<input type="radio" name="sex" value="2"> alex<input type="radio" name="sex" value="3"> 喜欢的明星 <input type="checkbox" name="like" value="c">蔡徐坤 <input type="checkbox" name="like" value="w">吴亦凡 <input type="checkbox" name="like" value="s">四字弟弟 <input type="checkbox" name="like" value="y">王源 <select name="qwe" id="qwe" multiple="multiple"> <option value="1">小泽</option> <option value="2">吉泽</option> <option value="3">龙泽</option> <option value="4">波多</option> <option value="5">苍井</option> </select><textarea name="携带用户输入"></textarea><div style="background: red">123</div><br><div style="background-color: red;height: 100px;width: 100px">222</div><div id="d1"> </div><a href="">333</a><div id="d1">111</div><div id="d2">222</div><div id="d3">333</div><div id="d1" class="c1"> baby</div><div id="d2" class="c2"> 热巴</div><div id="d3" class="c3"> 唐艺昕</div><div id="d5" class="c1" xx="ss"> baby</div><div id="d2" class="c2" xx="kk"> 热巴</div><div id="d1" class="c1" xx="ss"> <span> <a href="http://www.baidu.com">baby</a> </span></div><div class="c1"><div class="c2">234</div></div><div>床前明月光</div><span> 我是span标签</span><div class="c1"> 鹅鹅鹅,曲项向天歌！</div><div class="c2"> 白毛浮绿水</div></form></body></html>CSS代码：div{ width: 200px; height: 200px; /**/ font-size：50px; color：green; font-family:'楷体'; font-weight:400; /*background-color:#ff746d;*/ /*background-color: rgb(155,255,236);*/ /*background-image: url("http://b-ssl.duitang.com/uploads/item/201208/30/20120830173930_PBfJE.jpeg");*/ /*background-image: url("1.png");*/ /*background-repeat: no-repeat;*/ /*background-repeat: repeat-y;*/ /*background-position: right top;*/ /*background-position: 100px 50px;*/ /*background: #ff0000 url("1.png") no-repeat right bottom;*/ border: 1px solid red; border-left: 1px solid green; border-top: 1px solid blue; border-width: 5px; border-style: dashed; border-color:aqua; padding: 6px 8px; padding: 4px 2px 6px 8px; padding-left: 20px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; margin: 10px 15px; margin-left: -10px;}/*#d1{*/ /*background-color: green;*/ /*width: 100px;*/ /*height: 100px;*//*}*//*#d2{*/ /*background-color: red;*/ /*width: 50px;*/ /*height: 50px;*//*}*//*#d3{*/ /*background-color: purple;*/ /*width: 300px;*/ /*height: 300px;*//*}*//*.c1{*/ /*background-color: green;*/ /*width: 100px;*/ /*height: 100px;*//*}*//*[xx]{*/ /*background-color: green;*/ /*width: 100px;*/ /*height: 200px;*//*}*//*[xx="ss"]{*/ /*background-color: red;*/ /*width: 100px;*/ /*height: 200px;*//*}*//*div a{*/ /*color: orange;*//*}*//*.c1{*/ /*width: 200px;*/ /*height: 100px;*/ /*background: red;*//*}*//*.c2{*/ /*width: 50%;*/ /*height: 50%;*/ /*background: gold;*//*}*/span{ /*display：block;*/}.c1{ background-color: red; height: 100px; width: 100px; display: inline; /*display:inline-block;*/}第三天复习：服务器代码：from socket import *s = socket()s.bind(("127.0.0.1",8881))s.listen(5)new_s,addr = s.accept ()while True: data = new_s.recv(1024) print(data.decode()) new_s.send(b"HTTP/1.1 200 OK\r\n\r\n") with open("test.html","rb") as f: data = f.read() new_s.send(data)new_s.close()s.close()HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } #d1{ height: 200px; width: 800px; background-color: gray; } #d2{ height: 200px; width: 200px; background-color: aquamarine; float: left; } #d3{ height: 200px; width: 200px; background-color: plum; float: right; } #d4{ height: 300px; width: 1400px; background-color: black; clear: left; } div{ height: 200px; width: 200px; background-image: url("1.png"); } div{ width: 200px; height: 300px; background-color: fuchsia; } div:after{ content: "???????"; color: maroon; } </style></head><body><form action="http://127.0.0.1:8881"><span style="color:cyan">请输入账号:</span><input type="text"><br><span style="color:cyan">请输入密码:</span><input type="password"> <input type="date"> 迪丽热巴<input type="radio" name="love" value="1"> 李孝利<input type="radio" name="love" value="2"> 韩红<input type="radio" name="love" value="3"> <input type="checkbox" name="like" value="1">唐艺昕 <input type="checkbox" name="like" value="2">杨幂 <input type="checkbox" name="like" value="3">baby <input type="checkbox" name="like" value="4">贾玲 <input type="checkbox" name="like" value="5">乔碧萝 <select name="dog" id="s1" multiple="multiple"> <option value="1">拉布拉多</option> <option value="2">萨摩</option> <option value="3">牛头梗</option> <option value="4">哈士奇</option> <option value="5">泰迪</option> </select> 请输入：<textarea name="一首好诗" id="t1" cols="30px" rows="10"></textarea> <br><input type="submit" value="提交"><div xx="qq"> <span></span></div></form><div> 一首好诗</div><div> 汗滴禾下土</div><div id="d1"> <div id="d2"></div> <div id="d3"></div> <div id="d5" style="clear: both"></div></div><div id="d4"></div><div> 一段文字</div></body></html>CSS代码：/*span{*/ /*background: purple;*//*}*//*#d1{*//*}*//*.ccc{*//*}*//*[xx="oo"]{*//*}*//*#d1,#d2{*/ /*height: 100px;*/ /*width: 1000px;*//*}*//*body{*/ /*margin: 0;*//*}*//*.c1{*/ /*!**!*/ /*height: 300px;*/ /*width: 300px;*//*}*//*.c1:hover{*/ /*background-color: green;*/ /*background-image: url("1.png");*/ /*cursor: pointer;*//*}*//*.c2{*/ /*background-color: green;*/ /*height: 100px;*/ /*width: 200px;*/ /*float: right;*//*}*//*.c3{*/ /*background-color: pink;*/ /*height: 100px;*/ /*width: 100%;*/ /*clear: both;*//*}*//*.clearfix:after{*/ /*content: '';*/ /*display: block;*/ /*clear: both;*//*}*//*div{*/ /*background-color: pink;*/ /*height: 100px;*/ /*width: 200px;*//*}*//*div:after{*/ /*content: '?';*/ /*color: white;*//*}*//*.c1{background: black;*/ /*height: 400px;*/ /*width: 400px;*//*}*//*.c2{background: aqua;*/ /*height: 40px;*/ /*width: 40px;*/ /*display: none;}*//*.c1:hover .c2{*/ /*display: block;*//*}*//*position：relative;*//*left：100px;*//*top：-100px;*//*bottom：*//*right：*//*.s1{*/ /*position: fixed;*/ /*left: 40px;*/ /*bottom: 20px;*//*}*/浮动的元素,不独占一行,并且可以设置高度宽度：html代码 <div class="cc"> <div class="c1"></div> <div class="c2"></div> </div><!--<div class="c3"></div>-->cssl代码body{margin: 0;}.c1{height: 100px;width: 200px;float: left;}.c2{background-color: green;height: 100px;width: 200px;float: right;}/*.c3{*//*background-color: pink;*//*height: 100px;*//*width: 100%;}*/ 浮动,造成父级标签塌陷（没有高度了）• 解决父级标签塌陷 问题:– 方式1：给父级标签加高度 不常用– 方式2：清除浮动(clear属性) 不常用.c3{ background-color: pink; height: 100px; width: 100%; clear: both; （这个标签上面不允许有浮动的元素）}html代码: <div class="cc clearfix"> <div class="c1"></div> <div class="c2"></div> <div style="clear: both;"></div></div><div class="c3"></div>方式4：常用 (需要先了解伪元素选择器)css代码:.clearfix:after{ content: ''; display: block; clear: both;}html代码:<div class="cc clearfix"> <div class="c1"></div> <div class="c2"></div></div><div class="c3"></div>伪元素选择器html代码:<div> 一段文字</div>css写法：div{ height: 100px; width: 200px; }div:after{ content: '?'; color:white; }伪类选择器：html代码<div class="c1"></div>css写法.c1{ height: 300px; width: 300px;}.c1:hover{ /*鼠标悬浮时设置效果*/ /*background-color: green;*/ background-image: url("a.png"); cursor: pointer; }悬浮显示其他标签效果：html代码<div class="c1"><div class="c2"></div></div>css写法.c1{background: black; height: 400px; width: 400px; }.c2{background: aqua; height: 40px; width: 40px;display: none;} .c1:hover .c2{ display: block;}定位positon：做一些小的范围布局html代码<div class="cc"> <div class="c1"></div> <div class="c2"></div></div><div class="c3"></div>• static 静态定位,也就是标签默认• relative: 相对定位,按照自己原来的位置进行移动• absolute: 绝对定位,按照父级标签或者祖先辈儿标签设置了相对定位的标签位置进行移动,如果没有找到相对定位标签,会找到整个文档的位置进行移动• fixed: 固定定位, 按照浏览器窗口的位置进行移动相对定位：relativecss代码 position: relative; left:100px; top:-100px; /*bottom:*/ /*right:*/绝对定位：absolute– 如果只设置了position: absolute，而没有设置位移距离，会被覆盖– 按照父级标签或者祖先辈儿标签设置了相对定位的标签位置进行移动,如果没有找到相对定位标签,会找到整个文档的位置进行移动css代码 position: absolute; top: 20px; left: 80px; /*.cc{ margin-top: 200px; position: relative;}*/固定定位：fixed, 按照浏览器窗口的位置进行移动html代码<span class="s1"><a href="">返回顶部</a></span>css代码 .s1{ position: fixed; left: 40px; bottom: 20px; }选择器优先级 （从高到低）– 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式（无敌）– 作为style属性写在元素内的样式– id选择器– 类选择器– 标签选择器– 总结：!important > 行内样式>ID选择器 > 类选择器 > 标签 练习（下周一之前完成即可）：– 通过html和css完成小米商城首页的开发,暂不需要完成动态效果,有页面展示效果就可以 （https://www.mi.com/）– 注意：前端页面效果可以通过很多种方式实现，没有标准答案，大家可以参考小米官网源码，也可以根据自己想法去实现
来源：https://www.cnblogs.com/zhang-da/p/11986905.html