python-html基础操作
介绍:
HTML 是网页内容的载体。包括文字,图片,信息等用户浏览的信息
CSS 样式是改变内容外观表现。像字体,颜色,背景,边框等
JavaScript 是实现网页上的特效效果。如鼠标滑过背景颜色改变,鼠标滑过有弹出信息等
html的基本格式:
<!DOCTYPE html> <html> <head></head> <body></body> </html>
注释:<!--注释的内容 -->
head
- meta 是自闭合的
- 指定文件编码
<meta charset='UTF=8'> 等同于 <meta http-equiv="content-type" content="text/html;charset=utf-8">
- 指定文件编码
-
- 刷新和跳转
<meta http-equiv="Refresh" content="1"> # 1秒刷新一次页面 <meta http-equiv="Refresh" content="5;url=http://www.baidu.com"> #5秒钟之后跳转到www.baidu.com
- 刷新和跳转
-
- 关键字和描述
<meta name="keywords" content="python,django,linux"> <meta name="description" content="django是基于python开发的一款web框架">
- 关键字和描述
-
- ie搜索引擎
- title 网页头部信息
<title>第一个网页</title>
- link
- icon
<link rel="icon" sizes="192x192" href="https://docs.djangoproject.com/s/img/icon-touch.e4872c4da341.png">
- stylesheet
<link rel="stylesheet" href="newcss.css"> #导入css文件 #newcss.css .abc{ color:red; font-size: 20px; } #后面可以在body里面引用该css文件里面的样式: <div class="abc" >lalalalal</div>
- icon
- style 在head里定义全局的css样式
<style> .css1{ color: greenyellow; font-size: 25px; } </style> #可以在body里面使用它 <body> <div class="css1">test</div>
body
符号: 可参考 http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
常用符号: > (>)
< (< )
& (&)
空格 ( )
标签分为:块级标签,行内标签
举个栗子:
<body> <div style="background-color: wheat">Hello div</div> #div是块级标签,独占一行 <span style="background-color: wheat">Hello span</span> #span标签是行内标签,非独占一行 #为了效果明显这里加上一个背景色 </body>
Hello span
可以通过chrome浏览器Fn+F12 ,用剪头指向内容判断是块级标签还是行内标签。
( 这里get了一个小技能,ctrl+shift+p 然后输入capture full size screenshoot可以截图整个页面的内容Hhhhh...)
块级标签 默认独占一行
常用块级标签:dhp
行内标签(行级标签) 默认不会独占一行
常用行内标签:span,img,a,lable,input,form
- span 默认没有样式的一块。行内标签。
- a 标签
- 超链接
<a href="home.html">home page</a> #点击homepage 跳转到home.html <a href="https://docs.djangoproject.com">Django官网</a> #点击Django官网,跳转到这个网址 <br> <a href="http://www.baidu.com" target="_blank">百度</a> #点击百度,在新的标签页打开这个网址
-
- 锚
<a href="#m1">第一章</a> <br> <a href="#m2">第二章</a> #点击第二章这个超链接就会跳到文章下文的第二章内容 <br> <br> <div id="m1" style="height: 2000px;background-color: beige">第一章内容</div> <div id="m2" style="height: 2000px;background-color: pink">第二章内容</div>
在html里面,每一个标签都能设置id,且id不可跟其他id重复,id唯一
- 锚
- img标签
<img title="love django" src="1.png"> # src 导入图片; title 将鼠标放到图片上会显示这个字
# src和title是img标签特有的属性
- select 标签
<select> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> <option selected="selected">武汉</option> </select> #一般会给每个option设置一个value # option里面selected="selected" 表示默认选中下拉框里的
<select multiple="multiple" size="5"> <option>北京</option> <option>上海</option> <option>深圳</option> <option selected="selected">武汉</option> </select> # size属性 下拉框里显示几个 # multiple属性 一次可以选中多个
<select> <optgroup label="广东省"> <option>深圳</option> <option>广州</option> </optgroup> <optgroup label="湖北省"> <option>武汉</option> <option>黄石</option> </optgroup> </select> # optgroup不可选,将下面的option分组,再选择option
常用标签:
- textarea 文本框 如果要将数据提交到form需要加name
<textarea>默认内容哈哈哈</textarea>
- input标签
- text 文本框
<div>主机名:<input type="text" value="默认值哈哈"></div> #value设置一个默认值
主机名:
- text 文本框
-
- radio 单选框
<div>男:<input name="gender" type="radio"></div> <div>女:<input name="gender" type="radio"></div> #radio类型的,name相同的时候才会互斥,二选一
#checked 默认选中一个男:女: - checkbox 复选框
<div>湖北<input type="checkbox" checked="checked"></div> <div>广东<input type="checkbox"></div> <div>上海<input type="checkbox"></div> #checked="checked"默认选中
湖北广东上海 - file 上传文件 (如果需要提交到后台,需要特殊的设置)
如果想要提交文件到后台,需要在其所在的form标签添加 <form action="" enctype="multipart/form-data" method="post">
<input type="file" name="user"> </form> - password 密码框
密码:
-
submit 提交数据到后台
- radio 单选框
Form表单 提交数据
提交到form表单里的 可以是selected,input,textarea标签里的数据
action参数:规定当提交表单时向何处发送表单数据。
select:
<form action="http://127.0.0.1:8000/formapp/index/"> <select name="city"> #这里的name相当于字典的key <option value="111">深圳</option> #value是给key取名 <option value="222">广州</option> <option value="333">惠州</option> </select> <input type="submit" value="提交"> </form> django,views.py配置: def index(request): print("POST:",request.POST) print("GET:",request.GET) return HttpResponse('ok') #点击提交按钮之后,查看: POST: <QueryDict: {}> GET: <QueryDict: {'city': ['111', '222', '333']}> "GET /formapp/index/?city=111&city=222&city=333 HTTP/1.1" 200 2
如果没有设置value值:
"GET /formapp/index/?city=%E6%B7%B1%E5%9C%B3&city=%E5%B9%BF%E5%B7%9E&city=%E6%83%A0%E5%B7%9E HTTP/1.1" 20
0 2
input-text类型:
<form action="http://www.baidu.com"> #action指定提交的位置,把数据提交到百度 <div>主机名:<input name="host" type="text" value="127.0.0.1"></div> #value设置一个默认值 <div>端口:<input name="port" type="text"></div> #必须指定name,提交数据到后台,是以字典的形式,name就是key <div>密码:<input name="password" type="password"></div> <input type="submit" value="提交"> #提交按钮 </form>
input-radio类型:
<h1>性别</h1> <label for="boy">男:</label>#lable标签 <input name="gender" type="radio" id="boy" value="0"> #name="gender"是key,value是值 <label for="girl">女:</label> <input name="gender" type="radio" id="girl" value="1"> <input type="submit" value="提交">
input-checkbox类型:
<form action="http://127.0.0.1:8000/formapp/index/" > <label> 篮球<input name="favor" type="checkbox" value="1"> 足球<input name="favor" type="checkbox" value="2"> 羽毛球<input name="favor" type="checkbox" value="3"> </label> <input type="submit" value="提交"> </form>
input-file类型: (需要加上 enctype="multipart/form-data" method="post")
<form action="http://127.0.0.1:8000/formapp/index/" enctype="multipart/form-data" method="post"> <input type="file" name="upload_file"> <input type="submit" value="提交"> </form> 测试django,views.py def index(request): print("FILE:",request.FILES) print("POST:",request.POST) print("GET:",request.GET) 结果: FILE: <MultiValueDict: {'upload_file': [<InMemoryUploadedFile: test.txt (application/octet-stream)>]}> POST: <QueryDict: {}> GET: <QueryDict: {}> [03/Jan/2019 15:58:09] "POST /formapp/index/ HTTP/1.1" 200 2
lable标签 点击关键字,会自动选中对应的框
<label> 姓名:<input type="text"> </label> <label for="hunfou">婚否:</label> #for参数的值等于id的值 <input id="hunfou" type="checkbox">
例二:
<input id="radioA" type="radio" name="agree" value="1" checked="checked"> <label for="radioA">我同意</label> <input id="radioB" type="radio" name="agree" value="0"> <label for="radioB">我不同意</label>
Table 表格
tr 代表行 td列(必须包含在tr行里面)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<table border="2"> # border加边框的 <thead> #表头 <tr> #行 <th>姓名</th> #头部里的列,th <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> #表内容 <tr> <td>张一</td> <td>28</td> <td>男</td> </tr> <tr> <td>张二</td> <td>20</td> <td>女</td> </tr> </tbody> </table>
姓名 | 年龄 | 性别 |
---|---|---|
张一 | 28 | 男 |
张二 | 20 | 女 |
ul ol dl li 列表相关
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<ul> <li>111</li> #li列表 <li>222</li> </ul> <ol> <li>abc</li> <li>def</li> </ol> <dl> <dt>dt标题一</dt> <dd>内容一</dd> <dd>内容二</dd> <dt>dt标题二</dt> <dd>dd内容一</dd> <dd>内容二</dd> </dl>
- 111
- 222
- abc
- def
- dt标题一
- 内容一
- 内容二
- dt标题二
- dd内容一
- 内容二
fieldset 就是下面这个框框
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<fieldset> <legend>内容</legend> #框框上的字 <div>段落1:</div> <div>段落2:</div> </fieldset>