HTML

标签：

HTML表单（表单不能嵌套表单 html----->属于结构层）：
 表单主要作用在于网页上提供一个图形用户界面，以采集和提交用户输入的数据。
 最小的表单格式：<form>标记有如下最小格式：
 <form action="表单处理程序的URL" method="post||get"></form>
 代码演示：
 <form action="#" method="post"></form>

单选按钮：
 如果单选按钮有多个，而用户只能选择一个那么就要按钮互视（只需要name属性相同）
 代码演示：
 <form action="#" method="post">
        <input type="radio" name="Gerder" checked>男 
        <input type="radio" name="Gerder">女
     </form>
 注：加入checked 则会默认选中

复选框：
 复选框中如果Name属性相同不会进行按钮互视 按钮互视只对单选框有用。
 代码演示：
 <form action="#" method="post">
        <input type="checkbox" name="UserAdss" value="1">成都
        <input type="checkbox" name="UserAdss" value="2">北京
        <input type="checkbox" name="UserAdss" value="3">上海
     </form>
 注：value="" 属性是为了我们后台获取用户选择的东西

隐藏字段：
 隐藏字段给我们提供了一种方法，在用户可以看见的表单控件之外，收集名称和值信息。
 代码演示：
 <input type="hidden" name="UserName" value="1">隐藏用户ID

上传控件：
 有时候用户需要上传自己的头像或者文档，所以我们需要一个上传一个控件的方法
 代码演示：
 <input type="file">
 注：提交图片必须使用Post方式来提交，get提交的东西不能满足用户

下拉列表：
 表单上有很多复选框时，会占据大量的空间，使网页看起来相当混乱。所以会使用下拉列表
 代码演示：
  <select>
        <option selected>成都</option>
        <option>上海</option>
        <option>北京</option>
     </select>
 注：selected>属性表示默认选中 而加上Size属性则是初始就显示几个

多行文本框：
 在表单中只允许单行文本，所以有时候需要多行文本框。
 代码演示：
 <textarea cols="50" rows="30"></textarea>
 注：cols 和 rows 是设置多行文本框的初始值

提交按钮：
 当用户添加好自己的信息后需要将信息提交，所以需要一个提交按钮
 代码演示：
 <input type="submit" value="注册">
 注：value 属性 设置按钮的名字 默认为提交

重置按钮：
 当用户输入过多的信息后，却又不想慢慢的删除，所以添加一个重置按钮会人性化很多
 代码演示：
 <input type="reset" >
 
Label元素：
     加入了了Lable元素以后，当点击文字就可以直接进入输入框 更人性化一点
  代码演示：
      <label for="UserName">姓名：</label>
          <input type="text" id="UserName">

fieldset和legend元素：
   fieldset被作用表单元格元素的一个容器，他在被包含的元素周围显示一个细边框的盒子。
   legend元素放在fielfset内部，在盒子上加一个标题。
 代码演示：
       <fieldset>
            <legend>fieldset和legend 演示</legend>
            <P>你好 世界</P>
            </fieldset>

CSS------>表示层/样式层

在css中有三种样式分别为：行内样式 、内部样式/嵌入式样式 、外联样式

  行内样式：
      大多数的HTML标记都含有一个style属性，允许指定在标记的样式，这种样式规则的定义方法称为行内样式。
 代码演示：
 <h1 style="color: red">红色标题内行样式</h1>
   内部样式：
        嵌入式样式表示用<style>元素将样式包含在网页内部的样式设置，其作用范围仅限于该网页。
 代码演示：
  <style type="text/css">
        ....样式定义....
     </style>
   外联样式：
        可以将样式的定义放在一个单独文件中，并且在需要该样式的文档中引用，这种样式表称为外联样式
 代码演示：
  <link rel="stylesheet" type="text/css" href="样式的CSS文件">

选择器：
  选择器指定样式规则可作用于HTML文档中哪一个或者哪一些元素。

ID选择器：
  通过ID来改变元素的样式，但是如果有多个就很麻烦。
 代码演示：
  <style type="text/css">
      #p1{
          color: red;
       }
   </style>
 <P  id="p1">ID选择器将元素改变为红色</P>
元素选择器：
  通过元素来修改样式，在此网页中所以该元素的样式都会被改变。
 代码演示：
 <style type="text/css">
      p{
          color: red;
       }
  </style>
 <P>元素选择器将元素改变为红色</P>
     <P>元素选择器将元素改变为红色</P>

类选择器：（class选择器）
   通过元素的class名来修改元素样式，不会出现ID选择器一样不能重复ID，因为class名是可以重复的。
 代码演示：
 <style type="text/css">
      .c1{ <!-- 注：这里一定记得加 . --->
          color: red;
       }
   </style>
 <P class="c1">类选择器将元素改变为红色</P>
     <P class="c1">类选择器将元素改变为红色</P>

通配选择器：
   通配选择器关键字* 表示选择器用于所有元素
 代码演示：
 <style type="text/css">
      *{
          color: red;
       }
   </style>
 <P>通配选择器将元素改变为红色</P>
    <P>通配选择器将元素改变为红色</P>
     <h1>通配选择器将元素改变为红色</h1>

群组选择器：
   群组选择器当选中的元素就将改变样式而没有选中的则不会改变样式
 代码演示： 
 <style type="text/css">
      .p1 , .p2{<!---注意别忘记点 和 逗号--->
          color: red;
       }
   </style>
 <P class="p1">群组选择器将元素改变为红色</P>
     <P class="p2">群组选择器将元素改变为红色</P>
     <P class="p3">群组选择器没有选中的则不更改样式</P>

HTML

标签：

原文地址：http://www.cnblogs.com/li1223829741/p/5618841.html