form表单(**************)

能够获取用户输入(输入，选择，上传的文件)

参数

action

控制数据提交的地址

三种书写方式

1.不写 默认就是朝当前页面所在的地址提交数据

2.写全路径(https://www.baidu.com)

3.只写路径后缀(/index/)

method

控制数据提交的方式

get from表单默认是get请求

post

通常情况下input需要结合label一起使用

用户名:

绑定id值，之后点击label标签内任何的位置都可以自动选中input框

用户名:

根据type参数的不同，展示不同的功能

text	普通文本

password	输入的内容，会变成密文

date	日期

radis	单选圆圈

checkbox	多选 打钩

hidden	隐藏

file	传文件

button	普通按钮，没有任何意义，然而是用的最多的，可以绑定js事件

reset	重置按钮

submit	提交按钮，能够自动触发form表单提交数据的动作

select标签 下拉框

一个个的option标签就是一个个的选项

默认为单选

可以给select标签加一个multipe参数，就可以将单选变成多选

textarea标签

可获取大段文本

input标签可以加disable属性，禁用该input框

input标签可以叫value属性，设置默认值

选择的标签	如何默认选中

	redio

	checkbox

		checked='checked'

		当属性名和属性值相同的时候，可以只写属性名(******)


能够触发form表单提交数据的动作有两个标签可以(******)

	input标签 type=submit

	button标签

所有获取用户输入的标签，都应该有name属性(******)

	name属性就类似于字典的key

	input框获取到的用户输入都会放到input框的value属性中

针对选择框，传到后端的数据，有value属性决定

form表单如果要提交文件数据，必须修改以下参数

	enctype="multipart/form-data"


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>恰猪肉哟</title>

</head>

<body>

<h1>注册界面</h1>

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

    <p>

    <label for="d1">

        用户名:<input type="text" id="d1" value="水箱" name="username">

    </label>

</p>

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

<p>生日:<input type="date"></p>

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

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

<p>爱好:唱:<input type="checkbox" name="hobby" value="sing">

跳:<input type="checkbox" name="hobby" value="dump">

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

<p>省份:

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

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

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

    <option value="CQ">重庆</option>

</select></p>

<p>自我介绍

    <textarea name="info" id="" cols="200" rows="10"></textarea>

</p>

<p>

    <input type="button" value="按钮">

    <input type="reset" value="重置">

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

    <button>俺只是一个button标签</button>

</p>

</form>

</body>

</html>

CSS

层叠样式表

用来控制html标签样式的

注释

/*单行注释*/

/*

多行注释1

多行注释2

*/

通常在写css的时候，都会单独写一个css文件，里面只有css代码

/*某某网址首页的css样式文件*/

/*通用样式*/

/*导航条样式*/

/*轮播图样式*/

css的语法结构

选择器{属性：属性值}

属性和属性值之间用冒号（:）隔开，定义多个属性时，属性之间用英文输入法下的分号（;）隔开，最后一条属性可以不加分号

css的三种引入方式

1.通过link标签引入外部的css文件(最正规的方法)

​

2.直接在html页面上的head内通过style标签直接书写css代码

	<style>

        h1{

            color: green;

        }

	</style>

3.行内式(直接在标签内部通过style属性直接书写)，不推荐使用

	<h1 style="color: orange">我是Coach</h1>

css查找(重要)

只要学会了css的查找，之后js、jQurey的标签查找都是一个原理

基本选择器

元素选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>就这样吧</title>

</head>

<body>

<style>

    /*标签选择器，直接写标签名字*/

    span {

        color: darkred;

    }

</style>

<span>span</span>

<span>span</span>

<span>span</span>

<span>span</span>

<div>div

    <span>span</span>

    <span>span</span>

</div>

<p>p

    <span>

        <span>span</span>

    </span>

</p>

</body>

</html>

id选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>就这样吧</title>

</head>

<body>

<style>

	/*id选择器 id必须是唯一的	#+id值*/

    #d1 {

        color: greenyellow;

    }

</style>

<span id="d1">span</span>

<span id="d2">span</span>

<span>span</span>

<span>span</span>

<div id="d3">div

    <span>span</span>

    <span>span</span>

</div>

<p>p

    <span>

        <span>span</span>

    </span>

</p>

</body>

</html>

类选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>就这样吧</title>

</head>

<body>

<style>

    /*类选择器 .+类值*/

    .c1 {

        color: purple;

    }

</style>

<span class="c1">span</span>

<span class="c2">span</span>

<span>span</span>

<span>span</span>

<div class="c1">div

    <span>span</span>

    <span>span</span>

</div>

<p class="c3">p

    <span>

        <span>span</span>

    </span>

</p>

</body>

</html>

通用选择器

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>就这样吧</title>

</head>

<body>

<style>

   /*通用选择器	 *代表全部*/

   * {

       color: orange

   }

</style>

<span>span</span>

<span>span</span>

<span>span</span>

<span>span</span>

<div>div

   <span>span</span>

   <span>span</span>

</div>

<p>p

   <span>

       <span>span</span>

   </span>

</p>

</body>

</html>

组合选择器

div span(后代选择器)

只要在div这个标签内都属于div的后代

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>就这样吧</title>

</head>

<body>

<style>

	/*后代选择器		空格代表后代*/

    div span {

        color: red;

    }

</style>

<span>span</span>

<span>span</span>

<span>span</span>

<span>span</span>

<div>div

    <span>div内的span</span>

</div>

<p>p

    <span>

        <span>p中的span</span>

    </span>

</p>

</body>

</html>

div>span(儿子选择器)

大于号代表儿子(子代/儿砸)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>就这样吧</title>

</head>

<body>

<style>

	/*子代选择器	 '>'代表子代*/

    div>span {

        color: blue;

    }

</style>

<span>span</span>

<span>span</span>

<span>span</span>

<span>span</span>

<div>div

    <span>div内的span</span>

        <p>

            div内p中的span

        </p>

</div>

<p>p

    <span>

        <span>p中的span</span>

    </span>

</p>

</body>

</html>

div~span(兄弟选择器)

~代表同级别下面所有的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>就这样吧</title>

</head>

<body>

<style>

    /*兄弟选择器  '~'代表兄弟*/

    div~span {

        color: hotpink;

    }

</style>

<span>span</span>

<span>span</span>

<span>span</span>

<span>span</span>

<div>div

    <span>div内的span</span>

        <p>

            div内p中的span

        </p>

</div>

<span>span</span>

<span>span</span>

<span>span</span>

<p>p

    <span>

        <span>p中的span</span>

    </span>

</p>

</body>

</html>

div+span(毗邻选择器)

紧挨着同级别的下面的那一个

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>就这样吧</title>

</head>

<body>

<style>

    /*毗邻选择器*/

    div+span {

        color: yellow;

    }

</style>

<span>span</span>

<span>span</span>

<span>span</span>

<span>span</span>

<div>div

    <span>div内的span</span>

        <p>

            div内p中的span

        </p>

</div>

<span>span</span>

<span>span</span>

<span>span</span>

<p>p

    <span>

        <span>p中的span</span>

    </span>

</p>

</body>

</html>

属性选择器

任何的标签都有自己默认的属性 id class

标签还支持自定义任何更多的属性(也就意味着可以让标签帮用户携带一些额外的数据)(***************)

伪类选择器

a标签有四种状态

​ 1.没有被点击过

​ 2.鼠标悬浮在其上面

​ 3.点击之后不松手

​ 4.点击之后，再返回

​ 将input框用鼠标点进去之后的那个状态叫做 input获取焦点

鼠标移出去之后的状态，叫做input失去焦点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<style>

    a:link {

        color: red;

    }

    a:hover {

        color: hotpink;

    }

    a:active {

        color: yellow;

    }

    a:visited {

        color: greenyellow;

    }

    input:focus {

        background-color: darkred;

    }

    span:hover {

        background-color: aqua;

    }

</style>

<a href="https://www.sogo.com">click me</a>

<input type="text">

<span>span</span>

</body>

</html>

伪元素选择器

（清除浮动带来的负面影响）

可以通过css添加文本内容

选择器优先级

1.选择器相同的情况下，引入方式不同

​ 遵循就近原则，谁离标签更近，就听谁的

2.选择器不同的情况下

​ 行内选择器 > id选择器(其次) > 类选择器(使用最频繁) > 元素选择器

day 45的更多相关文章

  1. Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds

    错误:Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds 错误提示就是我们限定了部署的时间导致的错 ...

  2. TSQL查询45道题

    一.设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher). 四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1- ...

  3. Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds...

    仰天长啸   Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds... 当启动tomcat时候出现 ...

  4. [转]Eclipse启动Tomcat时45秒超时解决方法

    原文地址:http://it.oyksoft.com/post/6577/ Eclipse启动Tomcat时,默认配置的启动超时时长为45秒.假若项目启动超过45秒将会报错.两种解决方法:1.改XML ...

  5. Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds -----》myeclipse2015

    错误:Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds 错误提示就是我们限定了部署的时间导致的错 ...

  6. JavaScript 开发的45个经典技巧

    JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是 ...

  7. 45个android实例源码

    分享45个android实例源码,很好很强大http://www.apkbus.com/android-20978-1-1.html andriod闹钟源代码http://www.apkbus.com ...

  8. WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established by default i

    jdbc连接数据库候,对数据进行访问,访问正常当出现如下警告: WARN: Establishing SSL connection without server's identity verifica ...

  9. 分享45个android实例源码，很好很强大

    分享45个android实例源码,很好很强大 http://www.apkbus.com/android-20978-1-1.html 分享45个android实例源码,很好很强大http://www ...

  10. Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds问题

    错误:Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds. If the server requi ...

随机推荐

  1. django之choice、ajax初步

    django之choice参数,ajax choice参数 应用场景:主要是用户性别.用户工作状态.成绩对应 ##在测试文件中运行,需要写以下几个模块 if __name__ == "__m ...

  2. postgres判断字符串是否为时间,数字

    时间判断函数定义: -- FUNCTION: public.isdate(character varying) -- DROP FUNCTION public.isdate(character var ...

  3. linux c 学习 GUN glibc 信息查看

    gun glibc 信息查看方法 方式 共享库作为可执行文件,默认位置可能为/lib/libc.so.6信息如下:   GNU C Library (GNU libc) stable release ...

  4. ASP.NET开发实战——（二）为什么使用ASP.NET

    本文主要内容是通过分析<博客系统>需求,确定使用Web应用的形式来开发,然后介绍了HTML.HTTP的概念,并使用IIS搭建了一个静态的HTML“页面”,从而引出“动态”的ASP.NET. ...

  5. Linux性能优化实战学习笔记：第十二讲

    一.性能优化方法论 不可中断进程案例 二.怎么评估性能优化的效果? 1.评估思路 2.几个为什么 1.为什么要选择不同维度的指标? 应用程序和系统资源是相辅相成的关系 2.性能优化的最终目的和结果? ...

  6. Sentinel Client: 整合Apollo规则持久化

    在前面的学习过程中,Sentinel 的规则,也就是我们之前定义的限流规则,是通过代码的方式定义好的.这是初始化时需要做的事情,Sentinel 提供了基于API的方式修改规则: FlowRuleMa ...

  7. 团队作业第五次—项目冲刺-Day4

    Day4 part1-SCRUM: 项目相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 hunter--冲刺集合 团队名称 hunte ...

  8. 推荐一款手机清理工具App悟空清理

    推荐一款手机清理工具App悟空清理 1 介绍 悟空清理是一款完全免费的手机加速与存储空间清理工具软件,强力去除顽固垃圾,使手机运行更畅快. 2 特色功能介绍 悟空在手,清理无忧!悟空清理,人人都在用的 ...

  9. 第三次实验报告：使用Packet Tracer分析TCP连接建立过程

    目录 1 实验目的 2 实验内容 3. 实验报告 3.1 建立网络拓扑结构 3.2 配置参数 3.3 抓包,分析TCP连接建立过程 4. 拓展 (不作要求,但属于加分项) 1 实验目的 使用路由器连接 ...

  10. Oracle体系结构学习笔记

    Oracle体系结构由实例和一组数据文件组成,实例由SGA内存区,SGA意思是共享内存区,由share pool(共享池).data buffer(数据缓冲区).log buffer(日志缓冲区)组成 ...