设为首页 收藏本站

运维网

 找回密码
 立即注册
查看: 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入门经典
回复

使用道具 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

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

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

扫描微信二维码查看详情

客服 E-mail:iyunvcom@gmail.com

本站由青云提供云计算服务

运维网--中国最专业的运维工程师交流社区

豫ICP备20007574号-1 Copyright © 2012-2025

关于我们

发展历程

联系我们

关注我们

广告服务

广告案例

隐私条款

免责声明

用户登录

用户注册

版主守则

申请版主

手机版

金币获取

帮助中心

每日签到

Good Good

Study

Day Day

UP


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


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


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


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



合作伙伴: 青云cloud

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