HTML 学习总结 7

1、使用样式来显示边框

  可以创建级联样式表(CSS)来显示边框,这是最灵活并且一致的方法,我们学习了基于样式的段落边界。我们可以对<table>和<td>标记符使用同样的方法

  

  既可以将这些属性应用在整个表格(通过使用<table>标记符或者一条样式规则),也可以应用在单独的单元格。而且,既可以在起始标记符处单独应用这些属性,也可以在     <style>区域创建规则来管理一个文档的所有实例,或者在外部样式表中创建规则来管理所有使用该样式表的文件。

2、设置背景填充和前景填充。

  每个表格、行和单元格都有其独立的区域,都可以有他们自己的背景

  要给表格设置背景颜色,可以使用我们设置文档时使用的同样的background-color样式规则,例如,要设置某行背景颜色为橘黄色,可以使用下面的语句

  <tr style="background-color:orange">

  和文档背景颜色一样,表格背景也可以是图片。表格的任何部分都可以设置background-image属性。例如:要给表格设置图片背景,可以使用下面的语句:

  <table style="background-image:urlf(image/leaf.gif)">

  一个背景的前景部分是它的文本。

3、改变单元格填充、间距和对齐

  (1)设置单元格填充。

      要为整个表格设置填充,可以在<table>标记符中使用cellpadding属性(cellpadding属性对单独的行和单元格标记符不起作用)

      <table cellpadding="4px">

        要为单独的单元格设置填充,在样式表使用padding属性,例如:<td style="padding:4px">

        注意:不能给行设置填充,因为从技术上来讲,行中没有需要填充的单元格,

  (2)默认的表格边框看起来像双线,但是这种效果实际上是表格边框和每个单元格边框合起来的效果,双线的效果是单元格之间的边距造成的。

      如果想在单元格之间设置单实线的边框,可以设置单元格间距为零。

     <table cellpadding="10px" cellspacing="0px">

   (3) 设置水平对齐和垂直对齐

     单元格的内容有两种对齐方法:垂直(上、中、下)和水平(左、中、右,或者类似)。要用属性来设置对齐,使用align属性来指定水平对齐,使用valign属性来指定垂直对     齐,如下所示:

     <td align="center" valign="middle">

      也可以使用text-align样式来设置水平对齐,vertica-align来指定垂直对齐,如下所示:

     <td style="text-align:center;vertical-align:middle">

4、创建用户表单

     表单可以放在HTML文档主题部分的任何位置,表单用两个<from>标记符封装起来:

     <form method="post">

      ....

    </form>

    method属性用来定义表单提交后可能发生的情况,几乎所有的表单都使用method=“post”属性,意思是用户输入到表单数据会被收集起来,或者通过电子邮件传递,或              者直接发送到服务器,服务器端代码获取这些数据并执行一些任务,例如存储数据(到数据库)

    在起始的<form>标记符中,可以指定一个,action属性,它通常是信息需要传送到的电子邮件地址,或者用户提交表单后需要运行的脚本代码的地址(URL)

      例如:如果要将表单内容发送给CGI脚本,你可以包含指向存储在服务器上相应的CGI脚本的URL,像下面这样:

      <form action="http://www.contoso.com/cgi-bin/feedback.pl">

    可以在起始和结束的<form>标记符中放入不同的标记符来创建表单控件,表单控件包括文本框、按钮、复选框、列表框、列表和/或者命令按钮。命令按钮是执行某个功能      的按钮。例如:提交表单或者表单复位。

5、创建文本框

    最基本的控件是文本框。文本框有两种类型:普通文本框(单行)和文本框区域(多行)。

    可以使用type=“text”属性的单面<input>标记符来创建普通文本框,如下所示:<input type="text">

    如果要写XHTML兼容的代码,必须在单标记符结束前加上一个空格和斜杠,如:<input type="text"/>

     每个表单的控件都是唯一的名字,用name属性来标识。例如,要给某个文本框命名为firstname,就可以向下面这样:

      <input type="text" name="firstname">

    也可以使用size属性指定文本框的宽度,默认宽度是20个像素,

          <input type="text" name="phone" size="30">

    也可以指定用户输入到文本框中的文本长度,这和文本框的大小不是一回事,如果指定的长度比文本框的宽度大,文本随着用户的水平滚动,当用户输入达到指定的最大字    符数时,文本不再接受更多的输入向下面这样使用maxlength属性。

    <input type="text" name="phone" size="30" maxlength="100">

    在HTML5中,你可以要求用户在提交表单之前必须天上某些输入字段(仅应用于HTML5兼容的浏览器)。要使一个输入字段是必填的可以像下面这样加上required属性:

    <input  type="text" name="phone" size="30" maxlength="100" required>

6、电子邮件和网址的特殊输入类型

    HTML5支持两种新的输入 input 类型,来支持电子邮件地址和网址。使用属性类型 type=“email” 代替 type=“text”来定义用于收集电子邮件的输入字段,如果浏览器不支   持HTML5,这个字段会使用默认的文本类型,所以它不会带来任何风险:

    <input type="email" name="email-address">

   同时针对网址也有一个特定的属性类型

    <input type="URL" name="website">

7、创建文本区

   通过使用双标记符<textarea>来创建一个多行的文本区域,通过加入属性rows来设定文本框应该包含几行文本,如下面的例子所示:

   <textarea name="comments" rows="5"></textarea>

   我们也可以加入columns属性来指定文本区域的宽度是多少个字符(每个字符代表一个列),默认情况下是40个字符:

   <textarea name="comments" rows="5" cols="60"></textarea>

   columns属性只影响文本框的大小,不影响最多能输入的字符总数,可以使用maxlength属性来限定用户能够输入的字符数。

8、创建提交按钮或清除按钮

   按钮上默认的文字是Submit,但是可以用value属性在按上显示不同的文本。例如,要使用词语Send(发送)出现在按钮上,就可以向下面这样摄者value的属性。

   <input type="submit" value="Send">

   也可以在表单中使用包含Reset(重置)按钮,它可以帮助用户清空所有区域。同样,也可以使用value属性改变按钮上的文字。

   例如:<input type="Reset" value="Clear">

9、创建默认或占位符文本

  在默认的情况下,表单中的文本框和文本区域都是空白的,你可以选择在其中放上默认或占位符文本。

  1)默认文本是普通文本,和其他用户实际输入输入的数据一样,随着表单结果一起提交。

2)占位符文本是“幻影文本。他们出现在文本框里作为提示,用户在文本框中输入其他信息。如果用户选择让该文本保持空白,那么什么也不会提交。

    对于文本框可以定义默认文本的字符加上value属性,如下所示:

    <input type="text" name="country" value="United States of America">

    对于文本区域,可以将默认文本放在起始和结束<textarea>之间,如下所示:

    <textarea  name="comments" rows="5">Great job !Keep up the good work.</textarea>

    占位符只在兼容HTML5的浏览器中显示,如果要使占位符文本可以增加一个placeholder属性,如下所示:

    <input  type="text" name="country" placeholder="Enter your country here">

10、创建复选框和选择按钮。

  (1) 对于单独的二元(是/否)问题,我们可以使用复选框,表单可以包含多个复选框,但是每个复选框对于填写表单的用户来说都需要单独决定

   要想创建复选框,需要使用<input>标记符的type=”checkbox“属性,如下所示:

  <input type="checkbox" name="repair">

  在默认情况下,当复选框被选上时,表单结果中相应值会显示On。对于上例中的复选框,结果显示如下:

  repair=on;

  我们可以通过定义value属性来改变默认值。例如,对于复选框,我们可以返回Yes值,如下所示:

  <input type="checkbox" name="repair" value="Yes">

  在默认情况下,复选框是不被选上的,用户必须单击摸个复选框来选择它。然而在某些情况下,预先选择复选款,可能有些益处。如果这样做,可以子在标记符后面增加一个    checked=”checked“属性,如下所示:

  <input type="checkbox" name="newsletter" checked="checked">

  (2)创建选项按钮(又称为单选按钮)

    来展示一组互斥的选项,如果选择一个选项按钮,同组的其他所有选项按钮都会被排除,

    要想创建一组选项按钮,首先给这个选项组选择一个名称。需要给每个按钮单独在name属性指定同样的名称。使用value属性(这个值对于组内的每一个按钮来说是不同     的)来定义该组在表单中要传回的值。例如:

    <p><input type="radio" name="category" value="gold" checked="checked" >Gold<br>

    <input type="radio" name="categroy" value="silver" >Silver<br>

    <input type="radio" name="categroy"  value="bronze">Bronze<p>

    当表单结果返回后,这组按钮就像线面这样返回值:

    category=gold

时间: 2024-10-08 23:28:53

HTML 学习总结 7的相关文章

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

Java多线程学习(吐血超详细总结)

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 目录(?)[-] 一扩展javalangThread类 二实现javalangRunnable接口 三Thread和Runnable的区别 四线程状态转换 五线程调度 六常用函数说明 使用方式 为什么要用join方法 七常见线程名词解释 八线程同步 九线程数据传递 本文主要讲了java中多线程的使用方法.线程同步.线程数据传递.线程状态及相应的一些线程函数用法.概述等. 首先讲一下进程和线程

微信小程序学习总结(2)------- 之for循环,绑定点击事件

最近公司有小程序的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习. 先说一下此次项目本人体会较深的几个关键点:微信地图.用户静默授权.用户弹窗授权.微信充值等等. 言归正传,今天分享我遇到的关于wx:for循环绑定数据的一个tips:  1. 想必大家的都知道wx:for,如下就不用我啰嗦了: <view class="myNew" wx:for="{{list}}">{{item.title}}<view

【安全牛学习笔记】

弱点扫描 ╋━━━━━━━━━━━━━━━━━━━━╋ ┃发现弱点                                ┃ ┃发现漏洞                                ┃ ┃  基于端口五福扫描结果版本信息(速度慢)┃ ┃  搜索已公开的漏洞数据库(数量大)      ┃ ┃  使用弱点扫描器实现漏洞管理            ┃ ╋━━━━━━━━━━━━━━━━━━━━╋ [email protected]:~# searchsploit Usage:

winform学习日志(二十三)---------------socket(TCP)发送文件

一:由于在上一个随笔的基础之上拓展的所以直接上代码,客户端: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Net.Sockets; using Sys

零基础的人该怎么学习JAVA

对于JAVA有所兴趣但又是零基础的人,该如何学习JAVA呢?对于想要学习开发技术的学子来说找到一个合适自己的培训机构是非常难的事情,在选择的过程中总是 因为这样或那样的问题让你犹豫不决,阻碍你前进的步伐,今天就让小编为您推荐培训机构新起之秀--乐橙谷Java培训机构,助力你成就好未来. 选择java培训就到乐橙谷 北京有什么好的Java培训机构?来乐橙谷北京学Java,零基础走起,乐橙谷Java基础班授课老师经验非常丰富,课程内容安排合理,适合于有一点点Java基础甚至一点都不会Java的同学学

最全解析如何正确学习JavaScript指南,必看!

划重点 鉴于时不时,有同学私信问我:怎么学前端的问题.这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了. "前端怎么学"应该因人而异,别人的方法未必适合自己.就说说我的学习方法吧:我把大部分时间放在学习js上了.因为这个js的学习曲线,先平后陡.项目实践和练习啥的,我不说了,主要说下工作之外的时间利用问题.我是怎么学的呢,看书,分析源码.个人这几天统计了一下,前端书籍目前看了50多本吧,大部分都是js的.市面上的书基本,差不多都看过. 第一个问题:看书有啥好处

轻松学习C语言编程的秘诀:总结+灵感

目前在准备一套C语言的学习教程,所以我这里就以C语言编程的学习来讲.注意,讲的是"轻松学习",那种不注重方法,拼命玩命的方式也有其效果,但不是我提倡的.我讲究的是在方式方法对头.适合你.减轻你学习负担和心里压力的前提下,才适当的抓紧时间. 因此,探索一种很好的学习方法就是我所研究的主要内容. 众所周知,学习C语言并非易事,要学好它更是难上加难.这和你期末考试背会几个题目的答案考上满分没多大关系,也就是说你考试满分也说明不了你学好.学精通了C语言.那么怎么才算学精通C语言?闭着眼睛对自己

开始我的Python爬虫学习之路

因为工作需要经常收集一些数据,我就想通过学爬虫来实现自动化完成比较重复的任务. 目前我Python的状况,跟着敲了几个教程,也算是懂点基础,具体比较深入的知识,是打算从做项目中慢慢去了解学习. 我是觉得如果一开始就钻细节的话,是很容易受到打击而放弃的,做点小项目让自己获得点成就感路才更容易更有信心走下去. 反正遇到不懂的就多查多问就对了. 知乎上看了很多关于入门Python爬虫的问答,给自己总结出了大概的学习方向. 基础: HTML&CSS,JOSN,HTTP协议(这些要了解,不太需要精通) R

javaweb学习纲要

Java Web  概述 大纲: 1.C/S体系结构 2.B/S体系机构 3.两种体系结构比较 4.主流的Web程序应用平台 5.java web学习路线图 1.C/S体系结构 C/S是Client/Server的缩写,即客户端/服务器结构.在这种结构中,服务器通常采用高性能的PC机或工作站,并采用大型数据库系统(如Oracle或SQL Server),客户端则需要安装专用的客户端软件,如下图所示.这种结构可以充分利用两端硬件环境的优势,将任务合理分配到客户端和服务,从而降低了系统的通讯开销.在