初始CSS

一、form表单补充

form表单关键性的属性补充

    form表单

    关键性的属性

        action

            控制的是数据的提交路径

            1、不写 默认是朝着当前页面所在的地址提交

            2、全路径

            3、后缀（/index/）

        method

            控制的是提交方式

            form表单默认是get请求 method='get'

            你也可以指定成post请求 method='post'

        enctype

            控制的是数据提交的编码格式

            默认情况下form表单是不能够直接发送文件的

            如果你要发送文件 必须将该参数由默认的urlencoded改为formdata

        注意事项：

            1、获取用户输入的标签 都是用value属性来存放用户的输入

                获取用户输入的标签都应该有name属性 就类似于字典的key

                value属性就类似于字典中的value

            2、如何给input设置默认

                可以直接给input标签加value属性

            3、input框如何设置提示信息

                username:<input type='text' value='jason' placeholder='用户名'>

二、验证form提交数据

结合Flask演示验证

    后端框架

        Django

        Flask

        Tornado

    Flask框架

        pip install Flask

        get请求能够携带参数 但是参数的携带方式是直接跟在url后面的

            url?xxx=ooo&yyy=bbb&lll=ccc

            特点：

                1、数据全是明文

                2、数据大小有限 大概可能在4kb左右

                3、get请求不应该携带隐私信息

初始后端框架

from flask import Flask, request

app = Flask(__name__)

@app.route('/index', methods=['GET', 'POST'])

def func():

    print(request.form)  # 获取普通数据

    print(request.files)

    file_obj = request.files.get('myfile')

    file_obj.save('xxx.png')

    return "OK"

app.run()

form表单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="http://127.0.0.1:5000/index" method="post" enctype="multipart/form-data">

    <p>用户名:<input type="text" placeholder="用户名" name="username"></p>

    <p>密码:<input type="password" name="password"></p>

    <p>日期:

        <input type="date" name="birth">

    </p>

    <p>性别:

        男:<input type="radio" name="gender" value="male">

        女:<input type="radio" name="gender" value="female">

    </p>

    <p>爱好:

        篮球:<input type="checkbox" name="hobby"  value="basketball">

        足球:<input type="checkbox" name="hobby"  value="football">

        双色球:<input type="checkbox" name="hobby"  value="doublecolorball">

    </p>

    <p>省份:

        <select name="province" id="">

            <option value="bj">北京</option>

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

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

        </select>

    </p>

    <p>女友:

        <select name="girlfriend" id="" multiple>  # multiple可以多选

            <option value="c">苍老师</option>

            <option value="s">三上悠亚老师</option>

            <option value="m">吉泽明步老师</option>

            <option value="xz">小泽老师</option>

            <option value="xhjy">新恒结衣老师</option>

        </select>

    </p>

    <p>个人简介:

        <textarea name="information" id="" cols="30" rows="10"></textarea>

    </p>

    <p>个人简历:

        <input type="file" name="myfile">

    </p>

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

</form>

</body>

</html>

三、CSS

理论知识

    什么是css?

        css其实就是层叠样式表 说白了其实就是用来调节标签的样式

    css的注释

        单行注释：/*注释*/

        多行注释：/*

                    注释1

                    注释2

                    注释...

                */

        注释的使用：

            css应该是一个独立的文件

            比如：

                /*这是小米首页的css样式文件*/

                /*页面通用样式*/

                /*顶部导航条样式*/

                /*侧边菜单栏样式*/

    css的语法结构

        选择器 {属性名：属性值; 属性名1：属性值1; 属性名2： 属性值2;}

css的三种引入方式

    css的三种引入方式

        1、外部css文件（最正规的书写方式）

        2、head内style标签内部直接书写css代码（为了演示方便可以使用这种）

        3、标签内部通过style属性直接书写对应的样式（不推荐）

mycss.css

mycss.css文件

/*这是一个非常牛逼的页面的css样式文件*/

/*公共样式*/

p {  /*p是选择器*/

    color: greenyellow;  /*这里面是属性名:属性值*/

}

HTML演示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--第一种引入在head里引入-->

<!--    <link rel="stylesheet" href="mycss.css">-->

<!--第二种引入方式-->

<!--    <style>-->

<!--        p {-->

<!--            color: red;-->

<!--        }-->

<!--    </style>-->

</head>

<body>

<!--第三种引入-->

<p style="color: blue">上海这个地方就像是希腊神话里的魔女岛 好好的人来了 也会变成畜生</p>

</body>

</html>

四、如何学习css？

方法

    1、如何查找标签？

        基本选择器

        组合选择器

        属性选择器

            所有的标签都可以有默认的属性比如：

                id

                class

            标签还可以有自定义的属性 并且可以有多个

                <input type='text' username='jason' xxx='ooo'>

        分组与嵌套

        伪类选择器

        伪元素选择器

            a链接标签

                a标签默认的颜色是蓝色 但是只要你点过一次 就会变成紫色 浏览器会记住你有没有点过

    2、如何调节样式？

五、css之查找标签

基本选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*!*标签选择器 元素选择器*!*/

        /*div { !*div将页面上所有的div标签内部的文本变成你要想的颜色*!*/

        /*    color: red;*/

        /*}*/

        /*类的选择器   点号加一个对象*/

        /*.c1 { !*让所有的具有c1类属性值的标签内部文本变成你想要的颜色*!*/

        /*    color: blue;*/

        /*}*/

        /*id选择器   #号加id*/

        /*#d1 { !*将id为d1的标签内部的文件变成你想要的颜色*!*/

        /*    color: green;*/

        /*}*/

        /*通用选择器   *号*/

        /** { !*页面上所有的标签统一修改样式*!*/

        /*    color: deeppink;*/

        /*}*/

    </style>

</head>

<body>

<div class="c1">老板你好 我是23号技师 很高兴为您服务

    <span>我是div内部的span</span>  #span是划分区域的

</div>

<p id="d1" class="c1">来宾三位 楼上请</p>

<div>老板你好 我是16号技师 很高兴为您服务</div>

<span class="c1">小美出来接待一下</span>

<p>来宾四位楼上请</p>

<span id="d2">珊珊出来接待一下</span>

</body>

</html>

组合选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*后代选择器*/

        /*div span {  !*空格表示div内部的所有后代span没有层级限制*!*/

        /*    color: red;*/

        /*}*/

        /*儿子选择器*/

        /*div > span { !*>大于号表示div内部的儿子*!*/

        /*    color: green;*/

        /*}*/

        /*毗邻选择器*/

        /*div + span { !*下面的紧接着的第一个标签*!*/

        /*    color: red;*/

        /*}*/

        /*弟弟选择器*/

        div ~ span { /*同级别下面的所有的标签*/

            color: deeppink;

        }

    </style>

</head>

<body>

<div>

    <span>div内部的第一个span</span>

    <p>div内部的p

        <span>div内部的p内部的span</span>

    </p>

    <span>div内部的最后一个span</span>

</div>

<span>div下面的span</span>

<span>div下面的span</span>

<span>div下面的span</span>

<span>div下面的span</span>

<span>div下面的span</span>

<span>div下面的span</span>

<div>弟弟救我

    <p>我来舔你了</p>

</div>

<span>你会被我活活骚死</span>

</body>

</html>

属性选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*属性选择器  [] */

        /*[username] { !*找到页面上所有具有username属性名的标签*!*/

        /*    background-color: blue;*/

        /*}*/

        /*进一步的属性选择器 [] */

        /*[username='yafeng'] { !*找到页面上属性名是username并且属性值叫yafeng的标签*!*/

        /*    background-color: aqua;*/

        /*}*/

        /*更进一步的属性选择器 [] */

        input[username='yafeng'] { /*找到页面上属性名是username并且属性值叫yafeng的input标签*/

            background-color: brown;

        }

    </style>

</head>

<body>

<input type="text" username="yafeng">

<input type="text" username="reba">

<input type="text" username="jason">

<input type="text" username="tank">

<input type="text" username="sean">

<p username="yafeng">亚峰你真帅啊</p>

<div username="reba">热巴真美啊</div>

<span username="jason">jason最爱大宝剑啊</span>

</body>

</html>

分组与嵌套

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*div,p,span { !*查找具有div,p,span的标签*!*/

        /*    color: brown;*/

        /*}*/

        /*.c1,#d1,p { !*查找具有c1, d1,p的标签*!*/

        /*    color: aqua;*/

        /*}*/

        /*.c1 h1 { !*找具有c1属性值的标签 后代的h1*!*/

        /*    color: blue;*/

        /*}*/

    </style>

</head>

<body>

<div class="c1">亚峰最帅 啊 真的好帅啊 怎么可以这么帅

    <h1>我是h标签</h1>

</div>

<span id="d1">啊 热巴好美啊 怎么可以这么美啊</span>

<p>我要年薪百万啊</p>

</body>

</html>

伪类选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        a:link { /*未访问的链接*/

            color: aqua;

        }

        a:hover { /*鼠标悬浮*/

            color: black;

        }

        a:active { /*选定的的链接*/

            color: green;

        }

        a:visited { /*已访问过的链接会变色*/

            color: gray;

        }

        input:focus { /*输入框获取焦点的样式*/

            background-color: red;

        }

    </style>

</head>

<body>

<a href="https://www.mzitu.com">点我有你好看哦</a>

<a href="https://www.baidu.com">点我</a>

<a href="https://www.jd.com">点我1</a>

<a href="https://www.xiaomi.com">点我2</a>

<input type="text">

</body>

</html>

伪元素选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        p:first-letter { /*给首字母设置特殊样式*/

            color: red;

            font-size: 48px;

        }

        p:before { /*在每个<p>元素之前插入内容*/

            content: '你好啊';

            color: red;

        }

        p:after { /*在每个<p>元素之后插入内容*/

            content: '大家都要好好的 加油吧！！！';

            color: blue;

        }

    </style>

</head>

<body>

<p>大家好啊 家人身体健康 </p>

</body>

</html>

初始css一的更多相关文章

初始CSS模板
/*开始初始CSS模板开始*/ body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4 ...
初始css
1.CSS规则由两部分构成,即选择器和声明器声明必须放在{}中并且声明可以是一条或者多条每条声明由一个属性和值构成,属性和值用冒号分开,每条语句用英文冒号分开注意: css的最后一条声明,用以结 ...
HTML第四章：初始css
CSS样式: 一.为什么要使用CSS;可以让页面更美观.有利于开发速度. 二.什么是CSS:全称cascading style shee ...
第四章初始CSS
一.引入样式 1.行内样式表 <h1 style="color: red;font-size: 18px;">10-30</h1> 2.内部样式表(在hea ...
初始化css代码需要注意的
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-05-06) 写在所有css代码之前,对网页中所有同类元素的一个样式规则代码或者一些基础性公用元素的样式规则代码. 1.空白 ...
HTML的基础样式之CSS
一.初始CSS 1.1.介绍CSS 1.CSS定义如何显示HTML元素. 2.当浏览器读到一个样式表,他就会按照这个样式表来对文档进行格式化(渲染). 1.2.CSS语法每个CSS样式由两个组成部分 ...
2.1.3- 体会css样式
css初始 css样式规则代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
HTML 列表 <ol><ul><li><dl><dt><dd>
<ol>标签-有序列表定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异在 HTML 4.01 中,ol 元素的 "compact&q ...
移动端单页视图库，适用于制作移动Web touchbox
ouchBox 原文:https://github.com/maxzhang/touchbox 移动端单页视图库,适用于制作移动专题 DEMO http://jsbin.com/vatuma/late ...

随机推荐

Mac 安装IDEA 2018.3 版本
注:本文转自https://blog.csdn.net/qq_41735004/article/details/86670039 写文文的目的是,怕博主删掉然后找不到所以就写一份 1.下载idea和破 ...
什么是OOP
面向对象是相对于面向过程而言的.面向过程语言是一种基于功能分析的.以算法为中心的程序设计方法:而面向对象是一种基于结构分析的.以数据为中心的程序设计思想.早在面向过程语言时代,有一句话说:程序=算法+ ...
C#设置WebBrowser使用Edge内核
原文:C#设置WebBrowser使用Edge内核 1. 问题描述用C#写了一个小工具, 需要显示网页上的内容, 但WebBrowser使用的是IE内核, 不能很好的展示网页 2. 解决方法通过一 ...
其他 - YAML 入门
概述简单介绍 YAML 语言背景很多地方, 都在使用 YAML k8s spring 其他准备验证工具 YAML.YML在线格式化校验工具一个 YAML 转换 JSON 的工具通常来说, ...
[CF755B] PolandBall and Game - 博弈论
[CF755B] Description 两个人轮流说单词,每个人只能说自己的的单词库里的单词.被任意方说过的单词不能再说.一个单词只会在某个人的单词库中出现一次,但是可能同时出现在两个人的单词库中. ...
jQuery func
1. $(selector).each(function(index,element)); -----------index 选择器的index位置,element --当前的元素 2. _.eac ...
STM32------SYSCLK
重要的时钟:PLLCLK, SYSCLK, HCKL, PCLK1, PCLK2 之间的关系要弄清楚; 1.HSI:高速内部时钟信号 stm32单片机内带的时钟(8M频率)精度较差2.H ...
socks5代理服务器搭建
1.首先,编译安装SS5需要先安装一些依赖组件 yum -y install gcc gcc-c++ automake make pam-devel openldap-devel cyrus-sasl ...
leetcode 1214 Two Sum BSTs
function rob(a, b, target) { var hash = {} var stack = [a] while (queue.length) { var node = stack.p ...
Centos7下配置Apache的虚拟主机
一.虚拟主机虚拟主机是Apache提供的一个功能,通过虚拟主机拉雅在一台服务器上部署多个网站.虽然服务器的IP地址是相同的,但用户当用户使用不同的域名访问时,访问到的是不同的网站. 下面讲解Apac ...

初始css一

初始CSS

一、form表单补充

二、验证form提交数据

三、CSS

四、如何学习css？

五、css之查找标签

初始css一的更多相关文章

随机推荐

热门专题