零基础学习HTML背景表单单选按钮复选框上传文件下拉列表

TML 背景

设置背景颜色<body bgcolor="#000000">

设置背景图片<body background="bg.jpg">

设置页面文字颜色<body text="#cccccc">

颜色属性值有三种值的格式

1，英文单词，比如 red , yellow ,green …

2, 十六进制表示方式，#开头，6个十六进制的字符或数字组合

比如：#FFFFFF，#000000，#CCCAAA，#22BCAD

十六进制： 0-9 和 a-f

3, RGB模式，红 0-255，绿 0-255，蓝 0-255

比如： RGB(120,33,234)

HTML 表单

表单是一个包含表单元素的区域。

表单能够包含 input 元素，textarea、select、fieldset、legend 和 label 元素。

表单使用标签（<form>）定义。

表单用于向服务器传输数据。

表单的结构

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

密码：<input type="password" name="passwd" />

</form>

属性说明

name表单的名称

action表单提交地址

method表单数据提交的方式（get ,post）

enctypeMIME类型

target打开方式

input标签

属性说明

typeinput元素类型

nameinput 元素的名称

valueinput 元素的值

sizeinput 元素的宽度

readonly是否只读

maxlength输入字符的最大长度

disabled是否禁用

1.文本框

2.密码框

3.单选按钮

<input type="radio" name="sex"value="1"checked="checked" />男

<input type="radio" name="sex"value="0"/>女

4.复选框

<input type="radio" name="sex"value="1"checked="checked" />男

<input type="radio" name="sex"value="0"/>女

<input type="checkbox"name="love"value="music" checked="checked"/> 听音乐

<input type="checkbox"name="love" value="movie"/> 看电影

<input type="checkbox"name="love" value="game"/> 玩游戏

5.按钮

6. 隐藏域

隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。

7. 上传文件

注：利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

<textarea> 多行文本框

属性说明

name元素的名称

rows指定文本框的高度

cols指定文本框的宽度

select下拉列表框

<option value="0">请选择</option

</select>

属性说明

name下拉列表框的名称

size下拉列表框的显示行数

multiple是否多选

disabled是否禁用

selected设置默认选中的选项

value选项的值

optgroup标签

optgroup 元素用于组合选项。

属性说明

label指定组合选项名称

fieldset标签

fieldset 标签作用是把表单中元素组合起来

<legend></legend> length为字符长度

</fieldset>

label标签

lable 标签的作用是将输入项或选项及其标签文字关联起来。

TML作为一种用来描述网页的语言，是制作网页必不可少的，但HTML 不是一种编程语言，而是一种标记语言 (markup language），本着为了更好的了解大数据开发的基础，今天就带着大家更进一步的了解HTML的使用，HTML的表格与表单。

1.HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的作用就不言而喻了，让看起来更简洁直观有序性。

下面给大家带来一些常用的标签：

<table> 表格的最外层容器

<tr> 定义表格行

<th> 定义表头

<td> 定义表格单元

<caption>定义表格表题

　　<width>:宽度。可以用像素或百分比表示。常用960像素。

　　<border>：边框，常用值为0。

　　<cellpadding>：内容跟边框的距离，常用值为0。

　　<cellspacing>：单元格与单元格之间的间距，常用值为0。

　　<algin>：对齐方式。

　　<bgcolor>：背景色。

<background>：背景图片。

<align>: 一行内容的水平对齐方式。

<valign>: 一行内容的垂直对齐方式。

<height>：行高。

创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。

创建表格的基本语法：

<table>

<tr>

<td>单元格内的文字</td>

...

</tr>

...

</table>

举个例子

其中：table用于定义一个表格标签。

tr标签用于定义表格中的行，必须嵌套在 table标签中。

td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

字母 td 指表格数据（table data），即数据单元格的内容。

再比如说我们可以建立个有颜色的格子，如下图

表格的作用除了可以显示一个表格外，有的时候还可以用于辅助排版。但现在都不怎么使用了，因为时代的进步，以前的表格排版的网页已经被淘汰了。

2. HTML表单

关于表单的制定，因为在浏览器中输入的内容都必须要经过网络提交到服务器端再处理，所以需要把所有的控件都包含在一个form表单控件中，然后一次提交给服务器，再由服务器处理用户提交的数据。

HTML 支持有序列表(有序列表是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。)无序列表(无序列表也是一个项目的列表，此列项目使用粗体圆点“典型的小黑圆圈“进行标记。)和定义列表(自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。)。

表单常用标签：

form: 表单的最外层容器

input: 用于搜集用户信息,根据不同的type属性值,展示不同的控件

Text：普通的文本输入框

Password：密码输入框

Checkbox：复选框

Radio：单选框

File：上传文件

Submit：提交按钮

Reset：重置按钮

Cols：列

Rows：行

注意事项：

<form id="" name="" method="post/get" action="负责处理的服务端">--输入系统时，必须有

Name ：定义表单的名称；

Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get

Action ：用来指定表单处理程序的位置(服务器端脚本处理程序）

Fieldset：把表单分组；

Legend：分组名称。

id不可重复，name可重复，get提交有长度限制，并且编码后的内容在地址栏可见，post提交没有长度限制，且编码后内容不可见。

举个例子

</form>

得到结果如图

本期的内容比较多，大家可以在平日里多加练习，这是大数据开发基础的重要部分，做到能更熟练，更准确，希望大家能有所进步。

家好，我是IT共享者，人称皮皮。这篇文章我们来讲讲CSS的文本样式。

一、文本颜色Color

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如"＃FF0000"。
一个RGB值 - "RGB（255,0,0）"。
颜色的名称 - 如"红"。

一个网页的文本颜色是指在主体内的选择：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            body {
                color: blue;
            }


            h1 {
                color: #00ff00;
            }


            h2 {
                color: rgb(255, 0, 0);
            }
</style>
    </head>


    <body>
        <h2>hello world</h2>
        <h1>welcome to CaoZhou</h1>
    </body>


</html>

注：对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。

二、属性

1. text-align 文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐。

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            h1 {
                text-align: center;
            }


            p.date {
                text-align: right;
            }


            p.main {
                text-align: justify;
            }
</style>
    </head>


    <body>


        <p class="date">2015 年 3 月 14 号</p>
        <p class="main">　从前有个书生，和未婚妻约好在某年某月某日结婚。到那一天，未婚妻却嫁给了别人。书生受此打击， 一病不起。　　这时，路过一游方僧人，从怀里摸出一面镜子叫书生看。书生看到茫茫大海，一名遇害的女子一丝不挂地躺在海滩上。路过一人， 看一眼，摇摇头，走了。又路过一人，将衣服脱下，给女尸盖上，走了。再路过一人，过去，挖个坑，小心翼翼把尸体掩埋了。　　僧人解释道， 那具海滩上的女尸，就是你未婚妻的前世。你是第二个路过的人，曾给过他一件衣服。她今生和你相恋，只为还你一个情。但是她最终要报答一生一世的人，是最后那个把她掩埋的人，那人就是他现在的丈夫。书生大悟，病愈。


        </p>
        <p><b>注意：</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
    </body>


</html>

2. text-decoration文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .none {}


            .del {
                text-decoration: none;
            }
</style>
    </head>


    <body>
        <p>原来的样子</p>
        <a href="#" class="none">wwwwwwwwwwwwwwwwww</a>
        <p>去掉下划线</p>
        <a href="#" class="del">wwwwwwwwwwwwwwwwwwwww</a>
    </body>


</html>

也可以这样装饰文字：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            h1 {
                text-decoration: overline;
            }


            h2 {
                text-decoration: line-through;
            }


            h3 {
                text-decoration: underline;
            }
</style>
    </head>


    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
    </body>


</html>

注：不建议强调指出不是链接的文本，因为这常常混淆用户。

3. text-transform文本转换

text-transform文本转换属性是用来指定在一个文本中的大写和小写字母。

uppercase:转换为全部大写。
lowercase：转换为全部小写。
capitalize ：每个单词的首字母大写。

<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            p.uppercase {
                text-transform: uppercase;
            }


            p.lowercase {
                text-transform: lowercase;
            }


            p.capitalize {
                text-transform: capitalize;
            }
</style>
    </head>


    <body>
        <p class="uppercase">This is some text.</p>
        <p class="lowercase">This is some text.</p>
        <p class="capitalize">This is some text.</p>
    </body>


</html>

4. text-indent文本缩进

text-indent文本缩进属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}

5. letter-spacing 设置字符间距

增加或减少字符之间的空间。

<style>
     h1 {
       letter-spacing:2px;
}
      h2 {
        letter-spacing:-3px;
}
</style>

6. line-height设置行高

指定在一个段落中行之间的空间。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            p.small {
                line-height: 70%;
            }


            p.big {
                line-height: 200%;
            }
</style>
    </head>


    <body>
        <p>
            This is a paragraph with a standard line-height.<br> This is a paragraph with a standard line-height.<br> The default line height in most browsers is about 110% to 120%.<br>
        </p>


        <p class="small">
            This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br>
        </p>


        <p class="big">
            This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br>
        </p>


    </body>


</html>

7. word-spacing 设置字间距

增加一个段落中的单词之间的空白空间。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style type="text/css">
            p {
                word-spacing: 30px;
            }
</style>
    </head>


    <body>


        <p>
            This is some text. This is some text.
        </p>


    </body>


</html>

8. vertical-align 设置元垂直居中

设置文本的垂直对齐图像。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            img{
                width: 200px;
                height: 100px;
            }
            img.top {
                vertical-align: text-top;


            }


            img.bottom {
                vertical-align: text-bottom;


            }
</style>
    </head>


    <body>
        <p>An <img src="img/logo.png"  /> image with a default alignment.</p>
        <p>An <img class="top" src="img/logo.png" /> image with a text-top alignment.</p>
        <p>An <img class="bottom" src="img/logo.png" /> image with a text-bottom alignment.</p>
    </body>


</html>

9. text-shadow 设置文本阴影

设置文本阴影。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
         h1{
            text-shadow: 2px 2px #FF0000;
     }
</style>
    </head>


    <body>
    <h1>Text-shadow effect</h1>
    </body>


</html>

三、总结

本文主要介绍了CSS文本样式实际应用中应该如何去操作，通过讲解文本中对应的属性去改变文本的表现形式。使用丰富的效果图的展示，能够更直观的看到运行的效果，能够更好的理解。使用Html语言，代码结构更佳的清晰，能够帮助你更好的学习。

在线咨询

上一篇：ASP.NET Web Forms-数据库连接
下一篇：怎么利用兼职粉丝水军，操作一个躺赚的项目，附带操作方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

零基础学习HTML背景表单单选按钮复选框上传文件下拉列表

家好，我是IT共享者，人称皮皮。这篇文章我们来讲讲CSS的文本样式。

一、文本颜色Color

二、属性

1. text-align 文本的对齐方式

2. text-decoration文本修饰

3. text-transform文本转换

4. text-indent文本缩进

5. letter-spacing 设置字符间距

6. line-height设置行高

7. word-spacing 设置字间距

8. vertical-align 设置元垂直居中

9. text-shadow 设置文本阴影

三、总结

您的项目需求