HTML学习·day03——表单,部分css

Posted bug汤

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML学习·day03——表单,部分css相关的知识，希望对你有一定的参考价值。

表单

上期在注册个人信息等类似场景时，使用到的是表格与input控件的组合。

然而表格没有提供将用户信息返回至后台的功能（使用表格只是为了说明input控件的功能和应用效果），因此使用表单域来解决这个问题。

一般将表单分成以下三个部分：

  • 控件

  • 提示信息

  • 表单域

表单域

表单域可以视为一个载体，其可以承载各种控件、标签，将它们依照一定顺序和样式表现出来。

表单域为双标签<form></form>
基本语法格式为

<form  action="url" method="提交方式" name="表单名称">
    各种控件、提示信息
</form>

表单域的三种属性：

1.action
2.method

表单被提交的方式，有get和post两种方式

3.name

表单名称，用以区分同页面内的不同表格

提示信息

各种控件附近的提示文字，用以引导填写者完成表单填写

控件

提供收集信息和完成交互的功能，如前文提到的input控件

以下给出一个示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单域练习</title>
    </head>
    <body>
        <h4 align="center">***XXX查询系统***</h4>
        <form action="" method="post" align="center">
            用户名：<input type="text" name="username" maxlength="8"><br /><br />
            密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" maxlength="16"><br /><br />
            <input type="submit" value="登录" />
        </form>
    </body>
</html>

其中&nbsp;为在html中能被解析的空格，若干个&nbsp;可以解析成若干个空格，可以解决html只能解析一个空格字符的情况
具体效果如下：

HTML学习·day03——表单,部分css

下拉菜单

遇到需要填写出生日期、所属地区等信息时，下拉菜单可以帮助填写者便捷地选择。同时，这也增加了信息的可读性，有助于核对检查。

下拉菜单为双标签控件，其基本语法格式如下

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

  • 每个<select></select>内部须包含至少一个 <option></option>  

  • <option></option>中可以定义selected="selected"，即添加一个默认的已选项

textarea文本域

文本域用于多行输入，解决了文本框只支持单行输入的尴尬。
可用于收集建议、自我介绍等大段的文字信息，其基本语法格式如下

<textarea cols="每行中的字符数" rows="显示的行数">
  内容
</textarea>

label标签

用于绑定表单中的某个特定元素，其效果为：当光标选中被绑定的元素，无需点击对应控件也能使控件被选为输入状态。
其基本语法格式为<label for="a" >a</label>

或者可直接在其中嵌套控件

<label>
    用户名：<input type="text" />
</label>

以上便是关于表单使用的全部内容，下面给出一个示例来展示各个控件、标签的效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单域练习</title>
    </head>
    <body>
        <h4 style="color:deepskyblue;font-size: 35px;" align="center">***xx申请表***</h4>
        <form action="minerServer.php" method="post" align="center">
            <label>
                &nbsp;用户名：<input type="text" name="username" maxlength="8">
            </label>
            <br /><br />
            <label>
                &nbsp;密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" maxlength="16"><br /><br />
            </label>
                确认密码：<input type="password" name="passwordconfirm" maxlength="16"><br /><br />
            <!-- 以下为地区下拉菜单 -->
            所在地区:
            <select>
                <option>省份</option>
                <option>北京</option>
                <option>上海</option>
                <option>浙江</option>
                <option>重庆</option>
                <option>广东</option>
            </select>
            <select>
                <option>市</option>
            </select>
            <select>
                <option>县/区</option>
            </select>
            <!-- 以上为地区下拉菜单 -->
            <br /><br />
            申请理由
            <br /><br />
            <textarea name="" id="" cols="50"rows="10">请输入100字左右的申请理由</textarea>
            <br />
            <!-- 注册按钮 -->
            <input type="submit" value="注册" />
        </form>
    </body>
</html>

其效果如下

不难发现，<h4></h4> 这里使用了样式，使得字体有了颜色和大小上的变化，接下来我们会简单地介绍一下样式

CSS样式

由于html自身只能对其页面做简单的排版和对齐方式等处理，html页面的原始展示效果不堪入目。为了使得网页更加美观可读，css样式应运而生

css为Cascading Style Sheets的缩写，通常叫做层叠样式表（级联样式表）。它能够处理美化页面中的文本字体、大小、对齐方式，图片的外形宽高、边框样式、边距，以及版面的布局等外观显示样式。

CSS引用方式

css的使用非常灵活（但样式积累到一定程度就有点力不从心，完成css学习后，可深入学习less/sass），一般有以下三种引入方式

  • 内部样式

    内部样式引入，是将CSS样式集成head标签内部，使用<style></style>标签定义，其基本语法格式如下：

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

style标签一般位于title标签之后，不过这并不是一个强制性的要求

  • 行内样式（又称内联样式）

    内联样式，通过标签的style属性来设置元素的样式，即之前表单中展示的那一种。其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

style在此处为标签的属性，任何HTML标签都拥有style属性。行内式只对其所在的标签及嵌套在其中的子标签起作用

  • 外部样式

    外部样式将所有的样式放在一个或多个以.CSS为扩展名的文件中，通过link标签(link为单标签)将外部样式文件链接到HTML文档中，其基本语法格式如下：

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

link标签需要放在head标签中，并且必须指定link标签的三个属性：

-href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

-type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表

-rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件

CSS样式规则

一个css样式的基本结构可以看成

选择器 {属性：值}

  • 选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。

  • 属性和属性值以“键值对”的形式出现。

  • 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。

  • 属性和属性值之间用英文“:”连接。

  • 多个“键值对”之间用英文“;”进行区分。

CSS选择器

选择器，即起到选择的作用，用于确定需要使用对应样式的标签

CSS基础选择器

标签选择器

标签选择器可以为页面中的某一类标签或某一类元素指定统一的样式，也因此不能设计差异化样式，使用语法同基本的css样式结构。

类选择器

类选择器，使用“.”进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

调用的时候在标签属性中添加 class=“类名” 即可

<span class="o1">o</span>
类选择器不同于标签选择器，它可以定义单独或相同的样式,可以选择一个或者多个标签

几个类选择器的使用要点：

1.长名称或词组可以使用中横线来为选择器命名
2.不建议使用“_”下划线来命名CSS选择器
3.不要纯数字、中文等命名， 尽量使用英文字母来表示

多类名选择器

用于较复杂情况下的布局，通过给标签指定多个类名，从而达到更多的选择目的

  1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。

  2. 各个类名中间用空格隔开。

id选择器

使用“#”进行标识，后面紧跟id名，使用方法类似于类选择器。其基本语法格式如下：

  
    
    
  
    
   
     
     
   
  1. #id名{属性:值；}
    2.

其中，id名为标签/元素的id属性值（大多数标签/元素都可以定义id属性），元素的id值是唯一的，只能对应于文档中某一个特定的元素。故一个标签的id选择器只能使用一次

通配符选择器

使用*进行标识，是所有选择器中作用范围最为广的，对整个页面内有影响作用，基本语法格式如下

  
    
    
  
    
   
     
     
   
  1. *{属性：值；}
    2.

展示一个使用CSS样式的例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            span{
                font-size:130px;
            }
            .g{
                color: royalblue;
            }
            .o1{
                color: red;
            }
            .o2{
                color:orange;
            }
            .l{
                color: green;
            }
            .e{
                color: orangered;
            }
        </style>
    </head>
    <body>
        <div align="center">
            <span class="g">G</span>
            <span class="o1">o</span>
            <span class="o2">o</span>
            <span class="g">g</span>
            <span class="l">l</span>
            <span class="e">e</span>
        </div>
        <br />
        <form action="" method="get" align="center" >
                <input type="text" style="height:20px;width:380px;color: grey;" name="search" value="请输入你要搜索的内容" />
                &nbsp;
                <input type="submit" value="搜索" />
        </form>
    </body>
</html>

关于CSS样式仍有较多篇幅的内容，会在下一期进一步地描述。


以上是关于HTML学习·day03——表单,部分css的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 学习03——HTML：捕获设置添加元素删除元素CSS类CSS()方法尺寸

JAVA Web day02--- Android小白的第二天学习笔记

Day3: Python学习笔记之计算机基础——网络片

php学习day03

python学习点滴记录-Day13-前端基础之css

HTML day03表格与表单