HTML 超文本标记语言 构建网页的基本骨架 XML也可以搭建前端页面 在odoo框架中使用较多
注释
标签分类1: 1.双标签 2.单标签(自闭和标签) 标签分类2: 1.块儿级标签 div p h 独占一行 可以设置长宽 1.块儿级标签能够嵌套任意类型的标签 2.但是p标签不能嵌套块儿级级标签 只能嵌套行内标签 2.行内标签 span a img 自身文本多大 就占多大 无法设置长宽
h1~h6标题标签 b,i,u,s br,hr & & 空格 ¥ ¥ > > < < ® ® © © 常用标签 div span 这哥俩主要用来做网页骨架搭建 页面布局
a标签 href 1.可以写url(统一资源定位符 网址),点击跳转 2.锚点 还可以写另一个a标签id值 点击跳转到对应标签所在的位置(回到顶部) target 默认是_self 当前页跳转 也可以换成_blank 新建窗口打开 如果url是首次点击的话 初始是蓝色 只要点过一次 浏览器会机制 之后a标签全是紫色 img标签 src 1.图片路径(本地或者网上的) 2.url(自动访问该url获取结果) 3.直接放图片二进制数据 alt 当图片加载不出来的时候展示的提示信息 title 鼠标悬浮上去 提示的信息 height,width 两者挑一个就可以实现等比例缩放 列表标签 ul>li 无序列表 ol>li 有序列表 dl>dt,dd 标题列表
表格标签 <table> <thead> <tr>一个tr就是一行 <td>普通文本</td> <th>加粗文本</th> </tr> </thead> <tbody></tbody> </table> form表单 获取用户信息 提交给后端 input标签 type text 普通文本 password 密文 date 日期 radio 单选 checked="checked" 可以简写 checked checkbox 多选 checked="checked" 可以简写 checked file 上传文件 按钮组 submit 触发form表单提交动作 button 没有任何效果 只是普通的按钮 reset 重置按钮 hidden 隐藏(用户看不到 但是你打开浏览器检查 文档是有的) disabled 禁用 readonly 只读 select标签 下拉框 默认是单选 一个个的选项 用的是option标签 可以指定multiple变成多选 默认选中 selected="selected" 简写为selected <optgroup label='一级标题'> <option></option> </optgroup> textarea 大段文本 button标签 放在form表单内 也可以触发提交动作 label标签 通常与input结合使用 for后面跟input标签的id值 获取用户信息的标签都应该有name属性 name类似于字典的key 用来标签input框获取到的信息到底是什么 用户输入的信息都会被标签的value属性接收 你也可以直接写value值 作为标签的默认值
form标签 几个比较重要的参数 action 控制数据提交的地址 1.不写 默认往当前页面所在的地址提交 2.全写 https://www.baidu.com 3.就写路径后缀/index/ method 控制提交方式 默认是get请求 get请求携带的参数 会直接展示占地址栏 get前期一般只能携带一些不重要的信息,get请求携带的数据 大小是有限制 大概在4KB左右 也可以指定成post请求 如果form表达要上传文件 那么需要修改enctype参数 由原来默认的urlencoded变成form-data flask框架 三行式 from flask import Flask
app = Flask(__name__) app.run()1.css 层叠样式表
2.css学习思路 1.如何查找标签 2.如何调节样式
3.css注释 HTML注释: CSS注释:/**/ 前端语言的注释在使用的时候通常遵循成双成对出现
/*导航条样式开始*//*导航条样式结束*/
web框架也有针对html页面的注释 该注释浏览器检查也是看不到的 称之为模板语法的注释 jinja2模块: {#模板语法注释#}
CSS语法结构 选择器 {属性1:值;属性2:值;属性3:值}
选择器优先级 一.选择器相同的情况下:就近原则 二.选择器不同的情况下: 行内>id选择器>类选择器>标签选择器
2.如何调节样式
两个快递盒之间的距离(标签与标签之间的距离) 称之为 外边距(margin)纸盒的厚度(边框) 称之为边框(border)内部的物品到盒子的距离(内部文本与边框的距离) 称之为 内边距(padding)物品本身的大小(文本大小) 称之为内容(content)
浮动的元素 是脱离正常文档流的 也就意味着没有独占一行一说 也不再占用原来的位置
浮动的元素 会造成父标签塌陷
clear 清除浮动带来的负面影响(父标签塌陷)
定位： 所有的标签默认都是静态的 无法直接调节位置 你需要先将其设置成可定位状态 1.相对定位 相对于标签自身原来的位置 2.绝对定位 相对于已经定位过的父标签 但只给你一个父标签的长宽 让你做定位 3.固定定位 相对于浏览器窗口 固定在某个位置
浏览器会优先展示文本内容
脱离文档流 脱离文档流 1.浮动的元素都是脱离文档流的 2.绝对定位是脱离文档流的 3.固定定位也是脱离文档流的 不脱离文档流 1.相对定位不脱离文档流
模态框
opacity 即可以调节颜色透明度也可以调文本透明度
CSS 属性操作 字体属性 color 字体颜色 font-size 字体大小(24px) font-weight 字重 font-family 字体样式 文字属性 text-align:center/left/right/justify text-decoration:none/underline/overline/line-through text-indent:32px 背景属性 颜色： red '#4e4e4e' rgb(128,128,128) rgba(128,128,128,0.5) backgroud-color backgroud-image 默认是平铺满这个区域 浏览器窗口可以把它当成一个三维坐标系 横X 竖Y 指向用户的Z backgroud-repeat:no-repeat/repeat-x/repeat-y backgroud-position:center center 第一个上下 第二个左右
支持简写 backgroud:red url('') no-repeat center center
背景图片应用场景 所有浏览器你能够看到的都是走网路请求传输过来的 当你的网站需要用到很多小图标的时候，可以将所有的小图片放在一张 图片上，然后通过背景图片的位置来控制显示哪一个小图片 从而节省加载资源
边框属性 border-style:solid/dotted/dashed border-color:red border-width:5px
支持简写 border:3px solid red; border-top/left/right/bottom
盒子模型 以快递盒为例 margin:外边距(标签与标签之间的距离) border:边框 padding:内填充 内边距 content:文本内容
margin-top/left/right/bottom
margin:1 2 3 4 padding:1 2 3 4
浮动 float 浮动是脱离文档流的 也不再遵循块儿级独占一行的特点 浮动主要用于页面布局
浮动会带来父标签塌陷的问题
clear 清除浮动带来的影响 clear:left/right/both
.clearfix:after{ content:'' display:block; clear:both } 哪里塌陷 就给谁加一个clearfix类属性即可 如果给当前标签加没有效果 那么你可以考虑给目标标签外层 再套一个div 然后给这个新的div加
是否脱离文档流 脱离 1.浮动 2.绝对定位 3.固定定位
不脱离 1.相对定位
定位 所有的标签默认都是静态的static 没有定位一说 要想改变标签位置 需要先改变标签位置状态 position:static
1.相对定位 relative 2.绝对定位 absolute 3.固定定位 fixed
溢出属性 overflow:hidden,scroll,auto
z-index
模态框(百度登录页面)
opacity 透明度
JavaScript(JS) 前端编程语言
JS跟Java没有半毛钱关系，纯粹是为了蹭当时红极一时java的热度
引入js的两种方式 script标签内直接写 script src属性导入外部文件
js注释 单行注释 // 多行注释 /**/
js语言是以分号(;)作为语句的结束符 一般情况下不加分号也不会报错
变量 在js中声明变量需要使用关键字声明 var name = 'jason' ECMA6最新语法 let name = 'jason' var与let的区别 var作用的是全局 let作业的是局部，可以保证变量的不被随意的修改
在js中 是有真正意义上的常量 声明常量关键字 const pi = 3.1415926
js中变量的命名 数字 字母 下划线 $ 数字不能开头，关键字不能作为变量名
变量的命名规范 js中推荐你使用驼峰式命名 userName dataOfDb ageOfJason python中推荐使用下划线 age_of_jason
数据类型 数值类型(整型和浮点型) js中将整型和浮点型统称为数值类型
NaN：是数值类型但是表示的意思是不是一个数字
字符类型(字符串) js中字符串的拼接推荐你使用加号(python不推荐使用加号因为效率极低)
undefined 对象 null 数组 [] 自定义对象 {} 布尔值 js中的布尔值都是全小写 true false 布尔值为flase的有 ""(空字符串)、0、null、undefined、NaN Symbol
流程控制
函数
内置对象
转载于:https://www.cnblogs.com/PowerTips/p/11470524.html
