day01
HTML#ai chi ti ai mai ao
CSS
JavaScript #jia wa si kuai pu te
JQuery #ji kuai rui
<!DOCTYPE html> <!--规定用这个规则-->
<html lang="en">
<head><!--hai de 就是定义你一些内在的东西-->
<!--charset \cha sai te-->
<meta charset="UTF-8"><!--mai te 自闭标签-->
<!--标签的属性-->
<title name="alex">你好</title><!--tai tou 是头部的意思-->
</head>
<body><!--bao dei 网页体-->
gdfg
</body>
</html>
<!--xxx--><!--注释-->
html
head
页面编码
<meta http-equiv="content-type" content="text/html.charest=utf-8">
#######################################
<meta charset="UTF-8">
跳转
<meta http-equiv="Refresh" Content="5;Url=http://www.autohome.com.cn"/>
<!--跳转-->
<!--url-->
刷新
<meta http-equiv="Refresh" Content="30"> <!--刷新-->
<!--refresh\rui fu lai shi /Content \kan ten te-->
关键词
<meta name="keywords" content="星际老男孩">
X-UA-Compatible
只对ie有用这段代码是然ie用最新的版本来处理它
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
Link # ling ke
css#用来引入css的
<!--min是压缩上网的时候可以用-->
<link rel="stylesheet" type="text/css" href="css/common.min.css" >
icon # ai kan 图标
<link rel="shortcut icon" href="image/favicon.ico">
body
行内标签和块级标签
span，a，select 等 行内标签 有多少占多少
div， h1，p 等 块级标签 没有一行也要占满一行
字符网站
https://www.cnblogs.com/mengmengi/p/10137167.html
< >
p和 br
p表示段落，默认段落之间是有间距的 <p></p>
dr 是换行符
a标签
直接跳转
<a href="http://www.baidu.com">跳转</a>
新建在跳转
<a href="http://www.baidu.com" target="_blank">跳转</a>
锚 寻找页面中id=i1的标签，将其标签放置再顶部
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<!--id不能重复-->
<div id="i1" style="height: 500px";>第一章内容</div>
<div id="i2" style="height: 500px";>第二章内容</div>
<div id="i3" style="height: 500px";>第三章内容</div>
H标签
<!--h标签只有六个，分别是，以次排序字体大小-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<h6 style="font-size: 65px"></h6>
字体加颜色
< div style="color: green;"></div>
<!---->
<!--这是html的注释信息-->
<!--这是根-->
<html>
<!--头-->
<head>
<!--标题栏 tai tou-->
<title>标题栏</title>
</head>
<!--网页体-->
<body>
<!--这里的内容显示到网页上！-->
这是第一个htnl页面！
</body>
</html>
div
<form><!--fou mu 表单-->
<div style="border: 1px solid red;">
<!--样式边框1px纯红色-->
<p>用户名<input type="text" /></p>
<!--输入文字-->
<p>密码<input type="password" /></p>
<!--电子邮件-->
<p>邮箱<input type="email" /></p>
<!--输入类型密码-->
<p>性别<br />男<input type="radio" name="gender" />
<!--男输入类型单选名性别-->
<br />女<input type="radio" name="gender" />
</p> <!--女输入类型单选名性别-->
<p>爱好
<!--1输入类型复选框-->
<dr />1<input type="checkbox" />
<dr />2<input type="checkbox" />
<dr />3<input type="checkbox" />
<dr />4<input type="checkbox" />
<dr />5<input type="checkbox" />
</p>
<p>城市
<select> <!--选择-->
<option>上海</option>
<!--选择选项-->
<option>武汉</option>
<option>甘肃</option>
</select>
<!--选择多个尺寸10-->
<select multiple size="10">
<option>上海</option>
<option>武汉</option>
<option>甘肃</option>
</select>
<select>
<!--选择组 标签-->
<optgroup label="一线">
<option>上海</option>
<option>武汉</option>
<option>甘肃</option>
</select>
</p>
<!--输入类型文件-->
<p>文件 <input type="file"/></p>
<p>备注 <textarea></textarea>
<!--输入类型提交值提交-->
<input type="submit" value="提交" />
<!--输入类型按钮值按钮-->
<input type="button" value="按钮" />
<!--输入类型复位值复位-->
<input type="reset" value="复位" />
</div>
</form>
checkbox
enctype="multipart/form-data" 编码多部分表单数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<form action="https://www.sogou.com/web" method="get">-->
<!--以get的方法提交-->
<!-- <form action="https://www.sogou.com/web" method="post">-->
<!--以post的方法提交-->
<!--以get的方法提交-->
<!--你要上传文件必须在 form 属性中加上enctype="multipart/form-data"-->
<form action="https://www.sogou.com/web" method="post" enctype="multipart/form-data">
<!--<!–action里面填写什么http就提交到哪的http–>-->
<input type="text" name="query"/> <!--name 是键-->
男<input type="radio" name="gender" value="1"/>
<!--男输入类型单选名称性别值1-->
女<input type="radio" name="gender" value="0"/>
<!--女输入类型单选名称性别值0-->
<p>文件：
<!--文件-->
<input type="file" name="fafafa" />
</p>
<p>
<select name="city">
<!--发送的时候不许要有标签-->
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">广州</option>
</select>
</p>
<p>
备注：<textarea name="extra"></textarea>
</p>
<input type="submit" value="提交" />
</form>
<hr/> <!--横线-->
<form>
<input type="text"/>
<input type="submit" value="提交" />
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<!--ul方点-->
<li>asldsdjfl</li>
<li>asldsd ccl</li>
</ul>
<ol>
<!--ul数字-->
<li>asldsdjfl</li>
<li>asldsd ccl</li>
</ol>
<dl>
<dt>用于标题</dt>
<dd>用于文章</dd>
<dd>用于文章</dd>
</dl>
<table border="1"> <!--边境1--> <!--表格-->
<thead> <!--表題-->
<tr> <!--代表一行-->
<!-- <td>第一列</td> <!–代表一列–>-->
<!-- <td>第二列</td>-->
<!-- <td>第三列</td>-->
<!-- <td>第四列</td>-->
<!-- <th>第一列</th> <!–代表一列–>-->
<!-- <th>第二列</th> <!–th加粗–>-->
<!-- <th>第三列</th>-->
<!-- <th>第四列</th>-->
<th>第1列</th>
<!--代表一列-->
<th>第2列</th>
<!--th加粗-->
<th colspan="2">第3列</th> <!--合并左右單元格-->
</tr>
</thead>
<tbody>
<tr> <!--代表一行-->
<td>第一列</td>
<!--代表一列-->
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
<tr> <!--代表一行-->
<td>第一列</td>
<!--代表一列-->
<td rowspan="2">第二列</td> <!--合并上下單元格-->
<td>第三列</td>
<td>第四列</td>
</tr>
<tr> <!--代表一行-->
<td>第一列</td>
<!--代表一列-->
<td>第三列</td>
<td>第四列</td>
</tr>
</tbody>
</table>
</body>
</html>
fieldset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<fieldset>
<legend>登录</legend>
<p>用户名：<input type="text" /></p>
<p>密码：<input type="password" /></p>
</fieldset>
</div>
<h1>人才辈出</h1>
<iframe style ="width：100%;height: 2000px;" src="http://autohome.com.cn"></iframe>
</body>
</html>
html 总结：
-
分类，
-
符号
-
p,br,h
-
form
-
action
-
method
-
enctype ==>上传文件
-
-
select，textarea
-
ul/ol/dl
-
table
-
iframe，fieldset
-
div，span
-
想要直接加就要加上style si dai ao
css
-
储存位置：
单独css文件低
html头部
标签属性 优先级高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--si dai ao 是当前页面都使用-->
<!--在这里写上div以后使用div就可以不用写了-->
<!--风格背景色红色白色-->
<style>
div{
background-color: red;
color: white;
}
</style>
</head>
<body>
<!--风格背景色红色白色-->
<div style="background-color: red;color: white;">88</div>
<div>116+</div>
<div>116+</div>
<div>116+</div>
<div>116+</div>
</body>
</html>
导入css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
/* 导入css文件就这么写,comm是文件名*/
<link rel="stylesheet" href="comm.css" />
</head>
<body>
</body>
</html>
<htmml>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*标签选择器*/
/*颜色红色*/
/*找到所有的div使用*/
div{
color:green;
}
/*id选择器*/
/*字体32像素*/
/*只找到有id="il"使用*/
#il{
font-size: 32px;
}
/*ke la se class选择器*/
/*找到所有有class="c1"使用*/
.c1{
background-color:red;
}
</style>
</head>
<body>
<span class="c1">1</span>
<div class="c1">2</div>
<a class="c1">3</a>
<a id="il">jjjj</a>
<div>nini</div>
<div>nini</div>
<div>nini</div>
</body>
</htmml>
head
标签选择器
div选择器
/*颜色红色*/
/*找到所有的div*/
div{
color:green;
}
id选择器
/*只找到有id="il"*/
/*字体32像素*/
#il{
font-size: 32px;
}
class选择器
/*找到所有有class="c1"使用*/
.c1{
background-color:red;
}
层级选择器
/*找到class="c2",div,p,class="c3"来使用*/
.c2 div p .c3{
dackground-color:rcd;
}
组合选择器
/*找到class="c4",class="c5",class="c6"*/
.c4,.c5,.c6{
background-color:aqua;
}
这些都是.xx{}写法用的，css
字体颜色
/*ka le 字体颜色*/
color:red;
背景颜色
/*bai gu ruan de ke le 背景颜色，也可以按照rgb的方式显示颜色*/
background-color:rgb(1,2,3);
/*bai gu ruan de ke le 背景颜色，也可以按照rgb的十六进制显示颜色*/
background-color:#ffdab9;
/*bai gu ruan de ke le 背景颜色*/
background-color: aqua;
字体大小
/*fan sa ai si 字体大小是以像素做的*/
font-size:36px;
宽与高
/*定义高度为150像素 ,高度没有百分百怎么个说法*/
height:150px;
/*自定义宽度为100%，宽度可以百分百显示，按照父级相对占比*/
width:100%;
.c1{
/*ka le 字体颜色*/
color:red;
/*bai gu ruan de ke le 背景颜色，也可以按照rgb的方式显示颜色*/
background-color:rgb(1,2,3);
/*bai gu ruan de ke le 背景颜色，也可以按照rgb的十六进制显示颜色*/
background-color:#ffdab9;
/*也可以用英文颜色来显示*/
background-color:red;
/*bai gu ruan de ke le 背景颜色*/
background-color: aqua;
/*fan sa ai si 字体大小是以像素做的*/
font-size:36px;
/*定义高度为150像素 ,高度没有百分百怎么个说法*/
height:150px;
/*自定义宽度为100%，宽度可以百分百显示，按照父级相对占比*/
width:100%;
}
<body>
<div class="c1">asdlj</div>
<div style="width: 500px;">
/*设置背景宽度占500%的20%颜色为肉色，然他们堆起来*/
<div style="width: 20%;background-color:antiquewhite;float: left">adjs</div>
/*设置背景宽度占500%的80%颜色为肉色，然他们堆起来*/
/*float: left /fu lou te 是都往左飘*/
<div style="width: 80%;background-color:palegoldenrod;float: left">adjs</div>
</body>
图片做背景显示和图片移动
/*按照url里的图片设置为背景图片 重复图片*/
/*bai gu ruan de yi mei zhi*/
background-image:url("QQ图片111.png")
/*按照url里的图片设置为背景图片 不重复图片*/
/*bai gu ruan de nou rui pei te*/
background-repeat:none；
/*position puo zei shen 坐标*/
background-position:0px,0px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 500px;
height:790px;
/*image yin mei zhi 按照url里的图片设置为背景图片 重复图片*/
background-image:url("QQ图片20201129122134.png");
/*按照url里的图片设置为背景图片 不重复图片*/
background-repeat:no-repeat;
}
.c2{
background-image:url("QQ图片20201129122134.png")
width: 100px;
height:100px;
/*position puo zei shen 图片移动坐标*/
background-position:0,0;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
border
/*上右下左*/
/*solid 实体，dotted 虚线，dashed 跟虚了*/
.c1{
border-top-color: red;
border-top-style: solid;
border-top-width: 4px;
border-right-color: red;
border-right-style: solid;
border-right-width: 4px;
border-bottom-color: red;
border-bottom-style: solid;
border-bottom-width: 4px;
border-left-color: red;
border-left-style: solid;
border-left-width: 4px;
height:10px;
}
<div class="c1">
</div>
display
/*隐藏并且不留位置*/
display:none;
/*隐藏但是保留位置*/
visibility : hidden;
/*dei si pu lei /bu lao ke*/
/*将行内标签变成块级标签*/
display:block;
/*dei si pu lei /ying la ai */
/*将行块级标签变成行内标签*/
display:inline;
/*他是块级标签也是行内标签*/
display:inline-block;
cursor
<p>
/*ke se*/
/*pao ying te*/
<span style="cursor:printer;">dfas</span>
/*hai ao puo*/
<span style="cursor:help;">dfas</span>
/*wei te*/
<span style="cursor:wait;">dfas</span>
/*mu wu*/
<span style="cursor:move;">dfas</span>
/*kao si hai e*/
<span style="cursor:crosshair;">dfas</span>
<\p>
边距
/*外边距 （本身不增加）*/
<div style= "background-color: aqua; margin:12px">
/*内边距 （本身增加）*/
<div style= "background-color: aqua; padding:12px">
left和right飘
/*左飘*/
<div style="float:left"></div>
/*右飘*/
<div style="float:right"></div>
子标签无法满足边框就使用clear
/*如果div没有输入值，又想加上样式，就可以用这个*/
<div style="clear:both;"></div>
position
puo zei shen
-
relative ruai lei tei wu
-
absolute a buo si lu te
-
fixed fei si te
/*fixed fei ke si te*/
/*固定在一个位置滚动时也不动*/
<div fixed:right:200px:bottom:100px;>返回顶部</div>
/*固定在一个位置滚动时会移动*/
<div absolute:right:200px:bottom:100px;>返回顶部</div>
/*relative和absolute，如果你要想让absolute放到一个固定框里面就可以把relative加到固定框的属性里面，把absolute写到任意位置就可以了*/
opacity
/*透明度，1是不透明*/
opacity:0.5
/*可以把颜色和透明度一起设置*/
rgba(0,0,0,0.6)
z-index
/*zei dai ke si*/
/*设置优先级，数字可以随便设置只要大于就可以*/
z-index：9
hide
hide /*隐藏*/
居中
margin:0 auto
图片的显示
<img src="2.jpg">
当鼠标换到标签上时自动执行
ul li:hover{
background-color: blueviolet;
}
以后写代码的规范
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题栏</title>
<style>
body{
/*它的边宽为0*/
margin:0;
}
ul{
margin:0;
/*不显示小标*/
list-style-type:none;
}
ul li{
/*左飘*/
float:left;
/*左边和右边的宽度为8px*/
padding:0 8px 0 8px;
/*加上字体颜色为白色*/
color: while;
cursor:pointer;
}
/*当鼠标移动到li标签上时，自动执行里面的样式*/
ul li:hover{
background-color: blueviolet;
}
.pg-header{
/*他的大小为44px*/
height:44px;
/*它的颜色为十六进制的#2459a2*/
background-color:#2459a2;
/*lai hai te ,按照44放置里面的内容*/
line-height:44px;
}
.w{
/*它的宽度为980px*/
width:980px;
/*它的边宽为0*/
margin:0 auto;
/*它的颜色为红色*/
background-color:red;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<ul>
<li>sadf</li>
<li>sadf</li>
<li>sadf</li>
<li>sadf</li>
<li>sadf</li>
<li>sadf</li>
</ul>
</div>
</div>
<div class="pg-body"></div>
<div class="pg-footer"></div>
</body>
</html>
day01
HTML#ai chi ti ai mai ao
CSS
JavaScript #jia wa si kuai pu te
JQuery #ji kuai rui
<!DOCTYPE html> <!--规定用这个规则-->
<html lang="en">
<head><!--hai de 就是定义你一些内在的东西-->
<!--charset \cha sai te-->
<meta charset="UTF-8"><!--mai te 自闭标签-->
<!--标签的属性-->
<title name="alex">你好</title><!--tai tou 是头部的意思-->
</head>
<body><!--bao dei 网页体-->
gdfg
</body>
</html>
<!--xxx--><!--注释-->
html
head
页面编码
<meta http-equiv="content-type" content="text/html.charest=utf-8">
#######################################
<meta charset="UTF-8">
跳转
<meta http-equiv="Refresh" Content="5;Url=http://www.autohome.com.cn"/>
<!--跳转-->
<!--url-->
刷新
<meta http-equiv="Refresh" Content="30"> <!--刷新-->
<!--refresh\rui fu lai shi /Content \kan ten te-->
关键词
<meta name="keywords" content="星际老男孩">
X-UA-Compatible
只对ie有用这段代码是然ie用最新的版本来处理它
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
Link # ling ke
css#用来引入css的
<!--min是压缩上网的时候可以用-->
<link rel="stylesheet" type="text/css" href="css/common.min.css" >
icon # ai kan 图标
<link rel="shortcut icon" href="image/favicon.ico">
body
行内标签和块级标签
span，a，select 等 行内标签 有多少占多少
div， h1，p 等 块级标签 没有一行也要占满一行
字符网站
https://www.cnblogs.com/mengmengi/p/10137167.html
< >
p和 br
p表示段落，默认段落之间是有间距的 <p></p>
dr 是换行符
a标签
直接跳转
<a href="http://www.baidu.com">跳转</a>
新建在跳转
<a href="http://www.baidu.com" target="_blank">跳转</a>
锚 寻找页面中id=i1的标签，将其标签放置再顶部
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<!--id不能重复-->
<div id="i1" style="height: 500px";>第一章内容</div>
<div id="i2" style="height: 500px";>第二章内容</div>
<div id="i3" style="height: 500px";>第三章内容</div>
H标签
<!--h标签只有六个，分别是，以次排序字体大小-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<h6 style="font-size: 65px"></h6>
字体加颜色
< div style="color: green;"></div>
<!---->
<!--这是html的注释信息-->
<!--这是根-->
<html>
<!--头-->
<head>
<!--标题栏 tai tou-->
<title>标题栏</title>
</head>
<!--网页体-->
<body>
<!--这里的内容显示到网页上！-->
这是第一个htnl页面！
</body>
</html>
div
<form><!--fou mu 表单-->
<div style="border: 1px solid red;">
<!--样式边框1px纯红色-->
<p>用户名<input type="text" /></p>
<!--输入文字-->
<p>密码<input type="password" /></p>
<!--电子邮件-->
<p>邮箱<input type="email" /></p>
<!--输入类型密码-->
<p>性别<br />男<input type="radio" name="gender" />
<!--男输入类型单选名性别-->
<br />女<input type="radio" name="gender" />
</p> <!--女输入类型单选名性别-->
<p>爱好
<!--1输入类型复选框-->
<dr />1<input type="checkbox" />
<dr />2<input type="checkbox" />
<dr />3<input type="checkbox" />
<dr />4<input type="checkbox" />
<dr />5<input type="checkbox" />
</p>
<p>城市
<select> <!--选择-->
<option>上海</option>
<!--选择选项-->
<option>武汉</option>
<option>甘肃</option>
</select>
<!--选择多个尺寸10-->
<select multiple size="10">
<option>上海</option>
<option>武汉</option>
<option>甘肃</option>
</select>
<select>
<!--选择组 标签-->
<optgroup label="一线">
<option>上海</option>
<option>武汉</option>
<option>甘肃</option>
</select>
</p>
<!--输入类型文件-->
<p>文件 <input type="file"/></p>
<p>备注 <textarea></textarea>
<!--输入类型提交值提交-->
<input type="submit" value="提交" />
<!--输入类型按钮值按钮-->
<input type="button" value="按钮" />
<!--输入类型复位值复位-->
<input type="reset" value="复位" />
</div>
</form>
checkbox
enctype="multipart/form-data" 编码多部分表单数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<form action="https://www.sogou.com/web" method="get">-->
<!--以get的方法提交-->
<!-- <form action="https://www.sogou.com/web" method="post">-->
<!--以post的方法提交-->
<!--以get的方法提交-->
<!--你要上传文件必须在 form 属性中加上enctype="multipart/form-data"-->
<form action="https://www.sogou.com/web" method="post" enctype="multipart/form-data">
<!--<!–action里面填写什么http就提交到哪的http–>-->
<input type="text" name="query"/> <!--name 是键-->
男<input type="radio" name="gender" value="1"/>
<!--男输入类型单选名称性别值1-->
女<input type="radio" name="gender" value="0"/>
<!--女输入类型单选名称性别值0-->
<p>文件：
<!--文件-->
<input type="file" name="fafafa" />
</p>
<p>
<select name="city">
<!--发送的时候不许要有标签-->
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">广州</option>
</select>
</p>
<p>
备注：<textarea name="extra"></textarea>
</p>
<input type="submit" value="提交" />
</form>
<hr/> <!--横线-->
<form>
<input type="text"/>
<input type="submit" value="提交" />
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<!--ul方点-->
<li>asldsdjfl</li>
<li>asldsd ccl</li>
</ul>
<ol>
<!--ul数字-->
<li>asldsdjfl</li>
<li>asldsd ccl</li>
</ol>
<dl>
<dt>用于标题</dt>
<dd>用于文章</dd>
<dd>用于文章</dd>
</dl>
<table border="1"> <!--边境1--> <!--表格-->
<thead> <!--表題-->
<tr> <!--代表一行-->
<!-- <td>第一列</td> <!–代表一列–>-->
<!-- <td>第二列</td>-->
<!-- <td>第三列</td>-->
<!-- <td>第四列</td>-->
<!-- <th>第一列</th> <!–代表一列–>-->
<!-- <th>第二列</th> <!–th加粗–>-->
<!-- <th>第三列</th>-->
<!-- <th>第四列</th>-->
<th>第1列</th>
<!--代表一列-->
<th>第2列</th>
<!--th加粗-->
<th colspan="2">第3列</th> <!--合并左右單元格-->
</tr>
</thead>
<tbody>
<tr> <!--代表一行-->
<td>第一列</td>
<!--代表一列-->
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
<tr> <!--代表一行-->
<td>第一列</td>
<!--代表一列-->
<td rowspan="2">第二列</td> <!--合并上下單元格-->
<td>第三列</td>
<td>第四列</td>
</tr>
<tr> <!--代表一行-->
<td>第一列</td>
<!--代表一列-->
<td>第三列</td>
<td>第四列</td>
</tr>
</tbody>
</table>
</body>
</html>
fieldset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<fieldset>
<legend>登录</legend>
<p>用户名：<input type="text" /></p>
<p>密码：<input type="password" /></p>
</fieldset>
</div>
<h1>人才辈出</h1>
<iframe style ="width：100%;height: 2000px;" src="http://autohome.com.cn"></iframe>
</body>
</html>
html 总结：
-
分类，
-
符号
-
p,br,h
-
form
-
action
-
method
-
enctype ==>上传文件
-
-
select，textarea
-
ul/ol/dl
-
table
-
iframe，fieldset
-
div，span
-
想要直接加就要加上style si dai ao
css
-
储存位置：
单独css文件低
html头部
标签属性 优先级高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--si dai ao 是当前页面都使用-->
<!--在这里写上div以后使用div就可以不用写了-->
<!--风格背景色红色白色-->
<style>
div{
background-color: red;
color: white;
}
</style>
</head>
<body>
<!--风格背景色红色白色-->
<div style="background-color: red;color: white;">88</div>
<div>116+</div>
<div>116+</div>
<div>116+</div>
<div>116+</div>
</body>
</html>
导入css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
/* 导入css文件就这么写,comm是文件名*/
<link rel="stylesheet" href="comm.css" />
</head>
<body>
</body>
</html>
<htmml>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*标签选择器*/
/*颜色红色*/
/*找到所有的div使用*/
div{
color:green;
}
/*id选择器*/
/*字体32像素*/
/*只找到有id="il"使用*/
#il{
font-size: 32px;
}
/*ke la se class选择器*/
/*找到所有有class="c1"使用*/
.c1{
background-color:red;
}
</style>
</head>
<body>
<span class="c1">1</span>
<div class="c1">2</div>
<a class="c1">3</a>
<a id="il">jjjj</a>
<div>nini</div>
<div>nini</div>
<div>nini</div>
</body>
</htmml>
head
标签选择器
div选择器
/*颜色红色*/
/*找到所有的div*/
div{
color:green;
}
id选择器
/*只找到有id="il"*/
/*字体32像素*/
#il{
font-size: 32px;
}
class选择器
/*找到所有有class="c1"使用*/
.c1{
background-color:red;
}
层级选择器
/*找到class="c2",div,p,class="c3"来使用*/
.c2 div p .c3{
dackground-color:rcd;
}
组合选择器
/*找到class="c4",class="c5",class="c6"*/
.c4,.c5,.c6{
background-color:aqua;
}
这些都是.xx{}写法用的，css
字体颜色
/*ka le 字体颜色*/
color:red;
背景颜色
/*bai gu ruan de ke le 背景颜色，也可以按照rgb的方式显示颜色*/
background-color:rgb(1,2,3);
/*bai gu ruan de ke le 背景颜色，也可以按照rgb的十六进制显示颜色*/
background-color:#ffdab9;
/*bai gu ruan de ke le 背景颜色*/
background-color: aqua;
字体大小
/*fan sa ai si 字体大小是以像素做的*/
font-size:36px;
宽与高
/*定义高度为150像素 ,高度没有百分百怎么个说法*/
height:150px;
/*自定义宽度为100%，宽度可以百分百显示，按照父级相对占比*/
width:100%;
.c1{
/*ka le 字体颜色*/
color:red;
/*bai gu ruan de ke le 背景颜色，也可以按照rgb的方式显示颜色*/
background-color:rgb(1,2,3);
/*bai gu ruan de ke le 背景颜色，也可以按照rgb的十六进制显示颜色*/
background-color:#ffdab9;
/*也可以用英文颜色来显示*/
background-color:red;
/*bai gu ruan de ke le 背景颜色*/
background-color: aqua;
/*fan sa ai si 字体大小是以像素做的*/
font-size:36px;
/*定义高度为150像素 ,高度没有百分百怎么个说法*/
height:150px;
/*自定义宽度为100%，宽度可以百分百显示，按照父级相对占比*/
width:100%;
}
<body>
<div class="c1">asdlj</div>
<div style="width: 500px;">
/*设置背景宽度占500%的20%颜色为肉色，然他们堆起来*/
<div style="width: 20%;background-color:antiquewhite;float: left">adjs</div>
/*设置背景宽度占500%的80%颜色为肉色，然他们堆起来*/
/*float: left /fu lou te 是都往左飘*/
<div style="width: 80%;background-color:palegoldenrod;float: left">adjs</div>
</body>
图片做背景显示和图片移动
/*按照url里的图片设置为背景图片 重复图片*/
/*bai gu ruan de yi mei zhi*/
background-image:url("QQ图片111.png")
/*按照url里的图片设置为背景图片 不重复图片*/
/*bai gu ruan de nou rui pei te*/
background-repeat:none；
/*position puo zei shen 坐标*/
background-position:0px,0px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 500px;
height:790px;
/*image yin mei zhi 按照url里的图片设置为背景图片 重复图片*/
background-image:url("QQ图片20201129122134.png");
/*按照url里的图片设置为背景图片 不重复图片*/
background-repeat:no-repeat;
}
.c2{
background-image:url("QQ图片20201129122134.png")
width: 100px;
height:100px;
/*position puo zei shen 图片移动坐标*/
background-position:0,0;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
border
/*上右下左*/
/*solid 实体，dotted 虚线，dashed 跟虚了*/
.c1{
border-top-color: red;
border-top-style: solid;
border-top-width: 4px;
border-right-color: red;
border-right-style: solid;
border-right-width: 4px;
border-bottom-color: red;
border-bottom-style: solid;
border-bottom-width: 4px;
border-left-color: red;
border-left-style: solid;
border-left-width: 4px;
height:10px;
}
<div class="c1">
</div>
display
/*隐藏并且不留位置*/
display:none;
/*隐藏但是保留位置*/
visibility : hidden;
/*dei si pu lei /bu lao ke*/
/*将行内标签变成块级标签*/
display:block;
/*dei si pu lei /ying la ai */
/*将行块级标签变成行内标签*/
display:inline;
/*他是块级标签也是行内标签*/
display:inline-block;
cursor
<p>
/*ke se*/
/*pao ying te*/
<span style="cursor:printer;">dfas</span>
/*hai ao puo*/
<span style="cursor:help;">dfas</span>
/*wei te*/
<span style="cursor:wait;">dfas</span>
/*mu wu*/
<span style="cursor:move;">dfas</span>
/*kao si hai e*/
<span style="cursor:crosshair;">dfas</span>
<\p>
边距
/*外边距 （本身不增加）*/
<div style= "background-color: aqua; margin:12px">
/*内边距 （本身增加）*/
<div style= "background-color: aqua; padding:12px">
left和right飘
/*左飘*/
<div style="float:left"></div>
/*右飘*/
<div style="float:right"></div>
子标签无法满足边框就使用clear
/*如果div没有输入值，又想加上样式，就可以用这个*/
<div style="clear:both;"></div>
position
puo zei shen
-
relative ruai lei tei wu
-
absolute a buo si lu te
-
fixed fei si te
/*fixed fei ke si te*/
/*固定在一个位置滚动时也不动*/
<div fixed:right:200px:bottom:100px;>返回顶部</div>
/*固定在一个位置滚动时会移动*/
<div absolute:right:200px:bottom:100px;>返回顶部</div>
/*relative和absolute，如果你要想让absolute放到一个固定框里面就可以把relative加到固定框的属性里面，把absolute写到任意位置就可以了*/
opacity
/*透明度，1是不透明*/
opacity:0.5
/*可以把颜色和透明度一起设置*/
rgba(0,0,0,0.6)
z-index
/*zei dai ke si*/
/*设置优先级，数字可以随便设置只要大于就可以*/
z-index：9
hide
hide /*隐藏*/
居中
margin:0 auto
图片的显示
<img src="2.jpg">
当鼠标换到标签上时自动执行
ul li:hover{
background-color: blueviolet;
}
以后写代码的规范
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题栏</title>
<style>
body{
/*它的边宽为0*/
margin:0;
}
ul{
margin:0;
/*不显示小标*/
list-style-type:none;
}
ul li{
/*左飘*/
float:left;
/*左边和右边的宽度为8px*/
padding:0 8px 0 8px;
/*加上字体颜色为白色*/
color: while;
cursor:pointer;
}
/*当鼠标移动到li标签上时，自动执行里面的样式*/
ul li:hover{
background-color: blueviolet;
}
.pg-header{
/*他的大小为44px*/
height:44px;
/*它的颜色为十六进制的#2459a2*/
background-color:#2459a2;
/*lai hai te ,按照44放置里面的内容*/
line-height:44px;
}
.w{
/*它的宽度为980px*/
width:980px;
/*它的边宽为0*/
margin:0 auto;
/*它的颜色为红色*/
background-color:red;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<ul>
<li>sadf</li>
<li>sadf</li>
<li>sadf</li>
<li>sadf</li>
<li>sadf</li>
<li>sadf</li>
</ul>
</div>
</div>
<div class="pg-body"></div>
<div class="pg-footer"></div>
</body>
</html>