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设置两个盒子之间的距离；

上一篇： NVIDIA：矿难影响已经过去高举光线追踪大旗

下一篇：大唐双子座！高仙芝和封常青被斩杀基定国家灭亡的命运！

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

Part01:HTML表单标签、div标签

Part02:CSS概述

Part03：CSS选择器

Part04：CSS的样式

用尽量少的DIV 标签配合样式如何实现下面2图效果（不考虑兼容性，不允许使用图片或背景图）？_html/css_WEB-ITnose

用尽量少的DIV 标签配合样式如何实现下面2图效果（不考虑兼容性，不允许使用图片或背景图）？_html/css_WEB-ITnose

第二十六课：表单标签，div和span选择器，css选择器，文本相关样式，浮动，盒子模型

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

html P标签为什么不能嵌套div？还有关于html P标签的css样式的实例介绍

内联标签的使用 & css样式的使用与优先级 & css选择器的使用与优先级 & 盒子模型简析--2019年9月2日20:00

html的iframe标签，css样式优先级，css标签选择器，css盒子模型的代码演示—2019/9/2作业