html教程全分析

徐靖博讲师HTMLHTML概念•HTML（HyperTextMarkupLanguage超文本标识语言）–是一种用来制作超文本文档的简单标记语言。–用HTML编写的超文本文件称为HTML文件，也称Web文件。HTML文档的编写方法1.手工直接编写–记事本等，存成.htm.html格式2.使用可视化HTML编辑器–Notepad++、editplus等3.由Web服务器（或称HTTP服务器）一方实时动态地生成。网页文件命名1.*.htm或*.html2.无空格3.无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字4.区分大小写5.首页文件名默认为：index.htm或index.htmlHTML文件结构html.../htmlhead.../headbody.../body•元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如body），也有一个结束的标记（如/body）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。HTML文件结构(DocumentStructures)–HTML•HEAD–title/title•/HEAD•BODY–HTML文件的正文•/BODY–/HTML第一张网页（01.htm）htmlheadtitle第一张网页/title/headbody欢迎光临我的主页！/body/html基本组成部分——HTML元素属性•HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。第二张网页（02.htm）htmlheadtitle第一张网页/title/headbodypalign=center欢迎光临我的主页!/p/body/htmlHTML基本结构的有关元素和元素属性•HEAD元素——1head元素出现在文档的开头部分。head与/head之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。•titletitle元素定义HTML文档的标题。title与/title之间的内容将显示在浏览器窗口的标题栏。HTML基本结构的有关元素和元素属性•HEAD元素——4•meta元素–metahttp-equiv=“Content-Type”content=“text/html;charset=gb2312”–用来标记你的页面的解码方式。HTML基本结构的有关元素和元素属性•HEAD元素——5•meta元素–metahttp-equiv=“refresh”content=“5;URL=”–用来自动刷新网页练习（03.htm）•编写一个网页，要求3秒钟后自动跳转到校网主页。htmlheadtitlemyfirstpage/titlemetahttp-equiv=“refresh”content=“3;URL=”/headbodypalign=“center”三秒钟后本网页将自动跳转到华东理工大学首页/p/body/htmlbody元素及元素属性——1•body元素表明是HTML文档的主体部分。在body与/body之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。body元素及元素属性——2body元素中有下列元素属性：–(1)bgcolor•bgcolor属性标志HTML文档的背景颜色。如：bgcolor=“#CCFFCC”。•例：04.htmHTML对颜色的控制•HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。•16进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.颜色颜色名和RGB值黑色Black=”#000000”银色Silver=”#c0c0c0”红色Red=”#ff0000”蓝色Blue=”#0000ff”白色White=”#ffffff”黄色Yellow=”ffff00”绿色Green=”#00ff00”海蓝色Aqua=”#00ffff”常见颜色的代码body元素及元素属性——3•body元素中有下列元素属性：–(2)background•background属性标志HTML文档的背景图片。如：background=“images/bg.gif。•可以使用的图片格式为GIF，JPG例：05.htm、06.htmbody元素及元素属性——5•body元素中有下列元素属性：–(4)text•text属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。•例：09.htm文字标签属性——1•文字属性标记font../font–1.文字颜色•指定颜色fontcolor=#.../font•#=RRGGBB16进制数码•例：010.htm文字标签属性——2•文字属性标记–2.文字字体•fontface=“#,#,...,#”.../font#=客户端可获得的字体•011.htm文字标签属性——3•文字属性标记–3.文字大小•fontsize=#.../font•#=1,2,3,4,5,6,7or+#,-#•例：012.htm文字布局•行的控制–段(Paragraph)(可以看作是空行)p–空白占位符 –例：013.htm文字布局•行的控制•HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即br元素。br元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。br元素不是成对出现的。例：014.htm–不换行nobr015.htmHTML文字与段落格式控制body……i倾斜文本/ib粗体文本/bu下划线文本/us删除线文本/s……/body例：016.htm基本组成部分—HTML注释•HTML文档可以插入注释。注释内容不会在浏览器窗口显示•HTML注释的格式为：!--注释内容--!--多行注释内容--例：017.htm文字的对齐hnalign=#.../hn(n=1,2,3,4,5,6)palign=#.../p(#=left,center,right)3.HTML段落与分行控制•居中---center元素–center元素是一个独立的使所标记的字符居中的元素。它的作用与使用p元素里的align=“center”类似•例如：center居中段落/center例：018.htm3.HTML段落与分行控制•标尺线hrsize=#：设定线宽hrwidth=#：设定线长hralign=#：设定对齐方式#=left,righthrcolor=#：设定线的颜色例：019.htm3.HTML的段落与分行控制•无序列表元素—1列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。3.HTML的段落与分行控制•无序列表元素—2无序列表是由ul和li元素定义的:ullisports/lilifood/lilidrink/lilifriends/li/ul例：020.htm4.超级链接—普通超级链接1•超级链接是整个应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。4.超级链接—普通超级链接2超级链接是用锚元素a定义的•在a元素下，有元素属性href,href的属性值为一个URL地址•如：ahref=“”指向学校的超级链接/a•如：ahref=“29.htm普通超级链接/a•例：021.html4.超级链接—E-mail超级链接•超级链接可以指向E-mail地址•如：ahref=“mailto:[e-mail]指向E-mail地址的超级链接/a•例：022.htm4.超级链接—新开链接窗口•开一个新的(浏览器)窗口(TargetWindow)ahref=URLtarget=“_blank.../a例：023.htmHTML对图片的控制--1•基本语法:•imgsrc=“图片名称”–引用图片必须用img元素标志。img元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。–src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址HTML对图片的控制--2•所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。•定义图片替代文本的方法是：–imgsrc=“图片名称”alt=“这是一张图片”例：024.htmHTML对图片的控制--3•图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。–定义图片的显示大小的方法是：imgsrc=sample.jpgwidth=100height=100–width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。例：025.htmHTML对图片的控制--4•图片的边框–我们可以为一幅图片加一个边框以突出显示：–imgsrc=sample.jpgborder=2•border的属性值为象素数例：026.htmHTML对图片的控制--5•图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是：–imgsrc=“sample.jpg”align=“left”–imgsrc=“sample.jpg”align=“right”例：027.htm表格(TABLE)标记--1•table元素：定义一个表格。每一个表格只有一对table和/table，一张页面中可以有多个表格。•tr元素：定义表格的行，一个表格可以有多行，所以tr对于一个表格来说不是唯一的。•td元素：定义表格的一个单元格。每行可以有不同数量的单元格，在td和/td之间是单元格的具体内容。•需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。表格(TABLE)标记--2•表格的基本结构table定义表格trth定义表头/th/trtr定义表行td…/td定义单元格/tr/table表格(TABLE)标记--3•表格的属性–1–width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。–height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。–border属性：表格边线粗细表格(TABLE)标记--2•表格的属性–1–bgcolor属性：指定表格或某一个单元格的背景颜色。–background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。–align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。静态网页h1align=“center”fontface=“华文琥珀”color=pink小小网上书屋/font/h1tabletrtd…/td…/trtrtd…/td…/tr/tableimgborder=0src=图片/z159.jpgwidth=150h