Html快速入门总结

一、      HTML基本结构

代码:

<html>

  <head>  我的第一个网页 </head>

  <body> 莫等闲,白领少年头,空悲切!  </body>

</html>

Ø  HTML文档分为文档头和文档体两部分,头部信息和主体部分都包含在<html>和</html>标签之间爱你,这一对标签表示包含为HTML文档。

Ø  头信息放在<head>和</head>之间,用来说明网页的一些基本情况,例如网页的标题等,头部信息在不需要时也可以省略。

Ø  网页主体信息包含在<body>和</body>之间,包含网页的正文部分。

二、1、文本

      (1)分段排版排版:

Ø  预编译标签<pre>…</pre>:添加在文本的开始和结尾处。这个标签括起来的文本在网页中会按照输入时的格式显示。

Ø  换行标签<br>:换行标签加在需要换行的位置,当浏览器遇到这个标签时,会自动进行换行。

Ø  段落标签<p>…</p>:段落标签加在段首和段尾。段落标签和<br>标签的不同之处在于不同段落之间,多一行空行。段落标签<p>有一个属性align,它用来描述文字的对奇方式,一般值有center,left,right三种,分别表示居中,左对齐,右对齐。

Ø  代码:

<html>

 <head><title>换行标签和段落标签</title></head>

 <body>

 <p align=center>静夜思</p>    

        <hr color=blackwidth=100% size=1>

        <pre>床前明月光,疑是地上霜。

                举头望明月,低头思故乡。 </pre>

       <p>这是小学一年级学的一首诗

            今年又想起了小时候</p>

 </body>    

</html>

结果:


(2)字体样式

<font>…</font>对它扩起来的文字样式,它主要有如下属性。

Ø  face:文字所用的字体

Ø  size:文字的大小

Ø  color:文字的颜色

另外样式可以用来设置粗体、斜体、下划线样式。

Ø  粗体标签:<b>…</b>

Ø  斜体标签:<i>…</i>

Ø  下划线标签:<u>…</u>

Ø  例子:

<html>

 <head><title>换行标签和段落标签</title></head>

 <body>

 <pre>

       <font color="green"size="5" face="黑体">锄禾</font>

锄禾日当午,汗滴<i>禾下土</i>。

       谁知<u>盘中餐</u>,粒粒皆<b>辛苦</b>。

       </pre>

 </body>   

</html>

结果:

{

参考HTML配色(转载的):

HTML里,颜色有两种表示方式。一种是用颜色名称表示,比如blue表示蓝色。另外一种是用16进制的数值表示RGB的颜色值。RGBRedGreenBlue意思,RGB每个原色的最小值是0,最大值是255,如果换算成16进制表示,就是(#00)(#FF)。比如白色的RGB(255,255,255),就用#FFFFFF表示;还有黑色的RGB(0,0,0),就用#000000表示。

注:在W3C制定的HTML4.0标准中,只有16种颜色可以用颜色名称表示(aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,olive, purple, red, silver, teal, white, and yellow),其它的颜色都要用16进制RGB颜色值表示。

当然,现在的浏览器支持更多的颜色名称。不过为保险起见,建议你还是采用16进制RGB颜色值来表示颜色。并且在值前加上#这个符号。

为了方便大家找到合适的颜色,我们在这里列了一些颜色说明,以供大家参考,不妨作为一种速查工具。

Web安全颜色

以前,很多电脑显示器最多支持256色,因此出现了216Web安全颜色,以保证网页的颜色能够正确显示。

那为什么不是256Web安全颜色呢?因为MicrosoftMac操作系统有40种不同的系统保留颜色。

以下就是216Web安全颜色:

#000000

#000033

#000066

#000099

#0000cc

#0000ff

#003300

#003333

#003366

#003399

#0033cc

#0033ff

#006600

#006633

#006666

#006699

#0066cc

#0066ff

#009900

#009933

#009966

#009999

#0099cc

#0099ff

#00cc00

#00cc33

#00cc66

#00cc99

#00cccc

#00ccff

#00ff00

#00ff33

#00ff66

#00ff99

#00ffcc

#00ffff

#330000

#330033

#330066

#330099

#3300cc

#3300ff

#333300

#333333

#333366

#333399

#3333cc

#3333ff

#336600

#336633

#336666

#336699

#3366cc

#3366ff

#339900

#339933

#339966

#339999

#3399cc

#3399ff

#33cc00

#33cc33

#33cc66

#33cc99

#33cccc

#33ccff

#33ff00

#33ff33

#33ff66

#33ff99

#33ffcc

#33ffff

#660000

#660033

#660066

#660099

#6600cc

#6600ff

#663300

#663333

#663366

#663399

#6633cc

#6633ff

#666600

#666633

#666666

#666699

#6666cc

#6666ff

#669900

#669933

#669966

#669999

#6699cc

#6699ff

#66cc00

#66cc33

#66cc66

#66cc99

#66cccc

#66ccff

#66ff00

#66ff33

#66ff66

#66ff99

#66ffcc

#66ffff

#990000

#990033

#990066

#990099

#9900cc

#9900ff

#993300

#993333

#993366

#993399

#9933cc

#9933ff

#996600

#996633

#996666

#996699

#9966cc

#9966ff

#999900

#999933

#999966

#999999

#9999cc

#9999ff

#99cc00

#99cc33

#99cc66

#99cc99

#99cccc

#99ccff

#99ff00

#99ff33

#99ff66

#99ff99

#99ffcc

#99ffff

#cc0000

#cc0033

#cc0066

#cc0099

#cc00cc

#cc00ff

#cc3300

#cc3333

#cc3366

#cc3399

#cc33cc

#cc33ff

#cc6600

#cc6633

#cc6666

#cc6699

#cc66cc

#cc66ff

#cc9900

#cc9933

#cc9966

#cc9999

#cc99cc

#cc99ff

#cccc00

#cccc33

#cccc66

#cccc99

#cccccc

#ccccff

#ccff00

#ccff33

#ccff66

#ccff99

#ccffcc

#ccffff

#ff0000

#ff0033

#ff0066

#ff0099

#ff00cc

#ff00ff

#ff3300

#ff3333

#ff3366

#ff3399

#ff33cc

#ff33ff

#ff6600

#ff6633

#ff6666

#ff6699

#ff66cc

#ff66ff

#ff9900

#ff9933

#ff9966

#ff9999

#ff99cc

#ff99ff

#ffcc00

#ffcc33

#ffcc66

#ffcc99

#ffcccc

#ffccff

#ffff00

#ffff33

#ffff66

#ffff99

#ffffcc

#ffffff

微软支持的颜色名称

下面是微软IE4.0以上都支持的颜色名称:

aliceblue
(#f0f8ff)

antiquewhite
(#faebd7)

aqua
(#00ffff)

aquamarine
(#7fffd4)

azure
(#f0ffff)

beige
(#f5f5dc)

bisque
(#ffe4c4)

black
(#000000)

blanchedalmond
(#ffebcd)

blue
(#0000ff)

blueviolet
(#8a2be2)

brown
(#a52a2a)

burlywood
(#deb887)

cadetblue
(#5f9ea0)

chartreuse
(#7fff00)

chocolate
(#d2691e)

coral
(#ff7f50)

cornflowerblue
(#6495ed)

cornsilk
(#fff8dc)

crimson
(#dc143c)

cyan
(#00ffff)

darkblue
(#00008b)

darkcyan
(#008b8b)

darkgoldenrod
(#b8860b)

darkgray
(#a9a9a9)

darkgreen
(#006400)

darkkhaki
(#bdb76b)

darkmagenta
(#8b008b)

darkolivegreen
(#556b2f)

darkorange
(#ff8c00)

darkorchid
(#9932cc)

darkred
(#8b0000)

darksalmon
(#e9967a)

darkseagreen
(#8fbc8b)

darkslateblue
(#483d8b)

darkslategray
(#2f4f4f)

darkturquoise
(#00ced1)

darkviolet
(#9400d3)

deeppink
(#ff1493)

deepskyblue
(#00bfff)

dimgray
(#696969)

dodgerblue
(#1e90ff)

firebrick
(#b22222)

floralwhite
(#fffaf0)

forestgreen
(#228b22)

fuchsia
(#ff00ff)

gainsboro
(#dcdcdc)

ghostwhite
(#f8f8ff)

gold
(#ffd700)

goldenrod
(#daa520)

gray
(#808080)

green
(#008000)

greenyellow
(#adff2f)

honeydew
(#f0fff0)

hotpink
(#ff69b4)

indianred
(#cd5c5c)

indigo
(#4b0082)

ivory
(#fffff0)

khaki
(#f0e68c)

lavender
(#e6e6fa)

lavenderblush
(#fff0f5)

lawngreen
(#7cfc00)

lemonchiffon
(#fffacd)

lightblue
(#add8e6)

lightcoral
(#f08080)

lightcyan
(#e0ffff)

lightgoldenrodyellow
(#fafad2)

lightgreen
(#90ee90)

lightgrey
(#d3d3d3)

lightpink
(#ffb6c1)

lightsalmon
(#ffa07a)

lightseagreen
(#20b2aa)

lightskyblue
(#87cefa)

lightslategray
(#778899)

lightsteelblue
(#b0c4de)

lightyellow
(#ffffe0)

lime
(#00ff00)

limegreen
(#32cd32)

linen
(#faf0e6)

magenta
(#ff00ff)

maroon
(#800000)

mediumaquamarine
(#66cdaa)

mediumblue
(#0000cd)

mediumorchid
(#ba55d3)

mediumpurple
(#9370db)

mediumseagreen
(#3cb371)

mediumslateblue
(#7b68ee)

mediumspringgreen
(#00fa9a)

mediumturquoise
(#48d1cc)

mediumvioletred
(#c71585)

midnightblue
(#191970)

mintcream
(#f5fffa)

mistyrose
(#ffe4e1)

moccasin
(#ffe4b5)

navajowhite
(#ffdead)

navy
(#000080)

oldlace
(#fdf5e6)

olive
(#808000)

olivedrab
(#6b8e23)

orange
(#ffa500)

orangered
(#ff4500)

orchid
(#da70d6)

palegoldenrod
(#eee8aa)

palegreen
(#98fb98)

paleturquoise
(#afeeee)

palevioletred
(#db7093)

papayawhip
(#ffefd5)

peachpuff
(#ffdab9)

peru
(#cd853f)

pink
(#ffc0cb)

plum
(#dda0dd)

powderblue
(#b0e0e6)

purple
(#800080)

red
(#ff0000)

rosybrown
(#bc8f8f)

royalblue
(#4169e1)

saddlebrown
(#8b4513)

salmon
(#fa8072)

sandybrown
(#f4a460)

seagreen
(#2e8b57)

seashell
(#fff5ee)

sienna
(#a0522d)

silver
(#c0c0c0)

skyblue
(#87ceeb)

slateblue
(#6a5acd)

slategray
(#708090)

snow
(#fffafa)

springgreen
(#00ff7f)

steelblue
(#4682b4)

tan
(#d2b48c)

teal
(#008080)

thistle
(#d8bfd8)

tomato
(#ff6347)

turquoise
(#40e0d0)

violet
(#ee82ee)

wheat
(#f5deb3)

white
(#ffffff)

whitesmoke
(#f5f5f5)

yellow
(#ffff00)

yellowgreen
(#9acd32)

 }

3)标题

HTML中提供了标签<h1><h2><h3><h4><h5><h6><hn>n表示标题级别,n值越小,标题字号越大。

二、       网页背景

(1)    背景颜色:在<body>标签中通过属性bgcolor设置背景颜色,例如将网页设置成银色,只需要在<body>标签中加入代码bgcolor=”sliver”或者bgcolor=”#0c0c0c”即可。

(2)    背景图像:将图片放入站点中,它的一般形式是<body backcolor=图像路径>

三、       图像

(1)    网页中插入图像的标签是<img>:<img src=图像路径>

(2)    <img>标签的常用属性:

src:图像文件的路径,一般使用图像文件相对于网页文档的相对路径

alt:图像的说明文字,在网页不能正常显示出现,另外在浏览器中,当光标经过并短暂停留时,也会显示该显示出该说明文字。

width:和heigth图像的高度和宽度,单位是像素,默认为图像的实际大小

align:图像与周围文字的环绕效果,值leftrigth分别表示子啊水平方向上图像左对齐和右对齐。值topmiddlebottom分别表示图像和文字在垂直方向上顶端对齐、居中对齐和低端对齐。

border:边框的宽度,单位是像素

hspacevspace图像在浏览器中显示的水平间距和垂直间距

例子代码:

<html>

 <head><title>图像应用</title></head>

 <body>

   <img src=1.jpg align=right alt="奥黛丽赫本" width=200 heigth=150>

 <font size=3>奥黛丽·赫本(Audrey Hepburn),女,192954日出生于比利时布鲁塞尔,英国电影和舞台剧女演员。

1948年,赫本在一部时长仅39分钟的荷兰风光纪录片《荷兰七课》中出境,开始电影。1954年,她在影片《罗马假日》中第一次出演女主角,并获得奥斯卡最佳女主角奖。同年,她因在舞台剧《美人鱼》中的表演,获得托尼奖的最佳女主角。1964年,她主演了歌舞片《窈窕淑女》。1989年,息影多年的奥黛丽客串出演最后一部电影《直到永远》。1992年被授予美国“总统自由勋章”,1993年获奥斯卡人道主义奖[1]1999年,她被美国电影学会评为“百年来最伟大的女演员”第三位。20025月,联合国儿童基金会在其纽约总部为一尊7英尺高的青铜雕像揭幕,雕像名字为奥黛丽精神(The Spirit of Audrey),以表彰赫本为联合国所做的贡献。</font>

 </body>   

</html>

效果:

四、      超链接(HyperLink)

基本语法格式如下:<ahref=连接目标地址>文字或图像</a>

语法说明:

Ø  在HTML文件中,超链接目标可以分为内部链接(一般用相对地址)和外部链接(一般用绝对地址,如http://www.sina.com.cn)。

Ø  连接的原点可以使文字或者图像。

Ø  另外,比较特殊是在网页上的添加一个电子邮件连接。添加电子邮件链接,只需要在希望连接的电子邮件的文字前后分别加上<a href=mailto:电子邮件地址>和</a>即可。在浏览网页时,点击连接文字就可以打开本机上默认的电子邮件收发软件。(例如:<p><a href=1929695359@qq.com>联系我们</a><p>)

五、      表格

Ø  <table>…</table>:表格的开始结束标签。

Ø  <tr>…</tr>:行标签。

Ø  <td>…</td>:列标签。

Ø  表格相关属性标签

& border:标签<table>的属性,表示表格边框的宽度,单位为像素,默认宽度为0,即无边线。

&  width和height:适用于标签<table>、<tr>、<td>,分别用来表示表格、行和单元格的对齐方式,值有left(左对齐)、center(居中)、right(右对齐)。用于<table>时,表示表格在父级单位(如页面等)中的对齐方式。用于<tr>表示整行单元格内对象的对齐方式;

&  valign:适用于标签<tr>和<td>,表示单元格内容在垂直方向的对齐方式,值有top(顶端)、middle(居中)、bottom、baseline(基线)。

&  bgcolor:适用于标签<table>、<tr>和<td>,分别用来表死表格、行和单元格的背景颜色。

&  background:适用于标签<table>、<tr>、<td>,分别用来表示表格、行和单元格的背景图像,但一般不用于<tr>,显示容易出问题。

&  cellspacing:标签<table>的属性,表示单元格的间距,单位为像素。

&  cellpadding:标签<table>的属性,表示单元格的边距,单位为像素。

&  colspan:标签<td>的属性,表示跨多列,如colspan=3表示该单元格跨3列,即横向合并单元格。

&  rowspan:标签<td>的属性,表示跨多行,rowspan=2表示该单元跨2列,即纵向合并2个单元格。

代码例子:

<html>

 <head><title>图像应用</title></head>

 <body>

<tableborder=1 width=600 align="center" cellspadding="3" cellspacing="2"background="1.jpg">

<tralign="center"><td colspan="5">成绩单</td></tr>

<tralign="center"><th>学号</th><th>姓名</th><th>JSP程序设计</th><th>程序设计</th><th>计算机网络</th></tr>

<tralign="left"><td>20141222</td><td>张小凡</td><td>90</td><td>78</td><td>82</td></tr>

<tralign="left"><td>20141223</td><td>王丽静</td><td>88</td><td>54</td><td>51</td></tr>

<tralign="left"><td>20141224</td><td>李迪</td><td>88</td><td>84</td><td>76</td></tr>

</table>

 </body>

</html>

效果:


六、      框架

(1)    概念:框架的作用就是把浏览器窗口划分为若干个区域,每个区域可以分别显示不同的网页。框架主要包括两个部分,框架集(frameset)和框架(frame)。框架是在一个文档内定义一组框架结构的HTML网页,框架集中定义了一个窗口中显示的框架数、框架尺寸、载入到框架的网页等;而框架则是指在网页上定义的一个显示区域。<frameset>是框架集的标签,通过<frame>标签定义的一个框架。

框架集的基本代码如下:

<frameset>

<frame src=框架内嵌入网页的路径  name=框架名称>

….

</frameset>

<frame>的属性src表示嵌入的网页文件路径,一般也使用相对路径;name表示该框架的名称。

使用<frameset>的rows和cols属性可以设置浏览器分为几个框架。

               代码例子:

           frameset.html

           <html>

               <head>

           <title>框架应用</title>

           </head>

           <framesetrows="80,*"cols="*" frameborder="yes"border="2"

bordercolor="#D6D6D6">

                 <framesrc="top.html" name="topFrame">

                      <framesetcols="15%,85%" frameborder="yes" border="2"bordercolor="#D6D6D6">

                            <framesrc="left.html" name="leftFrame">

                            <framesrc="main1.html" name="mainFrame">

                           

                 </frameset>

           <noframes><body></body></noframes>

     

      </html>

 

frameset.html代码分析:在该例中浏览器被划分为3个区域,即分为三个框架。上下两个,下面又分为左右两个。

Ø  <frameset rows="80,*"cols="*"frameborder="yes" border="2"

bordercolor="#D6D6D6">,属性rows=“80,*”,表名浏览器被划分为上下两个区域,上边区域高为80像素,下边区域高用“*”号表示“相对”,即除去80像素后剩余大小;属性fameborder=“yes”表示框架有边框,如果值为no则不现实边框;属性border=“2”表示卡U年国家边缘的像素为2像素,属性bordercolor="#D6D6D6"用来设置框架边框的颜色。

Ø  <frame src="top.html" name="topFrame">,表示上边边框中嵌入了一个网页top.html,name为框架的名称。

Ø  <frameset cols="15%,85%" frameborder="yes"border="2" bordercolor="#D6D6D6">,属性cols="15%,85%"表示下面区域又被划分为左右两个框架,左边为15%,右边为85%,框架边框宽为2,最后一个为边框颜色。

Ø  <frame src="left.html" name="leftFrame">和<frame src="main1.html"name="mainFrame">表示左右两边嵌入的网页和各自的框架名。

Ø  <noframes><body></body></noframes>标签内的内容将只会出现在不支持框架的浏览器中。

           left.html

           <html>

      <body bgcolor="#eeeeee">

           <font size=3>

                 <p><ahref="main1.html" target="mainFrame">锄禾</a></p>

                 <p><ahref="main2.html" target="mainFrame">静夜思</a></p>

                

                 </font>

           </body>

      </html>    

           main1.html

<html>

      <head><title>锄禾</title></head>

      <body>

           <p align="center">锄禾</p>

           <p align="center">锄禾日当午,汗滴禾下土。</p>

           <p align="center">谁知盘中餐,粒粒皆辛苦。</p>

           </body>

      </html>

           main2.html

           <html>

      <head><title>静夜思</title></head>

      <body>

           <p align="center">静夜思</p>

           <p align="center">床前明月光,疑是地上霜。</p>

           <p align="center">举头望明月,低头思故乡。</p>

           </body>

      </html>

结果显示:


七、      表单

(1)    概念:表单是网页中提供的一种交互式操作手段,在网页中的使用十分广泛。无论是提交搜索信息还是网上注册等都要使用表单。用户可以通过提交表单信息与服务器进行动态交流。表单主要分为两个部分:一是HTML源代码描述表单;另一室提交后的表单处理,需要调用服务器编写好的JSP等代码对客户端提交的信息作出回应。

(2)    表单基本语法:

<form name=” ” method=” ” action=” ” enctype=” ”>表单项、文字、图片等</from>

其中name表示表单的名称;action制定接纳表单数据的JSP页面或者Servlet,如果该属性为空,则提交给当前页面;method指定的传输方式,可以选择post或get;entype制定传输的编码方式,默认值是application/x-url-encoded,利用表单上传文件时,需要改变编码方式,此时需要post方法。

表单最重要的作用是获取用户信息,这就是在表单中加入表单项(控件),例如文本框,单选按钮等,常用的表单项如下:

<input type=”text”> 单行文本框

<input type=”password”> 密码文本框

<input type=”submit”> 提交按钮,将表单里的信息提交给表单里action所指向的地址

<input type=”image”> 图片提交

<input type=”reset”> 重置按钮,重设表单内容

<input type=”button”> 普通按钮

<input type=”hidden”> 隐藏元素

<input type=”radio”> 单选按钮

<input type=”checkbox”> 复选框

<input type=”file”> 文件域

<select>…</select>列表框

<textarea>…</textarea>多行文本框

n  单行文本框

单行文本框允许用户输入一些简单的单行的信息,例如用户姓名,住址等,其基本语法如下:

<input type=text name=”名称” size=”数值” value=”预设内容” maxlength=”数值”>

Ø  name:设定文本框的名称,数据交互中会用到。

Ø  size:设定此文本框显示的宽度。

Ø  value:设定此文本框的预设内容。

Ø  maxlength:设定此文本框输入的最大长度。

n  密码框

密码框主要用于一些保密信息的输入,例如密码。其基本语法如下所示:

<input type=password name=”名称” value=“预设内容” maxlength=“数值”>

n  提交按钮

通过提交按钮可以将表单里的信息提交给表单action所指向的文件四肢。其基本语法如下:

<input type=submit name=”名称” value=”预设内容”>

Ø  name:设定提交按钮的名称。

Ø  value:设置按钮上相识的文本,默认为“提交”。

n  图片提交

“图片提交”作用和“提交按钮”相同,不同的是“图片提交”以一个图片作为表单的提交按钮,其中src属性表示图片的路径。其基本语法如下所示:

<input type=image src=”图片路径” name=”名称” alt=“替代文本”width=“宽度”height=“高度”>

Ø  name:设定提交图片的名称。

Ø  src:图像路径,一般使用不显示时的替换文本。

Ø  alt:光标经过图像护着图像不显示时的替换文本。

Ø  width:设定图像的高度。

Ø  height:设定图像的高度。

图片提交代码如下,

<input type=image src=”images/sub.gif” name=”imageField” alt=”点击提交”>

(5)重置按钮

重置按钮是表单中另外一个比价常用的按钮,其作用是充值用户填写的信息。其基本信息,如下表示:

<input type=”reset” name=”名称” value=”预设内容”>

Ø  name:设定提交按钮的名称。

Ø  value:设定按钮上显示的文本,默认为“重置”。

(6)普通按钮

表单中经常用到的普通按钮,它没有默认的动作,有时需要利用JavaScript来做一些特殊的效果使用。其基本语法如下所示:

<input type=”button” name=”名称” value=”预设内容”>

除了按钮的显示文字外,可以在按钮上添加很多小姑,特别是单机按钮后发生的事件等,如下代码:

<input type=”button” name=”button1” value=”单击进入” οnclick=“alert(‘你单击按钮了‘)”>

(7)隐藏元素

隐藏元素多用于在提交表单时向服务器传递一些不需要用户设定但程序必需的参数值。这在动态网页中的需要更加明显。其基本语法如下所示:

<input type=hidden name=”参数名称” value=“参数取值”>

隐藏元素一本位于<form></from>标签内,在表单提交时一同被发送给服务器端,瞎卖弄是一个隐藏元素的使用示例,功能是在表单提交时,将用户的IP地址和用户所在的地区传送给服务器端,这种数据传递用户旺旺是没有发觉的。

<input type=hidden name=userIp value=”123.123.123.123”>

<input type=hidden name=region value=”northeast”>

<input type=submit value=注册>

(8)单选按钮

单选按钮通常是给出几个选项提供用户选择,一次只能从中选一个,应用单选按钮时要确定显示给用户的文字和不同选项的取值。其基本语法如下所示:

<input type=radio name=”名称” value=”选项内容” checked=”checked”>

Ø  value:设定此框的选定值。

Ø  checked:当该选项默认被选中时设定,否则不设定。

(9)复选框

复选框通常是给出几个选项供用户选择,并且可以从中选择多个,使用复选框时也要确定显示给用户的文字和不同选项的取值。其基本语法如下:

<input type=”checkbox” name=”名称” value=”选项内容” checked=”checked”>

Ø  value:设定此复选框的选定值

Ø  checked:当该项默认被选中时设定,否则不设定

(10)文件域

文件域用来填写文件路径,通过表单上传文件的地方。其基本语法如下所示:

<input type=”file” name=”名称”>

(11)下拉列表

下拉列表是表单中提供用户选择的一个表单项,列表框可以显示多个选项供给选择,且用户能同时选其中的一个或多个。列表框中包含<option>标签。其基本语法如下所示:

<select name=”名称” size=”大小” multiple=”multiple”>

<option value=” ”></option>

</select>

Ø  name:设定下拉列表的名称。

Ø  size:设定下拉列表显示选项的个数。

Ø  multiple:设定此下拉列表可多选,如果为单选则省略该项。

Ø  value:<option>的属性,当选择该项时的值。

<select>中size属性指整个选项框内显示的选项个数,默认值为1,当size值大于1时,列表框会改变形式,显示出多个列表项。一般情况下,列表框都是用在单选框的情况下,如果要使用多选功能,只要加上multiple=”multiple”就可以了。

(12)多行文本框

多行文本框用来输入较多的文字信息,常在新闻发布与论坛等系统中用到。其基本语法如图所示:

<textarea name=名称 rows=”文本框的显示行数” cols=”文本框的显示行数”></textarea>

Ø  rows:文本框显示的行数。

Ø  cols:文本框显示的列数。

使用多行文本框时主要是确定它的名称以及大小(行数和列数),当输入的文字超过显示容量时,多行文本框自动产生滚动条。

<html>

  <head><title>表单应用</title></head>

  <body>

       <formaction="" method="post"enctype="multipart/form-data" name="from1"></form>

       <tablewidth="410" border="1" align="center"bgcolor="#9AD3A4" bordercolor=#385610>

             <tr>

                  <tdcolspan="2" align=center>会员注册</td>

                  </tr>

                  <tr>

                        <tdcolspan="90" align=center>用户名:</td>

                        <tdwidth="320"><input type="text"name="userid"></td>

                        </tr>

                        <tr>

                              <tdalign="right">密码:</td>

                              <td><inputtype="password" name="pass"></td>

                              </tr>

                              <tr>

                                   <tdalign="right">确认密码:</td>

                                   <td><inputtype="password" name="pass2"></td>

                                   </tr>

                                   <tr>

                                         <tdalign="right">性别:</td>

                                         <td><inputtype="radio" name="gender" value="male">男

                                                <input type="radio"name="gender" value="female">女

                                              </td>

                                         </tr>

                                         <tr>

                                              <tdalign="right">爱好:</td>

                                              <td>

                                                  <inputtype="checkbox" name="checkbox" value="001">体育

                                                  <inputtype="checkbox" name="checkbox2" value="001">音乐

                                                  <inputtype="checkbox" name="checkbox3" value="001">文学

                                                  <inputtype="checkbox" name="checkbox4" value="001">其他

                                                    </td>

                                              </tr>

                                              <tr>

                                                    <tdalign="right">所在城市:</td>

                                                    <td><selectname="select">

                                                          <optionvalue="01">北京</option>

                                                          <optionvalue="02">上海</option>

                                                          <optionvalue="03">天津</option>

                                                          <optionvalue="04">重庆</option>

                                                          </select>

                                                          </td>

                                                    </tr>

                                                    <tr>

                                                          <tdalign="right">照片:</td>

                                                          <td><inputtype="file" name="photo"></td>

                                                          </tr>

                                                          <tr>

                                                               <tdalign="right">备注:</td>

                                                                <td><textareaname="textfiled" rows="3"></textarea></td>

                                                               </tr>

                                                               <tr>

                                                                     <td>&nbsp;</td>

                                                                     <td><inputtype="submit" name="Submit" value="提交">

                                                                          &nbsp;&nbsp;<input type="reset" name="Submit2" value="重置">

                                                                          </td>

                                                                     </tr>

             </table>

       </body>

  </html>

显示结果为:

 

 

 

 

 

 


  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
### 回答1: HTML网页设计是一项广泛应用于创建网页的技能,它从入门到精通需要一定的学习和实践。下面是一个简单的学习路径,帮助你逐步进阶。 入门阶段: 1. 学习基本HTML标记语言:了解HTML的基本结构、标签的作用和语法。 2. 理解HTML元素和属性:学习常用的HTML元素和属性,如标题、段落、链接等,以及它们的用法和属性设置。 3. 掌握文本格式化和排版:学会使用HTML标签对文本进行格式化和排版,如加粗、斜体、居等。 进阶阶段: 1. 学习HTML表单:了解表单元素的使用和属性设置,学会创建各种表单元素并实现表单验证。 2. 掌握CSS样式:学习如何使用CSS来美化网页,包括字体、颜色、背景、布局等,提升网页的视觉效果。 3. 学习响应式设计:了解如何使用媒体查询和流体网格布局使网页适应不同设备和屏幕尺寸。 4. 学习JavaScript交互:了解JavaScript的基本语法和常用功能,使用JavaScript实现网页的动态交互效果。 精通阶段: 1. 学习HTML5新特性:了解HTML5的新元素、新API和多媒体支持等,使网页更加丰富和功能强大。 2. 学习CSS高级技术:深入了解CSS的高级特性如动画、过渡、变形等,实现更复杂和炫酷的效果。 3. 学习前端框架:了解并使用流行的前端框架,如Bootstrap、Vue.js等,提高开发效率和代码质量。 4. 学习优化和性能调优:了解网页性能优化技巧,如文件压缩、懒加载、缓存等,优化网页加载速度和用户体验。 要成为HTML网页设计的专家,除了课堂学习和实践外,还需要不断关注行业动态和新技术,积极参与项目实践,才能不断提升自己的能力。 ### 回答2: HTML网页设计从入门到精通需要经历一系列的学习和实践。首先,入门阶段,我们需要了解HTML的基础知识,学习HTML标签及其属性的用法,理解HTML文档的结构和语义。 在入门阶段之后,需要进一步掌握CSS样式和布局。了解如何通过CSS来美化网页,掌握常用的CSS属性和选择器的用法,学会使用CSS实现网页布局和响应式设计。 接下来,需要掌握一些前端框架和库,如Bootstrap和jQuery等。这些工具可以大大简化网页设计的过程,提供快速的响应式布局和交互效果。 同时,网页设计也需要考虑到网页的可访问性和SEO优化。学习如何设计无障碍的网页,合理使用标签和属性以提高网页的可访问性。了解SEO优化原则,优化网页的标题、关键字、描述等元素,提高网页在搜索引擎的排名。 此外,学习如何调试和优化网页性能也是进阶的关键。了解常见的网页性能优化技巧,如减少HTTP请求、压缩文件大小、使用缓存等,以提高网页的加载速度和响应性能。 最后,不断实践和练习是提高网页设计技能的关键。通过实际的项目经验,不断改进和完善自己的设计能力,才能逐渐达到精通HTML网页设计的水平。 总结起来,HTML网页设计从入门到精通需要掌握HTML基础知识、CSS样式和布局、前端框架和库的使用、网页的可访问性和SEO优化、网页性能优化等多个方面的知识和技能。通过不断学习和实践,我们可以逐步提高自己的设计水平,最终达到精通的程度。 ### 回答3: HTML网页设计是制作网页的基础,学习和掌握HTML网页设计需要一定的时间和努力。下面是从入门到精通HTML网页设计的步骤: 入门阶段: 1. 在入门阶段,了解HTML的基本概念和语法是必不可少的。可以通过在线教程或者书籍学习HTML的基础知识。 2. 学习HTML的标签和属性,掌握常用的HTML标签如<div>、<p>、<img>等等,并学会使用属性来为标签添加样式和功能。 3. 熟悉HTML的文本格式化标签,如<strong>、<em>、<h1>等等,可以用来设置文本的样式和重要性。 4. 学习如何创建超链接和图像嵌入,了解<a>和<img>标签的使用方法,掌握超链接和图像的添加和跳转功能。 进阶阶段: 1. 学习使用HTML表单元素,如<input>、<textarea>、<select>等等,了解表单的构建和提交过程。 2. 掌握HTML的列表标签,如<ul>、<ol>、<li>,可以用于创建有序列表和无序列表。 3. 学习如何使用HTML的表格标签,如<table>、<tr>、<td>等等,可以用于创建数据的展示和排列。 4. 熟悉使用HTML的框架和Iframe标签,可以将网页分割成多个部分或者嵌入其他网页。 精通阶段: 1. 学习和掌握HTML5的新特性,如语义化标签、音频视频播放等,能够使用HTML5进行更加丰富多样的网页设计。 2. 掌握CSS样式表的使用,可以为HTML网页添加样式和布局,提高网页的美观性和可读性。 3. 学习响应式设计和移动优先的网页开发方法,使网页在不同终端上都能有良好的体验。 4. 学习和使用JavaScript等脚本语言,为网页添加交互性和动态效果。 通过逐步学习和实践,从入门到精通HTML网页设计需要不断积累经验和掌握新的技术,同时也需要不断关注行业的发展和新的设计趋势。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值