一、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  当前选中的链接伪类选择器

Form标签+Css基础的更多相关文章

  1. Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

    1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...

  2. HTML常用标签与CSS基础知识

    一.HTML页面结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  3. html标签和css基础语法与浏览器兼容性等相关基础学习

    <!-- table的使用 --> <h3>前端日常</h3> <form action="https://www.baidu.com"& ...

  4. css基础 引用方式 标签选择器 优先级 各式布局

    今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...

  5. HTML&CSS基础-html的图片标签

    HTML&CSS基础-html的图片标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,准备一张图片,存放路径和html文件在同一目录 二.HTML源代码 ...

  6. HTML&CSS基础-html标签的实体

    HTML&CSS基础-html标签的实体 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html&g ...

  7. HTML&CSS基础-html常用的标签

    HTML&CSS基础-html常用的标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

  8. HTML&CSS基础-meta标签

    HTML&CSS基础-meta标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常见字符集 1>ASCII 我们知道计算机是由外国人发明的,他们当时也没有考虑到 ...

  9. HTML&CSS基础-标签的属性

    HTML&CSS基础-标签的属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!-- html 根标签,一个页面中有且只有一个根标签,网页中的 ...

随机推荐

  1. 使用MVCJqGrid

    使用MVCJqGrid的心得   最近公司网站进行升级,项目要用.net mvc,mysql和轻量级orm框架dapper.由于美工页面出不来啊,让我先写简单写写后台的列表,同事说用MvcJqGrid ...

  2. 逻辑回归模型(Logistic Regression, LR)基础

    逻辑回归模型(Logistic Regression, LR)基础   逻辑回归(Logistic Regression, LR)模型其实仅在线性回归的基础上,套用了一个逻辑函数,但也就由于这个逻辑函 ...

  3. CLR 的执行模型(2)

    第一章 CLR 的执行模型(2) 本篇内容大纲 Framework 类库(Framework Class Library , FCL) 通用类型系统(Common Type System,CTS) 公 ...

  4. YPreLoad

    Javascript库   发布我的控件系列:图片预加载控件YPreLoad v1.0 摘要: 介绍大家好!很高兴向大家介绍我的图片预加载控件YPreLoad.它可以帮助您预加载图片,并且能显示加载的 ...

  5. ubuntu 下面手动安装jdk

    ubuntu 下面手动安装jdk 刚才在ubuntu安装jdk和eclipse,感觉主要安装jdk比较麻烦,记录一下笔记以备后面查看 先在官网上下载jdk的tar包:http://www.oracle ...

  6. JavaScript function函数种类介绍

    JavaScript function函数种类介绍 本篇主要介绍普通函数.匿名函数.闭包函数 1.普通函数介绍 1.1 示例 ? 1 2 3 function ShowName(name) {     ...

  7. Java笔记:内部类

    1.把一个类放在另一类内部定义,这个定义在其他类里面的类就叫做内部类,包含内部类的类叫做外部类.内部类成员可以直接访问外部类的私有数据,但是外部类不能访问内部类的实现细节. 2.非静态内部类(没有st ...

  8. iOS GCD中级篇 - dispatch_group

    1.关于dispatch_group 把一组任务提交到队列中,这些队列可以不相关,然后监听这组任务完成的事件. 最常见的几个方法: 1.dispatch_group_create创建一个调度任务组 2 ...

  9. 结构-行为-样式-angularJs 指令实现滚动文字

    最近在做XX项目的大屏展示页面,有一个表格需要用到这个滚动效果,于是就写了个指令,记录下,共同学习. Html代码: <td word-roll tword="item"&g ...

  10. Js-Html 前端系列--点击非Div区域隐藏Div

    最近做项目要用到三字码下拉,调用一个插件,但是滚动条不能点击. 后来看另一个插件后突发奇想,在点击其他区域的时候隐藏这个Div就可以了. 背景:输入文字,弹出下拉Div,点击或者拉动Div滚动条选择, ...