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多分辨率适配框架 ...
随机推荐
- ubuntu搭建php开发环境记录
这两天自己在阿里云上面买了一个ecs,系统选的是ubuntu16.04,第一件事就是先搭环境,这次准备使用lamp组合. Apache安装 首先安装apache服务器,ubuntu下面使用apt-ge ...
- [解决]CXF wsdl2java 生成代码存在的一些问题
1.环境 CXF版本:3.2.4 JDK版本:1.8.0_112 2.问题 2.1.问题种类1 属性 "Value" 已定义.请使用 <jaxb:property> 解 ...
- django在centos部署
各种坑各种蛋疼,搞了两天终于能用了.整体分2步: 1. 通过uwsgi 启动django项目 在manage.py同级目录,新建uwsgi.ini文件 [uwsgi] # 配置服务器的监听ip和端口, ...
- 剑指offer——合并两个排序的链表——对象、引用和赋值初接触
题目描述:输入两个单调递增的链表,输出两个链表合成后的链表,当然,我们需要合成后的链表满足单调不减规则. 先公布结果: /* public class ListNode { int val; List ...
- pycharm的断点调试【转自https://blog.csdn.net/weixin_39198406/article/details/78873120】
1. show execution point (F10)显示目前项目所有断点2. step over (F8)下一步但仅限于设置断点的文件3. step into (F7)执行下一行4. step ...
- linux下配置redis4.0.2主从复制以及高可用
一.环境 三台服务器分别为: 172.28.18.75/172.28.18.103/172.28.18.104 在三台服务器上分别部署一个redis节点以及一个sentinel节点 二.主从复制配置 ...
- gcc 与 g++的区别
原文: http://www.cnblogs.com/wb118115/p/5969775.html ------------------------------------------------- ...
- 动态加载、移除js、css
本文简单介绍动态加载.移除.替换js/css文件 .有时候我们在写前端的时候,会有出现需要动态加载一些东如css js 这样能减轻用户加载负担,从而提高响应效率.下面贴出代码.//JS写法 <s ...
- 654. Maximum Binary Tree 最大节点劈开，然后左边、右边排序
［抄题］: Given an integer array with no duplicates. A maximum tree building on this array is defined as ...
- ME5xN(x:1-2): custom column is editable in Subscreen Item but not in ALV grid
FM MEMFS_BUILD_MAPPING_PO_VIEWS->LMEMFSF0Z enhancement 14 zenhance_alvg_rid_editable. "activ ...