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多分辨率适配框架 ...
随机推荐
- 事务、事务特性、事务隔离级别、spring事务传播特性
事务.事务特性.事务隔离级别.spring事务传播特性 1.什么是事务: 事务是程序中一系列严密的操作,所有操作执行必须成功完成,否则在每个操作所做的更改将会被撤销,这也是事务的原子性(要么成功, ...
- Python模拟登陆TAPD
因为在wiki中未找到需要的数据,查询也很迷,打算用python登录tapd抓取所需项目下的wiki数据,方便查找. 2018-9-30 19:12:44 几步走 模拟登录tapd 抓取wiki页左侧 ...
- python中TCP粘包问题解决方案
TCP协议中的粘包问题 1.粘包现象 基于TCP写一个远程cmd功能 #服务端 import socket import subprocess sever = socket.socket() seve ...
- .do的消除
其实就是在web.xml中去掉.do即可 那里有拦截器作用,什么样的文件可以进入前端控制器1
- 常用的OO设计原则
常用的OO设计原则: 1 封装变化:找出应用中可能需要变化之处,把它们独立出来,不要和哪些不需要变化的代码混在一起. 2 针对接口编程,而不是针对实现编程. 3 多用组合,少用继承. 4 松耦合:为了 ...
- java.io.Flushable 接口
package java.io; import java.io.IOException; /** * 在什么情况下用呢? 缓冲输出到一个流中的情况下,这个流要刷新. */ public interfa ...
- AS3中的单件(Singleton)模式
单件(singleton)模式在c#中是最容易实现的模式,其主要用意就在于限制使用者用new来创建多个实例.但在as3中,构造函数必须是public的(语法本身要求的),而且也不能在构造函数中抛出异常 ...
- PhoenixFD插件流体模拟——UI布局【Simulation】详解
前言 之前使用RealFlow做流体模拟,但是总得和3ds导来导去,略显麻烦,特意学习PhoenixFD插件,直接在3ds中进行流体模拟.若读者有更好的流体模拟方法,欢迎在评论区交流. 原文地址:ht ...
- Blender Python脚本的6个技巧
https://www.youtube.com/watch?v=vFoh3S8MLBI&index=3&list=PLw8Sjaw0TPm0J9DXj3XGi1_9fxXezlzrM ...
- Curl 基本命令
下载单个文件,默认将输出打印到标准输出中(STDOUT)中 curl http://www.centos.org 通过-o/-O选项保存下载的文件到指定的文件中:-o:将文件保存为命令行中指定的文件名 ...