HTML网页制作基础

1HTML网页制作基础HTML网页制作基础1.HTML语言简介2.HTML语言的基本标签与对应的属性3.表格与表单4.框架5.图像、声音、视频6.DIV层与css样式一.HTML语言简介Html的全称是”超文本标示语言”(HypertextMarkupLanguage)是一种标记语言,不需要编译,直接由浏览器执行。Html语言规范和标准:HTML语言是不区分大小写的，但一般来说，标记使用大写书写，如P,HTML,TABLE等；标记中的属性一般使用小写。HTML的编写环境可以使用txt文本，或使用可视化编辑工具如Dreamweaver、Frontpage等。1.HTML语言简介HTML对回车和空格都不敏感，因此可以使用回车或空格，使代码的格式和结构更清晰明了，这样才能易于查看与维护。HTML文档的结构：包括HEAD、TITLE、BODY三部分，下面是基本结构：HTMLHEADtitle标题部分/title/HEADBODY我的第一个html页面/BODY/HTMLHTML文档的结构：head元素出现在文档的开头部分。head与/head之间的内容不会在浏览器的文档窗口中显示，但是其之间可以嵌入javascript和css样式等丰富网页的内容。metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/用来标记你的页面的解码方式。title元素定义HTML文档的标题。title与/title之间的内容将显示在浏览器窗口的标题栏。body元素表明是HTML文档的主体部分。在body与/body之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。body元素属性的概述：BODY元素的属性概述1.Bgcolor属性标志HTML文档的背景颜色。如:Bgcolor=“＃RRGGBB”02.html2.background属性设置背景图片可使用GIF，JPG03.html3.bgproperties=“fixed”使背景图片成固定效果，图片不随滚动条滚动。204.html4.text设置非链接文字的色彩。5.link、vlink、alink分别对应普通超级链接、访问过的超级链接、当前活动超级链接颜色。05.html6.leftmargin和topmargin页面左边的空白距与上边的空白距。实例如下：1.背景颜色：HTMLHEADtitle标题部分/title/HEADBODYbgcolor=#666666背景色设置为灰色/BODY/HTML2.设置背景图片：HTMLHEADtitle标题部分/title/HEADBODYbackground=psb.jpg设置背景图片brbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbr/BODY/HTML3.设置背景图片(不滚动)：HTMLHEADtitle标题部分/title/HEADBODYbackground=psb.jpgbgproperties=fixedbgproperties=“fixed”brbr设置背景图片bgproperties=fixed使背景图片成固定效果，图片不随滚动条滚动brbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbr/BODY/HTML4.插入链接：HTMLHEADtitle标题部分/title/HEADBODYalink=redlink=pinkvlink=greenahref=点击进入/a3ahref=点击进入/a/BODY/HTML5.字体颜色与链接：bodytext=green文字颜色ahref=我的空间/a/body6.左上距离：bodytext=greenleftmargin=200topmargin=300文字颜色ahref=我的空间/a/body二HTML语言的基本标签与对应的属性文字段落特殊文字超链接列表HTML文字设置文字是网页设计的基础部分，设置好文字的样式，可以起到事半功倍的效果，通常可以使用两种方法。第1种方法是直接使用HTML标记进行设置，如:使用粗体标记B将文本设置为加粗样式。第2种方法是使用css，层叠样式表。HTML定义了6级标题，1-6级，标题文字随级数增大依次减小。h1h1的效果/h1h2h2的效果/h2h3h3的效果/h3h4h4的效果/h4h5h5的效果/h5h6h6的效果/h6利用align属性可以实现标题文字水平方向左、中、右的对齐方式。align=“left/center/right”HTML文字设置B设置文字以粗体的方式显示。语法B…/BI设置文字以斜体显示。语法I…/IEM效果同l语法EM…/EMSUP设置文字以上标文本效果显示。语法SUP…/SUPSUB设置文字以下标文本效果显示。语法SUB…/SUBU设置文字以下划线显示。语法U…/US设置文字以删除线显示。语法S…/SHTML文字设置FONT控制的字体、大小和文字。4语法：FONTface=“字体”,size=“文字大小”,color=“颜色值”…/FONTface控制文字使用的字体size控制文字的大小color设置文字颜色HTML段落设置P段落标记，一般情况下在每个段落的前面加上一个P标记可以区分段落，又可以换行。BR之后的文字将在下一行显视。HR设置水平线。center标记所有包含的内容，将以居中对齐的方式显示在网页中。PRE标签可以把原文件中的空格,回车,换行,tab键表现出来NOBR标记将取消浏览器由于窗口大小变化而换行。XMP在HTML文档中加入XMP标记，使标记内的HTML标记不起作用。HTML的转义字符HTML跑动文MARQUEE标记可使文字产生跑动的效果direction文字走动方向bgcolor设置文字背景颜色height设置跑动文字的高度width设置跑动文字的宽度hspace设置文字的水平边距vspace设置文字的上边距behavior设置文字的运动方式scroll/alternate/slideloop设置跑动文字的圈数scrollamount设置跑动文字移动速度scrolldelay设置跑动文字移动延时HTML超链接超链接是一个网站的重要元素之一，一个网站由多个页面组成，各页面之间是通过超链接来确定相互关系的，每个页面的地址都不同。格式:A这是一个连接/Ahref设置超链接目标地址URLname在html文档中建立特定位置的名称target设置被链接的网页打开时的窗口_blank/_parent/_self/_topaccesskey设置超链接的快捷键title设置超链接的说明文字style运用css样式设置超链接文字样式HTML超链接的锚点是指同一页面中的不同位置链接。一个网页的内容很长，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。HTML有序列表列表分成三种类型：有序列表、无序列表和自定义列表。有序列表使用编号来记录项目的顺序，5无序列表使用项目符号来记录无序的项目，自定义列表它由两个部分组成：定义条件和定义描述。OLtype=编号样式start=编号起始值LI项目一/LILI项目二/LI..../OLtype1阿拉伯数字a英文小写A英文大写i罗马小写数字I罗马大写数字start编号样式的起始数字，如：编号样式设为A，起始值设置为2，则列表的起始值为BHTML无序列表无序列表标记ULLI项目一/LILI项目二/LI..../ULtypecircle空心圆disc圆点square正方形HTML自定义列表DLDT无序列表/DTDD不以数字为开始，而是使用一个符号作为分项标记的列表。/DDDT有序列表/DTDD使用数字编号，分项带有顺序性质的列表。/DDDT定义列表/DTDD用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。/DD/DL实例如下：1.(1)文字设置：HTMLHEADtitle标题部分/title/HEADBODYh1h1的效果/h1h2h2的效果/h2h3h3的效果/h3h4h4的效果/h4h5h5的效果/h5h6h6的效果/h6alink=redlink=pinkvlink=green6ahref=点击进入/aahref=点击进入/a/BODY/HTML(2)文字设置：HTMLHEADtitle标题部分/title/HEADBODYB粗体/BbrI斜体/IbrEM斜体/EMbr字体SUP上标/SUPbr字体SUB下标/SUBbrU下划线/UbrS删除线/Sbr/BODY/HTML2.文字设置：HTMLHEADtitle标题部分/title/HEADBODYfontcolor=#33cc66size=6face=宋体文字设置/BODY/HTML3.段落设置：HTMLHEADtitle标题部分/title/HEADBODY这是一个段落标记。<>p这是一个<br>brhrcenter居中显示/centerbrPREabc#sdfssd%#%defgtsdfsads$!@$(h$#@#%%i/PRENOBR标记将取消浏览器由于窗口大小变化而换行。HOBRNOBR标记将取消浏览器由于窗口大小变化而换行。/HOBRXMPHTML7HEADtitle标题部分/title/HEADBODY这是一个段落标记。<>p这是一个<br>brhrcenter居中显示/centerbr/HTML/XMP/BODY/HTML4.转义字符：HTMLHEADtitle标题部分/title/HEADBODY"br&l