前端技术HTML、CSS
1、html
- 20个标签
1.1、例子
<!DOCTYPE html> <!-- 标准对应关系标头 -->
<html lang="en"> <!-- 起始,类似html这种格式 ：<html>dadadfad</html>叫一个html标签 -->
<!-- lang="en"叫标签内部的属性 -->
<head> <!-- 头的开始 -->
<meta charset="UTF-8">
<meta http-equiv="Refresh" content="3"> <!-- 3秒之后刷新网页 -->
<meta http-equiv="Refresh" content="3;Url=https://www.zhihu.com"> <!-- 3秒之后跳转到新网页 -->
<meta name="Keywords" content="星际2,地下城与知乎,赚网"> <!--关键字-->
<meta name="description" property="og:description" content="有问题，上知乎。知乎，可信赖的问答社区，以让每个人高效获得可信赖的解答为使命。知乎凭借认真、专业和友善的社区氛围，结构化、易获得的优质内容，基于问答的内容生产方式和独特的社区机制，吸引、聚集了各行各业中大量的亲历者、内行人、领域专家、领域爱好者，将高质量的内容透过人的节点来成规模地生产和分享。用户通过问答等交流方式建立信任和连接，打造和提升个人影响力，并发现、获得新机会。"/>
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;IE=IE7;"> <!--让该网页使用IE浏览器打开时,使用高版本模式打开-->
<!-- Title --><!--网页头部标签-->
<title>Title</title>
<!--网页头部小图标-->
<link rel="shortcut" href="image/aa.ico">
</head> <!-- 头的结束 -->
<body> <!-- 身体的头 -->
<a href="https://www.zhihu.com/">知乎</a>
</body> <!-- 身体的结束 -->
</html> <!-- 结束 -->
1.2、例子2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Python</title>
</head>
<body>
<!--<a href="https://www.zhihu.com">李 >a<尚</a>-->
<!-- 代表空格-->
<!--> 代表>-->
<!--< 代表<-->
<p>dadadasfsfffffwqrsadfffdd<br>dddddd</p>
<p>12345</p>
<p>12345</p>
<h1>LiShang</h1>
<h2>LiShang</h2>
<h3>LiShang</h3>
<h4>LiShang</h4>
<h5>LiShang</h5>
<h6>LiShang</h6>
<span>hello world</span>
<span>hello world</span>
</body>
</html>
网页特殊符号HTML代码大全：https://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
1.3、标签分类
自闭和标签(很少):
<meta charset="UTF-8">
主动闭合标签:
<html lang="en"> ****** </html>
<head> ****** </head> head标签中海油几种标签
<meta > 编码、跳转、刷新、关键字、描述、IE兼容
<title>Title</title> <!--网页头部标签-->
<link /> 搞图标
<style />
<script />
<body> ****** </body>
body标签：
- 图标, > <
- p标签 <p>dadadasfsfffffwqrsadfffdd<br>dddddd</p>(块级标签),段落
<p>12345</p>
<p>12345</p> ###一个p标签代表一个段落
- br标签 <p>dadadasfsfffffwqrsadfffdd<br>dddddd</p> ######<br>代表换行,还在本段中
======================#-#-#-小总结-#-#-#======================
所有标签分为:
块级标签: H 系列(加大加粗), p 系列(段落之间有间距), div 标签(白板),
行内标签: span 标签(白板,无任何特性),
标签间可以嵌套
标签存在的意义, 定位操作, js操作、css操作更方便
ps: chorme审查元素的使用
- 定位
- 查看样式
input系列： 10个必须会的
input type='text' #name属性, 用于让后台拿数据
input type='password' #name属性, 用于让后台拿数据
input type='submit' value="提交" #提交按钮, 提交表单
input type='button' value="登录" #普通按钮
input type='radio' name="gender" #单选框,value,name属性(name相同则互斥)
input type='checkbox' #复选框,value,name属性(批量获取数据)
input type='file' #依赖form表单的一个属性,enctype='multipart/form-data'
input type='rest' #重置
<textarea>默认值</textarea> -name属性
select标签 -name,内部option value,提交到后台,size,multiple
- h 标签(块级标签)
- span 标签(行内标签)
- div 标签(块级标签)
a 标签
- 跳转
- 锚, 跳转到目录对应的位置处功能：标签的id不允许重复
<a href="#i1">第一章</a>
<div id="i1" style="height:600px;">第一章的内容</div>
img 标签,图片,属性可设置大小和超链接跳, yong<a>标签括起来, 可以点图片跳转网页
<a href="https://www.zhihu.com">
<img src="mygirlfriend.jpg" title="真是大美女" style="height: 600px;width: 375px" alt="美女">
</a>
<form action="http://localhost:8888/index" method="GET" enctyp>
###一个表单, action是提交的地址, method是提交的方式, GET是在URL里提交, POST是在内容里提交
<input type="text"/> ##一个普通的文本输入框
<input type="password"/> ##输入进去显示密文
<!--{'user':'用户输入的数据','psd':'xxx'}-->
<input type="button" value="登录1"/> ##一个提交的按钮
<input type="submit" value="登录2"/>
</form>
列表
<ul>
<li>asda</li> #前面带点 ·
</ul>
<ol>
<li>dadsas</li> #前面带序号 1. 2. ··· 100.
</ol>
<dl>
<dt>ttt</dt> #dt是标题
<dd>ddd</dd> #dd缩进一个是dt的内容
<dt>qeqeda</dt>
<dd>321easda</dd>
</dl>
表格1： (简单的，不太规范)
<table border="1">
<tr> ###<tr>代表行
<td>主机名</td> ###<td>代表列
<td>端口</td>
<td>备注</td>
<td>操作</td>
</tr>
<tr>
<td>172.16.1.1</td>
<td>80</td>
<td>web</td>
<td>
<a href="girlfriend.jpg">查看详细</a>
</td>
</tr>
<tr>
<td>172.16.1.8</td>
<td>3306</td>
<td>mysql</td>
<td>
<a href="33.jpg">查看详细</a>
</td>
</tr>
<tr>
<td>172.16.10.153</td>
<td>10053</td>
<td>zabbix</td>
<td>
<a href="dasdaf.png">查看详细</a>
</td>
</tr>
</table>
表格2： (规范的, 就用这种方式)
<table border="1">
<thead> ###<thead>是表头, 里面是<th>
<tr>
<th>主机名</th>
<th>端口</th>
<th>备注</th>
<th>操作</th>
</tr>
</thead>
<tbody> ###<tbody>是内容, 里面是<td>
<tr>
<td>192.168.1.1</td> <!--<th colspan="2">80</th>-->该行占两列
<td>80</td>
<td>web</td>
<td>
<a href="mygirlfriend.jpg">查看</a>
</td>
</tr>
<tr>
<td>192.168.10.10</td> <!--<th rowspan="2">192.168.10.10</th>-->该列占两行
<td>3308</td>
<td>mysql</td>
<td>
<a href="dasdaf.png">查看</a>
</td>
</tr>
<tr>
<td>192.168.10.253</td>
<td>1001</td>
<td>java</td>
<td>
<a href="33.jpg">查看</a>
</td>
</tr>
</tbody>
</table>
- label标签
-用于点击文字，使得关联的标签获取光标
<label for="username">your name:</label>
<input id="username" type="text" name="user"/>
- fieldset标签
<fieldset>
<legend>登录框</legend>
<label for="username">your name:</label>
<input id="username" type="text" name="user"/>
</fieldset>
<p>请选择性别:</p>
男：<input type="radio" name="gender"/> #可选择, name一样就表示只能选择其一
女：<input type="radio" name="gender"/>
- h 标签(块级标签)
<h1>LiShang</h1>
<h2>LiShang</h2>
<h3>LiShang</h3>
<h4>LiShang</h4>
<h5>LiShang</h5>
<h6>LiShang</h6> ###显示内容大小不同,h1最大,h6最小
- span 标签(行内标签)
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span> ###会横排显示
- div 标签(块级标签)
<div>1</div>
<div>2</div>
<div>3</div> ###块级显示
label标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label></label>
</body>
</html>
1.4、上文的http://localhost:8888/index的后台程序
#-*- coding:utf-8 -*-
# Author: li Shang
import tornado.ioloop
import tornado.web
class MainHandler(tornado.web.RequestHandler):
def get(self):
print("有人登录")
u = self.get_argument('user')
p = self.get_argument('psd')
if u == 'lishang' and p == 'zhaoxiaomeng':
self.write("Hello, world")
print("他验证对了,这个用户是:%s" %u)
else:
self.write("gun")
print("他验证错了,这个用户是:%s" %u)
def post(self):
print(u, p)
self.write("hahaha")
application = tornado.web.Application([
(r"/index", MainHandler),
])
if __name__ == "__main__":
application.listen(8888)
tornado.ioloop.IOLoop.instance().start()
1.5、例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.sogou.com/web" >
<input type="text" name="query" />
<input type="submit" value="搜索一下" />
</form>
</body>
</html>
2、CSS
在标签上设置style属性:
background-color: #4594ff;
height: 66px;
编写css样式：
1.标签的style属性
2.写在head里面,style标签中写样式
- id选择器
#i1{
background-color: #4594ff;
height: 66px;
}
- class选择器
.名称{
...
}
<标签 class='名称'> dada</标签>
- 标签选择器
div{
background-color: black;
color: white;
}
<div id="i2">2</div> 下面的div标签都会选用上面定义的样式
<div class="c1">4</div> 若是上面有定义好的c1样式，还是会选用c1
- 层级选择器(关联选择器)(空格)
span div{
background-color: black;
color: white;
}
<span id="i3">3
<div id="i4">ddadad</div>
</span> 这样只会是span里的div应用上述的样式，其他的div不会
- 组合选择器(逗号)
</head>
<style>
#i1,#i2,#i3{
background-color: blueviolet;
color: black;
}
</style>
</head>
<body>
<div id="i1">断桥是否下过雪</div>
<div id="i2">我望着湖面</div>
<div id="i3">随着</div>
</body>
- 属性选择器,下文里input标签且属性是type='text'的就会匹配后面的属性
对选择到的属性再进行一次筛选
input[type="text"]{width: 100px;height: 200px}
<input type="text"> 会匹配上面的属性
<input type="password"> 不会匹配上面的属性
CSS补充：
1、position：
a. fixed 固定在某个位置，比如右下角
<div onclick="shang();" style="height: 50px;width: 50px;background-color: #060606;color: white;
position: fixed;
"</div>
b. relative + absolute 绝对位置
<div style="position: relative; width: 500px; height: 200px; border: 1px solid red; margin: 0 auto">
<div style="position: absolute; bottom: 0; left: 0; width: 50px; height: 50px;background-color: black"></div>
</div>
2、opacity: 0.5; 透明度
3、z-index: 10; 多个position: fixed的情况下,谁的z-index值大谁在最外层
4、overflow: auto 限制内容大小，出现搜索框
5、overflow: hidden 限制内容大小，超出的直接隐藏
6、/*当鼠标移动到当前标签上时,css属性才生效*/
.pg-header .menu:hover{
background-color: cadetblue;
}
7、background-image:url('1.png'); #默认图片大,图片重复访问
background-repeat: repeat-y;
background-position-x:
background-position-y:
background-position: 10px 10px;
例子1：
因为id不允许重复,这种方式也不好
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: #4594ff;
height: 66px;
}
#i2{
background-color: brown;
height: 48px;
}
#i3{
background-color: forestgreen;
height: 80%;
}
</style>
</head>
<body>
<div id="i1">1</div>
<div id="i2">2</div>
<div id="i3">3</div>
</body>
例子 2:
class是可以重复的，因此这种方式最多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: mediumorchid;
height: 10ch;
}
</style>
</head>
<body>
<div class="c1">4</div>
<div class="c1">5</div>
</body>
</html>
例子 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 48px;
background-color: #2459a2;
line-height: 48px;
}
.pg-body{
margin-top: 48px;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
/*当鼠标移动到当前标签上时,css属性才生效*/
.pg-header .menu:hover{
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">
<div class="w">安能摧眉折腰事权贵</div></div>
</body>
</html>
效果：鼠标放上去以后能变色
2.05 颜色或样式的优先级问题
标签上的style最优先，其次按照在文中编写的顺序，越往下越优先
<!--文中div标签分别应用了c1，c2和自己本身定义的颜色,但是应用的优先级是有顺序的,下面的先应用-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: cadetblue;
color:white;
}
.c2{
font-size: 48px;
color: black;
}
</style>
</head>
<body>
<div class="c1 c2" style="color: pink">正义的光</div>
</body>
</html>
可以看出，颜色的优先级是按照该样式在文中出现的顺序来决定的
2.06 引用另外的xxx.css文件中声明好的样式
/*commands.css文件的内容*/
.c1{
background-color: cadetblue;
color:white;
}
.c2{
font-size: 48px;
color: black;
}
<!--网页文件内容-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="commands.css">
</head>
<body>
<div class="c1 c2" style="color: pink">前不见古人</div>
<p>
<div class="c1">后不见来者</div>
<div class="c2">念天地之悠悠</div>
</body>
</html>
显示效果：
2.1 边框
边框，样式，颜色
<div style="border: 1px solid red">独怆然而涕下</div>
2.2 背景
2.3 float
让标签飘起来，块级标签也可以并排起来
<div style="width: 20%;background-color: #1E84E7;float: left">一二三四五</div>
<div style="width: 61%;background-color: #b061ff;float: right">上山打老虎</div>
效果：
父亲管不住子标签了：
<div style="width: 300px;border: 1px solid red">
<div style="width: 96px;height: 30px;border: 1px solid cadetblue;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid cadetblue;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid cadetblue;float: left"></div>
<!--加上这一条让父亲标签管住子标签-->
<div style="clear: both;"></div>
</div>
2.4 display
可以将div块级标签改造成行内标签 display: inline
可以将span行内标签改造成块级标签 display: block
行内标签(span、a)：无法设置高度，宽度，padding，margin
块级(div)标签可以设置高度，宽度，padding，margin
- display: inline-block
具有inline, 默认自己有多少占多少
具有block, 可以设置高度，宽度，padding，margin
display: none 让标签消失
例子1：
<body>
<div style="background-color: indianred">问君能有几多愁</div>
<span style="background-color: darkcyan">恰似一江春水向东流</span>
</body>
效果：
接下来通过display改造一下
例子2：
<body>
<div style="background-color: indianred;display: inline">问君能有几多愁</div>
<span style="background-color: darkcyan;display: block">恰似一江春水向东流</span>
</body>
效果：
2.5 padding margin(0,auth)
- 边距，内边距，外边距
- margin: 外边距
- padding: 内边距
<div style="border:1px solid indianred; height: 70px;">
<div style="background-color: green;height: 50px;margin-top: 0px;"></div>
</div>
<p></p>
<div style="border:1px solid indianred; height: 70px;">
<div style="background-color: green;height: 50px;padding-top: 0px;"></div>
</div>
2.6 text-align
2.7 height，width，line-height，color，font-size，font-weight
<div style="height: 100px; <!--高度-->
width:80%; <!--宽度，可选100px，也可选80%-->
border: 3px solid #b061ff; <!--border:边框,solid:实体框,后跟框的颜色-->
font-size: 30px; <!--字体大小-->
text-align: center; <!--水平方向方向居中-->
line-height: 100px; <!--垂直方向上居中,后面的高度和一开始定义的一致-->
font-weight: bold; <!--文字加粗-->
color: #ff755f; <!--文字颜色-->
">陈子昂</div>
显示效果：
3、作业：写一个简单的页面
写网页：
解：
浙公网安备 33010602011771号