day13_雷神_前端01

前端

---

html

服务器端返回的就是一个字符串，浏览器根据html规则去渲染这个字符串。

html 是超文本标记语言，相当于定义统一的一套规则，大家都遵守它，这样就可以让浏览器根据标记语言的规则去解释服务端返回的字符串。

基本结构

# 定义html文档的类型，其实就是一套对应规则，这是推荐规则，兼容性最好之一。
#是否翻译网页
# 对整个html的一个设置



# 身体

写html的时候，一般都现在本地调试好html文件，直接放到服务器上就能用了。

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" (新标签页打开)>百度一下

本地文件

锚，示例：

看第二章

第一章

第二章

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 相对

定位

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]\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，字符串要加，让整个字符串不转义。

---

1. 1-9 ↩︎