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>

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 div

Hello span

可以通过chrome浏览器Fn+F12 ，用剪头指向内容判断是块级标签还是行内标签。

（这里get了一个小技能，ctrl+shift+p 然后输入capture full size screenshoot可以截图整个页面的内容Hhhhh...）

块级标签 默认独占一行

常用块级标签：dhp

div 默认没有样式的一行。块级标签。如果想加样式需要结合css
h1-h6 等同于字体格式标题
p 段落，上下有行距
br 换行，自闭合
hr 加一条分割线

行内标签（行级标签） 默认不会独占一行

常用行内标签：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>   #点击百度，在新的标签页打开这个网址

Django官网

百度

锚

    <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" 表示默认选中下拉框里的

View Code

    <select multiple="multiple" size="5">
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
        <option selected="selected">武汉</option>
    </select>

# size属性 下拉框里显示几个
# multiple属性  一次可以选中多个

View Code

    <select>
        <optgroup label="广东省">
            <option>深圳</option>
            <option>广州</option>
        </optgroup>
        <optgroup label="湖北省">
            <option>武汉</option>
            <option>黄石</option>
        </optgroup>
    </select>
# optgroup不可选，将下面的option分组，再选择option

View Code

常用标签：

textarea 文本框 如果要将数据提交到form需要加name
```
    <textarea>默认内容哈哈哈</textarea>
```
默认内容哈哈哈

input标签

text 文本框　　

    <div>主机名：<input type="text" value="默认值哈哈"></div>  #value设置一个默认值

主机名：

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 提交数据到后台

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行里面）

    <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>

table表

姓名	年龄	性别
张一	28	男
张二	20	女

ul ol dl li 列表相关

    <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>

View Code

dt标题一: 内容一; 内容二
dt标题二: dd内容一; 内容二

fieldset 就是下面这个框框

    <fieldset>   
        <legend>内容</legend>  #框框上的字
        <div>段落1：</div>
        <div>段落2：</div>
    </fieldset>

View Code

内容

段落1：

段落2：

posted @ 2019-01-02 17:10 卡布爱学习阅读(19731) 评论(0) 编辑收藏举报

卡布爱学习

python-html基础操作

head

body

公告