常用的HTML标记

常用的HTML标记基本结构标记HTML语言是由一些标记、字母和文字组成的，可以用你熟悉的编辑器来编辑它，例如EDIT、VI、WS、WORD等。纯HTML语言文件一定要以纯文本方式保存，因为浏览器只认识纯文本格式的文件，并且文件名要存为*.HTML或者*.HTM形式。序与注释标记“!”与“”（也可以写为“!—”与“--”)这对符号之间的内容不被浏览器显示。注释的作用:使HTML文件更容易理解。开始与结束标记HTML/HTML语法格式：HTML从这里开始的内容为HTML文档。/HTML头部标记head/head语法格式：headHTML文档的头部内容/head头部里面一般包括注释、META和标题。标题标记title/title语法格式：titleWeb页面的标题/title页面标题写在头部标记之中，会显示在Web浏览器最上面的标题栏的位置。主体标记语法格式：body这里为HTML文档的主体内容。/bodybody还有一些属性可以设定背景色，背景图形等。例1：HTMLheadtitleHTML语言的结构/title看看HTML语言的结构/headbody使用HTML语言编写文件，了解HTML语言的结构。/body/HTML保存时，“保存类型”选择“纯文本”，“文件名”写“1.html”。语法格式：body[bgcolor=#|text=#|link=#|alink=#|vlink=#|background=图形文件名]文档内容/bodyBODY中的一些属性文本格式标记标题字体H/H被H1和/H1夹在中间的文字，是文章里的大号标题字体。依次可以标注出六个层级的子标题，从H1、H2到H6。语法格式：Hicolor=#|align=#标题文字/Hi(i=1,…6)例2：htmlbodyh1H1的标题字体最大！/h1h2H2的标题字体较大！/h2h3这是H3标题字体！/h3h4这是H4标题字体！/h4h5这是H5标题字体！/h5h6H6标题字体最小！/h6/body/html字体大小标记font/font改变包含的字符、单词、短语或制定范围文本的字号大小语法格式：Fontsize=#文字/font＃=1,2,3,4,5,6,7or+#,-#,缺省时为3号字体。例3：htmlbodyfontsize=77号字体的字。/fontfontsize=55号字体的字。/fontfontsize=33号字体的字。/fontfontsize=22号字体的字。/fontfontsize=11号字体的字。/font/body/html段落标记p/p与换行标记br语法格式：p文本/p文本brbr是单独使用的。例4：htmlbody在html格式里我们不需要在意文章每行的宽度，不必担心文字是不是太长了而被截掉。（没加标记）p在html格式里我们不需要在意文章每行的宽度，/pp不必担心文字是不是太长久了而被截掉。（加段落标记）/pp在html格式里我们不需要在意文章每行的宽度，br不必担心文字是不是太长了而被截掉br/body/html超连接标记A/A链接至本机另一Web页面链接到另外一台机器上的Web页面Ahref=“路径/filename.html”链接filename/AAhref=“URL”这里是某地方/A例5：htmlheadtitleWeb页面制作/title/headbody例如：可以链接到本机的ahref=1.html“1.html”web页/ap链接到另外一台机器上的Web页面也很简单，只要把目的地的URL地址赋给href就可以了。/p例如，想链接到“网易”的主页，ahref=只要在这里点一下/a即可。/body/html链接到同一文章的另一段落需要先做出一个“锚”标记，即链接目的地，再做到“锚”的链接。例6：headtitleWeb页面制作/title/headbodyaname=第一章第一章/a为锚标记。p除了链接到另外一个HTML文件，也可以在一篇文章内随心所欲地链接。br这和前面两种稍有不同，需要先做一个“锚”标记，即链接的目的地，br再做到“锚”的链接。到“锚”的链接与平常相同。/pp/pp/pp/phrahref=#第一章从这里可链接到第一章/a/body/html链接到不同文件的另一段落例7：htmlheadtitleWeb页面制作/title/headbodyahref=6.html#第一章当我们在这里点一下/a就会跳到6.html文章的“第一章”这个位置。/body/html图像标记imghtmlheadtitleWeb页面制作/title/headbody这里要插入一个图像imgsrc=1.jpg/body/html表格标记table/table1、表格标记table…/table2、表格的标题标记captionalign=#…/captionalign=top,bottom3、表格行标记TR…/TR4、字段名标记TH字段名/TH5、数据标记TD数据/TD例9：htmltablecaption/captiontrth日期/thth香菇/thth青椒/th/trtrtd9.2/tdtd28.00/tdtd0.90/td/trtrtd9.3/tdtd25.00/tdtd0.93/td/tr/tablehrtableborder=4caption/captiontrth日期/thth香菇/thth青椒/th/trtrtd9.2/tdtd28.00/tdtd0.90/td/trtrtd9.3/tdtd25.00/tdtd0.93/td/tr/table/html地址标记address/address语法格式：address…/address标记之间的字是斜的。例10：htmlheadtitle地址练习/title/headbodyaddress地址：保定师范专科学校中文系电话：[phone]E-mail:ahref=mailto:[e-mail]@163.COM/a/address/body/html表单标记form/form简单输入文本框例11：htmlbodyform这是一个文本框inputtype=textname=x1size=15/form/body/html语法格式：forminputtype=“text”name=“NAME”size=#value=“x”maxlength=N/form显示初值的多个文本框例12：htmlbodyform电话号码:inputtype=textname=x1value=03125972082br姓名：inputtype=textname=x2br出生日期：inputtype=textname=x3value=1982.08.06/form/body/html输入口令的文本框例13：htmlbodyform口令：inputtype=passwordname=8maxlengh=8/form/body/html语法格式：forminputtype=“password”name=“NAME”maxlengh=#/form多行多列的文本框例14：htmlbodyform一个多行多列文本框textareaname=x1cols=30rows=8/textarea/form/body/html语法格式：formtextareaname=“NAME”cols=#rows=#textarea/formcols:确定文本框的宽度；rows：确定文本框的高度提交及重置按钮例15：htmlbodyform电话号码:inputtype=textname=x1br姓名：inputtype=textname=x2br出生日期：inputtype=textname=x3value=1982.08.06brinputtype=submitvalue=提交inputtype=resetvalue=重置/form/body/html语法格式：forminputtype=“submit”value=“NAME”inputtype=“reset”value=“NAME”/form单选框例16：htmlbodyformh3单选框brinputtype=radioname=x1value=YesYesinputtype=radioname=x1value=NoNobr/h3inputtype=submitvalue=提交inputtype=resetvalue=重置/formformh3多选一brinputtype=radioname=x1value=篮球checked篮球brinputtype=radioname=x1value=足球足球brinputtype=radioname=x1value=乒乓球乒乓球brinputtype=radioname=x1value=排球排球br/h3inputtype=submitvalue=提交inputtype=resetvalue=重置/form/body/html语法格式：formh3单选框inputtype=“radio”name=“NAME”value=“x”…inputtype=“radio”name=“NAME”value=“x”/form提示：单选框属性Name的属性值“NAME”是相同的，因为只选择一个输入信息。多选框例17：htmlbodyformh3多选框/h3inputtype=checkboxname=x1北京/brinputtype=checkboxname=x2上海/brinputtype=checkboxname=x3天津/brinputtype=checkboxname=x4重庆/brinputtype=checkboxname=x5checked武汉pinputtype=submitvalue=提交inputtype=resetvalue=重置/form/body/html语法格式：formh3多选框/h3inputtype=“checkbox”name=“NAME1”…inputtype=“checkbox”name=“NAMEn”/form提示：多选框属性name的属性值“X”是不相同的，因为可以选择多个输入信息。下拉菜单例18：htmlbody