html网页设计教程(推荐)

HTML网页设计教程HTML的英语意思是：HypertextMarkedLanguage，即超文本标记语言,是一种用来制作超文本文档的简单标记语言Html的概念所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。如何创建一个HTML文档HTML只是一个纯文本文件。创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个WEB浏览器。编辑：HTML编辑器是用于生成和保存HTML文档的应用程序：记事本、word、Frontpage、Dreamweaver浏览：WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。HTML文档的基本结构HTML----------------------------------------开始标签HEADTITLE一个简单的HTML示例/TITLE/HEADBODY欢迎光临我的主页/BODY/HTML结尾标签如何保存和编辑html文件在记事本里输入html文件代码保存成*.html或*.htm为扩展名的文件。如果要修改编辑，在菜单里打开“查看—源文件”。修改完后再保存。Meta标签Meta:about,关于。关于文档的概要信息。比如说作者，关键字，内容提要，编码等信息。比如gb3212是编码信息，简体中文Big5:繁体中文Author,password,Title标签title和/title是嵌套在HEAD头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。HTML的标签分单标签和成对标签两种。成对标签是由首标签标签名和尾标签/标签名组成的，成对标签的作用域只作用于这对标签中的文档。htmlxmlns=headmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/title无标题文档/title/headbody/body/htmlhtml的主体标签body在body和/body中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。body标签有自己的属性，设置body标签内的属性，可控制整个页面的显示方式。body标签的属性属性描述1.Background设定页面背景图像2.bgcolor设定页面背景颜色3.leftmargin设定页面的左边距（像素）4.Topmargin设定页面的上边距5.Bgproperties=“fixed”设定页面背景图像为固定，不随页面的滚动而滚动6.Text设定页面文字的颜色7.格式：bodybgcolor=“”text=“”颜色的设定两种方法：1、颜色值的关键字：比如white,black,red，green,blue等2、颜色是由“red”“green”“blue”三原色组合而成的，用6位的十六进制值表示。#rrggbb,如：红色：red=ff,green=00,blue=00,RGB值即为#ff0000绿色：red=00,green=ff,blue=00,RGB值即为00ff00蓝色：red=00,green=00,blue=ff,RGB值即为0000ff颜色的设定（2）黑色：red=00,green=00,blue=00,RGB值即为000000例如：白色：red=ff,green=ff,blue=ff,RGB值即为ffffff应用时常在每个RGB值之前加上“#“符号，如：bgcolor=#336699用英文名字表示颜色时直接写名字。如bgcolor=“green“文字版面的编辑换行标签br换行标签是个单标签，也叫空标签，不包含任何内容nobr…./nobr不换行标签预排版标签pre…/pre缩排标签blockquote…./blockquote段落标签p及属性由p标签所标识的文字，代表同一个段落的文字。它可以单独使用，也可以成对使用。两种格式：1.p…../p2.……p显示一个空行P标签的属性PAlign=参数其中,Align是p标签的属性，参数的取值为：Left左对齐Center居中对齐Right右对齐.居中对齐标签center格式：center……/center水平分隔线标签hrhr标签是单独使用的标签，是水平线标签，用于段落与段落之间的分隔，使文档结构清晰明了，使文字的编排更整齐。hr标签的属性1.size设置水平分隔线的粗细pixel(像素）22.width设置水平分隔线的宽度pixel(像素）或百分比（%）默认值为100%3.Align=left,center,right设置水平分隔线的对齐方式默认值为center4、color设置水平分隔线的颜色，默认值为black5、noshade取消水平分隔线的3d阴影文字的设置主要内容1.标题字标记2.字体标记3.文字的修饰标记标题字标记hn……/hnn的取值为1,2,3,4,5,6，分别表示一级、二级…..六级标题。字体由大到小Hn的对齐属性hnalign=left,center,right……/hn字体标记font用font…./font标记可以更改页面中的字体，字号和颜色。其属性为：Face:字体,如“宋体”，“黑体”Size:字号，取值为1到7。1最小，7最大,默认值为3Color:颜色示例：fontface=“黑体，宋体，楷体，…..“…../font文字的修饰标记粗体：b…./bstrong…./strong斜体：i…./iem…../emcite…../cite上标：sup…../sup下标：sub…../sub大字号：big…./big将当前字加大一号小字号：small…./small将当前字缩小一号文字的修饰标记(2)下划线：u…../u删除线：s…../sstrike…./strike等宽字：code…./codesamp…./samptt…./tt特殊符号空格符： “"&&<>注释标记comment…../comment或!--…….--建立列表本节要点(list)1.列表的标记2.无序列表3.有序列表4.嵌套列表在html页面中，合理的使用列表标签可以起到提纲和格式排序文件的作用。列表分为两类，一是无序列表，一是有序列表。无序列表就是项目各条列间并无顺序关系，纯粹只是利用条列来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔。有序条列就是指各条列之间是有顺序的，比如从1、2、3…一直延伸下去。无序列表UL无序列表使用的一对标签是ul…/ul，无序列表指没有进行编号的列表,每一个列表项前使用li。LI的属性type有三个选项：disc实心圆，默认值circle空心圆square小方块ul如果不使用其项目li的属性值,即默认情况下的ul会加实心园。body颜色ultype=“square”li红色li绿色li蓝色li紫色/ul/body/html格式1:ULLI第一项LI第二项LI第三项/UL格式2ullitype=disc第一项litype=circle第二项litype=square第三项/ul有序列表OL有序列表和无序列表的使用格式基本相同，它使用标签ol/ol，每一个列表项前使用li。ol列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表项，编号会自动调整。顺序编号的设置是由ol的两个属性type和start来完成的。start=n开始的数字，如start=2则编号从2开始，如果从1开始可以省略，或是在li标签中设定value＝“n”改变列表行项目的特定编号，例如livalue=“7”。type=用于编号的数字,字母等的类型，如type=a，则编号用英文字母。为了使用这些属性，把它们放在ol或li的初始标签中。type类型描述type=1表示列表项目用数字标号（1,2,3...）,默认值type=A表示列表项目用大写字母标号（A,B,C...）type=a表示列表项目用小写字母标号（a,b,c...）type=I表示列表项目用大写罗马数字标号（Ⅰ,Ⅱ,Ⅲ...）type=i表示列表项目用小写罗马数字标号（i,ii,iii...）定义列表DL/DT/DD定义列表的标记也叫描述性列表，定义列表默认为两个层次，第一层为列表项标签DT，第二层为注释项标签DD。列表列表是*****示例htmlheadtitle定义性列表/title/headbody定义性列表Pdldt：dd是(Worldwideweb)的缩写，也可简写web;dt：dd又叫万维网;dt：ddinternet提供的最常用的服务是建立超链接本节要点关于超链接链接标记内部链接的建立书签链接的建立外部链接的建立关于超链接HTML文件中最重要的应用之一就是超链接，超链接（hyperlink)是一个网站的灵魂，web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件，这种具有超级链能力的操作，即称为超链接。超链接除了可链接文本外，也可链接各种媒体，如声音、图像、动画，通过它们我们可享受丰富多采的多媒体世界。建立超链接的标签A和/A格式为：AHREF=资源地址超链接名称/A说明：标签A表示一个链接的开始，/A表示链接的结束；属性“HREF”定义了这个链接所指的目标地址；目标地址是最重要的，一旦路径上出现差错，该资源就无法访问建立目标窗口的属性target属性值描述_parent在上一级窗口中打开，一般使用分帧的框架页会经常使用_blank在新窗口打开_self在同一个帧或窗口中打开，这项一般不用设置_top在浏览器的整个窗口中打开，忽略任何框架链接路径每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。URL(UniformResourceLocator)中文名字为统一资源定位器。指的就是每一个网站都具有的地址。同一个网站下的每一个网页都属于同一个地址之下.例如：新浪网的网址：路径可以分以下三种绝对路径如：相对路径如：news/index.html根路径如：如：/web/highight/shouey.html或d：/web/news/index.html1、绝对路径绝对路径：包含了标识INTERNET上的文件所需要的所有信息。包括完整的协议名称，主机名称，文件夹名称和文件名称、相对路径相对路径是以当前文件所在路径为起点，进行相对文件的查找。一个相对的URL不包括协议和主机地址信息，表示它的路径与当前文档的访问协议和主