HTML网页制作

HTML网页制作HTML简介HyperTextMarkupLanguage超文本标记语言，是一种用于创建Web页面的标记语言。W3C（TheWorldWideWebConsortium万维网联盟）是推行HTML标准化的主要国际组织。HTML文件是用ASCII码写成的，包括两个部分：1.文件的内容2.对文件的格式、特性进行描述的HTML标记和属性，称之为“HTML元素”。HTML标记的书写格式HTML标记一般是由一个起始标记和一个结束标记构成，形式为：标记名文件内容/标记名例如:html……/htmlhead……/headtitle……/titlebody……/bodyHTML标记不区分大小写，视为相同。开发人员应当考虑尽量采用小写。HTML网页示例htmlheadtitleHTML网页示例/titlemetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/headbodybgcolor=#FFFFFFtext=#000000p这是一个简单的HTML网页/pp欢迎访问ahref=“”云南大学/a/p/body/htmlHTML网页示例meta标记主要用于指定HTML文件的一些特殊属性表示附加信息。常用于显示文档的作者、关键字、创建日期、显示字库、文件格式、自动加载等。http-equiv属性用于指定附加信息的名称如：http-equiv=“Content-Type”指明文件格式content属性用于指定附加信息的值。如content=“text/html;charset=gb2312”指明文件格式为text/html（HTML默认的文件格式）、字体为gb2312。练习：打开一个网页，10秒钟后自动加载另一个网页。metahttp-equiv=“refresh”content=“10;url=http://…”HTML元素的完整结构h1align=leftExample/h1属性（属性可以有多个）起始标记受标记影响的文件内容结束标记HTML元素标记名称属性名称属性值（属性值一般应放在引号中）HTML核心属性在HTML4.0及以上的版本中，几乎所有的HTML元素都包括4个核心属性，简介如下：id属性：用来给文档中标记设置独一无二的名字。class属性：用来制定标记可能属于一个或多个类（class）。style属性：用来为标记直接添加样式表的信息。title属性：用来提供关于标记或者它的内容的提示文字。常用HTML标记和属性1标记或属性用途html……/html标记整个HTML文件head……/head标记HTML文件的头部内容TITLE……/TITLE网页名称BODY……/BODYHTML文件的主体内容bgcolortextlink，vlink，alink文档的背景颜色，可以用英文颜色名称，也可以用十六进制数#RRGGBB表示。设置文档中文字的颜色分别设置文档中还没有访问过的超链接的颜色，访问过的超链接的颜色，激活的超链接的颜色.常用HTML标记和属性2标记或属性用途Hn……/Hn第n级标题，n取值1-6PRE……/PRE保留原有文本格式P……/P段落标记BR产生回车，连续多个可产生若干空行B……/B使文本字体变粗I……/I使文本字体变为斜体FONTSIZE=n文本内容/FONT改变文本内容字号，n取值范围为1-7（默认为3，7最大）FONTFACE=字体名称文本内容/FONT改变文本内容字体，若指定的“字体名称”不存在，则使用浏览器的默认字体基本标记，属性用途A……/A链接标记，引导链接的内容HREFA标记属性，指明被链接的URL或书签名称（加#）NAMEA标记属性，用于定义同一文件中被链接点的书签名称例如：AHREF=“”中央电视台/AAHREF=“#书签1”云南大学/AH3ANAME=“书签1”师范大学/A/H3常用HTML标记和属性3标记用途OL……/OL有序号列表标记，所包含的每个列表项前要加一个LI标记UL……/UL无序号列表标记，所包含的每个列表项前要加一个LI标记例：ULLI本画面简介LIAHREF=“file1.html”转本机另一文件/ALIAHREF=“”转中央电视台/A/UL常用HTML标记和属性4标记，属性用途IMG图象标记SCR引导一个图象，取值为文件名或URLHEIGHT设置图象高度（象素）WIDTH设置图象宽度（象素）ALIGN=top|middle|botton|left|right设置图象顶部（中间、底部）与其他文本或图象底部对齐或置于屏幕左（右）边VSPACE|HSPACE图象与左右或上下文本之间的距离（象素）vertical垂直的,horizontal水平的BORDER设置图象边框（象素pixel）ALT在纯文本浏览器中，用文本代替图象常用HTML标记和属性5标记用途TABLE……/TABLE定义一个表格CAPTION…/CAPTION定义表格标题TR……/TR定义表格中的一行TH……/TH定义标题单元格TD……/TD定义表格中的一个格（数据项）常用HTML标记和属性6标记用途HR……/HR生成一条横线!--……--注释标记comment……/comment注释标记CENTER…/CENTER将标记之间的文本、图象居中FRAMESET…/FRAMESET多窗口标记FRAME定义一个窗口（帧）常用HTML标记和属性7标记，属性用途FORM……/FORM属性METHODACTION定义一个表单（包括三个特殊标记）发送表单信息的方式：get或post表单提交后Web服务器处理程序名INPUT（单向标记）（FORM中的特殊标记之一）属性TYPENAMEVALUEPASSWORDMAXLENGTH定义输入信息的类型、名称、窗口大小、初值等=“submit”提交按钮=“reset”重置按钮=“button”普通按钮=“text”单行文本框=“radio”单选按钮=“checkbox”多选按钮输入信息的名称单行文本框初值或按钮名称密码，显示为*号单行文本框最多输入字符数常用HTML标记和属性8标记，属性用途TEXTAREA…/TEXTAREA（FORM中的特殊标记之二）属性ROWSCOLS产生多行文本框多行文本框的高（行数）多行文本框的宽（列数）SELECT…/SELECT（FORM中的特殊标记之三）属性MULTIPLESIZEOPTION[SELECTED]……/OPTION定义下拉菜单允许滚动下拉菜单中有重选项下拉菜单中显示的选项数……列出一项可供用户选择的项目SELECTED表示该项目已被预选常用HTML标记和属性9常用HTML标记和属性10标记，属性用途style…/styletitletype为文档设置样式信息，用在head中为样式表设置一个标题定义样式表的类型，常用的值为text/css，指定一个CSS格式div…/divstyle指定一块文档的内容，作为一个逻辑单元来处理。核心属性，用来为div标记直接添加样式表的信息。例如，在Dreaweaver中用此属性的绝对定位属性absolute来定义一个层。特殊符号显示结果显示结果 半角空格÷÷<±±>©©"〞®®××&&