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秒刷新一次页面

<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="">北京</option>

        <option value="">上海</option>

        <option value="">深圳</option>

        <option selected="selected">武汉</option>

    </select>

#一般会给每个option设置一个value

# option里面selected="selected" 表示默认选中下拉框里的

北京
上海
深圳
武汉

    <select multiple="multiple" size="">

        <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设置一个默认值

主机名：

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': ['', '', '']}>

"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=""> #name="gender"是key，value是值

        <label for="girl">女：</label>

        <input name="gender" type="radio" id="girl" value="">

        <input type="submit" value="提交">

input-checkbox类型：

    <form action="http://127.0.0.1:8000/formapp/index/" >

         <label>

            篮球<input name="favor" type="checkbox" value="">

            足球<input name="favor" type="checkbox" value="">

            羽毛球<input name="favor" type="checkbox" value="">

        </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="" checked="checked">

    <label for="radioA">我同意</label>

    <input id="radioB" type="radio" name="agree" value="">

    <label for="radioB">我不同意</label>

我同意我不同意

Table 表格

tr 代表行 td列（必须包含在tr行里面）

    <table border="">  # 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>

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

fieldset 就是下面这个框框

    <fieldset>

        <legend>内容</legend>  #框框上的字

        <div>段落1：</div>

        <div>段落2：</div>

    </fieldset>

内容

段落1：

段落2：