#前端

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

符号：

> &gt; < &lt;

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.random() ...
JavaWeb全套教程笔记_前端技术
JavaWeb全套教程笔记第一阶段_前端技术自己整理一套详细的笔记资料,可以满足平时查阅复习,还能帮助别人学习JavaWeb知识.JavaWeb教程分为四个阶段前端技术 1.HTML.2.CSS. ...
JS实现仿新浪微博大厅和腾讯微博首页滚动效果_前端开发
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
现代软件工程_团队项目_阿尔法阶段_前端知识共享_2017.11.21
现代软件工程_团队项目_阿尔法阶段_前端知识分享更加舒适浏览格式 http://blog.csdn.net/bowean HTML基础(一) 本文参考了[http://www.w3school.co ...
ie9无法获取未定义或 null 引用的属性“indexof”_前端JS基础篇（二）JS基本数据类型和引用数据类型及检测数据类型方法...
JS中的数据类型 (一).基本数据类型(值类型) 1.number:数字 -12.12.5.-12.5 0这些数字都是number: js中增加了一个number类型的数据:'NaN' typeof ...
人工智能实战小程序之语音_前端开发
1. 人工智能实战小程序之准备工作 2. 人工智能实战小程序之语音_前端开发今天这部分主要讲小程序前端功能的开发由于我偏后端,css是我的弱项,可能很多人和我一样开发小程序不知道如何下手,希望本篇 ...
web前端-01：关于css居中的几种方法
web前端-01:关于css居中的几种方法在学习web前端的过程中,居中问题应该算得上是个比较经典的问题了吧,关于居中的方法也有很多,总结一下我自己比较喜欢用的几个方法. 1 利用 ...

day13_雷神_前端01

#前端

html

css

练习

day13_雷神_前端01相关推荐

最新文章

热门文章