1、一套规则,浏览器认识的规则。 2、开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) ****** - 数据库获取数据,然后替换到html文件的指定位置(Web框架) 3、本地测试 - 找到文件路径,直接浏览器打开 - pycharm打开测试 4、编写Html文件 - doctype对应关系 - html标签,标签内部可以写属性 ====> 只能有一个 - 注释: <!-- 注释的内容 --> 5、标签分类 - 自闭合标签 <meta charset="UTF-8"> - 主动闭合标签 title></title> 6、 head标签中 - <meta -> 编码,跳转,刷新,关键字,描述,IE兼容 <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" /> - title标签 - <link /> 图标, - <style /> - <script> 7、body标签 - 图标, > < - p标签,段落 - br,换行 ======== 小总结 ===== 所有标签分为: 块级标签: div(白板),H系列(加大加粗),p标签(段落和段落之间有间距) 行内标签: span(白板) 标签之间可以嵌套 标签存在的意义,css操作,js操作 ps:chorme审查元素的使用 - 定位 - 查看样式 - h系列 - div - span - input系列 + form标签 input type='text' - name属性,value="赵凡" input type='password' - name属性,value="赵凡" input type='submit' - value='提交' 提交按钮,表单 input type='button' - value='登录' 按钮 input type='radio' - 单选框 value,checked="checked",name属性(name相同则互斥) input type='checkbox' - 复选框 value, checked="checked",name属性(批量获取数据) input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data" input type='rest' - 重置 <textarea >默认值</textarea> - name属性 select标签 - name,内部option value, 提交到后台,size,multiple 3.form标签 提交表单 <form action='http://sssss' methed='GET' enctype="multipart/form-data"> <div>asdfasdf</div> <input type='text' name='q' /> # 上传文件 <input type='file' name='f' /> <!--依赖form表单属性 enctype--> <input type='submit' /> </form> GET: http://sssss?q=用户输入的值&b=用户输入的内容 POST: 请求头 请求内容 - a标签 - 跳转 - 锚 href='#某个标签的ID' 标签的ID不允许重复 - img src alt title - 列表 ul li ol li dl dt dd - 表格 table thead tr th tbody tr td colspan = '' rowspan = '' - label 用于点击文件,使得关联的标签获取光标 <label for="username">用户名:</label> <input id="username" type="text" name="user" /> - fieldset legend
css样式补充
1.默认img标签,有一个1px的边框 2.我们经常会遇到一种情况,给一个元素设置浮动之后 float:left/right;,如果该元素的父元素有背景颜色,那么会发现父元素的背景颜色消失了;如果父元素有一个边框,那么浮动元素无法将边框撑开。 这就要回到浮动元素的特性来说明此问题“当元素设置浮动后,会自动脱离文档流”,翻译成白话就是说,元素浮动后,就不在整个文档流的管辖范围,那么它之前存在在父元素内的高度就随着浮动不复存在了,
而此时父元素会默认自己里面没有任何内容(前提是未给父元素设置固定高度,如果父元素本身有固定高度,就不会出现这种情况) 3.margin:外边距(离上面的边距增加了,本身没有增加。) padding:内边距(上边边距增加了,自身内部增加边距。)
4.positon属性详解
absolute |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed |
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative |
生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static |
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
5.posttion:relative + absolute 相对定位
posttion: absolute :一次性固定在网页某个位置,再移动滑轮跟着动
posttion: relative :单独使用没有任何变化。
6.opcity: 0.5 透明度
7.z-index: 层级顺序 ,值大在上面
8.当图片大小超过了父级标签,就把父级标签撑开了。
overflow: auto:图片滚动条显示
overflow: hidden:图片只显示父级标签大小
9.hover :当鼠标移动到当前标签上时,才生效的css属性
10.background-image:url('image/4.gif'); # 默认,div大,图片重复访
background-repeat(no-repeat;repeat-x;repeat-y):指定方向堆叠,默认x轴和y轴都会堆叠
background-position :指定背景显示位,还有 background-position-x: background-position-y.