python开发Day11(前端)
前端（html、css、js组成）
- html标签：
- <!DOCTYPE html> #定义这个页面是什么html规则解释(w3c标准模式)
<head> <meta name='keywords' conntent="关键字,关键字2"> #网页关键字 <meta name='description" content='介绍'> #描述网站内容 <meta http-equiv="Refresh" content="2;URL=https://www.baodu.com"> #2秒后刷新网页,跳转到百度页面 <meta charset="UTF-8"> #定义网站编码格式 <meta http-equic="content-Type" content=""> #与上一个一样,只不过不是简写! <link rel="icon" href='链接或者路径'> #设置标题图片 <title> </title> #浏览器标题 </head> #浏览器标题等设置
-
<body> <a></a> #链接 <h1></h1> #标签(他有h1-h6) <div></div> #盒子 <img /> #加载图片 <hr /> #水平线 <br /> #换行符 <ul> #无需列表 <li> #列表中的每一项 </ul> <ol> #有序列表 <li> #列表中的每一项 </ol> <dl> #定义列表 <dt> #列表标题 <dd> #列表项 </dl> <table> #表格 <thead>#表头,简写不需要 <tr>#行 <td>aaa</td>#行名 <td>bbb</td> <td>ccc</td> </tr> </thead> <tbody>#内容,简写不需要 <tr> <td>aa</td> <td>bb</td> <td>bb</td> </tr> </tbody> </table> <form> #表单 #最常用的事input元素 <input \>#自闭和标签 </form> </body>
- 标签属性:
- 普通标签属性:
<img src='路径' height='高' width='宽' alt='加载失败提示什么' title='鼠标移动过去提示信息' /> <a href='url或者#id跳到固定位置' name:'定义页面书签' target:"_blank#重新生成一个页面">提示语</a>
- table的属性:
<table border='数字'> #定义表格样式 <table cellpadding='数字'> #内边距 <table cellspacing='数字'> #外边距 <table width='px、%'> #表格的宽度 <table stypl='height:'px、%'> #表格的长度 <td rowspan='一列占几行'>1,2<td> <td colspan='一行占几列'>1,2<td>
- form表单属性:
action='提交内容到那里' enctype='multipart/form-data' #上传文件的时候必须声明 method='提交方式默认是get'(get:1.提交的键值对,放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制 post:1.提交的键值对,不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制. ) input属性: <input type='text' name='name' vlaue='用户不写默认为这里内容'\> #以文本格式让用户输入内容,给服务端传的时候key是name type类型: submit #按钮 value #按钮名称 password #密文 name #key名 radio #单选框 name #key名有多个选择那么name需要一样用户只能选一个 value#传给服务端的值 checkbox #复选框 name #key名和radio一样用户可以多选 value#传给服务端的值 button #在html里没有意义就是一个按钮没有功能,加上JS便可以使用 value#和submit一样 file #提交文件 value #文件名 select属性: <select name='key' multiple size='1'>#下拉列表,发向服务器的时候keu,可多选(默认单选),默认显示几个。 <optgroup label='内容'>#它相当于将现在的内容分组 <option value='对应的值'>1</option>#选项,发送给服务端key的value <option>2</option> <option>3</option> </optgroup> </select> textarea属性:他是多行输入,而input的text为单行输入,常用于写备注、签名等。。。 label属性: 组合input的文本使用,单机名称光标到文本位置 fieldset属性: 做一个框,将内容放到里面
- 普通标签属性:
- 几个基本的特殊字符：
-
< #小于 > #大于 " #引号 © #版权号 ® #注册标志
-
- <!DOCTYPE html> #定义这个页面是什么html规则解释(w3c标准模式)
- CSS样式：
- 几种使用css样式的方法：
- 直接在标签后面style #行内式
- 在head中添加style标签写样式 #嵌入式
- 在head中添加style标签中写入@import "css文件名" #有数量显示 导入式
- 在head中添加link标签中写入href="文件名" rel="stylesheet" type="text/css">#后面两个选择是声明导入的是css代码 链接式
- 选择器：
- 基本选择器：
#:ID E:标签选择器，匹配所有使用E标签的元素E{ color:green; } 或：标签,标签 .:class 或：标签.class名 标签或class 标签 控制标签或class所有的后代标签 标签或class>标签 控制标签或class的子标签 *:通用元素选择器，匹配任何元素* { margin:0; padding:0; } - 属性选择器：
属性名='属性值' #在定义css的时候需要[属性名]或者[属性名=属性值] |='boy' #用于这个属性名的值是以boy开头的，其格式必须是'a-b' ^='boy' #用于这个属性名的值是以boy开头的 $='boy' #用于这个属性名的值是以boy结尾的 *='boy' #用于这个属性名的值中包含boy的 p:before #在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red} p:after #在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello"；color:red}
- 伪类选择器：
a:link #没有接触过的链接 a:hover #鼠标放在链接上的状态 a:active #在链接上按下鼠标时的状态 在链接上按下鼠标时的状态 a:visited #访问过的链接 在链接上按下鼠标时的状态 a:focus #在获取焦点的时候！ - 字体：
fonut-size #字体大小 fonut-family #字体 <h1 style="font-style: oblique">老男孩</h1> #斜体
- 背景属性：
background-image:url(图片地址) #设置图片背景 background-repeat: repeat-x; no-repeat; 一行,一张， backgrond-position: right center #图片右侧居中 - 文本属性：
text-align=center #文本居中 line-height=100px #100px的高度输入文字 text-indent=30px #实现文本开头缩进的功能 letter-spacing: 10px; #将文本内容每一个按照10px分割 word-spacing: 20px; #将文本每一个单词按照20px分割 direction: rtl; #把文本方向设置为“从右向左” text-transform: capitalize;lowercase;uppercase; #文本中的每个单词以大写字母开头，定义无大写字母，仅有小写字母，定义仅有大写字母。 - 边框属性：
border:solid 2px rad #边框实线，3像素，红色 dashed #虚线 - 列表属性：
list-style:none #去掉无序列表的点 decimal-leading-zero; #数字 circle; #空心圆 - dispaly属性：
dispaly:inline #将块级标签改成内联标签 dispaly:block #将内联标签改成块级标签 dispaly:none #隐藏 dispaly:inline-block #将块级标签改成内联标签并且可以设定高宽 - 盒子模型常用属性：
padding #控制盒子与内容之间的距离 margin #控制盒子与盒子之间的距离 float:left、right #浮动盒子方向 clear:left、right、botb #清除左浮动、清除右浮动、清除所有浮动 - 标签排版：
position:static、fixed、relative、absolute static（默认排版）、fixed（根据html定位）、absolute(根据relative来进行相对定位)relative（定位） - 其他属性：
visibility:hidden #隐藏并且占高度 visible #显示 dispaly:none #隐藏不占高度 overflow:hidden #将超出块大小大小的内容隐藏 auto #超出后使用滚动条查看内容 opacity:0.6 #透明度为60% !important #后面的样式不可更改这里的样式 z-index #显示权重值
- 基本选择器：
- 几种使用css样式的方法：
