html部分的内容(以文件形式说明)
过去的html
<!-- 常用快捷键
【Ctrl+Shift+P】打开命令面板，常用语安装插件等命令
【Ctrl+P】快速的搜索项目中的文件，常用于项目文件较多的情况中
【Ctrl+G】跳转到指定的行数，常用于代码定位
【Ctrl+W】快速关闭当前打开的文件，用于文件打开过多导致难以区分
设置多个编辑光标，按住Ctrl接着点击鼠标即可，常用于编辑多个项目代码段
【Ctrl + F】查找功能，不多介绍
【Ctrl + H】替换功能，不多介绍
【Ctrl + L】选择行，同时按住Shift键，接着按上下键可以进行代码上下移动行
【Ctrl+/】注释当前行可取消注释
【Ctrl + D】选择光标所在的文本后，可同时操作其他相同文本内容，常用于修改所有相同文本操作 --> -->
<!-- <!DOCTYPE html>
<html lang="en,zh">
<head>
<meta charset="utf-8">
<meta content="幼虫" name="description">
<title>淘宝网，淘！我喜欢</title>
</head>
<body>
<div style="color: #f40">
<h1>Django 简介</h1>
<p>
<em>
Django 是一个由 Python 编写的一个开放源代码的 Web 应用框架。使用 Django，只要很少的代码，Python 的程序开发人员就可以轻松地完成一个正式网站所需要的大部分内容，并进一步开发出全功能的 Web 服务 Django 本身基于 MVC 模型，即 Model（模型）+ View（视图）+ Controller（控制器）设计模式，MVC 模式使后续对程序的修改和扩展简化，并且使程序某一部分的重复利用成为可能
</em>
</p>
<h1>MVC 模型</h1>
<p>
<strong>
MVC 模式（Model–view–controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）
</strong>
</p>
<del>￥60</del> ￥25
<address>澳洲花园</address>
</div>
<span>谢谢惠顾</span>
</body>
</html> -->
<!-- 空格是文字分割符的作用 -->
<!-- html编码的特殊字符 -->
<!-- 空格
<小于s
>大于
<br>换行
<hr>水平线
成对标签把其想作用的文本作用成想成为的样子，单标签自己代表功能，不需要修饰文本
-->
<!-- 有序列表 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding: 0;
}
ul{
list-style: none;
}
li{
float: left;
margin: 0 15px;
color: #f40;
font-weight: bold;
font-size: 24px;
height: 25px;
line-height: 25px;
padding: 0 5px;
}
li:hover{
background-color: #f40;
color: #fff;
border-radius: 15px;
}
input{
border: 2px solid #999;
}
</style>
<title>淘宝</title>
<link rel="stylesheet" type="text/css" href="review.css">
</head>
<body>
<ul type="circle">
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
</ul>
<br>
<br>
<br>
<br>
<br>
<div style="color: #424242">
<form method="get" action="">
<p>用户名 : <input type="text" name="username" style="color: #999" value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}"></p>
<p>密码 : <input type="password" name="password"></p>
<input type="submit" name="submit">
以下哪个是你们最喜欢的男明星？
贝克汉姆<input type="radio" name="star" value="xiaobei">
刘德华<input type="radio" name="star" value="xiaoliu">
周星驰<input type="radio" name="star" value="zhouxingxing">
</form>
</div>
<img src="C:\Users\xjj\Desktop\幼虫测量\杂图\7.jpg"
style="width: 100px;height: 100px; background-color:
#f40;color: #f66" alt="第七张图" title="虫图" />
<a href="http://www.taobao.com" target="_blank">淘宝网</a>
<br>
<br>
<br>
<a href="tel:18758092897" style="font-size: 7rem">打电话</a>
<a href="mailto:1009606755@qq.com" style="font-size: 7rem">发邮件</a>
<a href="javascript:while(1){alert('让你手欠！')}">是男人就点我</a>
<div id="block1" style="width: 100px;height: 100px;background-color: green;">方块1</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="block2" style="width: 100px;height: 100px;background-color: red;">方块2</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a style="display: block;position: fixed;bottom: 100px;right: 100px;border: 1px solid black;height: 50px;width: 100px;background-color: #f12" href="#block1">回到方块1</a>
<a style="display: block;position: fixed;bottom: 150px;right: 100px;border: 1px solid black;height: 50px;width: 100px;background-color: #f12" href="#block2">回到方块2</a>
</form>
<h1>CHOOSE YOUR SEX!!!</h1>
<form>
男性： <input type="radio" name=sex value="mam" >
女性： <input type="radio" name=sex value="woman" checked="checked">
</form>
<form>
<select name="province">
<option>北京</option>
<option>上海</option>
<option>杭州</option>
<option>武汉</option>
<option>南京</option>
<option>苏州</option>
</select>
<input type="submit" name="submit">
</form>
<div>
<span>123</span>
</div>
<span>567</span>
<br>
<br>
<br>
<br>
<br>
<div>
<em>abc</em>
<strong>
<em>d</em>
</strong>
</div>
<img src="C:\Users\xjj\Desktop\幼虫测量\杂图\10.jpg"><img src="C:\Users\xjj\Desktop\幼虫测量\杂图\11.jpg"><img src="C:\Users\xjj\Desktop\幼虫测量\杂图\12.jpg"><img src="C:\Users\xjj\Desktop\幼虫测量\杂图\13.jpg">
</body>
</html>
<!-- 引入CSS
1、行间样式
style等样式设置直接写在标签里面
2、页面级
style样式直接写在head之中
3、外部CSS文件
在CSS类型的文件中写入样式
在head中写link标签 -->
<!-- html是怎么作用到浏览器页面上的？
浏览器会开启两个线程 其中一个下载html 另外一个下载css，边加载边执行
把网页相关的文件打包发放到服务器上 客户端将域名通过DNS解析成物理地址定位下相关的服务器上 索取html css js文件下载到自己浏览器上执行
异步是两件事情同时做 同步一件一件来做 -->
<!-- 2、选择器
id选择器（对同名标签在html中设置id 在css中用#id名对不同的内容的同名标签设置不同的样式效果） 一对一的关系
class选择器（一个class可对应多个元素 一个元素可以对应多个class 如class='demo1 demo2' html中设置class名 css中设置.class名{}） 多对多的关系
标签选择器（所有的相同标签实现同一样式，包含嵌套在其他标签内部的，注意标签选择器最大的功能是初始化原始标签功能，设置自定义标签）
通配符选择器（对全局标签 整个页面实现相同的样式 只需要在css文件中加入*{}或者在head文件中加入*{}等等，最大的作用是初始化所有标签的css）
属性选择器（css中【属性名】或者【属性名=‘属性值’】 对各种相同属性名的标签实现一样的样式 ）
并列选择器（多个限制条件选中一个元素 如css中div.demo{}）
选择器的优先级 第一个写在css样式设置中最后！important>行间样式>id>class=属性>标签>通配符选择器（其中class和属性选择器看css中设置的先后关系）
注意标签选择器和其他选择器组合时一直放在前面
css权重
！important Infinity
行间样式style 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
值得注意的是这些权重采取的是256进制 数值之间的差距是很大的 -->
<!-- 浏览器自右向左遍历父子选择器 -->
<!-- 写在一行的选择器组合权重想加来比较优先级 -->
<!-- 权重相同的css样式设置后面的会覆盖前面的 -->
<!-- 字体宽高优先设置高，字体粗细由字体包的最大粗细限定 -->
<!-- 1、行级/内联元素：内容决定元素所占位置，不可以通过css改变宽高（span、strong、em、a、del）
2、块级元素：内容独占一行，可以通过CSS改变宽高(div、p、ul、ol、li、form、address) -->
<!-- 3、行=块元素（内容决定大小，可以改宽高） -->
<!-- img图片只设置高会等比例缩放
这些元素分类的依据是css中display的设置，如span{display:inline} div{display:block} img{display:inline-block},inline和inline=block都是文本属性的元素-->
<!-- 注意：凡是带有inline的元素，都有文字特性，文本之间通过分隔符来区分，图片之间会预留4px的空白间隙 -->
<!-- 当代码文件打包到服务器上会进行压缩，选择去除空格、回车等压缩方式的时候，如果CSS样式设置里有类似margin-left:-6px;等方法来消除图片间距就会在页面上线的时候导致间距留存的问题，正常直接img间不留空格就行 -->
<!-- 一般静态页面的设计想法是先构思功能，之后再写盒子（对象） -->
<!-- 团队开发需要将css功能打包到一个文件中之后调用后添加选择器就行。一般自己有一个主css文件，很多都是直接引用css库中所需的就行，新人需要熟悉开发文档 -->
<!-- 盒子模型(四部分)
三大部分：盒子壁 border、内边距 padding、盒子内容 content = width+height
外边距 margin -->
<!-- 调整margin可以调节容器之间的距离 -->
<!-- 定位技术：position 让特定元素在特定的位置出现 -->
<!-- 在很多浏览器中body都有8px的margin空隙，因此设置容器宽高默认左上会有间隙 -->
<!--margin的用法说明：-->
<!--（1）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+30px的margin，将得到30px的空白距离。（两个盒子都有margin时，选择较大距离的）-->
<!--（2）需要在border外侧添加空白时。-->
<!--（3）空白处不需要有背景色时。-->
<!--padding的用法说明：-->
<!--（1）padding不能给负值，margin可以给负值。-->
<!--（2）需要在border内测添加空白时（文字与边框距离的设置）-->
<!--（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px-->
<!--+20px的padding，将得到35px的空白。-->
<!--BFC:它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。-->
<!--同一个BFC下的元素margin会发生margin重叠现象,可以把它理解为一个封闭空间,内部元素不管如何运动都不会对外部空间造成影响;但是BFC内部会相互作用-->
<!--只要元素满足下面任一条件即可触发 BFC 特性：-->
<!--body 根元素-->
<!--浮动元素：float 除 none 以外的值-->
<!--绝对定位元素：position (absolute、fixed)-->
<!--display 为 inline-block、table-cells、flex-->
<!--overflow 除了 visible 以外的值 (hidden、auto、scroll)-->
html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?7kkyc2');
src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('../fonts/icomoon.woff?7kkyc2') format('woff'),
url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.box{
width: 600px;
border: 1px solid #ccc;
margin: 0 auto;
}
.box dl{
overflow: hidden;
margin: 15px 0;
}
.box dl dt,.box dl dd{
float: left; }
.box dl dt{
width: 100px;
}
.box dl dd{
width: 200px;
}
/* css3中的结构伪类（位置）选择器 */
.fi li:first-child{
background-color: red;
}
.fi li:last-child{
background-color: yellow;
}
.fi li:nth-child(3){
background-color: green
}
.se li:nth-child(even){
background-color: rgba(0, 0, 0, 0.3);
}
/* css3中的属性选择器 */
div[class]{
background-color: pink;
}
div[class=demo1]{
background-color: black
}
/* 以test类名开头的类 */
div[class^=test]{
background-color: skyblue
}
/* 以test类名结尾的类 */
div[class$=test]{
background-color: brown
}
div[class*=test]{
background-color: blue
}
/* 只要包含test的类 */
/* 伪元素选择器 */
/* 文本操作 */
p::first-letter{
background-color: blue;
}
p::first-line{
background-color: chartreuse;
}
/* 文本鼠标选中效果 */
p::selection{
background-color: yellow;
color: rgba(0, 0, 0, 0.5);
}
/* 插入的内容仍然属于标签内容 ，before仍然是个盒子，是行内标签*/
p::before{
content: '我';
}
p::after{
content: '夭寿啦';
}
.css3{
width: 300px;
height: 300px;
background-color: pink;
padding: 30px;
border-right:20px solid red;
/* box-sizing: border-box; */
/* 盒子大小为宽度 */
box-sizing: content-box;
/* 盒子大小为width+padding+border */
}
/* 在不改变图片大小的情况下显示边框压住图片 */
.hezi{
width: 390px;
height: 130px;
position: relative;
overflow: hidden;
}
.hezi:hover::after{
content: '';
width: 100%;
height: 100%;
border: 5px solid rgba(255, 255, 255, 0.5);
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
border-radius: 10px;
}
/* 鼠标经过显示三角 */
.sanjiao{
width: 200px;
height: 30px;
border: 1px solid #ccc;
margin: 100px auto;
font-family: 'icomoon';
position: relative;
}
.sanjiao::before{
/* 这是一个能插入元素的选择器 */
content: '\ea50';
position: absolute;
top: 5px;
right: 10px;
transform: all 0.5s;
}
div:hover{
border: 1px solid red;
}div:hover::before{
color: red;
transform: rotate(180deg);
}
</style>
</head>
<body>
<input type="text" value="请输入你的名字" list="star"/>
<!-- 点击输入框时的下浮显示内容 -->
<datalist id="star">
<option value="刘德华">刘德华 </option>
<option value="周星驰">周星驰</option>
<option value="周小型">周小型</option>
<option value="龙傲川">龙傲川</option>
<option value="龙傲天">龙傲天</option>
</datalist>
<!-- 这里必须把datalist和input进行绑定，且option的value非空 -->
<!-- 这是将相关元素打包分组 -->
<fieldset>
<legend>用户登录</legend>
用户名：<input type="text" placeholder="请输入用户名" autofocus><br><br>
密码：<input type="password">
上传头像：<input type="file" name="" id="" multiple>
</fieldset>
<!-- 调查问卷的表单形式 -->
<form action="">
<div class="box">
<dl>
<dt>您的邮箱</dt>
<dd><input type="email" required></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt>手机号码</dt>
<!-- 规定激活某元素的快捷键 -->
<dd><input type="tel" accesskey="s"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt>网址</dt>
<dd><input type="url"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt>邮政编码</dt>
<dd><input type="number"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt>滑块</dt>
<dd><input type="range"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt>时间</dt>
<dd><input type="time"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt>出生日期</dt>
<dd><input type="date"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt>时间2</dt>
<dd><input type="datetime"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt>月份</dt>
<dd><input type="month"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt>周</dt>
<dd><input type="week"></dd>
<dd>*注册后不可更改</dd>
</dl>
<dl>
<dt></dt>
<dd><input type="submit" value="提交"><input type="reset" value="重置"></dd>
</dl>
</div>
</form>
<!-- 音频和视频部分 -->
<!-- 音频 -->
<audio src="../../before end/添加js动态效果的电商首页/素材/音频/bgsound.mp3" autoplay controls loop>
<source src="../../before end/添加js动态效果的电商首页/素材/音频/bgsound/bgsound.mp3"> <source>
<!-- 兼容性处理 -->
</audio>
<!-- 只支持Ogg Vorbis、MP3、Wav格式 -->
<video src="../../before end/添加js动态效果的电商首页/素材/音频/mp4.mp4" autoplay controls>
<source src="music.ogg"> <source>
</video>
<ul class="fi">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="se">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="demo1">a</div>
<div>b</div>
<div>c</div>
<div class="demo4">d</div>
<div class="demo5">e</div>
<div class="test1">11</div>
<div class="test2">22</div>
<div class="test3">33</div>
<div class="fitest">33</div>
<p>
实际应用的例子来说，利用 Seam Carving 算法我们可以将原本窄
镜头的夕阳照片，修改成广角镜头的夕阳照片，且照片中心的太阳不会
因为图片拉宽而变形；或者我们可以将原本中间隔著距离的两人合照，
修改成靠在一起的合照，且图片也不会因为修改变形。这是一个很有趣也
让人觉得很厉害的技术，是你从没有玩过的船新版本切图工具。
</p>
<div class="css3"></div>
<div class="hezi">
<img src="../添加js动态效果的电商首页/images/r.jpg" alt="">
</div>
<div class="sanjiao"></div>
</body>
</html>
5982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
