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多分辨率适配框架 ...
随机推荐
- Web请求过程
一.Http解析 Http Header控制着成千上万的互联网用户的数据传输,控制着用户浏览器的渲染行为和服务器的执行逻辑. HTTP请求头 Accept-Language: zh-cn,zh;q=0 ...
- Nginx虚拟目录设置
location ~ .*\.html$ 匹配所有以.html结尾的链接 --------------------------------------------------------- 关于a ...
- 【原】The Linux Command Line - Processes
ps - report a snapshot of current processes top - display tasks job - list active jobs bg - place a ...
- js中的数据类型有
- [Ting's笔记Day8]活用套件carrierwave gem:（3）Deploy图片上传功能到Heroku网站
前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...
- 配置远程主机http服务器 打包资源
<1> 搭建nginx 验证nginx是否启动成功 https://blog.csdn.net/wdsdsdsds/article/details/51179780 https://ww ...
- Unity与安卓IOS交互
记录下 安卓与Unity交互中 跳坑 找到的资料. <1>建立交互 http://blog.csdn.net/lizhengwei1989/article/details/54631 ...
- 关于 web 页面 占满全屏
页面一般可以分成三部分,头部,底部,中间内容部分. 一般不用考虑中间高度部分,因为可以靠内容撑开,然后让底部到达底部.但是当中间内容太少时,底部就会顶不到底部. 方法1.中间部分给一个最小高度(min ...
- vue 初始化data中的数据
Object.assign(this.$data, this.$options.data());
- SpringJDBC中jdbcTemplate 的使用
一:定义 SpringJDBC是spring官方提供的一个持久层框架,对JDBC进行了封装,提供了一个JDBCTemplated对象简化JDBC的开发.但Spring本身不是一个orm框架,与hibe ...