欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Web02(HTML表单标签、div标签、CSS概述、CSS选择器、CSS的样式、CSS的盒子模型)

程序员文章站 2022-04-27 22:30:04
...

Part01:HTML表单标签、div标签

1、<form>表单标签:

  • 作用:主要是用来收集用户的数据,提交到服务器
  • 子标签:
    • <input/>:输入框,一共有10种
      • 通过设置type属性的值来设置输入框样式
        • 值为“text”:文本输入域,显示文本内容,默认的
        • “password“:密码输入域,显示加密文本
        • ”radio”:单选框
        • “checkbox”:复选框
        • “button”:普通按钮
        • “reset”:重置按钮,value默认值为”重置“,把表单里的值全部重置
        • “submit":提交按钮,把数据提交到服务器
        • ”image“:图片按钮,可以给按钮设置图片背景
        • “hidden”:隐藏域,数据会提交,但是页面上看不见
        • “file”:文件上传组件,可以选择本地文件上传
      • name属性的作用:
        • 给标签起名字
        • 给单选框和复选框分组,name一样的分为一组,同一组的单选框只能选一个
        • 有name属性的标签的数据才会提交
      • value属性的作用:
        • 修改按钮显示的文字
        • 当标签是单选框或者复选框时,每一个选项必须设置value值,否则提交数据的值是on;
    • <select>:下拉选择框,默认没有内容
      • 子标签设置下拉内容
    • <textarea>:文本区域
      • 属性rows:行数
      • 属性cols:列数

2、表单的数据提交:

  • 点击提交(type=“submit”)按钮时,数据就会自动提交到服务器;
  • 以直接跟在地址栏的地址后面的方式提交到服务器的;
    • 格式:?属性名=属性值&属性名=属性值
    • ?是一个分隔符,代表后面是用户的数据(用户的参数)
  • 只有设置了name属性的标签的值才可以提交;
  • 当标签是单选框或者复选框时,每一个选项必须设置value值,否则提交数据的值是on;
  • select标签也可以设置value值,如果没有设置,默认提交数据的值就是子标签中的内容;

3、表单标签在网页上显示的默认值:

  • type=“text”标签的默认值通过value属性设置;
  • type=“password”标签的默认值也是通过value属性设置;
  • type=“radio”标签的默认值通过设置cheched属性的值为“cheched”或“true”设置;
  • type=“checkbox”标签的默认值也是通过设置cheched属性的值为“cheched”或“true”设置
  • 标签的默认值就是写在开始标签和结束标签之间的内容;
  • 标签的默认值是在子标签中加上select属性或者设置属性selected=“selected”;

4、表单标签<form>的自身属性

  • action:动作属性,表示要把数据提交到的服务器,值为网络地址
  • method:方法属性,表示要提交数据的方式,值有两种:
    • get(默认):把数据直接拼接到地址后面提交,不安全,长度有限制

    • post:把用户数据打包后提交,不显示在地址栏,相对于get方式更安全

        <form action="#" method="post">
            姓名:<input type="text" name="username" value="张三"/><br/>
            密码:<input type="password" name="password"/><br/>
            性别:男<input type="radio" name="sex" value="1" checked="checked"> &nbsp;&nbsp;女<input type="radio" name="sex" value="0"/><br/>
            爱好:吃<input type="checkbox" name="hobby" value="01"> 喝<input type="checkbox" name="hobby" value="02"> 玩<input type="checkbox" name="hobby" value="04"> 睡<input type="checkbox" name="hobby" value="05"/><br/>
            头像:<input type="file"><br/>
            个性签名:<textarea>这是个性签名</textarea><br/>
            省份:
            <select>
                <option>江西</option>
                <option selected="selected">福建</option>
                <option>山西</option>
                <option>广东</option>
            </select><br/>
            <input type="button" value="确认"/>
            <input type="submit"/>
            <input type="reset"/><br/>
        </form>
      

Web02(HTML表单标签、div标签、CSS概述、CSS选择器、CSS的样式、CSS的盒子模型)
5、<div>标签:

  • 是一个块级元素,独立占一行的元素;
  • 独自不能实现复杂效果,必须结合CSS样式进行渲染;

6、<span>标签:

  • 行内标签,不会自动换行;

Part02:CSS概述

1、CSS:

  • CSS通常称为CSS样式或层叠样式表,主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(高宽、边框样式、边距等)以及版面的布局等外观显示样式;
  • CSS可以使HTML页面更好看,CSS色系的搭配可以让用户更舒服,CSS+DIV布局更加灵活,更容易绘制出用户需要的结构;

2、CSS的代码规则:

  • 选择器{
    属性名:属性值;
    属性名:属性值;
    }

3、CSS注意事项:

  • CSS样式“选择器”严格区分大小写,“属性名”和“属性值”不区分大小写

  • 多个属性之间必须用英文状态下的分号隔开;

  • 如果某个属性(border属性除外)的值由多个单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号。如:
    P{
    font-family:“Times New Roman”;
    }

  • 注释格式:/*注释内容*/;

  • CSS中空格是不被解析的;花括号以及分号前后的空格可有可无。

  • 注意⚠️:属性的值和单位之间是不允许出现空格的,否则浏览器解析时会出错;

      h1{
      Font-size:20px;  /*20和单位px之间不能有空格*/
      }
    

4、CSS样式的三种引入方式:

  • 行内样式:在标签的style属性值中写CSS代码,注意⚠️:此时选择器和大括号不用写,只需写 属性名:属性值,多个用分号隔开;
  • 内部样式:写在<head>标签的子标签<style>中;
  • 外部样式:在另一个文件中写,这个文件的后缀必须是.css;通过<head>标签的子标签<link>标签引人xxx.css文件;
    注意⚠️:如果三种样式里有冲突的属性值,采用就近原则;
    //html代码
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--内部样式-->
        <style>
            h1{
                color: aqua;
                text-align: center;
            }
        </style>
        <!--外部样式-->
        <link rel="stylesheet" href="../css/cssDemo.css"/>
    </head>
    <body>
    <!--行内样式-->
    <h1 style="font-size: 100px">CSS样式</h1>
    
    //cssDemo.css代码
    h1{
        background-color: aquamarine;
    }

Part03:CSS选择器

1、CSS中的选择器:

  • 要想将CSS样式应用于特定的HTML元素,首先要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。
  • 作用:它的作用就是选中某个或某些标签,以便于我们设置样式效果;

2、三种基本的选择器:

  • 标签/标记/元素选择器:选中了我们指定名字的所有标签
    • 格式:标签名{属性名:属性值;}
  • id选择器:选中指定id值的标签
    • 格式:#id值{属性名:属性值;}
  • class选择器:选中指定class值的标签
    • 格式:.class值{属性名:属性值;}
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器*/
        h1{
            text-align: center;
        }
        /*id选择器*/
        #h001{
            font-size: 100px;
        }
        /*class选择器*/
        .head{
            background-color: aqua;
        }
    </style>
</head>
<body>
<h1 id="h001" class="head">标题1</h1>
<h1>标题1</h1>
<h2 class="head">标题2</h2>
</body>

3、扩展的两种选择器:

  • 属性选择器(过滤选择器):
    • 只选中符合我们要求属性值的标签
    • 格式:标签名[属性名=属性值]{属性名:属性值;}
<head>
<style>
/*属性选择器*/
    input[type=text]{
         background-color: antiquewhite;
    }
</style>
</head>

<body>
<input type="text" value="1"/>
<input type="password" value="222"/>
<input type="text" value="222”/>
</body>

Web02(HTML表单标签、div标签、CSS概述、CSS选择器、CSS的样式、CSS的盒子模型)

  • 包含选择器(后代选择器):
    • 选择包含在选择器1中的选择器2的标签,可以是直接子元素,也可以是间接子元素
    • 选择器1 选择器2{属性名:属性值;}
<head>
<style>
/*包含选择器*/
div h1{
    font-size: 10px;
}
</style>
</head>

<body>
<h1>标题</h1>
<div>
    <h1>标题</h1>
</div>
</body>

Part04:CSS的样式

1、CSS中常见的样式(选择器中的属性名):

  • 边框和尺寸:
    • border:边框样式
      • border:边框的宽度 边框的样式 边框的颜色
        • 边框宽度:单位px
        • 边框样式:double:双线边框、solid:实线边框
          div{
          border: 10px double red;
          }
    • width:宽度,单位px
    • height:高度,单位px
  • 字体:
    • color:内容的颜色
    • font-size:内容的文字大小,单位px
  • 背景色:
    • background-color
  • 转换样式:
    • display
      • 值:block(转成块级元素)
      • 值:inline(转成行内元素)
      • 值:none(隐藏)
  • 浮动样式:
    • float:设置元素的浮动效果,让元素浮起来;
      • 值:left(飘起来向左)
      • 值:right(飘起来向右)
    • clear:清除元素浮动效果
      • 值:both(清除元素两边的浮动效果)
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border:1px solid rebeccapurple;
            font-size: 30px;
            text-align: center;
            width: 50px;
            height: 50px;
            float: left;
        }
    </style>
</head>
<body>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div style="clear: both">1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</body>
</html>

Web02(HTML表单标签、div标签、CSS概述、CSS选择器、CSS的样式、CSS的盒子模型)
Part05:CSS的盒子模型
1、CSS盒子模型:

  • CSS把每个标签都认为是一个盒子,把标签中的内容认为是盒子中的元素,默认盒子和元素一样大;
  • 通过设置内边距padding设置盒子中的元素和盒子的距离,元素大小不会变,可以通过padding-left/right/top等单独设置;
  • 通过设置外边距margin设置两个盒子之间的距离;

推荐阅读