Python之前端web:
HTML
CSS
一. 什么是HTML：
html为超文本语言，使用标签来描述网页。
html标签格式：
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
html标签所描述的网页：
也叫html文档，即浏览器读取html文档，并以网页的形式呈现出来，通过标签解析也没内容。
例如：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Web</title> 6 <style type="text/css" > 7 .bb{ 8 background-color: red; 9 } 10 </style> 11 <link rel="stylesheet" type="text/css" href="mystyle.css" /> 12 <base href="http://www.fuckyou.com/images/" /> 13 </head> 14 <body> 15 Python之Web前端html 16 </body> 17 </html>
标签描述:
<head>定义关于文档的信息。
<title>定义文档标题。
<base>定义页面上所有链接的默认地址或默认目标。
<link>定义文档与外部资源之间的关系。
<meta>定义关于 HTML 文档的元数据。
<style>定义文档的样式信息。
常用html元素：
html标题：
通过<h1>-<h6>等标签定义。
1 <h1>a</h1> 2 <h2>b</h2> 3 <h3>c</h3>
html段落：
通过 <p></p> 标签进行定义的。
<!--<!–<p>段落和换行</p>–><br />-->
<p>随便的什么那日哦那个<br />电风扇广泛大使馆岁的法国</p>
<p>的是根深蒂固的是法国豆腐干大师傅个</p>
html链接：
通过 <a> 标签进行定义的。
1 <!--<a href=""：链接--> 2 <a href="http://www.baidu.com">百度</a> 3 <!--寻找页面中id=i1的标签，将其标签防止在页面顶部--> 4 <a href="#i1">第一章</a> 5 <a href="#i2">第二章</a> 6 <!--id没有一个标签的id属性值不允许重复；id属性可以不写--> 7 <div id="i1" style="height: 800px">第一章内容</div> 8 <div id="i2" style="height: 800px">第二章内容</div>
html图像：
通过 <img> 标签进行定义的。
1 #加入图片，class为引用CSS属性 2 <img class="img" src="logo.png">
html块级：
通过<div> 标签进行定义，占用的是一整行。
html内联：
通过<span> 标签进行定义，占用的是它所使用的实际块大小
1 <!--内联和块及--> 2 <div style="background-color: red;">123</div> 3 <span style="background-color: green;">123</span>
input标签：
input：text&password
用来做用户名，密码的输入框
1 <!--text：标准的文本输入框，password:密码输入框，内容是加密用*号表示--> 2 用户：<input type="text" name="user"/> 3 密码：<input type="password" name="pwd"/>
input:radio
标签用来实现单选框：
1 <br> 男：<input type="radio"> 2 <br> 女：<input type="radio"> 3 <!--对于input标签来说只要，radio的name值相同，那么他们就会互斥，只能选择一个--> 4 5 <br>男：<input type="radio" name="gender"/> 6 <br>女：<input type="radio" name="gender"/>
input:checkbox标签-复选框
1 <!--这里加一个标识checked="checked，为默认选择"-->value不同，name相同。
2 <p>爱好： 3 篮球<input name="favor" type="checkbox" value="1" /> 4 足球<input name="favor" type="checkbox" value="2" /> 5 乒乓球<input name="favor" type="checkbox"value="3"> 6 </p>
input:button & submit &reset
提交按钮和备注
1 <p> 2 <input type="submit" value="提交"> #提交当前form表单 3 <input type="button" value="提交字段空"> #无效果，空字段 4 <input type="reset" value="重置"> #重置当前form表单 5 </p> 6 <p> 7 备注：<textarea name="extra"></textarea>x 8 </p>
file标签
用来提交文件时使用
1 <!--点击选择文件可以上传文件--> 2 <input type="file" />
slect标签：
下拉选择框
1 <p> 2 <select name="city"> 3 <option value="1">上海</option> 4 <option value="2">北京</option> 5 <option value="3">广州</option> 6 </select> 7 </p>
设置默认值（默认值）：
属性添加checkted="checkted"，selected="selected"
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <!--#输入框默认显示内容123--> 9 输入：<input value="123"/> 10 备注：<textarea>123</textarea> 11 <!--下拉菜单默认显示地址名，默认为上海，指定北京为默认则用selected属性--> 12 <select> 13 <option>上海</option> 14 <option selected="selected">北京</option> 15 <option>广州</option> 16 <option>山西</option> 17 <option>深圳</option> 18 </select> 19 <!--单选框默认选择--> 20 男： <input type="radio" name="g1"> 21 女: <input type="radio" name="g1" checked="checked"> 22 <!--多选框默认选择--> 23 <input type="checkbox" name="c1" checked="checked"> 24 <input type="checkbox" name="c1"> 25 <input type="checkbox" name="c1" checked="checked"> 26 </body> 27 </html>
不点击下拉可自定义默认显示几项内容
1 <p> 2 <select name="city" size="3"> 3 <option value="1">上海</option> 4 <option value="2">北京</option> 5 <option value="3">广州</option> 6 <option value="3">山西</option> 7 <option value="3">天津</option> 8 <option value="3">深圳</option> 9 <option value="3">海南</option> 10 </select> 11 </p>
select标签,按上“shift”键可以多选-
1 <select multiple="multiple" size="4"> 2 <!--按上“shift”键可以多选--> 3 <option value="1">上海</option> 4 <option value="2">北京</option> 5 <option value="3">广州</option> 6 <option value="3">山西</option> 7 <option value="3">天津</option> 8 <option value="3">深圳</option> 9 <option value="3">海南</option> 10 </select>
select标签，分组形式
1 <!--分组 label 选项不能选择，只起到显示分组效果--> 2 <select> 3 <optgroup label="北京"> 4 <option>朝阳区</option> 5 <option>海淀区</option> 6 <option>昌平区</option> 7 </optgroup> 8 <optgroup label="山西省"> 9 <option>朔州市</option> 10 <option>太原市</option> 11 <option>大同市</option> 12 </optgroup> 13 </select> 14
form表单
包含了所有的标签
1 <form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data"> 2 3 <select> 4 <optgroup label="北京"> 5 <option>朝阳区</option> 6 <option>海淀区</option> 7 <option>昌平区</option> 8 </optgroup> 9 <optgroup label="山西省"> 10 <option>朔州市</option> 11 <option>太原市</option> 12 <option>大同市</option> 13 </optgroup> 14 </select> 15 <!--点击选择文件可以上传文件--> 16 <input type="file" /> 17 18 <p> 19 <input type="submit" value="提交"> 20 <input type="button" value="提交字段空"> 21 <input type="reset" value="重置"> 22 </p> 23 <p> 24 备注：<textarea name="extra"></textarea> 25 </p> 26 <!--text：标准的文本输入框，password:密码输入框，内容是加密用*号表示--> 27 用户：<input type="text" name="user"/> 28 密码：<input type="password" name="pwd"/> 29 男<input type="radio" name="gender" value="1" /> 30 女<input type="radio" name="gender" value="0" /> 31 第一中情况不互斥 32 33 <br> 男：<input type="radio"> 34 <br> 女：<input type="radio"> 35 <!--对于input标签来说只要，radio的name值相同，那么他们就会互斥，只能选择一个--> 36 37 <br>男：<input type="radio" name="gender"/> 38 <br>女：<input type="radio" name="gender"/> 39 <!--这里加一个标识checked="checked，为默认选择"--> 40 <p>爱好： 41 篮球<input name="favor" type="checkbox" value="1" /> 42 足球<input name="favor" type="checkbox" value="2" /> 43 乒乓球<input name="favor" type="checkbox"value="3"> 44 </p> 45 46 <p> 47 <select name="city" size="3"> 48 <option value="1">上海</option> 49 <option value="2">北京</option> 50 <option value="3">广州</option> 51 <option value="3">山西</option> 52 <option value="3">天津</option> 53 <option value="3">深圳</option> 54 <option value="3">海南</option> 55 </select> 56 </p> 57 size:设置默认几项 58 <select multiple="multiple" size="4"> 59 <!--按上“shift”键可以多选--> 60 <option value="1">上海</option> 61 <option value="2">北京</option> 62 <option value="3">广州</option> 63 <option value="3">山西</option> 64 <option value="3">天津</option> 65 <option value="3">深圳</option> 66 <option value="3">海南</option> 67 </select> 68 69 </form>
fieldset标签
1 <fieldset> 2 <legend>协议</legend> 3 请仔细阅读协议内容： 4 </fieldset>
列表ul/ol/dl
1 <ul> 2 <li>line1</li> 3 <li>line2</li> 4 <li>line3</li> 5 </ul> 6 <ol> 7 <li>line1</li> 8 <li>line2</li> 9 <li>line3</li> 10 </ol>
表格的定义：
1 <table border="1"> 2 <tr> 3 <th>标题一</th> 4 <th>标题二</th> 5 <th>标题三</th> 6 </tr> 7 <tr> 8 <td>内容一</td> 9 <td>内容二</td> 10 <td>内容三</td> 11 </tr> 12 <tr> 13 <td>内容一</td> 14 <td>内容二</td> 15 <td>内容三</td> 16 </tr> 17 <tr> 18 <td>内容一</td> 19 <td>内容二</td> 20 <td>内容三</td> 21 </tr> 22 <tr> 23 <td>内容一</td> 24 <td>内容二</td> 25 <td>内容三</td> 26 </tr> 27 </table>
表格合并：
1 <table border="1"> 2 <tr> 3 <th colspan="2">标题一</th> 4 <th>标题二</th> 5 <!--<th>标题三</th>--> 6 </tr> 7 <tr> 8 <td>内容一</td> 9 <td>内容二</td> 10 <td>内容三</td> 11 </tr> 12 <tr> 13 <td rowspan="2">内容一</td> 14 <td>内容二</td> 15 <td>内容三</td> 16 </tr> 17 <tr> 18 <td>内容一</td> 19 <td>内容二</td> 20 <!--<td>内容三</td>--> 21 </tr> 22 <tr> 23 <td>内容一</td> 24 <td>内容二</td> 25 <td>内容三</td> 26 </tr> 27 </table>
CSS
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
语法：style = 'key1:value1;key2:value2;'
- 在标签中使用 style='xx:xxx;'
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件
注： 提高优先级使用： style里标签添加：！important
例如：color:red !important
必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。
标签选择器
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']{ 100px; height:200px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link href="css/glyphicons.css" rel="stylesheet" /> <style> *{ margin: 0; padding: 0; } .pg-header{ background-color: whitesmoke; } .w{ width: 90%; height: 25px; line-height: 25px; margin: 0 auto; } ul{ margin: 0; list-style: none; } ul li{ float: left; font: 15px/150% Arial,Verdana,"5b8b4f53"; padding: 0 8px 0 8px; color: Black; cursor: pointer; } .f1{ float: left; } .f2{ float: right; } ul li:hover{ background: whitesmoke; color: red; } <body> <div class="pg-header"> <div class="w" > <ul class="f1"> <li >*收藏本站</li> </ul> <ul class="f2" > <li>登陆</li> <li>注册</li> <li>我的订单</li> <li>我的收藏</li> <li>VIP会员俱乐部</li> <li>客户服务</li> <li>关注</li> <li>手机版</li> </ul> </div> </div> </body> </html>
border: 边框
1 <body> 2 <!--第一种：设置一个线粗2像素、实线、红色、框高20像素（不写框高线就重叠了）、框里面的内容为hello--> 3 <div style="border: 2px solid red;height: 20px">hello</div> 4 5 <!--第二种：设置线粗2像素、点形式的线、黑色、框高20像素，框里面的内容为hello2--> 6 <br /><div style="border: 2px dotted black;height: 20px">hello2</div> 7 8 <!--第三种：设置线粗2像素、虚线、蓝色、框高20像素，框里面的内容为hello3--> 9 <br/><div style="border: 2px dashed blue;height: 20px">hello3</div> 10 </body>
边框可以自定义上下左右：
border-left :左
border-right：右
border-top ： 上
border-buttion： 下
margin：外边距
1 <h2>margin</h2> 2 <div style="border: 1px solid red;height: 70px"> 3 <div style="background-color: green;height: 50px;margin-top: 20px"> 4 </div> 5 </div>
Margin延伸（单独设置四边间距属性单词）
margin-left 对象左边外延边距
margin-right 对象右边外延边距
margin-top 对象上边外延边距
margin-bottom 对象下边外延边距
padding:内边距