一、表单标签<form>

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

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

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

表单属性

　　action: 表单提交到哪。一般指向服务器端一个程序，程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

　　method: 表单的提交方式 post/get默认取值就是get

表单元素

基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息。

表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。 
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息

1.1 <input>系列标签

'''
> 表单类型

type:        text 文本输入框

             password 密码输入框

             radio 单选框

             checkbox 多选框  

             submit 提交按钮            

             button 按钮(需要配合js使用.) button和submit的区别？

             file 提交文件：form表单需要加上属性enctype="multipart/form-data" 

            上传文件注意两点：
请求方式必须是post
enctype="multipart/form-data"

 > 表单属性

 name:    表单提交项的键.

           注意和id属性的区别：name属性是和服务器通信时使用的名称；
           而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的

value:    表单提交项的值.对于不同的输入类型，value 属性的用法也不同：

                type="button", "reset", "submit" - 定义按钮上的显示的文本

                type="text", "password", "hidden" - 定义输入字段的初始值

                type="checkbox", "radio", "image" - 定义与输入相关联的值

checked:  radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使。
'''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册</title>
</head>
<body>

<form action="/index" method="post">
    <p><label for="user">姓名</label>
         <input type="text" name="user" placeholder="用户名" id="user">
    </p>
    <p>
        密码 <input type="password" name="pwd">
    </p>
    <p>
        爱好 <input type="checkbox" name="hobby" value="basketball">篮球
             <input type="checkbox" name="hobby" value="footbal">足球
            <input type="checkbox" name="hobby" value="multi_color" checked="checked">彩色球
    </p>
    <p>
        性别：<input type="radio" name="sex" value="1">男
             <input type="radio" name="sex" value="0">女
    </p>
    <p>
        <input type="reset">
    </p>
    <p>
        <input type="button" value="按钮">
    </p>
    <p>
        <input type="file">
    </p>
    <p>
        <input type="submit">
    </p>
</form>

</body>
</html>

注册实例

1.2 select标签

'''
 <select> 下拉选标签属性

          name:表单提交项的键.

          size：选项个数

          multiple：multiple 多选，需按Ctrl进行选择
                 <optgroup>为每一项加上分组

                 <option> 下拉选中的每一项 属性：

                       value:表单提交项的值.
                       selected: selected下拉选默认被选中

'''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
<form action="">
    <tr>省份：
    <select name="provinces" >
        <optgroup label="华北"></optgroup>
        <option value="henan">河南</option>
        <option value="hebei">河北</option>
        <option value="shanxi">山西</option>
        <option value="..." selected>....</option>
    </select>
    </tr>
</form>
</body>
</html>

选择实例

1.3 <textarea> 多行文本框

<form id="form1" name="form1" method="post" action="">
        <textarea cols=“宽度” rows=“高度” name=“名称”>
                   默认内容
        </textarea>
</form>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册</title>
</head>
<body>

<form action="/index" method="post">
    <p>姓名
         <input type="text" name="user" placeholder="用户名" id="user">
    </p>
    <p>
        密码 <input type="password" name="pwd">
    </p>
    <p>
        爱好 <input type="checkbox" name="hobby" value="basketball">篮球
             <input type="checkbox" name="hobby" value="footbal">足球
            <input type="checkbox" name="hobby" value="multi_color">彩色球
    </p>
    <p>
        性别：<input type="radio" name="sex" value="1">男
             <input type="radio" name="sex" value="0">女
    </p>
    <p>简介：
        <textarea name="jianjie" id="form1" cols="30" rows="10" placeholder="个人简介"></textarea>
    </p>
    <p>
        <input type="reset">
    </p>
    <p>
        <input type="button" value="按钮">
    </p>
    <p>
        <input type="file">
    </p>
    <p>
        <input type="submit">
    </p>

</form>

</body>
</html>

多行文本框

1.4 <label>标签

定义：<label> 标签为 input 元素定义标注（标记）。
说明：
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form method="post" action="">

        <label for=“username”>用户名</label>
        <input type=“text” name=“username” id=“username” size=“20” />
</form>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册</title>
</head>
<body>

<form action="/index" method="post">
    <p><label for="user">姓名</label>
         <input type="text" name="user" placeholder="用户名" id="user">
    </p>
    <p>
        密码 <input type="password" name="pwd">
    </p>
    <p>
        爱好 <input type="checkbox" name="hobby" value="basketball">篮球
             <input type="checkbox" name="hobby" value="footbal">足球
            <input type="checkbox" name="hobby" value="multi_color">彩色球
    </p>
    <p>
        性别：<input type="radio" name="sex" value="1">男
             <input type="radio" name="sex" value="0">女
    </p>
    <p>
        <input type="reset">
    </p>
    <p>
        <input type="button" value="按钮">
    </p>
    <p>
        <input type="file">
    </p>
    <p>
        <input type="submit">
    </p>

</form>

</body>
</html>

标注实例

1.5 <fieldset>标签

<fieldset>
    <legend>登录吧</legend>
    <input type="text">
</fieldset>

效果：

二、CSS

2.1 css的引入方式

在HTML中引入css方式总共有三种：

  1. 行内样式
  2. 内接样式
  3. 外接样式

　　　　　3.1 链接式

　　　　　3.2 导入式

2.1.1 css介绍

现在的互联网前端分三层：

  • HTML：超文本标记语言。从语义的角度描述页面结构。
  • CSS：层叠样式表。从审美的角度负责页面样式。
  • JS：JavaScript 。从交互的角度描述页面行为

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

css的最新版本是css3，我们目前学习的是css2.1

接下来我们要讲一下为什么要使用CSS。

2.1.2 html缺陷

  1. 不能够适应多种设备
  2. 要求浏览器必须智能化足够庞大
  3. 数据和显示没有分开
  4. 功能不够强大

2.1.3 css优点

  1. 使数据和显示分开
  2. 降低网络流量
  3. 使整个网站视觉效果一致
  4. 使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

2.1.4 行内样式

1 <div>
2     <p style="color: green">我是一个段落</p>
3 </div>

2.1.5 内接样式

<style type="text/css">
    /*写我们的css代码*/

    span{
    color: yellow;
    }

</style>

2.1.6 外接样式-链接式

<link rel="stylesheet" href="./index.css">

2.1.7 外接式-导入式

<style type="text/css">
        @import url('./index.css');
</style>

2.2 css的选择器

css的选择器：1.基本选择器 2.高级选择器

2.2.1 基本选择器：

1.标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“

body{
    color:gray;
    font-size: 12px;
}
/*标签选择器*/
p{
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}

2.id选择器
# 选中id

同一个页面中id不能重复。
任何的标签都可以设置id 
id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值

 1 #box{
 2     background:green;
 3 }
 4
 5 #s1{
 6     color: red;
 7 }
 8
 9 #s2{
10     font-size: 30px;
11 }

3.类选择器

3.1 所谓类 就是class . class与id非常相似 任何的标签都可以加类但是类是可以重复,属于归类的概念。

3.2 同一个标签中可以携带多个类，用空格隔开

类的使用，能够决定前端工程师的css水平到底有多牛逼？

答案：一定要有”公共类“的概念

 1 .lv{
 2     color: green;
 3
 4 }
 5 .big{
 6     font-size: 40px;
 7 }
 8 .line{
 9     text-decoration: underline;
10 }
1 <!-- 公共类    共有的属性 -->
2     <div>
3         <p class="lv big">段落1</p>
4         <p class="lv line">段落2</p>
5         <p class="line big">段落3</p>
6     </div>

总结：

  • 不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
  • 每个类要尽可能的小，有公共的概念，能够让更多的标签使用

玩好了类 就等于玩好了css中的1/2

到底使用id还是用class？
答案：尽可能的用class。除非一些特殊情况可以用id

原因：id一般是用在js的。也就是说 js是通过id来获取到标签

2.2.2 高级选择器：

高级选择器分为：后代选择器、子代选择器、并集选择器、交集选择器

后代选择器

使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

1 .container p{
2     color: red;
3 }
4 .container .item p{
5     color: yellow;
6 }

子代选择器

使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

1 .container>p{
2     color: yellowgreen;
3 }

并集选择器

多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器

1 /*并集选择器*/
2 h3,a{
3     color: #008000;
4     text-decoration: none;
5
6 }

比如像百度首页使用并集选择器。

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
      margin: 0;
      padding: 0
   }
/*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/

交集选择器

使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active

比如有一个<h4 class='active'></h4>这样的标签。

那么

 1 h4{
 2     width: 100px;
 3     font-size: 14px;
 4 }
 5 .active{
 6     color: red;
 7     text-decoration: underline;
 8 }
 9 /* 交集选择器 */
10 h4.active{
11     background: #00BFFF;
12 }

它表示两者选中之后元素共有的特性。

2.2.3 属性选择器

属性选择器，字面意思就是根据标签中的属性，选中当前的标签。

语法：

1 /*根据属性查找*/
 2             /*[for]{
 3                 color: red;
 4             }*/
 5
 6             /*找到for属性的等于username的元素 字体颜色设为红色*/
 7             /*[for='username']{
 8                 color: yellow;
 9             }*/
10
11             /*以....开头  ^*/
12             /*[for^='user']{
13                 color: #008000;
14             }*/
15
16             /*以....结尾   $*/
17             /*[for$='vvip']{
18                 color: red;
19             }*/
20
21             /*包含某元素的标签*/
22             /*[for*="vip"]{
23                 color: #00BFFF;
24             }*/
25
26             /**/
27
28             /*指定单词的属性*/
29             label[for~='user1']{
30                 color: red;
31             }
32
33             input[type='text']{
34                 background: red;
35             }

2.2.4 伪类选择器

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则"  LoVe HAte

    <style type="text/css" media="screen">
        .box ul li.item a:link{
            color: green;
        }
        .box ul li.item a:visited{
            color: yellow;
        }
        .box ul li.item a:hover{
            color: blue;
        }
        .box ul li.item a:active{
            color: yellowgreen;
        }
    </style>

再给大家介绍一种css3的选择器nth-child()

              /*选中第一个元素*/
        div ul li:first-child{
            font-size: 20px;
            color: red;
        }
        /*选中最后一个元素*/
        div ul li:last-child{
            font-size: 20px;
            color: yellow;
        }

        /*选中当前指定的元素  数值从1开始*/
        div ul li:nth-child(3){
            font-size: 30px;
            color: purple;
        }

        /*n表示选中所有,这里面必须是n, 从0开始的  0的时候表示没有选中*/
        div ul li:nth-child(n){
            font-size: 40px;
            color: red;
        }

        /*偶数*/
        div ul li:nth-child(2n){
            font-size: 50px;
            color: gold;
        }
        /*奇数*/
        div ul li:nth-child(2n-1){
            font-size: 50px;
            color: yellow;
        }
        /*隔几换色  隔行换色
             隔4换色 就是5n+1,隔3换色就是4n+1
            */

        div ul li:nth-child(5n+1){
            font-size: 50px;
            color: red;
        }

2.2.5 伪元素选择器

废话不多说，直接上代码！！！

/*设置第一个首字母的样式*/
        p:first-letter{
            color: red;
            font-size: 30px;

        }

/* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
        p:before{
            content:'alex';
        }

/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }

2.3 css继承性和层叠性

css有两大特性：继承性和层叠性

2.3.1 继承性

面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面。

继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。

记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

2.3.2 层叠性

层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
权重： 谁的权重大，浏览器就会显示谁的属性

谁的权重大？ 非常简单就是小学的数数。

数：id的数量 class的数量 标签的数量，顺序不能乱

/*1  0  0 */显示红色
#box{

    color: red;
}
/*0  1  0*/
.container{
    color: yellow;
}
/*0  0  1*/
p{
    color: purple;
}

是不是感觉明白了呢？好的，再给大家加深点难度。

1     <div id='box1' class="wrap1">
2         <div id="box2" class="wrap2">
3             <div id="box3" class="wrap3">
4                 <p>再来猜猜我是什么颜色？</p>
5             </div>
6         </div>
7     </div>
        #box1 #box2 p{
            color: yellow;
        }

        #box2 .wrap3 p{
            color: red;
        }

        div div #box3 p{
            color: purple;
        }

        div.wrap1 div.wrap2 div.wrap3 p{
            color: blue;
        }

好的。那么上面的这个案例大家是否懂了呢？那么接下来我们继续看案例

还是上面那个html结构，如果我设置以下css，会显示什么颜色呢。

1         #box2 .wrap3 p{
2             color: yellow;
3         }
4
5         #box1 .wrap2 p{
6             color: red;
7         }

答案是红色的。结论：当权重一样的时候 是以后来设置的属性为准，前提必须权重一样 。‘后来者居上 ’。

Good,我们继续看下面的css，你来猜以下此时字什么颜色？

#box1 #box2 .wrap3{
    color: red;
}

#box2 .wrap3 p{
    color: green;
}

答案是绿色。哈哈，是不是感觉快懵掉了。其实大家只要记住这点特性就可以。第一条css设置的属性值，是通过继承性设置成的红色，那么继承来的属性，它的权重为0。它没有资格跟我们下面选中的标签对比。

那大家猜想一下如果都是被继承来的属性，那么字会显示什么颜色呢？

#box1 #box2 .wrap3{
    color: red;
}
.wrap1 #box2{
    color: green;
}

小案例证明：权重都是0:那么就是"就近原则" ： 谁描述的近，就显示谁的属性。所谓描述的近，就是选中到最内层的距离越近。

小总结一下：

总结：
1.先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性

2.3.3 层叠性权重相同处理

直接上代码，看效果！

第一种现象：当权重相同时，以后来设置的属性为准，前提一定要权重相同

#box2 .wrap3 p{
    color: yellow;
}

#box1 .wrap2 p{
    color: red;
}

我们会发现此时显示的是红色的。

第二种现象： 第一个选择器没有选中内层标签，那么它是通过继承来设置的属性，那么它的权重为0。第二个选择器选中了内层标签，有权重。

所以 继承来的元素 权重为0。跟选中的元素没有可比性。

#box1 #box2 .wrap3{
    color: red;
}
#box2 .wrap3 p{
    color: green;
}

我们会发现此时显示的是绿色的。

第三种现象：如果都是继承来的属性，谁描述的近，显示谁的属性。'就近原则'

#box1 #box2 .wrap3{
    color: red;
}
 .wrap1 #box2{
    color: green;
}

!important 的使用。

！important:设置权重为无限大 
!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局。

HTML(form标签)、CSS选择器一的更多相关文章

  1. Form标签+Css基础

      一.Form表单标签 <form action="" method=""></form>    表单就是用来将用户的信息提交到服务器 ...

  2. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  3. HTML(form标签)、CSS

    一.表单标签<form> 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互. 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含t ...

  4. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  5. day42:HTML标签和CSS选择器

    目录 1.HTML 1.1 文档结构 1.2 head标签 1.3 body标签 1.3.1 h1-h6标签 1.3.2.br标签:换行 1.3.3.hr标签:一行横线 1.3.4 a标签:超链接标签 ...

  6. form表单与CSS选择器和样式操作

    form表单 """获取前端用户数据并发送给后端服务器""" <form action=""></fo ...

  7. form表单，css简介，css选择器，css样式操作

    form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...

  8. form表单与css选择器

    目录 form表单 action属性 input标签 lable标签 select标签 textarea标签 补充 网络请求方式 CSS简介 CSS基本选择器 组合选择器 属性选择器 分组与嵌套 伪类 ...

  9. CSS选择器、标签，div的位置。

    今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网.虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉. 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo.足足 ...

  10. HTML5新标签使用及CSS选择器(伪类)

    这些标签能够让搜索引擎更直接的解析页面内容. <header></header>语义:文档或者页面的头部 <nav></nav>语义:导航这两者不是组合 ...

随机推荐

  1. P2617 Dynamic Rankings（带修主席树）

    所谓带修主席树,就是用树状数组的方法维护主席树的前缀和 思路 带修主席树的板子 注意数据范围显然要离散化即可 代码 #include <cstdio> #include <cstri ...

  2. (zhuan) LSTM Neural Network for Time Series Prediction

    LSTM Neural Network for Time Series Prediction Wed 21st Dec 2016 Neural Networks these days are the ...

  3. Python 安装与环境变量配置

    一.软件下载 Python安装包下载地址:https://www.python.org/ 二.安装过程(略) 三.环境变量配置: 方法一:使用cmd命令添加path环境变量 在cmd下输入: path ...

  4. 【使用指南】WijmoJS 前端开发工具包

    为方便广大前端开发人员更好的使用 WijmoJS 前端开发工具包,葡萄城专门推出了 WijmoJS 使用指南,该指南详细地介绍了如何把 WijmoJS 各种强大的功能应用到您自己的 Web 项目中,助 ...

  5. nrf24l01 IRQ一直为高电平

    测试发现发送数据时MCU卡住不动,测试发现卡在了 while(NRF24L01_IRQ!=0); 也就是说管脚IRQ一直是高电平.仔细排查发现nrf24l01处于接收模式,改为发送模式就好了 NRF2 ...

  6. HDU 5985 Lucky Coins（概率）

    http://acm.split.hdu.edu.cn/showproblem.php?pid=5985 题意:有多种类型的硬币,每种类型的硬币都有一定的数量,现在每次抛硬币,除去朝下的硬币,知道最后 ...

  7. Java问题解决：Java compiler level does not match the version of the installed Java project facet.

    问题原因:Java编译器级别与Facted Project 中的Java 版本设定不匹配. 解决办法:将两者设置一致 1.查看Java compiler level : 选中项目右键propertie ...

  8. hdu 6134 Battlestation Operational 莫比乌斯反演

    Battlestation Operational Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Jav ...

  9. win10 下载安装eclipse

    官网:https://www.eclipse.org 选择下载包 选择下载win 64版本 解压后目录结构如下: 点击运行eclipse

  10. sqlserver 中通配符%和_的使用

    --以a开头的数据 SELECT * FROM BCUSTOMER_MZN WHERE CST_NAME LIKE 'A%' --以Z结尾的数据 SELECT * FROM BCUSTOMER_MZN ...