HTML篇(表单、input标签、选择标签等)、CSS篇(CSS语法、如何引入CSS、CSS选择器)第45天2018.12.08

顺晟科技

2022-09-13 13:58:31

上节复习

web开发

客户端　　服务端

浏览器　　自己写的小demo

HTML标签

1. 单标签和双标签

2. 内联标签和块儿级标签(是否独占一行)

　　内联:　　 span　　 img　　 a　　 b 　　i

　　块儿级:　　div 　　h1~h6　　 p　　 hr 　　ul li ol

　　嵌套的规则:

　　　　1. 内联的不能套块儿级

　　　　2. p不能套块儿级标签

3. 展示用的和交互用的

4. table标签

5. 列表

　　1. ul

　　2. ol

　　3. dl

6. 特殊符号

　　2. ©

　　3. ®

　　4. <

　　5. >

HTML(body内常用标签)

form表单

表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

表单属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>form表单示例</title>
</head>
<body>
<!--注册示例-->     # action为form表单提交给的路径  # 提交时提交为字典格式name为键，type(控制输入类型)为值
<form action="http://127.0.0.1:8000/upload/" method="post" enctype="multipart/form-data" autocomplete="off" novalidate>
     # method 请求 (HTTP协议)get---->展示信息的内容(默认get)  post---->信息交互(传文件)
     # enctype form表单数据的格式(默认application/x-www-form-urlencoded) 传文件要改成(multipart/form-data)
     # autocomplete 自动补全        novalidate 不做校验(邮箱例子)
        
    <p>用户名:
        <input name="name" type="text"  value="小强">  # value默认值为""，是一个值
        <input name="name" type="text"  placeholder="小强" disabled>  # disabled不可用
    </p>                                # placeholder默认放一个东西，不是值
    <p>
        <label for="i1">用户名:</label>  # 规范(加不加无区别)
        <input id="i1" name="name" type="text"  value="小强">
        <input name="name" type="text"  placeholder="小强" disabled>
    </p>
    <p>密码:
        <input name="password" type="password">    # password(类)会使输入信息变成●
    </p>

    <p>邮箱:
        <input type="email" name="email">          # email为邮箱
    </p>

    <p>
        <input type="hidden" value="hidden">       # 隐藏按钮与数据库主键id配合使用
    </p>

    <p>性别:
        <input name="gender" type="radio" value="1"> 男          # name类似于键值对的键   # value为值
        <input name="gender" type="radio" value="0"> 女          # radio为单选勾选框(圆形)  
        <input checked name="gender" type="radio" value="2"> 保密  # 一组内name值相同
    </p>       # checked默认选中

    <p>性别2:
        <label for="r1">男</label>
        <input id="r1" name="gender" type="radio" value="1">

        <label>男
            <input name="gender" type="radio" value="1">
        </label>

        <label for="r2"> 女</label>
        <input id="r2" name="gender" type="radio" value="0">

        <label for="r3">保密</label>
        <input id="r3" checked name="gender" type="radio" value="2">
    </p>

    <p>爱好:
    <input checked name="hobby" type="checkbox" value="basketball">篮球   # checkbox(正方形)勾选
    <input name="hobby" type="checkbox" value="football">足球
    <input checked name="hobby" type="checkbox" value="doublecolorball">双色球
    </p>

    <p>生日:<input name="birthday" type="date"></p>   # date年月日 datetime年月日时分秒

    <select name="from1" id="s1">      # 下拉菜单
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>   # selected默认选中
        <option value="sc">四川</option>
    </select>


    <select name="from1" id="s11" multiple>    # multiple下拉菜单多选(按ctrl)
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sc">四川</option>
    </select>

    <select name="from1" id="s11" multiple>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sc">四川</option>
    </select>


    <select name="from2" id="s2">         # 下拉菜单(一共在一个菜单内)
        <optgroup label="北京">           # 下拉菜单分组子菜单
            <option value="cp">昌平</option>
            <option value="cy">朝阳</option>
            <option value="hd">海淀</option>
            <option value="ft">丰台</option>
        </optgroup>
        <optgroup label="上海">
            <option value="pdxq">浦东新区</option>
            <option value="mhq">闵行区</option>
            <option value="hpq">黄浦区</option>
        </optgroup>
        <optgroup label="四川">
            <option value="pzh">攀枝花</option>
            <option value="zg">自贡</option>
            <option value="my">绵阳</option>
        </optgroup>
    </select>

    <p><textarea name="info" id="t1" cols="30" rows="10">
          # 个人简介，一个大文本
    </textarea></p>
    
    <p>头像:
        <input name="lp" type="file">    # 上传图片
    </p>
    <p><input type="submit" value="提交s9"></p>    # submit为提交按钮，value为显示按钮上的内容

    <p><input type="button" value="button"></p>    # 普通按钮

    <p><input type="reset" value="reset"></p>      # 重置按钮 清空内容

</form>
</body>
</html>

from django.conf.urls import url
from django.shortcuts import HttpResponse


def upload(request):
    print("request.GET:", request.GET)
    print("request.POST:", request.POST)

    if request.FILES:
        filename = request.FILES["file"].name
        with open(filename, \'wb\') as f:
            for chunk in request.FILES[\'file\'].chunks():
                f.write(chunk)
            return HttpResponse(\'上传成功\')
    return HttpResponse("收到了！")

urlpatterns = [
    url(r\'^upload/\', upload),
]

Django接收上传文件代码

Django上传接收文件代码

1. form表单相关内容 form 与 from

前后端有数据交互的时候用form表单

form表单提交数据的几个注意事项:

　　1.所有获取用户输入的标签都必须放在form表单里面

　　2. action控制着往哪儿提交

　　3. input\select\textarea 都需要有name属性

　　4. 提交按钮 <input type="submit">

input标签

<input> 元素会根据不同的 type 属性，变化为多种形态。

属性说明:

name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用

select标签

属性说明：

multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

label标签

定义：<label> 标签为 input 元素定义标注（标记）。
说明：

label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>

textarea标签(多行文本)

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

属性说明：

name：名称
rows：行数
cols：列数
disabled：禁用

小总结

　　input系列:

　　　　text 　　　　　　　　文本

　　　　　　value 　　设置默认值

　　　　　　placeholder 　　设置占位内容

　　　　password 　　　　密码

　　　　radio 　　　　　　　单选框

　　　　checkbox　　　　　多选框

　　　　date 　　　　　　日期年月日

　　　　datetime 　　　　　时间年月日时分秒

　　　　file 　　　　　　文件

　　　　button 　　　　　　普通按钮,多用JS给它绑定事件

　　　　reset　　　　　　重置按钮

　　　　submit 　　　　　　提交按钮

　　　　textarea 　　　　　大段文本(文本区域)

　　　　select 　　　　　　下拉菜单

　　　　option　　　　　　具体的下拉选项

　　　　optgroup　　　　分组的下拉框

　　　　　　-label="上海"

CSS篇

CSS介绍

CSS---->HTML骨架

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

1. 重复的样式

2. 文档内容和样式的解耦

CSS基本语法

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

CSS注释 /*注释内容*/---->单行注释多行注释直接用换行即可

CSS引入方式

行内样式

直接写在标签里面 style="样式1;样式2;"

<p style="color: red">Hello world.</p>

内部样式

在head中通过style标签定义　

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

外部样式(一般常用)

把样式单独写在css文件中,然后在html文件中通过link标签导入

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS选择器　　

基本选择器

元素选择器(标签名)

p {color: "red";}

ID选择器(#id名)

#i1 {
  background-color: red;
}

类选择器(.类名)　　

.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}

注意：

样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。

通用选择器(*)

* {
  color: white;
}

组合选择器　

后代选择器

/*li内部的a标签设置字体颜色*/
li a {
  color: green;
}

儿子选择器　

/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

毗邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
  margin: 5px;
}

弟弟选择器

/*i1后面所有的兄弟p标签*/
#i1~p {
  border: 2px solid royalblue;
}

属性选择器　　

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
  color: green;
}

不怎么常用的属性选择器

不怎么常用的属性选择器

分组和嵌套

分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

div, p {
  color: red;
}

上面的代码为div标签和p标签统一设置字体为红色。

通常，我们会分两行来写，更清晰:(注意少逗号问题)

div,
p {
  color: red;
}

嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p {
  color: red;
}

选择器的优先级　　

样式文件优先级

1. 内联样式(直接在标签里面写style) 优先级最高

2. 选择器都一样的情况下,谁靠近标签谁就生效

3. 选择器不同时计算权重来判断

上一篇：表单表单和半铸钢ˌ钢性铸铁(铸造半钢下一篇：CSS设计模式——分权模式

网站建设

Css