Form标签+Css基础

 

一、Form表单标签

<form action="" method=""></form>

   表单就是用来将用户的信息提交到服务器，服务器会将信息存储或者根据信息查询数据（增删改查）。

表单中所有的内容都要写在form标签中。

<input type="text" value="哈哈哈哈" placeholder="请输入用户名">

Input文本输入框，type类型为text-普通文本输入框。

Value属性：给文本输入框添加默认值。

Placeholder属性：文本框中提示性文本。

<input type="password" placeholder="请输入密码">

Input类型为password，以密码的形式显示

<input type="radio" name="xingbie" value="nan">男

如果实现单项选择的话必须设置name属性一致

Input类型为radio，单项选择输入。可以想象互斥的概念

<input type="checkbox" name="xihao" value="youyong">

Input类型为checkbox，check就是选择的意思，box是盒子的意思。Checkbox我们可以翻译为选择框。它是一个多选选择框输入。

Name属性即使设置为一致的，那么也不会单选，还是多选框。而且一般name属性名字写成一致的。

    <p>提交：<input type="submit"></p>

    <p>普通按钮：<input type="button" value="我是普通按钮"></p>

    <p>重置：<input type="reset"></p>

Input三种类型的button

Submit：提交按钮，将form表单提交到action对应的页面中去

Reset：重置按钮，将form中填写的所有信息重置为默认值

Button：普通按钮、它的功能可以自己去定义

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

Textarea：文本域标签，通过cols和rows可以改变它的大小

<fieldset>

            <legend>分组标题</legend>

            <p><input type="date"></p>

            <p><input type="color"></p>

            <p><input type="file"></p>

        </fieldset>

Fieldset:分组标签。

Legend：设置分组标题标签

二、HTML中的注释

注释的格式：<!-- -->

三、标签的划分

标签的划分分为三种：

第一种按照文档流来划分。

第二种按照显示内容来划分。

第三种按照封闭性来划分。

第一种按照文档流来划分：分为块级标签和行级标签

块级元素特点：

1. 独占一行
2. 可以设置宽高大小，以及边距
3. 宽度默认与浏览器一样宽

行级元素特点：

1. 不独占行，可以在一行内显示
2. 不可以随意设置宽高大小，宽高只与内容有关
3. 行内元素一般只存放文本或者行内元素

第二种按照显示内容来划分：容器级标签和文本级标签

容器及标签特点：

可以放任何的标签及文本，一般的容器级标签都为块级标签。

文本级标签特点：

一般只存放文本、图片、a链接等等，一般都为行内级标签。p标签除外

第三种按照封闭性来划分：双标签和单标签

双标签就是我们看到的成对存在的标签，单标签就是单独一个标签。

 

四、CSS基础入门

CSS英文全拼：cascading style sheet 层叠样式表。

在html中使用：要在head中写style标签，所有样式放在style标签中。

<style>

        h1{

            color: red;  设置文本颜色

            font-size: 30px; 设置文本大小

            background-color: yellow; 设置背景颜色

        }

        span{

            color: blue;

            font-weight: bold; 设置文本粗体

            font-style: italic; 设置文本斜体

注意：凡是font开头的想要设置默认的样式则使用normal

            text-decoration: underline; 设置文本下滑线，如果去除下滑线则用none这个属性

        }

        li{

            color: orange;

        }

        #fly{

            color: blue;

            font-size: 40px;

        }

    </style>

4.1标签选择器

上面代码中h1、p、li、span都是标签选择器。只要在当前页面中出现的h1、p、li、span标签都会被修改样式。

4.2 id选择器

#fl：这是id选择器，它选择的标签更专一，就是唯一的。Id不可以重复，在同一页面中只允许有一个id名字。

Id的命名规则：只能有数字、字母、下划线组成。只能以字母开头，并且id名字不可以和标签重名。

4.3 类选择器

.hong{

            color: red;

        }

<p class="hong xia">我们</p>

这是类选择器，首先需要我们为标签设置class名字。通过class写类样式。

1、Class在页面中可以重复

2、一个class样式可以同时为多个标签提供使用

3、一个标签可以设置多个类样式

我们可以将公用的样式抽取出来，作为公共类样式使用。

4.4后代选择器

.one ul li{

            color: red;

            font-size: 30px;

        }

上面使用的就是后代选择器，首先由名字为One的class找到后代ul然后再找到后代li。

后代选择器中间使用的是 -- 空格！！

4.4交集选择器

div ul li.first{

            text-decoration: underline;

        }

li.first它就是交集选择器，他就是在一起，没有空格也没有任何符号。

交集选择器选择方式：它既符合是li标签，又符合是.First类，取交集。

一般交集只写两个。

4.5并集选择器

.first,.second{

            text-decoration: underline;

        }

这是并集选择器，并集选择器是使用逗号分隔开。

最好不要经常使用它，应为效率不高

4.6通用选择器

*{} ：它就是通用选择器，所有的标签都可以用它的样式

4.6子代选择器

div>p：使用“>”来写子代选择器，它只能选择div的子代，不能选择子代的子代

4.6序选择器

div ul li p:first-child 这个是选择的第一个p标签

div ul li p:last-child 这个是选择的最后一个p标签

 

4.6伪类选择器 l love l hate

a:hover 鼠标悬停时候会触发使用的选择器

a:link  未访问过得链接伪类选择器

a:visited 访问过得链接伪类选择器

a:active  当前选中的链接伪类选择器