设为首页 收藏本站
查看: 1585|回复: 0

[经验分享] python web 基础开发 day14

[复制链接]

尚未签到

发表于 2017-6-22 08:18:09 | 显示全部楼层 |阅读模式
  内容概要:         
  HTML
  - 标签
  1、分类 块级 行内
  2、符号
  3、p,br,h
  4、input系列
  5、form -action -method -enctype--->上传文件
  6、select, textarea
  7、ur/ol/dl
  8、table
  9、iframe,fieldset
  10、div,span
  CSS            
  存放位置: 单独css文件 (优先级最低)
  html头部   
  标签属性(优先级最高)
  - 效果
  color:red;
  display: none;隐藏
  inline;内联标签
  block;块级标签
  inline-block:具有内联和块级标签的属性
  边距:
  margin 外边距(本身不增加)
  padding 内边距 (本身增加)
  漂浮:
  float:left;
  position:
  relative
  absolute --固定窗口滚动移动
  fixed --固定,窗口
  HTML
  
  HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。
  浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!(例:djangomoan模版引擎)
  
  

Meta(metadata information)
  提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词



Title
  网页头部信息



Link
  css



< link rel="stylesheet" type="text/css" href="css/common.css" >
  icon



< link rel="shortcut icon" href="image/favicon.ico">

  Style


  在页面中写样式

例如:


< style type="text/css" >
.bb{
}
< /style>


Script
  引进文件



< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
  写js代码



< script type="text/javascript" > ... </script >


常用标签
  标签一般分为两种:块级标签 和 行内标签


  • a、span、select 等
  • div、h1、p 等



各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html


p 和 br
  p表示段落,默认段落之间是有间隔的!
  br 是换行

a标签
  < a href="http://www.autohome.com.cn"> </a>
  1、target属性,_black表示在新的页面打开
  2、锚

H 标签

H1

H2

H3

H4

H5

H6



<!DOCTYPE html>
<html lang="en">
<head>
<!--自闭和标签-->
<meta charset="UTF-8">
<meta http-equiv="Refresh" Content="5"/>
<!--2秒后跳转到页面-->
<!--<meta http-equiv="Refresh" Content="2; Url=http://www.autohome.com.cn"/>-->
<!--标签属性 name = 'alex-->
<link rel="shortcut icon" href="image/favicon.ico">
<title name = 'alex'>哈哈</title>
</head>
<body>
<!--内联和块级-->
<div>12</div>
<span>12</span>
<!--符号-->
<a b>
<!--段落和换行-->
<p>asdfuo<br />iuasdkfjlkjasdfkj<br />alskdjfas;dlfj</p>
<p>asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj</p>
<p>asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj</p>
<!--标题-->
<h1>a</h1>
<h2>a</h2>
<h3>a</h3>
<h4>a</h4>
<h5>a</h5>
<h6>a</h6>
<h6>a</h6>
<!--a标签-->
<a href="http://www.baidu.com">跳转1</a>
<a href="http://www.baidu.com" target="_blank">跳转2</a>
<!--<div href="http://www.baidu.com">阿萨德发送到</div>-->
<!--寻找页面中id=i1的标签,将其标签放置在页面顶部-->
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<!--id没有一个标签的id属性值不允许重复;id属性可以不写-->
<div id="i1">第一章内容</div>
<div id="i2">第二章内容</div>
<div id="i3">第三章内容</div>

</body>
</html>




select 标签


上海
北京
广州
   
上海
北京
广州
广州
   
上海
北京
广州
广州
   

石家庄
邯郸


太原
平遥




Checkbox

  


redio

男 女 保密
男 女 保密


password




button




file

  提交文件时: enctype='multipart/form-data' method='POST'



textarea




label

姓名: 婚否:
姓名: 婚否:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--默认get方式提交 和post不同点就是数据格式不一样;enctype使文件上传成功-->
<form action="http://192.168.11.88:8000/index/" method="get" enctype="multipart/form-data">
<div>
<p>用户名:<input type="text" name="user" />
密码:<input type="password" name="pwd" />
</p>
<!--这里男和女的name设置成相同的值选择时就可以是互斥的-->
<p>男<input type="radio" name="gender" value="1" />
女<input type="radio" name="gender" value="2" />
</p>
<p>爱好:
篮球<input name="favor" type="checkbox" value="1" />
</p>
<p>文件:
<input type="file" name="fasongshuju" />
</p>
<hr/>
<p>
<select name="city">
<option value="1">上海</option>
<option value="2">北京</option>
</select>
</p>
<input type="submit" value="提交"/>
</div>
</form>
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="text" />
</form>
<form>
<div>
<p>用户名:<input type="text" /> </p>
<p>密码:<input type="password" /> </p>
<!--<p>邮箱:<input type="email" /> </p>-->
<p>性别(单选框):
<br /> 男<input type="radio" name="ee" />
<br /> 女<input type="radio" name="ee"/>
</p>
<p>爱好(复选框):
<br /> 男1<input type="checkbox" />
<br /> 男2<input type="checkbox" />
<br /> 男3<input type="checkbox" />
<br /> 男4<input type="checkbox" />
<br /> 男5<input type="checkbox" />
</p>
<p>城市:
<select>
<option>上海</option>
<option>北京</option>
<option>广州</option>
</select>
<select multiple size="10">
<option>上海</option>
<option>北京</option>
<option>广州</option>
</select>
<select>
<optgroup label="AAA">
<option>上海</option>
<option>北京</option>
</optgroup>
<optgroup label="BBB">
<option>广州</option>
</optgroup>
</select>
</p>
<p>文件:<input type="file" /></p>
<p>备注 : <textarea></textarea> </p>
<input type="submit" value="submit"/>
<input type="button" value="button"/>
<input type="reset" value="reset"/>
</div>
</form>
</body>
</html>


ul ol dl
  ul


  • ul.li
  • ul.li
  • ul.li
  ol


  • ol.li
  • ol.li
  • ol.li
  dl

河北省邯郸石家庄山西省太原平遥




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>1asdfasdf1</li>
<li>2asdfasdf</li>
<li>2asdfasdf</li>
</ul>
<ol>
<li>1asdfasdf1</li>
<li>2asdfasdf</li>
<li>2asdfasdf</li>
</ol>
<dl>
<dt>DT</dt>
<dd>dd</dd>
<dd>dd</dd>
<dd>dd</dd>
<dt>DT</dt>
<dd>dd</dd>
</dl>
</body>
</html>


table



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--不完整的写法也能实现相同效果-->
<table border="1">
<tr>
<th colspan="2">标题一</th>
<th>标题二</th>
<th>标题三</th>
<!--<th>标题四</th>-->
</tr>
<tr>
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
<td>内容四</td>
</tr>
<tr>
<td rowspan="2">内容一</td>
<td>内容二</td>
<td>内容三</td>
<td>内容四</td>
</tr>
<tr>
<td>内容一</td>
<!--<td>内容二</td>-->
<td>内容三</td>
<td>内容四</td>
</tr>
</table>
<br/>
<!--完整的写法-->
<table border="1">
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
</tbody>
</table>
</body>
</html>






fieldset

登录  用户名:
  密码:




form 表单


  文件:enctype='multipart/form-data' method='POST'
  
         



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>老男孩车之家</h1>
<iframe src="http://www.autohome.com.cn"></iframe>
</body>
</html>

  CSS
  css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。
  存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。
  语法:style = 'key1:value1;key2:value2;'


  • 在标签中使用 style='xx:xxx;'
  • 在页面中嵌入 < style type="text/css"> </style > 块
  • 引入外部css文件
  必要性:美工会对页面的色彩搭配和图片的美化负责,开发人员则必须知道是如何实现的。



标签选择器



div{ }
<div > </div>


class选择器



.bd{ }
<div class='bd'> </div>


id选择器



#idselect{ }
<div id='idselect' > </div>


关联选择器



#idselect p{ }
<div id='idselect' > <p> </p> </div>


组合选择器



input,div,p{ }


属性选择器



input[type='text']{ width:100px; height:200px; }




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--只在c1有效对以下所有内容有效-->
<style>
/*标签选择器*/
div{
background-color: red;
color: white;
}
/*id选择器,id不能重复,不常用*/
#i1{
font-size: 56px;
color: green;
}
/*class选择器,找是c1的标签,可以重复*/
.c1{
background-color: red;
}
/*层级选择器*/
/*.c2 div p a{*/
/*background-color: aqua;*/
/*}*/
/*和上面的结果一样,只是两种方法,优先使用下面这种*/
.c2 div p .c3{
background-color: red;
}
/*组合选择器*/
.c4,.c5,.c6{
background-color: green;
}
</style>
<!--common.css其他文件可以共用的格式-->
<!--<link rel="stylesheet" href="common.css" />-->
</head>
<body>
<div class="c2">
<div></div>
<div>
<p>
<span>oo</span>
<a class="c3">uu</a>
</p>
</div>
</div>
<div class="c4">1</div>
<div class="c5">2</div>
<div class="c6">3</div>
<div></div>
</body>
</html>


background
  颜色写法三种



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: red;
/*rgb颜色 #FF69B4*/
/*background-color: #FF69B4;*/
background-color: rgb(25,180,10);
/*background-color: red;*/
width:500px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div>
<div>sssss</div>
<div>aaaa</div>
</div>
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.img{
background-image: url("ss.png");
height: 80px;
width: 150px;
background-repeat: no-repeat;
}
.img2{
background-image: url("ss.png");
height:18px ;
width: 30px;
background-position: 91px 19px;
}
</style>
</head>
<body>
<div class="img"></div>
<div class="img2"></div>
</body>
</html>

  display



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>asdfasdf</span>
<span>asdsfsdf</span>
</body>
</html>

  margin



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<div></div>
</div>
<div>
<div>
<input />
<input />
<input />
</div>
</div>
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
margin: 0;
list-style-type: none;
}
ul li{
float: left;
padding: 0 8px 0 8px;
color: white;
cursor: pointer;
}
/*当鼠标移动到li标签上时,自动应用以下样式*/
ul li:hover{
background-color: blueviolet;
}
.pg-header{
margin: 0;
height: 44px;
background-color: #2459a2;
line-height: 44px;
}
.w{
width: 980px;
margin: 0;
}
</style>
</head>
<body >
<div class="pg-header"></div>
<div class="w">
<ul>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单一</li>
</ul>
</div>
<div class="pg-body"></div>
<div class="pg-end"></div>
</body>
</html>

  float



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div>f</div>
<div>a</div>
<div>a</div>
<div></div>
</div>
</body>
</html>

  position



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div></div>
<div>返回顶部</div>
<!--<div>返回顶部</div>-->

<!--absolute 是跟relative一起用的它会找relative的区域-->
<div>
<div>
<div>1111</div>
</div>
</div>
</body>
</html>

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-386661-1-1.html 上篇帖子: python学习之路前端-HTML 下篇帖子: HTML入门经典
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表