HTML(入门第二课)

Posted 2020-07-18

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>

包含选择器：
    包含选择器用于在文档树中一个元素的后代元素。其主要形式有三种：1.h1 b{ colcr:red } 只要包含在h1中的元素都将会被改变 2.h1+b{ colcr:red } 只有同级元素生效  3.h1>b{ colcr:red } 只对子元素生效而孙元素不生效。
 代码演示：
 1.
 <style type="text/css">
       div p{
          color: red;
       }

   </style>
 <div>
        <p>P元素生效其他元素不生效</p>
        <h1>不会生效</h1>
     </div>
 2.
   <style type="text/css">
       div+p{
          color: red;
       }

   </style>
  <div>
        <p>不是同级元素不会生效</p>
        <h1>不会生效</h1>
    </div>
    <p>同级元素生效</p>
 3.
 <style type="text/css">
      div>p{
          color: red;
       }

   </style>
 <div>
        <p>子元素生效</p>
        <p>子元素生效</p>
        <div>
            <h3>孙元素不会生效</h3>
        </div>
     </div>
     <p>同级元素不会生效</p>

伪类选择器：
   前面的选择器都是在文档树中，但是有时候我们需要格式化一些没有CSS选择器可用的东西，列如超级链接的状态。
   使用伪类选择器，可以以不同方式格式化超级链接<a>元素相关的四种不同状态：
 1.a:link是未访问的链接的选择器
 2.a:visited是在已访问过的链接选择器
 3.a:hover是用鼠标光标放在其上的链接选择器
 4.a:active是在获得焦点链接的选择器（点击后不放）
 
 代码演示：
 
 1.
 <style type="text/css">
       a:link{
         text-decoration: none;
       }

   </style>
 <a href="javascript:;">伪类选择器取消下划线 并且留在本页不跳到其他页面</a>

 2.
 <style type="text/css">
       a:visited{
         color: red;
       }

   </style>
 <a href="#">伪类选择器已访问过的链接变为红色</a>

 3.
 <style type="text/css">
       a:hover{
         color: red;
       }

   </style>
 <a href="#">伪类选择器当鼠标放上去但未点击会变为红色</a>

 4.
 <style type="text/css">
       a:active{
         color: red;
       }

   </style>
 <a href="#">伪类选择器当鼠标点击不松开会变为红色</a>

！important 可以提高选择器的优先级 但是一个网页中存在两个 ！important那则会抵消

属性选择器：
   当属性满足的时候则会改变样式 如果不满足则不会改变样式
 代码演示：
 未获得焦点的属性选择器：
 <style type="text/css">
       input[type=password]{
        background-color: red;
       }

       </style>
 是password则背景变为红色<input type="password">
     是text则不会修改样式<input type="text">
 获得焦点的属性选择器：
 <style type="text/css">
       input:focus[type=password]{
        background-color: red;
       }

   </style>
 是password并且获得焦点则背景变为红色<input type="password">
     是text则不会修改样式<input type="text">

CSS属性：
 长度单位：
 1.绝对长度：cm 、mm 、......
 2.相对长度：em 、px 、ex 、.... 注：em为动态的像素
 
 颜色单位：
 1.英文字母  2.使用十六进制数字 3.使用0-225之间的整数设置（color:rgb(128.0.128)）  4.用百分百来表示