day13_雷神_前端01
前端
html
服务器端返回的就是一个字符串，浏览器根据html规则去渲染这个字符串。
html 是超文本标记语言，相当于定义统一的一套规则，大家都遵守它，这样就可以让浏览器根据标记语言的规则去解释服务端返回的字符串。
基本结构
<!DOCTYPE html> # 定义html文档的类型，其实就是一套对应规则，这是推荐规则，兼容性最好之一。
<html lang="en"> #是否翻译网页
<head> # 对整个html的一个设置
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> # 身体
</body>
</html>
写html的时候，一般都现在本地调试好html文件，直接放到服务器上就能用了。
head
<head>
<meta charset="UTF-8"> <!--自闭和标签-->
<meta http-equiv="Refresh" content="2">
<meta http-equiv="Refresh" content="2; url=http://www.baidu.com">
<!--刷新和跳转-->
<meta name="keywords" content="侯冰雷，前端">
<!--关键字，可以被搜索的-->
<title>Title</title>
</head>
body
分类：
块级标签：h1-h6、p、dic等。
行内标签：a、span、select等
自闭和标签：meta、input
所有标签都可以定义的属性：id、style、name
特殊标签属性：
a： href，target
符号：
> >
< <
p和br：
p表示段落,默认段落之间是有间隔的。
br： 换行
a标签
<a href="http://www.baidu.com" target="_blank" (新标签页打开)>百度一下</a>
<a href="./lala.html">本地文件</a>
锚，示例：
<body>
<a href="#tt">看第二章</a>
<div>
<p class="1">第一章</p>
<p class="2" id="tt" >第二章</p>
</div>
</body>
input系列
hr 分割线
多选框
单选框 name相同，才又互斥的作用；所有的标签都可以有name属性
选择文件
没有再form标签里button和submit是一样的。
form标签
提交的数据放到一个form里才能提交到另外一个地方
提交的时候要用到name属性，构建字典，来让服务端接收到字典信息。
textarea
文本区域
label标签
让一个文本跟一个标签产生一个对应关系
label里的for指定一个标签的id
列表标签
ul、ol、dl
ul没有序号
ol有序号
dl里面不是li，是dt标题，和dd内容。
css
选择器
class选择器 .tt class='tt'
id选择器 #tt id= 'tt' 一般不用id选择器，因为id唯一，逝去了重用性
标签选择器 a
background属性
background-image：默认会平铺，铺满
background-repeat: no-repeat/repeat-x/repeat-y
background-position: 相当于一张纸扣个洞，图片在纸下边
display属性
none 不显示
block 块级
in-line 行内
cursor属性
cursor：pointer 鼠标变成小手
border属性
border： 1px solid red
浮动
宽度针对父标签；
解决办法：
3.官方写法：建议大家这样去写 给父盒子设置：
.clearfix:after # 后边加行内的东西
{visibility:hidden;
clear:both;
display:block; # 转成块级
content:".";
height:0}
4、 4.给父元素添加overflow:hidden 推荐使用
position属性
fixed 固定，针对窗口
absolute 绝对，
relative 相对
<div style="position: relative;background-color: red;height: 500px;width: 300px">
<div style="position:absolute;bottom: 30px;right: 30px">定位</div>
</div>
absolute在其父标签有relatice属性的时候，在父标签定义位置处。
padding和margin
padding 内边距
margin 外边距
练习
1、
.top{
width: 100% ;
height: 40px;
background-color: black;
color: #fff;
/*让文本水平居中*/
/*text-align: center;*/
line-height: 40px; 行高等于盒子高，就垂直居中
2、
.container{
width: 1226px;
height: 100%;
/*两个值： 上下 左右*/
/*三个值： 上 左右 下*/
/*四个值： 上 右 下 左*/
/*一个值： */
margin: 0 auto; auto，推最大的距离。
}
re模块
示例1、
李[^和]* 李杰和李莲英和李二棍子
李杰
李莲英
李二棍子
表示匹配一个不是"和"的字符任意次
示例2、
^[1-9]\d{14}(\d{2}[0-9x])?$
现在不会匹配错误的身份证号了
()表示分组，将\d{2}[0-9x]分成一组，就可以整体约束他们出现的次数为0-1次
^([1-9]\d{16}[0-9x]|[1-9]\d{14})$
表示先匹配[1-9]\d{16}[0-9x]如果没有匹配上就匹配[1-9]\d{14}
示例3、
.*?x
就是取前面任意长度的字符，直到一个x出现
re模块下的常用方法：
如果用r进行取消转义的话：
ret = re.search(r'/?[^\s]*',r'/?username=houbinglei&phone=123456&pwd=&verifyCode=123456').group()
print(ret)
两边都得加r，字符串要加，让整个字符串不转义。day13_雷神_前端01的更多相关文章
- day16_雷神_前端04
前端day04 链接前端的一些库,一些资源,从bootcdn上搜,有前端所有的库. 前端工作流程: jquery的DOM文档操作 <!DOCTYPE html> <html lang ...
- day14_雷神_前端02
# 前端day02 1. html标签 1. span标签设置宽高 设置宽高后,字体不会发生变化. 2. 盒模型 padding是border里面的距离: margin 是border边框外头的了属于 ...
- day15_雷神_前端03
# 前端 day03 内容回顾 javascript: 1.ECMAScript5.0 es6(阮一峰) es7 es8 (1)声明变量 var let (2)内置函数 Date Math.rando ...
- Python web前端 01 HTML常用标签
Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...
- 为什么fis没有freemarker的解决方案啊？_前端吧_百度贴吧
为什么fis没有freemarker的解决方案啊?_前端吧_百度贴吧 fis-plus:适用于PHP+Smarty后端选型jello:适用于Java+Velocity后端选型goiz:适用于go+ma ...
- 前端01 /HTML简单简绍
前端01 /HTML简单简绍 目录 前端01 /HTML简单简绍 1.web服务本质 2.浏览器的工作流程 3.HTML是什么 4.web服务本质 5.HTML文档结构 6.HTML注释 6.标签语法 ...
- day17_雷神_数据库 小全
# 数据库 1.mysql 介绍 一 数据库管理软件的由来 程序的所有组件不可能只在一个机子上,性能问题和单点故障, 程序分散了,还需要解决数据共享问题, 基于网络访问这台共享的机器,用socket. ...
- day07_雷神_面向对象进阶
day07 1.接口类(抽象类) 接口类和抽象类是一种规范,写代码时的规范. 两个思想: 一个是统一接口,一个是定义规则. 最终版本:接口类,抽象类,是一种规范,写代码时的规范 强制性的规定. fro ...
- 谷哥的小弟学前端(01)——HTML常用标签（1）
探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...
随机推荐
- 一致性hash算法及java实现
一致性hash算法是分布式中一个常用且好用的分片算法.或者数据库分库分表算法.现在的互联网服务架构中,为避免单点故障.提升处理效率.横向扩展等原因,分布式系统已经成为了居家旅行必备的部署模式,所以也产 ...
- 63(原67).纯 CSS 创作单元素点阵 loader
原文地址:https://segmentfault.com/a/1190000015444368 感想:CSS又一次让我见识到它的强大之处 --> box-shadow . box-shadow ...
- 高校手机签到系统——第一部分Authority权限系统（上）
序:今天开始写一个算是我第一个系列的文章——高校手机签到系统.本系统结合我们学校自身的一些特点编写.这是我的毕业设计项目,写在这里算是给最后论文的时候一些点滴的记录.另外也想通过这个系列的文章找到一份 ...
- leetcode287
public class Solution { public int FindDuplicate(int[] nums) { ) { ]; ]]; while (slow != fast) { slo ...
- Vue proxy
npm run dev 我们访问的是localhost:8080 config文件夹下的index.js配置文件的dev dev: { env: require('./dev.env'), port: ...
- maven pom.xml 项目报错
Failed to read artifact descriptor for org.springframework.boot:spring-boot-starter-web:jar:2.1.0.RE ...
- linux学习资料收藏
http://blog.chinaunix.net/uid/10167808/abstract/1.html?year=2008 http://linux.linuxidc.com/ind ...
- 判断文件的唯一性--MD5
JAVA中获取文件MD5值的四种方法 JAVA中获取文件MD5值的四种方法其实都很类似,因为核心都是通过JAVA自带的MessageDigest类来实现.获取文件MD5值主要分为三个步骤,第一步获 ...
- python 之C3算法
C3算法只要针对的Python2.3版本之后出现的新式类MRO(method resolution order) -------继承方法查询顺序;而经典类MRO则遵循的是深度优先遍历(树形结构) (1 ...
- RDD认知
1.RDD又叫弹性分布式数据集 2.抽象 3.带泛型,支持多种数据类型 4.集合是可以进行分区 例如(1,2,3,4,5,6,7,8,9)这个数组是可以进行分区的(1,2,3) (4,5,6) ( ...