web前端之HTMl学

一,HTML概述

1.HTML

HTML是一种描述性标记语言,描述网页内容的显示方式,以HTML语言为主编写的HTML文件是一种纯文本文件,以

           .html,.htm为后缀。基本组成为元素。

2.HTML常识

 HyperText Markup Language。李爵士创立了HTML,离开公司后创办了一个组织——W3C委员会。 W3C根据浏览器的实际情况总结制定HTML规范文档

  HTML有很多版本,从HTML4.01到XHTML再到HTML5,版本类型由HTML文件头部的DOCTYPE声明,比如HTML5的声明为 <!DOCTYPE html> 。这里注意我们现在常说的H5并不是指html5,H5是能运行在微信上的网页的统称,和实现技术无关。XHTML、HTML4.01、HTML5都可以。
  在HTML5中,声明的DOCTYPE一定要大写,html可以小写。即你可以写成,或者是。我们知道一个完整的html5页面应该是这样

3.语法

<标签>内容<标签>:标签通常都是成对出现,内容为一些文本文字或子标签;HTML元素指的是从开始标签到结束标签的所有代码。

4.HTML文档构成

   文档类型申明(<!DOCTYPE版本类型>告诉浏览器用什么方式解析XTHML中HTML要小写)+网头部分(<head>标题,关键字,描述,编码方式等浏览器需要的基本信息</head>)+网页部分(<body>页面具体内容,文字,表格,图片,视频等</body>)HTML由<html><head><body>这三大元素构成。

  1. <html>元素:HTML以<html>标签开始,以</html>结束,文档的所有内容都要方到两个标签内。包含<title>,<meat><base>,<like>,<script>,<style>等。提供整个页面的基本信息。
  2. <head>元素:页面头部信息(包含页面标题,元信息,CSS样式,JavaScript脚本等元素,),用于向浏览器提供整个页面的基本信息,不包含主体信息。一般不在浏览器中显示,标题元素<title>除外。
  3. <body>元素:网页的正文,包括图片,表格,段落,音乐,视频,不是所有的<body>标签都是可见。

5.编写HTML注意事项:

a。大部分的标签都是由起始标签和结束标签构成,空标签是一种特殊的标签,不包含文本也不包含其他子标签,以“<”开始,以“/>”结束。标签可以嵌套使用。

b。HTML不区分大小写,XHTML区分大小哦,

c。HTML和XHTML中,标签可以具有一个或多个属性,属性与属性值成对出现,属性值可以使用双引号或单引号引。属性值区分大小写。

d。HTML中的空格,字符之间的一个或多个连续空格(制表符,换行,回车),只能显示一个( 可以使用实体引用(&nbsp;)或者中文空格)。

f。HTML中的注释,<!--注释内容-->。

6.HEAD元素

a、title元素:页面标题位于<title>标签内,标题可以用作默认快捷方式或收藏夹的名称,作为搜索引擎结果中的页面标题。页面设计要添加标题。

 b、meta元素:用于向客户浏览器传递信息和命令,不是显示内容,一个<head>中可以包含一个或者多个<meta>标签。<

<meta>标签一般格式:<meta 属性名=“属性值”content= “name的描述或http-equiv的属性“/>.在 HTML 中,<meta> 标签没有结束标签。在 XHTML 中,<meta> 标签必须被正确地关闭。

      meta标签主要分为两大类:页面进行设计+搜索引擎设置,常用属性特征描述表:

属性名 属性值 描述
name keywords 定义页面关键词,使用content属性提供web的关键字,关键词之间用逗号隔开
  description 定义页面描述内容,使用content属性提供网页的描述内容,但不要过长,否者搜索引擎会以……省略
  robots 用来告诉搜索引擎页面是否允许索引与查询,content的参数有all,none,index,noindex,follow,nofollow,默认all
  author 标注网页作者
http-equiv content-type 设定页面使用的字符集,例如<meta http-equiv="content-type"content="text/html";char="utf-8"/>
  refresh 自动刷新并转到新页面。使用content属性提供刷新或跳转的时间以及跳转的目标地址,
  set-cookie 设置页面缓存过期时间。如果网页过期,那么存盘的cookie将被删除。
  expires 用于设定网页的到期时间。一但web过期,必须从服务器上从新加载页面内容
content text 内容文本。用于描述name或http-equiv的属性的相关内容
content参数意义: all:文件将被检索,且页面上的链接可以被查询;none:文件将不被检索,且页面上的链接不可以被查询,它和 "noindex, no follow" 起相同作用;index:文件将被检索;(让robot/spider登录)  follow:页面上的链接可以被查询;  noindex:文件将不被检索,但页面上的链接可以被查询;(不让robot/spider登录)  nofollow:文件将不被检索,页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)。

7,文本元素

a。标题标签:HTML提供了6级标题,<h1><h2><h3><h4><h5><h6>从大到小。一般显示<h1><h2><h3>,<h4>与默认文本一样大。<h5><h6>一般通过CSS定义。

b。文本修饰标签:<font>字体样式(大小,颜色,字体等)<b>加粗,<i>斜体,<s>删除线,<u>下划线,<sup>上标<sub>下标,<strong>加粗(重要文本),<big>文本变大(没有),<small>文本变小(小字体印刷体)括号内为HTML5的。<font face ="隶书" size ="12" color+"blue">定义字体,大小,颜色;

c。由于文本修饰符设置字体样式时,文本内容与样式嵌入到一起,后期代码维护不方便,在网页设计时,少用文本修饰,多采用CSS样式进行美化。

d。特殊字符(实体字符)一般&开头;结尾

常见实体引用:

双引号(”) &quot; &号 &amp; 空格 &nbsp;
小于号(<) &lt; 大于号(>) &gt; 小于等于(<=) &le;
大于等于(>=) &ge; 版权号© &copy; 商标符号(TM) &trade;
注册商标(圈R) &reg; 分数(1/4) &frac14; 分数(1/2) &frac12;
左箭头(<---) &larr; 上箭头 &uarr; 右箭头 &rarr;
下箭头 &darr; 左右箭头 &Harry; 左下箭头 &crarr;
左双箭头 &lArr; 上双箭头 &uArr; 右双箭头 &rArr;
下双箭头 &dArr; ∩(交集) &cap; ∪(并集) &cup;

8,文档元素结构

a。段落标签:<p>是HTML中特定的段落标签,可以对网页内容提供块级格式,浏览器解析<p>时,在下一段落前插入空白行

b。换行标签:<br />后面的内容从下一行开始显示。空标签,br与/之间有空格。

c。水平线标签:<hr />产生一条水平线,可以通过(size(高度),color(颜色),width(宽度),noshade(阴影),align(对齐方式)进行设定)

9,列表元素

在HTML页面中列表类型有:有序列表,无序列表,定义列表。

a。有序列表:前缀有数字或字母,格式<ol type=“属性(A,a,1,i,Ⅰ)”start =“属性(数字)”><li>列表项</li></ol>。

b。无序列表:前缀有图形符号,格式<ul type="属性(circle(圆),disc(点),square(方),none(没有))"><li>列表项<li></ul>。

c。定义列表:项目与描述成对显示<dl><dt>标题</dt><dd>描述<dd></dl>。<dl>标签中可以存放多个<dt><dd>标签,<dd>标签内容会后缩进一定空间。

10,div与span标签

a。<div>标签:表达一个逻辑区块(将某一特定区域用边框围起来,指定样式),属于块级元素。如果用<div>标签而不使用CSS样式,页面效果与<p>相同。且独占一行,通过<div>可实现页面布局。

a,1语法:<div style="块元素的样式(设置div元素的行内模式)" class = “类选择器名称(引用CSS的类选择器)”align = “对齐方式(取值为left,right,center或justify,多用CSS代替)”>内容部分</div>。

b。<span>标签:实现行块内定义,<span>标签属于行内元素,用来选择特定文本,赋予特殊样式,当句子需要分组时,可以使用<span>标签。

b,1语法:<span style="块元素的样式(设置div元素的行内模式)"class = “类选择器名称(引用CSS的类选择器)”align =“对齐方式(取值为left,right,center或justify,多用CSS代替)”>内容部分</span>。

11,URL(统一资源定位符Unifrom Resource Locator)

a。URL:用于Web资源所在的位置,又称网址或网页地址。(协议(http:)+主机地址(//www.itshixun.com)+文件路径(/web/index./html))共同过构成完整的URl。

b。协议:网页通常采用超文本传输协议HTTP,对应 的网址基本使用http://前缀,电子商务的安全性要求较高的,多采用https协议(https://)文件上传下载时,多采用ftp://前缀。

c。主机地址(Host Address):网站的域名,主机地址也可以采用IP地址(数字形式);

d。文件路径:通常与网站的目录结构想对应,以/开头,以文件夹/文件名结束,

d。1文件路径分为:绝对路径(完整的路径,在Internet中称URL)和相对路径。

d。2相对路径:当页面链接到同一网站的其他资源时,采用相对路径会更加简洁,也便于后期维护,当浏览器访问Web资源时,需要完整的URL才能获得资源内容,当页面提供的是相对地址时,需要将相对URL转换为绝对的URL后在获取资源。相对路径仅适用链接相同网站的内容,不能用于链接其他域下的资源,且根目录方式在本地无法访问无法实现,只有站点上传到web服务器才能。

d。2.1相同目录:当访问资源与网页位于同一个目录下,可以直接访问:文件名,

d。2.2子目录:当访问子目录的资源时,相对路径:子目录名/文件名,每加一级需添加“目录名”+/,

d。2.3父目录:当访问引用父目录的资源时,可以使用“../文件名”表示上一级,用../../文件名表示上上一级,

d。2.4根目录:根目录一“/”开头,(/)表示根目录,可以用:/父目录/子目录/目录/文件名,

12,图像标签

a.使用<img />空标签向HTML文档中添加一副图像,<img src="url" alt =""…/>。

<img />标签常用的属性表

        属      性     名                                                                     描                               述
src 图像的地址,可以是绝对URL,也可以是相对的URL
alt 图像的文本描述,当无法显示图片时,文本作为图像的替代;描述文本可以更好的让搜索引擎对页面搜索
height 指定图像高度,固定值or百分比
width 指定图像宽度,固定值or百分比

align  

图像的对齐方式如top顶部,bottom底部,middle中间,lefi左边,right右边
border 指定图像的高度

13,超链接标签

  1. 超链接(HyperlinK):将互联网上的的中资源相互连接,万维网。语法:<a href (目标链接地址)="url" title(链接标题)=“”name(锚点名称) =“”target=" "(以何种方式打开链接目标) >链接内容</a>;例:<a href="http://www.baidu.com">百度</ a><br />;
  2. 常见的超链接有:文本链接,锚点链接,图形链接,图形热区链接,Email链接,JavaScript链接,空链接。

a。 文本链接与锚点链接。

  1. 文本链接:点击文本进入链接,链接内容为文本内容(即<a></a>标签的内容),链接内容也可以是(站内/站外)链接,站外必须使用完整的绝对路径(即包含“http://”部分),站内随便。
  2. 锚点链接相当于书签(索引),用户访问锚点可以快速定位到所期望的小节。分为同一页面和跨页面锚点链接,使用<a>标签创建锚点标记。<a>标签必须附带name或id属性,之后尽量用id。 创建超链接链接到锚点,标签的href是由“#”+“目标锚点名称”两部分构成。
  • 目标锚点:<a id = "锚点名称">锚点位置</a>;例:<a id ="锚点名称">链接到当前锚点位置</a>
  • 链接到锚点:<a herf ="#锚点名称">链接到当前锚点位置</ a>例:<a herf ="#锚点名称">链接到锚点位置</a>
  • 在跨页面的锚点链接中,herf属性由“目标页面的绝对路径”+#+目标锚点名称三部分构成。例:<a herf ="绝对路径"#锚点名称>链接到目标页面的锚点位置</a>
  • 属性href的值可以根据当前页面与目标页面的位置关系而定,路径可以是绝对路径也可以是相对路径。

b。图片链接与图片热区链接:

  1. 图片链接:为图片添加一个超链接,点击图片会进入相应的链接,语法:<a href ="目标链接地址"><图像标签></a>;
  2. 图片热区链接:是指在同一个图片中不同的部分链接到不同的目标位置,通过在图片中设置“热区”,为图片的特定部分创建超链接区域,然后在设置链接的目标位置。步骤如下:
  • 通过<map>标签定义一个客户端图像映射(image-map),可以包含一个或多个图像的映射区域<area>,每个<area>区域拥有一个独立的链接。
  • 将<img />标签usemap属性与<map>标签的name属性相关联。
  • 语法:<map name ="图像映射名"><area shape="circle(属性)" coords(参数)="x,y,r" href ="目标链接地址"/><area shape=“rect(属性)”coords(参数)=“x1,y1,x2,y2”href=“目标链接地址”/><area shape=“poly(属性)”coords(参数)=“x1,y2,x2,y2,x3,y3,x4,y4……”hret=“目标链接地址”/></map><img src="images/图片名"usemap=“#图像映射名”broder=“0”/>
area属性表列
形状 Shape属性 Coords参数 描述
圆形 circle x,y,r 点(x,y)是圆心坐标,r是圆的半径
矩形 rect x1,y1,x2,y2 点Z(x1,y1)矩形左上角坐标,点(x2,y2)矩形的右下角坐标
多边形 poly x1,y1,x2,y2,x3,y3,…… 点(x1,y1)(x2,y2)(x3,y3)(x4,y4)……是多边形的各个点的坐标

c。其他超链接:

1,空链接:未指派的链接,附加行时使用。语法;<a href=“#”>空链接</a>

2,Email链接:在页面中创建Email标签,语法:<a href ="mailto:+邮箱地址">练字</a>

3,JavaScript链接:语法:<a href="Javascript:alert('弹出页面显示内容')">文本内容</a>

d。超链接的target属性:

1,默认情况下下,链接会在当前活动窗口打开目标链接文档,目标文档会替换当前显示的页面内容,targer属性可以改变目标文档的显示窗口。

target属性表
描述
_blank 在新窗口中打开被链接文档
_self 默认值。在相同的框架中打开被链接文档
_parent 在父框架集中打开被链接文档
_top 在整个窗口中打开被链接文档
frameName 在指定的框架中打开被链接文档
语法:<a hret="地址" target=“值”> 在新窗口打开被链接文档</a>


二,表格与框架

1,表格的组成:

表格使用行和列的方式组织信息,表格元素由行,列,表头单元格,正文单元格,标题,表头行,正文行,表尾行等构成。

表格单元的创建:  语法:<table><tr><td>单元格内容</td><td>单元格内容</td>…………</tr>代表一行…………更多行<table>:默认情况下,表格的边框是隐藏的。表格可嵌套。

  1. 表格的个组成部分均包含在<table>标签之内。
  2. 单元格是表格的基本元素,使用<td>标签表示。
  3. 行是表格的水平元素,使用<tr>标签表示
  4. 一行可以由一个或多个单元格构成,而一个表格可以由一行或多行。
2,表格的基本属性

一般情况,表格作为布局使用,不会在页面中显示出来,可一通过表格属性设置:

表格常用的<table>属性
属性 取值   描    述                            
align left(左),center(中),right(右) 设置表格相对周围元素的对齐方式
bgcolor rgb(x,x,x),#xxxxxx,colorName 设置表格的背景颜色
border 像素 设置表格边框宽度
cellpadding 像素或百分比 设置单元格与其内容之间的距离
cellspacing 像素或百分比 设置单元格之间的距离
height 像素或百分比 设置表格高度
width 像素或百分比 设置表格宽度
rulse none,groups,rows,cols,all 设置表格中的表格线的显示方式,默认all
frame

void(不显示边框),above(显示顶部),below(显示底部)

,hsides(顶部+底部),vsides(left+right),lhs(左侧),

rhs(右侧),box,border(显示所有边框,默认)

设置表格外部边框的显示方式
3,单元格标签

单元格是表的基本属性,可以通过<td>或<th>(加粗居中)标签来创建单元格,<td>标签多用来包含数据中的数据部分,而<th>标签用来包含表格中的标题部分。

单元格标签<td><th>的属性
属   性                   描         述
align 设置单元格内容的水平对齐方式:left,center,right,justtify
valign 设置单元格内容的垂直对齐方式:top,middle,bottom,baseline
rowapan 设置单元格跨越的行数
colspan 设置单元格跨越的列数
scope 定义将表头数据与单元数据相关联的方法col列的表头,row行的表头。
width 设置单元格的宽度
height 设置单元格的高度
bgcolor 设置单元格的背景颜色
4,行标签

行是表格的水平元素,可以包含多个或一个单元格,使用<tr></tr>进行行定界。

行标签<tr>常用的属性
属性 描述
align 设置单元格内容水平对齐方式:left,center,right,justify
valign 设置单元格内容垂直对齐方式:top,middle,bottom,baseline
bgcolor 设置单元格的背景颜色
bordercolcr 设置行内单元格的边框颜色(会被覆盖)
bordercolordark 设置行内单元格的左上边框颜色
bordercolorlight 设置行内单元格的右下边框的颜色
5,表格的行分组

表格还提供了标题,表头和表尾部分:

<thead>标签定义表头,用于创建表头的头部信息。

<tfoot>标签定义表尾,用于创建表格的脚注部分。

<tbody>标签定义表格主体,用于表示表格的主体部分;

<caption>标签定义表格标题,显示在整个表格的上方。

表格可以包含多个<tbody>标签,用于对主体部分数据进行分组,<thead><tfoot>只可以出现一次。对大型数据而言,尽量将<tfoot>放在<tbody>之前。有利于加快表格的显示速度。当打印一个较长的表格时,表头可表尾会被打印在包含表格数据的每一页中。

6,表格的列分组:

在html中<colgroup>标签,该标签可以将表格按列进行分组。建议通过css样式实现,<colgroup>标签由于没有内容部分,故写成单标签或双标签的形式均可。span没有值时,默认为一列,一个<colgroup/>为一个列分组,多个为多个列分组。

                                                                                     <colgroup>标签属性

style 设置颜色
align 设置单元格水平对齐方式:left,center,right,justift
valign 设置单元格内容垂直对齐方式:top,middle,bottle,baseline
span 规定该列组应该横跨的列数,默认是1
width 设定列组合的宽度
7,表格的嵌套:

内部表格<table>应该位于外层表格的<td></td>标签之间,嵌套表格的层次一般不超过3—4层。

8,框架

1。框架能够将浏览器窗口划分为多个独立的窗口,每个窗口包含一个独立HTML页面,整个浏览器窗口对应的框架集合称为框架集,

框架集的基本结构:使用<frameset 属性></frameset>语法来划分框架。

<frameset rows="60,*,70" frameborder="yes" framespacing="8" bordercolor="#0033ff">
 <frame src="url"/>
 <frame src="URl"/>
 <frame src="url/>
 </frameset>
 <noframes><body></body></noframes>//当浏览器不支持框架时会显示该部分。

  • 一个<frameset>框架集可以包含多个<frame>框架窗口,具有rows和cols的属性。
  • rows属性用于框架包含的行数,以及各行高度占窗口的像素或比例参数个数两个以上时要用逗号隔开。
  • cols属性用于框架包含的行数,以及各行高度占窗口的像素或比例参数个数两个以上时要用逗号隔开。
  • cols和rows可以单独使用,也可以一起使用。使用混合度量尺度时注意优先级(像素单位>百分比>相对宽度>通配符)
<frameset>标签的属性
属性 描述
rows 设置框架集中包含框架的行数,以及对应的高度rows=“123,123,*”&&rows=“34%,64%,67%”
cols 设置框架集中包含框架的列数,以及对应的宽度clos=“1*,6*,3*”
frameborder 设置框架集的边框是否显示,取值为1,0或yes,no边框本身不能调整宽度
bordercolor 设置框架集的边框的颜色
framespacing 框架与框架的空白距离

2。框架的属性:<frame src="url" name=""……>可以使用单标签<frame />,也可以使用双标签<framesrc></framesrc>

框架属性
属性 描述
name 设置框架的名称,在设置超链接时用作框架的标记
src 设置在框架中显示页面的URL,绝对路径/相对路径
frameborder 设置框架的边框是否显示,取值为0或1
marginheight 定义内容与框架的上下边缘高度,默认为1
marginwidth 定义内容与框架的左右边缘宽度,默认为1
scrolling 设置框架中是否显示滚动条,取值为yes,no,auto
noresize 设置框架不能调整大小,值只有noresize

3。框架集的嵌套

4。内联框架:嵌入到页面中的一个区域,通过<ifreme>标签引入另一个页面资源无需<frameset>,语法如下:<iframe src="url" name="" width="" height=""...></iframe>

内联框架<iframe>常用属性
name 设置iframe的名称
align 设置iframe与周围文本的对齐方式,取值可以是left,right,top,middle,bottom
frameborder 设置iframe的边框是否显示,取0或1.
src 设置在iframe中显示页面的URL
marginheight 定义iframe的顶部与底部的边距
marginwidth 定义iframe的左侧和右侧的边距
height 设置iframe的高度
width 设置iframe的宽度
scrolling 设置iframe中是否有显示滚动条,取值yes,no,auto

4。框架之间的链接,利用设定的target属性选择打开链接的位置。

三,表单

1,表单概述:

From表单是一个重要组成部分,负责采集和提交用户输入的信息,表单主要分为表单标签和表单控件(表单域+按钮),常见的表单域有文本框,密码框,多行文本框,单选按钮,复选框,下拉选择框等。在交互揭界面,用户在表单域录入数据后,可通过表单的特殊控件讲数据传递给服务器。服务器端处理表单的程序通常采用动态脚本语言(JSP,php等)

2,表单标签:

<form ></form>包含表单元素的区域,可以包含一些表单控件,还可以包含其他的HTML标签(表格,段落,标题等),一个页面可以拥有一个或多个表单标签,标签之间相互独立,不能嵌套,在向用户服务器发送数据时一次只能提交一个表单中的数据,要同时提交对个表单,则需要使用JavaScript的异步交互方式。

表单标签的属性
属性 描述
action 当提交表单时,指定服务器端程序来处理数据,属性值一般为程序的URL,说明向何处发送表单中的数据,多用于动态交互性网站
accept 服务器能够处理的内容类型列表,用逗号隔开,HTML5中不在支持
accept-charset 服务器可处理的表单数据字符集
enctype

表单数据内容类型,说明在发送表单数据之前如何对其进行编码(编码方式),取值可以是application/x-www-form-urlencoded在发送前编码所有字符(默认)

multipart/form-data不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。text/plain空格转换为 "+" 加号,但不对特殊字符编码。

id 设置表单对象的唯一标识,方便后期的CSS样式表及JavaScript脚本对其引用
name 设置表单对象的名称
target 打开处理URL的目标位置(不建议使用)
method 规定向服务器端发送数据所采用的方式,取值可以是get,post
onsubmit 向服务器提交数据之前,执行其指定的JavaScript脚本程序
onreset 重置表单数据之前,执行其指定的JavaScript脚本程序

method属性;get方式将数据作为URL的一部分发送给服务器,URL由地址部分和数据部分构成,两者之间用问号‘?’隔开,数据以“名称=值得方式成对出现,且数据之间通过“&”进行分割,get方式请求数据可以被缓冲,能够保留在浏览器历史记录中,还能作为书签被收藏,但因为出现在URL中,安全性低,且URL地址栏有限,最多不能超过255个字符,所以get方式有长度限制。post方式将数据隐藏在HTTP的数据流中进行传输,请求数据不会出现在地址栏中,安全性比get方式要高,对数据长度没有限制,但是post方式请求数据不会被缓存,也不能在历史记录,书签了出现,单机后退或刷新按钮时,数据会被重复提交

3,表单域

表单域多用于收集网站访问者的信息,一般位于<form></form>标签之间,表单域包括文本框,密码框,隐藏框,多行文本框,单选按钮,复选框,列表选择框和文本选择框等元素,除多行文本框<textarea>和列表选择框<select>外,大部分表单域使用<input>标签来创建。
<input>标签的通用属性
属性 描述
id 设置当前控件的唯一ID,界面设计时,在CSS和JavaScript中可以引用
name 设置当前控件的名称。向服务器发送数据时,服务器根据name属性获取对应表单域的值
value 设置表单域的初始值。网页加载过程中,默认显示该值
type

必须的,用来说明当前控件的类型,取值可以是text,pasword,radio,checkbox,file,hidden,button,submi

treset,image等

maxlength 设置输入到文本框的最大字符数,输入达到最大数后,用户按下更多键,也不会添加新的字符
size 设置文本输出控件的宽度,单位为字符

type的属性:texe(定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符),pasword(密码字段。该字段中的字符被掩码。),radio(单选按钮),checkbox(复选框),file(输入字段和 "浏览"按钮,供文件上传),hidden(隐藏的输入字段),button(可点击按钮(多数情况下,用于通过 JavaScript 启动脚本),submit(提交按钮。提交按钮会把表单数据发送到服务器),reset(重置按钮。重置按钮会清除表单中的所有数据),image(图像形式的提交按钮)。

A.单行文本框:通过type属性的text指定,disabled=“disabled”用于指定文本框的禁用状态,并呈现灰色的,readonly=“readonly”用于指定文本框的只读状态。

B.密码框:与文本框类似,type的属性为pasword但显示的当前内容是以掩码的方式显示的,虽然密码框中显示的内容以掩码的方式显示,但是在数据传输中明文发送,需使用加密技术。

C.单选按钮:在一组数据中只能选择其中一个选项。在HTML中将<input>标签的type="radio"的方式创建一个单选项按钮。具有相同name属性值的单选按钮分为一组,value属性指定该项的值,同一组内值不应该相同(提交服务器的值),checked="checked"属性用于指定该项的默认被选中,同一组中有多项checked属性时,最后一个为默认。

D.复选框:在一组数据中可以选择多项/一项,通过type属性的checkbox设定。当复选框中有多项数据时,浏览器会根据复选框的name属性进行分组,当没有value属性时,如果被选中则值为on反之为off,

E.文件选择框:用户通过表单上传文件时,需要使用文件选择框来选择上传文件,通过type属性的file属性值创建一个选择框,accept属性用于指定文件选择窗口的文件类型过滤,单机选择文件时,会在弹出的文件选择窗口中,根据accept指定的类型对文件自动进行过滤,在使用文件选择框时,form表单的enctype属性应设为multipart/form-data类型,method属性应设为post类型。

F.隐藏域:在HTML中,通过type="hidden"来创建一个隐藏域。name指明隐藏域的名称,value指明隐藏域的值。

隐藏域中的数据虽然不能在浏览器中直接显示,但可以通过查看源码的方式找到。隐藏数据可以通过CSS中的dispiay属性或visibility属性显示。

G,多行文本框:用来输入较长的内容的文本输入控件,通过<textarea>标签创建一个多行文本框<textarea></textarea>标签之间的内容会显示,name属性指定多行文本框的名称,rows指定多行文本框的行数,cols指定多行文本框的宽度,单位字符,wrap属性指定文本内容大于文本宽度时的显示方式:off(默认值auto),virtual(实现文本区内的自定换行,以给善对用户的显示,在传输服务器时,在按下enter键的地方换行,其他没有),physical(实现文本区内的自动换行,并以这种形式传递给服务器)。可以采用富文本框RTE来实现。

H,列表选择框:列表选择框允许用户选择一项或多项,通过<select>和<option>标签实现。一个列表中可以包含多个列表项<option>,列表项要放在<select></select>之间。

属性
name 设置列表的名称
size 列表中可见选项的数目
multiple 设置列表是否可以选择多个选项,可以使用multiple或multiple="multiple"形式;允许选择时,需要按下Crtl键选择多项。
disabled 设置列表是否被禁用,可以使用dis

 

猜你喜欢

转载自blog.csdn.net/sanhewuyang/article/details/79553383