前端学习:
html-一个赤裸的人
css-赋予人物衣物服饰
gs-赋予人物行动能力
写静态页面需要:html; css
html需掌握(重点要求):20个左右的重点标签——(一套浏览器认识 的规则)
css需掌握(重点要求):一部分必备操作(位置,移动,大小,颜色)
所有Web框架的本质都是socket服务端
测试方法:找到html文件路径,直接通过浏览器打开
----------html书写规则:
由pycharm创建生成的html文件
<!DOCTYPE html> #默认对应规则
<html lang="en"> #<html>:外层标签(有且仅有一个),称为“html标签”
#lang="en"表示标签内部的属性
<head> #<head>:内层标签,称为“head标签”
<meta charset="UTF-8"> #定义编码类型,自闭和标签
<title>Title</title> #定义标头,手动闭和标签
</head>
<body> #<body>内层标签,称为“body标签”
</body>
</html>
由上:
标签分为自闭和标签(meta、br)、主动闭合标签(title、);
head标签中(理解):
<meta>可实现刷新,跳转,关键字,描述,IE兼容等功能属性
<meta http-equiv="Refresh" Content="5"> #定义刷新(http-equiv="Refresh")
<title>
<link>可设置标头左侧的图标
<link rel='shortcut icon' href='image/pig.ico'> #定义标头图标(rel='shortcut icon')
----------body标签中(掌握,重点都在这):
各类特殊图标:
 —— 加空格
>——加大于号
<a href="https://www.bilibili.com/">哔哩 哔哩</a> #加空格
<a href="https://www.bilibili.com/">哔哩 >哔哩</a> #加大于号
各类特殊符号:
<P>:生成段落(有间距)
<br>:换行
<h#>:放大加粗、缩小变细(#:1-6)
<h1 style="background-color:red;">Hello!<h1> #<h1>:加大加粗 style:添加底色
<span>:换列(白板,不带属性)
所有标签分为:块级标签(有间距):h标签,p标签,div标签(纵白板,不带属性)
行内标签(内联标签-堆叠):span(横白板,不带属性),input标签,a标签
<form>标签:相当于一个表单(数据单),用于提交登录或其他请求;
表单中能够将数据提交至后台的标签有input,p,div,textarea,select
<from action=''>:表示你要将表单(数据)提交到哪;method="":选择请求方式GET/POST(体现在提交方式上,附带、不附带参数提交服务器)
<form action="http://localhost:8888/index" method="post">
<form action="http://localhost:8888/index" method="GET">
<input>标签:
<input type="" name="" value=“” checked=""/> name属性用于让后台拿数据,checked-默认值
<input type="password" name="pwd"/> #定义文本
<input type="radio" name="man" value=''/> #radio的name属性完成单选,name相同则互斥
<input type="checkbox" name="man" value=''/> #radio的name属性完成复选,name批量获取
<input type="button" value="登录1"/> #定义按钮;
<input type="submit" value="登录2"/> #定义按钮
<input type="file" name="file_name"/>
#上传文件,依赖于表单属性enctype,enctype="multipart/form-data"表示表单一点一点上向服务器上传文件
<input type="rest"/> #重置
表单提交时,文本框内容以字典(key:value)形式存在
<textarea>标签:<textarea>默认值</textarea> 多行文本
<select>标签:生成下拉菜单(多选、子组通过属性实现)
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
<a>标签:
-跳转;
<a href="网址">寻址标头</a>
-锚
<a href="#+锚点" >标头</a>
-新页面+跳转+锚
<a href="#+锚点" target="_blank">标头</a> ##target="_blank":新页面
<img src>标签:
<img src="1.jpg" style="height: 200px;width: 200px;"> #图片要求同级且简单
配合页面跳转使用时:
<a href="http://www.baidu.com">
<img src="1.jpg" title="大美女" style="height: 200px;width: 200px;" alt="美女">
</a>
#title,alt为标注属性
<table>标签:创建表格
<table>
<thead> head表头: tr: 行 th: 列
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody> body表体:tr: 行 td: 列
<tr>
<td>11</td>
<td>22</td>
</tr>
</tbody>
</table>
-------------------------------------------------------------------
CSS:style标签内的属性操作(eg:background-color,height,)
书写方式:
1、style标签中写样式
2、写在head标签里,用在body里;
-id选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{ ##名称{}
background-color:#2459a2;
height:50px;
}
</style>
</head>
<body>
<div id="i1">fffffff</div>
<span id="i1">xxxxxxxxxxxx</span>
</body>
-类选择器(最常用)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ca{ #.名称{}
background-color:#2459a2;
height:50px;
}
</style>
</head>
<body>
<div class="ca" >fffffff</div>
<span class="ca">aaaaaaaaaaaaaa</span>
</body>
-标签选择器-body内所有相同标签都加上样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{ #div{}
background-color:#2459a2;
height:50px;
}
</style>
</head>
<body>
<div>fffffff</div>
<span>aaaaaaaaaaaaaa</span>
</body>
-层级选择器(空格):.c1 .c2 div{ 样式 } --多条件样式
-组合选择器(逗号):#i1,#i2,#i3{ 样式 } /.i1,.i2,.i3{ 样式 } --共同拥有一个样式
-属性选择器():.c1[name='aspc']{width:110px;}--对选择到的标签通过属性再进行一次筛选
选择器补充:优先级为style标签优先>选择器编写顺序>就近原则
3、css样式也可以写在单独文件中,通过引用的方式调用
文件类型:CSS文件 引用方式(head内):<link rel="stylesheet" href="commons.css" />
其他:
border:边框
<body>
<div style="border: 10px solid red;">4555153155</div> #像素,实体,颜色
</body>
height(高),width(宽-像素or百分比),color(色),font-size(大小),font-weight(粗细),
text-align:center(水平自定义居中),line-height(垂直自定义居中)等字体操作
float:使标签动起来,块级标签也能够堆叠
<div style="width:20%;background-color:red;float:right;">1</div> #float浮动标签
<div style="width:70%;background-color:black;float:left;">2</div>
display:改变标签属性(内联-块-内联块)
display:inline/block/inline-block/none
行内标签:无法设置高度,宽度,padding,margin
块级标签:可以设置高度,宽度,padding,margin
inline-block:有内联标签的特点,又能够设置高度,宽度,padding,margin
none:让标签消失
padding/margin(0,auto):外/内边距(padding/margin:0 auto:自动居中)
position:图层
position:fixed-固定标签在页面的某个位置,它提供top,right,bottom,left等属性
<body>
<div style="width:50px;height:50px;background-color:black;color:white;
position:fixed;
right:30px;
bottom:30px;">返回顶部</div>
<div style="height:5000px;background-color:#dddddd;"></div>
</body>
通过position:fixed实现分层
<div style="z-index:10;position:fixed;top:50%;left:50%;margin-left:-200px;margin-top:-200px;;background-color:white;width:400px;height:400px;"></div>
<div style="z-index:9;position:fixed;background-color:black;display:none;
top:0px;
bottom:0px;
right:0px;
left:0px;
opacity:1.1;;">
</div>
<div style="height:5000px;background-color:green;"></div>
#top:0px;bottom:0px;right:0px;left:0px;-表示填满整个页面
opacity:数字-设置图层透明度
z-index:数字-设置图层优先级
position:relativ/absolute :相对标签,提供top,right,bottom,left等属性
overflow:hidden/aotu:设置像素区域,只限定区域内的内容(eg:图片)
background-image:url(''):设置背景图片
<div style="background-image:url('11.jpg');width:1540px;height:1080px">
<div>123354566</div>
</div>
background-repeat:设置图片是否可复制(但div大于图片像素)
background-position-x:px/ background-position-y:px/ background-position:xpx ypx
选择器:hover:盘旋(附加动态属性-光标指向则属性出现)
选择器:hover{
color:red;
}
-----------------------------------------------------------------小结:
标签与标签之间能够嵌套,外层块标签在一定范围(style设定)内约束着内块标签,而对于超出的那部分(style未设定),可通过<div style="clear:both;"></div>标签追加约束。这个约束包含位置、大小等等。
margin:0-无留白,margin:0 auto-自动居中。具体为:margin在外层标签应用时,它对留白,空隙及间距起作用;而在内层标签使用时,它决定了标签在外层块标签中的横向位置。
eg:
<body style="margin:0;"> #此margin使块标签紧贴页面(左、上),不产生留白
<div class="height:38px;background-color:#dddddd;">
<div style="width:980px;margin:0 auto;line-height:2.5;"> #此margin使内标签在外层
块标签中横向居中
<div style="float:left;">  淘宝</div>
<div style="float:right;">
<a>登录 </a>
<span> 注册  </span>
</div>
<div style="clear:both"></div>
</div>
</div>
</body>
#