JavaWeb第二章：HTML和CSS的知识制作静态网页

喜欢ヅ旅行 2024-04-20 14:28 32阅读 0赞

**目录**

前言

一.HTML和CSS的介绍

?HTML的基本框架

二.HTML常用标签大全

三.资源路径讲解

?路径

?图片 img标签讲解

?超链接标签讲解

四.CSS

?CSS的引入方式

五.HTML页面布局

?盒子模型介绍

?盒子模型组成

?盒子模型的代码

六.HTML的表格与表单

?表格制作

?表单制作

✨表单的基本格式

✨表单项的介绍

总结

--------------------

> ?个人主页：[tq02的博客\_CSDN博客-C语言,Java,Java数据结构领域博主][tq02_CSDN_-C_Java_Java]  
> ? 本文由 tq02 原创，首发于 CSDN?  
> ? 本章讲解内容：**JavaWed的HTML和CSS学习**
> 
> ?欢迎各位→**点赞**? + **收藏**⭐ + **评论**?+**关注**✨
> 
> ![ae2584cf8f514cffb7eb41d62bfa2aeb.png][]
> 
> 编译器：VS Code

## 前言 ##

> 在讲述HTML和CSS之前。我们需要确保是否安装了VSCode编译器。如果你还未安装，博主安装教导指南：[http://t.csdn.cn/IdTFU][http_t.csdn.cn_IdTFU]

## 一.HTML和CSS的介绍 ##

> **HTML**:超文本标记语言，分为2个部分组成：超文本和标记语言
> 
> **CSS**：层叠样式表，用于控制页面的样式。
> 
> --------------------
> 
> 联系：CSS直接控制了HTML语言的**大小、颜色**等。

例如：使用**HTML输出一句话，但是通过CSS，可以控制文字的大小、颜色、对齐方式**。

--------------------

### ?HTML的基本框架 ###

> HTML使用**标签来构成语言**，而标签分为了两种：
> 
> 1.  带有标签体的标签< a>标签体< /a >
> 2.  不带标签体的标签(自结束标签)< br/>,< hr/>

实例与讲解：

![9383644a59d74fbcb0c6e9ab90459327.png][]

> 1.  上图是HTML文档中必需的最基本的标签，<head>与<boby>
> 2.  每一个标签都有其特性，但是大部分标签都是需要对应的**闭合标签**，例如：</head>就是<head>的闭合标签
> 3.  <head>标签:用于定义文档的头部,描述了文档的各种**属性和信息**,可包含标签:：<base>, <link>, <meta>, <script>, <style>, 以及 <title>
> 4.  <body> 标签:包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

--------------------

## 二.HTML常用标签大全 ##

<table style="width:600px;"> 
 <tbody> 
  <tr> 
   <td style="width:106px;"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类型</strong></td> 
   <td style="width:126px;"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标签</strong></td> 
   <td style="width:268px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;描述</strong></td> 
  </tr> 
  <tr> 
   <td colspan="1" style="width:106px;"><strong>&nbsp; &nbsp; 基础标签</strong></td> 
   <td style="width:126px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;</td> 
   <td style="width:268px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义一个段落</td> 
  </tr> 
  <tr> 
   <td style="width:126px;">&nbsp; &nbsp; &nbsp; &nbsp; &lt;br&gt;</td> 
   <td style="width:268px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义简单的换行&nbsp;&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="width:126px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;hr&gt;</td> 
   <td style="width:268px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义水平线</td> 
  </tr> 
  <tr> 
   <td style="width:126px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-...--&gt;</td> 
   <td style="width:268px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义一个注释</td> 
  </tr> 
  <tr> 
   <td colspan="1" style="width:106px;"><strong>&nbsp; &nbsp; &nbsp;格式</strong></td> 
   <td style="width:126px;">&nbsp; &nbsp; &nbsp; &nbsp; &lt;b&gt;</td> 
   <td style="width:268px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义粗体文本</td> 
  </tr> 
  <tr> 
   <td style="width:126px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt; i &gt;</td> 
   <td style="width:268px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义斜体文本</td> 
  </tr> 
  <tr> 
   <td style="width:126px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt; u &gt;</td> 
   <td style="width:268px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义下划线文本</td> 
  </tr> 
  <tr> 
   <td style="width:126px;">&nbsp; &nbsp; &nbsp; &lt; em &gt;</td> 
   <td style="width:268px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义强调文本</td> 
  </tr> 
  <tr> 
   <td style="width:126px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt; del &gt;</td> 
   <td style="width:268px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义被删除的文本</td> 
  </tr> 
  <tr> 
   <td style="width:126px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt; time &gt;</td> 
   <td style="width:268px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义一个时间/日期</td> 
  </tr> 
  <tr> 
   <td colspan="1" style="width:106px;"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;表单</strong></td> 
   <td style="width:126px;">&nbsp; &nbsp; &nbsp; &lt;form&gt;</td> 
   <td style="width:268px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义一个 HTML 表单，用于用户输入</td> 
  </tr> 
  <tr> 
   <td style="width:126px;">&nbsp; &nbsp; &nbsp;&lt; input &gt;</td> 
   <td style="width:268px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义一个输入控件</td> 
  </tr> 
  <tr> 
   <td style="width:126px;">&nbsp; &nbsp; &nbsp;&lt; label &gt;</td> 
   <td style="width:268px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义input元素的标注</td> 
  </tr> 
  <tr> 
   <td style="width:126px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt; button &gt;</td> 
   <td style="width:268px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义按钮</td> 
  </tr> 
  <tr> 
   <td style="width:126px;">&nbsp; &nbsp; &lt; select &gt;</td> 
   <td style="width:268px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义选择列表（下拉列表）</td> 
  </tr> 
  <tr> 
   <td style="width:126px;">&nbsp; &nbsp; &nbsp;&lt; option &gt;</td> 
   <td style="width:268px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定义选择列表中的选项</td> 
  </tr> 
  <tr> 
   <td colspan="1" style="text-align:center;width:106px;"><strong>图像</strong></td> 
   <td style="text-align:center;width:126px;">&lt; img &gt;</td> 
   <td style="text-align:center;width:268px;">定义图像</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:126px;">&lt; audio &gt;</td> 
   <td style="text-align:center;width:268px;">定义声音，比如音乐或其他音频流</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:126px;">&lt; video&gt;</td> 
   <td style="text-align:center;width:268px;">定义一个音频或视频</td> 
  </tr> 
  <tr> 
   <td colspan="1" style="text-align:center;width:106px;"><strong><em>链接</em></strong></td> 
   <td style="text-align:center;width:126px;">&lt; a &gt;</td> 
   <td style="text-align:center;width:268px;">定义一个链接</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:126px;">&lt; link &gt;</td> 
   <td style="text-align:center;width:268px;">定义文档与外部资源的关系</td> 
  </tr> 
  <tr> 
   <td colspan="1" style="text-align:center;width:106px;"><strong>表格</strong></td> 
   <td style="text-align:center;width:126px;">&lt; table &gt;</td> 
   <td style="text-align:center;width:268px;">定义一个表格</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:126px;">&lt; th &gt;</td> 
   <td style="text-align:center;width:268px;">定义表格中的表头单元格</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:126px;">&lt; tr &gt;</td> 
   <td style="text-align:center;width:268px;">定义表格中的行</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:126px;">&lt; td &gt;</td> 
   <td style="text-align:center;width:268px;">定义表格中的单元</td> 
  </tr> 
  <tr> 
   <td colspan="1" style="text-align:center;width:106px;"><strong><em>样式</em></strong></td> 
   <td style="text-align:center;width:126px;">&lt; style &gt;</td> 
   <td style="text-align:center;width:268px;">定义文档的样式信息</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:126px;">&lt; div &gt;</td> 
   <td style="text-align:center;width:268px;">定义文档中的节</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:126px;">&lt; span &gt;</td> 
   <td style="text-align:center;width:268px;">定义文档中的节</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:126px;">&lt; header &gt;</td> 
   <td style="text-align:center;width:268px;">定义一个文档头部部分</td> 
  </tr> 
 </tbody> 
</table>

注:CSS是层叠样式表,因此,最后一行是CSS当中的.

--------------------

## 三.资源路径讲解 ##

> 在HTML文档中,我们可能会需要使用**图片** **视频**等,但是我们又怎么使用呢?
> 
> 答案:通过资源路径放入

### ?路径 ###

> 路径可分为2种,**绝对路径** **相对路径**
> 
> 1.  绝对路径:又细分成2种,一种是磁盘路径,另一种是网络路径
> 2.  相对路径:指以当前文件资源所在的目录为参照基础，链接到目标文件资源的路径。

**绝对路径**

> 1.磁盘路径:某个文件在电脑当中的位置.
> 
> ![09581c5f3f024951a378a8a7bbef807c.png][]

> 2.网络路径:指在计算机上查找的到的图片或者文档的链接(url):
> 
> 图片的 网络路径查找->**右击图片,复制图像链接**
> 
> ![6ce2eafa589e4f289d6e6d4d5d5eda65.png][]

--------------------

**相对路径**

> 相对路径中，有三个特殊含义的字符
> 
>  **./**: 代表的当前目录
> 
> **../**:代表的是上一级目录
> 
> **/** : 代表跟目录，在win下指的是c盘，在linux下是跟目录，基本不用

例如:

![243b9d0a546a4e578fb29f8887185e8e.png][]

> 当游戏文档访问奥特曼图片时,由于图片和游戏文档在相同的目录下,
> 
> 相对路径为: ./奥特曼.png
> 
> 而../one/cc/电影记录.doc ../代表上一个目录(one) /则代表当前目录下的某个文件
> 
> 注: **./**单独出现时,可以省略

--------------------

### ?图片<img>标签讲解 ###

> 用于在**文档中插入图片**
> 
> 语法格式:
> 
> 1.  **<img src="图片资源路径" >**
> 2.  **<img src="图片资源路径" width(或 length)=' 20px(或者 20%) ' >**
> 
> **第一种** 将图片按原本大小展开.
> 
> **第二种**  输入宽度或者高度,会自动成比例展开,百分比是原来图片的宽度(高度)的百分比.

![436106d7033c432c9059b759bfc96de5.png][]

### ?超链接<a>标签讲解 ###

> 用于**添加链接**,当你点击文字时,自动跳转相关链接
> 
> 语法格式:
> 
> 1.  **<a href= "" target = " " > 文本内容 </a>**
> 
> **href** : 指定资源访问的url(链接)
> 
> **target** : 指定如何打开链接页面 (2种方法,  \_self:当前页面  \_blank: 新的页面) **默认:\_self**

<html lang="en">
    <head>
        <title>Document</title>
    </head>
    
    <body>   
            //点击tq02的博客,就可以进入
         <a herf="https://blog.csdn.net/m0_74097410?type=blog" target=_blank >
            tq02的博客
        <a>
    </body>
    </html>

## 四.CSS ##

### ?CSS的引入方式 ###

> 想要控制页面样式,则需要在HTML文档中引入CSS,以便控制文档格式.
> 
> 注: **color:设置文本颜色 font-size:文本大小(数字后加px)**

> **1.行内样式**
> 
> 写在某个标签中的style属性当中.
> 
> 语法格式: **<标签名 style=" 样式控制要求 "> 内容 </标签名>**

示例：

![847df4d2439b4e4f9bfa683d9812b1fa.png][]

>  **2.外联样式**
> 
> 写在一个单独的.css文件当中,需要时,直接调用.

//new.css文件
    p{
        color: red; 
        font-size: 18px;"
    }
    
    //html文档
    <html lang="en">
    <head>
        <title>Document</title>
        
        //引入一个层叠样式表 herf接收文件路径
        <link rel="stylesheet"  herf="new.css">
    
    </head>
    
    <body>
        
    </body>
                 //文档内容显示出来依然是  红色字体  字体大小为18
        <p >
            我爱中国，我爱学习，我爱Java，我爱CSDN
        </p>
    
    </html>

> **3.内嵌样式**
> 
> 写在style标签当中,然后进行使用.而这种方法又叫**css选择器,**接下来我们讲解三种CSS选择器.分别为:元素选择器 id选择器 类选择器
> 
> 注:三种选择器必须在style标签当中,而style标签得在 head标签 里

![05899d4dab1e4626ac1ea8d72c800831.png][]

完整代码:

<html lang="en">
    <head>
        <title>Document</title>
    <style>
        //元素选择器
          p{
             color:red;
            }
        //id选择器
         #d{
            color:red;
           }
        //类选择器
        .cls{
             color:red;
           }
    </style>
    
    </head>
    <body>    
    </body>     
     //--------------元素选择器  
         <p>
            我爱中国，我爱Java，我爱学习。
        </p>
    //--------------id选择器
        <p  id="d">
            我爱中国，我爱Java，我爱学习。
        </p>
    //--------------类选择器
         <p class="cls">
           我爱中国，我爱Java，我爱学习。
        </p>
    
    </html>

--------------------

## 五.HTML页面布局 ##

你有没有发现,我们编译出来的页面,似乎是全屏的,而不像平常的页面,可以把内容放在中间,例如下图,图中很明显内容是居中的,可是这到底是怎么操作的呢?

![fc4bfc1b53b4465e8f495b2b22d4e389.png][]

### ?盒子模型介绍 ###

> 页面中的每一个标签，都可看做是一个 “盒子” ，通过盒子的视角更方便的进行布局,在网页当中也需要使用盒子模型,而我们可以在当前网页右击,点击检查,然后可以从已计算中查看到盒子模型。

![680a365990414055ae0b709181f28088.png][]

### ?**盒子模型组成** ###

**CSS** 中规定每个盒子分别由： 内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成.

> **内容区域**（content）: 我们存放的数据,可以设置高和宽
> 
> ➢ 属性： width / height  
> ➢ 常见取值：数字+px

> **边框区域(border)**: 设置边框粗细、边框样式、边框颜色效果
> 
> <table style="width:600px;"> 
>  <tbody> 
>   <tr> 
>    <td style="width:114px;"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;作用</strong></td> 
>    <td style="width:172px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; 属性名</strong></td> 
>    <td style="width:212px;"><strong>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;属性值</strong></td> 
>   </tr> 
>   <tr> 
>    <td style="width:114px;">边框粗细</td> 
>    <td style="width:172px;">border-width</td> 
>    <td style="width:212px;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 数字+px</td> 
>   </tr> 
>   <tr> 
>    <td style="width:114px;">边框样式</td> 
>    <td style="width:172px;">border-style</td> 
>    <td style="width:212px;">solid（实线）、dashed（虚线）dotted（点线）</td> 
>   </tr> 
>   <tr> 
>    <td style="width:114px;">边框颜色</td> 
>    <td style="width:172px;">border-color</td> 
>    <td style="width:212px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 颜色取值</td> 
>   </tr> 
>  </tbody> 
> </table>
> 
> 如：border：10px solid red；注：中间没有逗号

> **内边距（ padding ）：**设置 ***边框*** 与 ***内容区域*** 之间的距离
> 
> 语法格式：**padding ：上边距 右边距 下边距 左边距；**
> 
> **边距的取值：数+px 、 百分数**
> 
> --------------------
> 
> 例：padding：10px 20px 30px 40px；上边距为10，右边距为20 下边距为30 左边距为40
> 
> padding：20px； 上下左右的边距都为20
> 
> padding：20%； 上下边距的距离都为页面的百分之20

> **外边距（margin）**：设置边框以外， 盒子与盒子之间的距离
> 
> 语法格式： **margin：上边距 下边距 左边距 右边距；**
> 
> **边距取值：数+px 、百分数**

--------------------

### ?盒子模型的代码 ###

> 盒子模型的**创建：使用元素选择器----div\{ \}**, 将盒子模型的**数据包裹在****div\{ \}**当中并且必须得在style<>标签当中。
> 
> 使用时： 将需要的排版的内容放在**<div> 内容 </div>**当中。

代码格式：

<html lang="en">
    <head>
        <title>Document</title>
        <style>
            div{
                /* 盒子模型的各项数据 */
            }
        </style>  
    </head>
    
    <body>   
       <div>
            
       </div>
    </body>
    </html>

> 而代码可能又存在三种情况
> 
> 1.  正常情况，每一个属性都存在。
> 2.  某个属性不存在，例如，没有标明padding的值，则为0。
> 3.  使用了box-sizing属性，当box-sizing=border-box时，原本content的高与宽，变成了border的高与宽了。

**实例1：**

![860d3053d60b4fe3b0db44ec66de8d6f.png][]

**实例2：**

![f2fcd666740d4700a6ff0fb098bf79e7.png][]

注：如果padding(内边距）、margin(外边距)、border(边框)在在代码中没有写出来，默认是为0。

**实例3：**

![adaf194ae8704f488b635585fd335973.png][]

--------------------

## 六.HTML的表格与表单 ##

### ?表格制作 ###

> 表格的制作，需要使用到**<table>标签**，以及<tr>、<td>、<th>等
> 
> 并且单元格的大小完全由字体大小所支撑。

<table style="width:600px;"> 
 <tbody> 
  <tr> 
   <td style="width:124px;"><strong>标签</strong></td> 
   <td style="width:153px;"><strong>描述</strong></td> 
   <td style="width:296px;"><strong>属性值</strong></td> 
  </tr> 
  <tr> 
   <td style="width:124px;">&lt;table&gt;</td> 
   <td style="width:153px;">定义表格整体</td> 
   <td style="width:296px;">border（边框宽度）、width（表格高度）、cellspacing（单元之间的空间）</td> 
  </tr> 
  <tr> 
   <td style="width:124px;">&lt;tr&gt;</td> 
   <td style="width:153px;">表格的行</td> 
   <td style="width:296px;">无</td> 
  </tr> 
  <tr> 
   <td style="width:124px;">&lt;td&gt;</td> 
   <td style="width:153px;">定义单元格的内容</td> 
   <td style="width:296px;">无</td> 
  </tr> 
  <tr> 
   <td style="width:124px;">&lt;th&gt;</td> 
   <td style="width:153px;">定义表头单元格，加粗</td> 
   <td style="width:296px;">无</td> 
  </tr> 
 </tbody> 
</table>

代码示例：

<html lang="en">
    <head>
        <title>Document</title>
    </head>
    
    <body>   
    
        <table border="10px" cellspacing="0" width="200px">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>照片</th>
                <th>种族</th>
            </tr>
            <tr>
                <td>1</td>
                <td>奥天</td>
                <td><img src="https://i03piccdn.sogoucdn.com/3224facac5e1b61a" width="=100px"></td>
                <td>神秘系</td>
            </tr>
            <tr>
                <td>2</td>
                <td>沫沫</td>
                <td><img src="https://newsimg.5054399.com/uploads/userup/2306/21140255C28.jpg" width="100px"></td>
                <td>超神</td>
            </tr>
            <tr>
                <td>3</td>
                <td>伊乐</td>
                <td><img src="https://newsimg.5054399.com/uploads/userup/2306/211400423429.jpg" width="100px"></td>
                <td>无</td>
            </tr>
        </table>
    
    </body>
    </html>

### ?表单制作 ###

> 问：什么是表单？
> 
> 答：可以包含 单选框、复选框、单选框、文本域等
> 
> 问：表单的标签是什么？
> 
> 答：<form>
> 
> 问：那如何表示为单选框或者复选框呢？
> 
> 答：使用表单项 通过type属性  控制输入形式！

#### ✨**表单的基本格式** ####

> 标签为<form> 属性有 action、method等。
> 
> action: 规定当提交表单时向**何处**发送表单数据----->链接
> 
> method:规定用于发送 表单数据 的方法----->get、post
> 
>     < form action=" url " method="  post/get  ">   
>         //各种各样的表单项
>     </form>
> 
> 注 get：表单数据拼接在 **url** 后面，传输大小有限制
> 
> post： 表单数据在请求体中携带，大小无限制

#### ✨表单项的介绍 ####

> <input>: 表单项，通过控制**type属性**控制 输出形式
> 
> <select>： 定义下拉列表 ，<option> 定义列表项
> 
> <textarea>：文本域

> **单行的输入字段**
> 
> type取值：text
> 
> 语法格式：<input type="text" name=" 表单的名称 ">
> 
> 例如：
> 
> ![6e6557e6d0b5456ca079ea09f81793ef.png][]

> **密码框**
> 
> type取值：password
> 
> 语法格式：<input type="password" name=" 表单的名称 ">
> 
> 例如：
> 
> ![2870b7cf780b4400b6b49257c7189219.png][]

> **单选框**
> 
> type的取值：radio
> 
> 语法格式是：<input type="radio" name=" 表单的名称 " value=" 当前框的名字 ">
> 
> 由于是单选框，所以得 **表单的名称** 一样。
> 
> ![9b49aa27c9674913a516cd6aff6a109d.png][]

> **时间框**
> 
> 时间分为三种，日期、时间、日期时间。
> 
> type的取值分别为：data time datatime-local
> 
> 例如：
> 
> ![f9b0b33a6ce84c9981b0dd73b54a1dd8.png][]

> **下拉框** 
> 
> 不是使用input了，而是select、option，其option属性是 value。
> 
> 例如：![b6d106b53f3e42d08386de4184ef3c5f.png][]

> **文本域**
> 
> 不使用input，不同于单行输入框，可以选择框的**宽和高，对应的属性：col、row**
> 
> 例如：  
> ![9b52c608046843608aca0120ef67cae0.png][]

> **常见按钮框**
> 
> 分别是：按钮、垂直、提交
> 
> 对应的type：button 、reset 、submit，属性值：value
> 
> 例如：
> 
> ![b273091ae47d4d56a16f422358920c9e.png][]
> 
> 细心的小伙伴们肯定可以发现，此时此刻，value的值直接显示在了按钮上。

--------------------

## 总结 ##

看你看到这里的时候，恭喜你成功得熟悉了HTML和CSS的操作。为了加深印象，博主写了一份代码供大家参考，以此来快速掌握HTML和CSS的操作。

<head>
        <title>游戏</title>
        <style>
            #a{
                width:592;  height: 397;
               background-image: url(//背景图链接 );
                
                border: 5px  solid  blanchedalmond;
                margin: 13% 32% 0% 32%;
            }
    
            h1{
                text-align:center;
                font-size: 30px;;
                color: black;
            }
    
          p{
            text-align:center;
          }
    
          #s{
            width: 100px;
            text-align:center;
          }
        </style>
    </head>
    
    <body>   
        <br>
        <div id="a"  >
            <h1>
                拳击游戏
            </h1>
            <br><br><br><br><br><br><br><br>
            <p>
                玩家： <input type="text" name="name"><br><br>
                性别：<label><input type="radio" name="graden" value="1">男</label> 
                    <label><input type="radio" name="graden" value="2">女</label><br><br>
                等级：<select name="degree" >
                    <option value="">----请选择----</option>
                    <option value="1">青铜</option>
                    <option value="2">白银</option>
                    <option value="3">黄金</option>
                    <option value="4">铂金</option>
                </select>        <input type="button" value="进入游戏">  <input type="button" value="关闭游戏">
            </p>
         </div> 
    </body>
    </html>

\--------------懒惰的tq02

[tq02_CSDN_-C_Java_Java]: https://blog.csdn.net/m0_74097410?spm=1010.2135.3001.5343
[ae2584cf8f514cffb7eb41d62bfa2aeb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/60f2f0b273e24e7b92432374b6671b39.png
[http_t.csdn.cn_IdTFU]: http://t.csdn.cn/IdTFU
[9383644a59d74fbcb0c6e9ab90459327.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/99230d067f2f4755ad7f5604981baf57.png
[09581c5f3f024951a378a8a7bbef807c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/6d281b8c8a3a464293078fbef63331ad.png
[6ce2eafa589e4f289d6e6d4d5d5eda65.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/dc879cf8c981489dbdc1fe02c90afd31.png
[243b9d0a546a4e578fb29f8887185e8e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/0fe1b4feddf4403492c1b6f56c7576c9.png
[436106d7033c432c9059b759bfc96de5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/02784986982b43739aa45b77ea31f2b5.png
[847df4d2439b4e4f9bfa683d9812b1fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/1971852964da41d6bc4c732c61427aea.png
[05899d4dab1e4626ac1ea8d72c800831.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/202f13b90e0842d0965529c3fe1b2c17.png
[fc4bfc1b53b4465e8f495b2b22d4e389.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/3733103066ea41898171824f4f99d046.png
[680a365990414055ae0b709181f28088.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/735c84925b5c4fb6a84be4d33a0d6b9c.png
[860d3053d60b4fe3b0db44ec66de8d6f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/b456ee5124ce444b9351784782fa52ff.png
[f2fcd666740d4700a6ff0fb098bf79e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/9628510e77b44b4b87f67f6566d5205f.png
[adaf194ae8704f488b635585fd335973.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/a1da8314b1f04c8395c10b6f54ad423f.png
[6e6557e6d0b5456ca079ea09f81793ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/73bc975277f04d3cb5bd5cc4bfaa17c4.png
[2870b7cf780b4400b6b49257c7189219.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/0eab9a33b2bc4a2b974eb289a397943d.png
[9b49aa27c9674913a516cd6aff6a109d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/986d6720831e4e58a77f7ab536727160.png
[f9b0b33a6ce84c9981b0dd73b54a1dd8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/da3de2874695498291dca85f016205c7.png
[b6d106b53f3e42d08386de4184ef3c5f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/3b19b0feca3d4a8c92db786df9146776.png
[9b52c608046843608aca0120ef67cae0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/bc8a105ecb994301b01db3fbea2b04b0.png
[b273091ae47d4d56a16f422358920c9e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/9a5ca040195944e39fb0db2f5852ed8f.png