day31_HTML&CSS

其他 2020-02-21 00:50:51 阅读次数: 0

表单标签

概念：用于采集用户输入的数据的。用于和服务器进行交互。form标签：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。

<form> 标签

标签定义及使用说明

<form> 标签的属性：

action：规定当提交表单时向何处发送表单数据。

method:规定用于发送表单数据的 HTTP 方式。一共7种，2种比较常用分别是get和post

  • get方式的特点：
    • 请求参数会在地址栏中显示。会封装到请求行中。
    • 请求参数大小是有限制的。
    • 不太安全。
  • post方式的特点：
    • 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
    • 请求参数的大小没有限制。
    • 较为安全。

注意：

表单项中的数据要想被提交：必须指定其name属性

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>

    <!--
        form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
            * 属性：
                * action：指定提交数据的URL
                * method:指定提交方式
                    * 分类：一共7种，2种比较常用
                        get：
                            1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
                            2. 请求参数大小是有限制的。
                            3. 不太安全。
                        post：
                            2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
                            2. 请求参数的大小没有限制。
                            3. 较为安全。

            * 表单项中的数据要想被提交：必须指定其name属性

    -->

<form action="#" method="post">

    用户名：<input type="text" name="username"><br>
    密码：<input name="password"><br>

    <input type="submit" value="登录" >
</form>

</body>
</html>

表单项标签

表单项标签有很多种，我们下面来一一介绍

<input> 标签

input：可以通过type属性值，改变元素展示的样式。我们一般使用label标签包裹input标签， label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。

标签定义及使用说明

  • <input> 标签规定了用户可以在其中输入数据的输入字段。
  • <input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。
  • 输入字段可通过多种方式改变，取决于 type 属性。
  • <input> 元素是空的,它只包含标签属性。

常用属性

type：当type的数值型不同的时候，我们的input作用和效果也不同。

  • 属性值为text：默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
  • 属性值为password：定义密码字段（字段中的字符会被遮蔽）。
  • 属性值为radio：定义单选按钮。注意：
    • 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
    • 一般会给每一个单选框提供value属性，指定其被选中后提交的值
    • checked属性，可以指定默认值
  • 属性值为checkbox：定义复选框。注意：
    • 一般会给每一个单选框提供value属性，指定其被选中后提交的值
    • checked属性，可以指定默认值
  • 属性值为file：定义文件选择字段和 "浏览..." 按钮，供文件上传。
  • 属性值为submit：提交按钮。可以提交表单
  • 属性值为button：定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
  • 属性值为image：定义图像作为提交按钮。src属性指定图片的路径

name 属性：规定 <input> 元素的名称。

src 属性：规定显示为提交按钮的图像的 URL。 (只针对 type="image")

value 属性： 指定<input>元素的值

placeholder属性：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

<select> 标签

标签定义及使用说明

  • <select> 元素用来创建下拉列表。
  • <select> 元素中的 <option> 标签定义了列表中的可用选项。
  • <select> 元素是一种表单控件，可用于在表单中接受用户输入。

<option> 标签

标签定义及使用说明

  • <option> 标签定义下拉列表中的一个选项（一个条目）。
  • <option> 标签中的内容作为 <select> 或者<datalist> 一个元素使用。

<textarea> 标签

标签定义及使用说明

  • <textarea> 标签定义一个多行的文本输入控件。
  • 文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
  • 可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>

<!--定义表单 form-->
<form action="#" method="post">
    <table border="0" align="center" width="500">
        <tr>
            <!--label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。-->
            <td><label for="username">用户名</label></td>
            <td><input type="text" name="username" id="username"></td>
        </tr>

        <tr>
            <td><label for="password">密码</label></td>
            <td><input type="password" name="password" id="password"></td>
        </tr>

        <tr>
            <td><label for="email">Email</label></td>
            <td><input type="email" name="email" id="email"></td>
        </tr>

        <tr>
            <td><label for="name">姓名</label></td>
            <td><input type="text" name="name" id="name"></td>
        </tr>

        <tr>
            <td><label for="tel">手机号</label></td>
            <td><input type="text" name="tel" id="tel"></td>
        </tr>

        <tr>
            <td><label>性别</label></td>
            <!--要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。-->
            <td><input type="radio" name="gender" value="male"> 男
                <!--一般会给每一个单选框提供value属性，指定其被选中后提交的值-->
                <input type="radio" name="gender" value="female"> 女
            </td>
        </tr>

        <tr>
            <td><label for="birthday">出生日期</label></td>
            <td><input type="date" name="birthday" id="birthday"></td>
        </tr>

        <tr>
            <td><label for="checkcode">验证码</label></td>
            <td><input type="text" name="checkcode" id="checkcode">
                <img src="img/verify_code.jpg" alt="加载失败">
            </td>
        </tr>


        <tr>
            <td colspan="2" align="center"><input type="submit" value="注册"></td>
        </tr>
    </table>


</form>

</body>
</html>

代码执行效果图

CSS

概念

Cascading Style Sheets 层叠样式表。 层叠：多个样式可以作用在同一个html的元素上，同时生效

好处：

  • 功能强大
  • 将内容展示和样式控制分离，降低耦合度。解耦， 让分工协作更容易，提高开发效率。

CSS的使用

CSS与html结合方式

1:内联样式：在标签内使用style属性指定css代码

<!--

内联样式
    * 在标签内使用style属性指定css代码
-->
<div style="color:red;">hello css</div>

2.内部样式:在head标签内，定义style标签，style标签的标签体内容就是css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            color: blue;
        }

    </style>
</head>
<body>

<!--

内部样式
    * 在head标签内，定义style标签，style标签的标签体内容就是css代码
-->
    <div>hello css</div>
    <div>hello css</div>

</body>
</html>

3外部样式:定义css资源文件。在head标签内，定义link标签，引入外部的资源文件

定义CSS文件

div {
    color: green;
}

定义HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <!-- <link rel="stylesheet" href="css/a.css">-->

    <style>
        @import "css/a.css";
    </style>
</head>
<body>

<!--

外部样式
    1. 定义css资源文件。
    2. 在head标签内，定义link标签，引入外部的资源文件
-->
<div>hello css</div>
<div>hello css</div>

</body>
</html>

注意：

  • 1,2,3种方式 css作用范围越来越大
  • 1方式不常用，后期常用2,3
  • 3种格式可以写为：
<style>
@import "css/a.css";
</style>

css语法：

我们通过来控制想要控制的标签。选择器:筛选具有相似特征的元素

格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
注意：

  • 每一对属性需要使用；隔开，最后一对属性可以不加；

选择器分类

基础选择器

  •  id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一

语法：#id属性值{}

   <!--id 选择器 控制id为div1的标签-->
    <style>

        #div1{
               color: red;
           }

    </style>
  • 元素选择器：选择具有相同标签名称的元素

语法： 标签名称{}

    <!--标签选择器 控制所有div标签的样式-->
    <style>
        div{
            color: #FFD026;
        }
    </style>
  • 类选择器：选择具有相同的class属性值的元素。

语法：.class属性值{}

    <!--类选择器 控制class数值型为cls1的标签样式-->
    <style>
        .cls1{
            color: #FFD026;
        }
    </style>

注意：

多个选择器作用于同一个标签，则id选择器的优先级最高，其次是类选择器，其次是元素选择器。

扩展选择器

选择所有元素：

  • 语法： *{ }
<!--选择所有元素：添加样式-->
    <style>

        *{
            color: aqua;
        }

    </style>

并集选择器：

  • 语法：选择器1,选择器2{}
  <!--选择div,p,span元素：添加样式-->
    <style>
        
        div,p,span{
            color: aqua;
        }

    </style>

子选择器：筛选选择器1元素下的选择器2元素

  • 语法： 选择器1 选择器2{}
    <!--控制div下的p标签元素-->
    <style>
        div p{
            color: #FF0000;
        }

    </style>

父选择器：筛选选择器2的父元素选择器1

  • 语法： 选择器1 > 选择器2{}
 <!--控制p标签的上一级div标签标签元素-->
    <style>
        div > p{
            border: 1px solid;
        }
    </style>

属性选择器：选择元素名称，属性名=属性值的元素

  • 语法： 元素名称[属性名="属性值"]{}
<!--控制input标签且type 为text 的元素-->
    <style>
        input[type ='text']{
            border: 5px solid;
        }
    </style>

 伪类选择器：选择一些元素具有的状态

  • 语法： 元素:状态{}

如： <a>元素要如下状态

  • link：初始化的状态
  • visited：被访问过的状态
  • active：正在访问状态
  • hover：鼠标悬浮状态
    <!--控制a标签且link状态下样式-->
    <style>
        a:link{
            color: #FF0000;
        }
    </style>

属性

我们通过CSS的属性 来控制具体的样式，具体的属性可以查询资料。常见的有

字体、文本

  • font-size：字体大小
  • color：文本颜色
  • text-align：对其方式
  • line-height：行高

背景

  • background：

边框

  • border：设置边框，符合属性

尺寸

  • width：宽度
  • height：高度

盒子模型：控制布局

内边距和外边距是相对来说的概念。

  • margin：外边距
  • padding：内边距，默认情况下内边距会影响整个盒子的大小 解决方法box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小

float：浮动

  • left
  • right

猜你喜欢

转载自www.cnblogs.com/wurengen/p/12317131.html
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
laravle中orm简单的增删改查
文本分类 特征选取之CHI开方检验
Spark核心编程-WordCount
大数据开发实战系列之电信客服(1)
读书笔记 - 把时间当作朋友 by 李笑来
python 笔记--if else
SpringBoot/Mybatis/Druid, 多数据源MultiDataSource配置思路
排序三个整数
redis集群搭建【2】-Windows中Redis集群搭建
STM32F030驱动TM1650点亮4联数码管
每日归档
更多
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022