HTML基础知识讲解（全）2009年04月25日星期六1852

HTML是网页主要的组成部分，基本上一个网页都是由HTML语言组成的，所以要学习网站怎样建设，必须从网页的基本语言学起。

先简单的介绍一下HTML语言（我们在这灌输大家的是能够实际操作），HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗一点都不神奇,因为现在你看到的就是这种语言写的页面。

是呀，HTML并不是很神奇，只是因为你不是很了解它，现在咱们就开始接她的面纱：

一、HTML的组成结构（头部、眼睛、身体----好像一个人一样是不是？）

1、头部。只要你学过英语，你应该知道头怎么用英文写吧！yes，HEAD就是了；所以，头部的HTML写法就是head头部的内容head，简单不，大家注意一下，这两个非常相似，只是后一个比前一个多了“”符号。类似这样的以后会经常用到。

2、眼睛。就好像人的眼睛一样，它是心灵的窗口，而一个网页的眼睛应该就是它的页面的标题了，标题怎么说呢？title,yes！大家知道眼睛是长在头上的，所以啦title标题title这些应放在head和head之间。也就是

headtitle标题titlehead

3、身体。身体是网页最主要的部分了，因为前面讲的都不是页面所显现出来的，而大家所看到的页面页就是他的身体部分了（当然它的TITLE可以在浏览器的最左上角可以看到），身体----BODY，他的写法也就是：body页面内容body

最后，别忘了把这些部分组成一体----网页，所以咱们就用htmlhtml把他们给包起来。

好了，咱们来大体看看网页的结构：

html

head

title

标题

title

head

body

页面内容

body

html

我们了解了网页的主要框架，现在我们来详细的研究网页的内部细则：

先从它的身体部分(body) 开始：

欣赏一个网页时，一般先注意到的是这个页面的背景，如果有背景音乐，那就更吸引人了！

是不是呀，那么这些是怎么实现的呢？看下边：

1、背景颜色

body bgcolor=red我们发现多了个bgcolor其实就是backgroundcolor（背景颜色）的意思，bgcolor=red设置网页的背景颜色为红色，现在颜色一般都是#ff0000样式的。

2、背景图片

body backgroud＝back-ground.gif中“backgroud”就是设置背景图片的啦，back-ground.gif 是背景图片的名字，为什么有的朋友也是如此写的，而网页却没有背景图片呢？其实back-ground.gif是该图片相对于这个页面的位置，比如你做的这个页面放在c我的网站，而背景图片的位置放在c我的网站images，那么就得这样写了：body backgroud＝imagesback-ground.gif，注意两者的区别！

3、背景音乐

背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部headhead里，为什么在这里讲呢？就是因为它也是显示网页的时候我们首先接受到的信息。看看它的代码吧：bgsound src=background_sound.mid loop=-1

bgsound 不用说了吧背景声音，background_sound.mid是音乐的文件名，当然也得写它的相对路径哦（关于相对路径，可能有的网友，一下子不能搞明白，我们将会在其他板块介绍的）！loop，循环，那么loop=-1是什么意思呢？loop是bgsound 的一个属性，当然src也是了，后边跟得就是属性值了，那么loop=-1就是无限循环的意思，只要是页面打开，音乐不会停止的，loop=1说明循环一次，等于0就是不循环了，呵呵，简单不！

4、body其它属性：topmargin，leftmargin。有的朋友再做页面的时候，感觉文字或者表格怎么也不能靠在浏览器的最上边和最左边，怎么回事呢？因为一般我们用的制作软件或者说html语言默认的都是topmargin和leftmargin值等于12，如果你把他们的值设为0，你看看会有什么效果！如下比较一下body和body topmargin=0 leftmargin=0，有兴趣的朋友可以任意设置他们的值！

同样我们在这里继续讲一下它的body，因为它能直观的让大家观察到你所学到的成果。

这一讲，我们来学习字体及其属性，然后大家在学习完后制作一下，看看它的每一个属性所表现的效果。

字体，英文font，这html语言中也是它---font，下面咱们来研究一下font

1、标题字体h# 文字h# # =1，2，3，4，5，6

比如：h1今天天气真好！h1

注意：这些一般的用在标题上，所以起名叫标题字体；h# ...h# 这些标记显示黑体字；这些标记自动插入一个空行，不必用p 标记再加空行，因此在一行中无法使用不同大小的字体。

2、字体的大小，用于一般文字。

font size=# 文字font #=1, 2, 3, 4, 5, 6, 7 or +#, -#

basefont size=# #=1, 2, 3, 4, 5, 6, 7

例子：font size=7今天天气真好！font

3、逻辑字体(Logical Style)

下划线：u文字u，代码：code文字code，删除线：strike文字strike，闪烁：blink文字blink，增强：strong文字strong，强调：em文字em，示例：samp文字samp，还有老多，一般的这些了解一下就可以。

4、字体的标志，很常用的。粗体：b文字b，斜体：i文字i

5、字体颜色

指定颜色font color=# 文字font # =#rrggbb 16 进制数码，或者是下列预定义色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

对于16 进制编码的颜色，我们可以这样理解rrggbb六个字符：前两个表示红色，中间的两个表示绿色，后两个表示蓝色；那么，红色（red）ff0000，同样绿色（green）00ff00，蓝色0000ff；其它的颜色就是这几个字符（0-9，a-f）的组合。

比如：font color=red 文字font 红色文字

font color=#ff0000 文字font 红色文字

大家看看font color=#rrggbb 文字font是什么颜色的文字

6、客户端字体(Font Face)

font face=#, #, ..., # ... font #=客户端可获得的字体，什么是客户端，通俗的讲，就是你的电脑，face=#就是从你的电脑获得的字体，大家可以点击

客户端字体(Font Face)示例。

7、字符实体(Entities)，字符实体一般用在把html里的符号显示在页面上比如、&等，如果你单独的打上，页面也可以显示，但如果你想显示b这几个字符，怎么办呢？就是它啦。&#; #=字符实体名称或者ascii 值

& &

这些只是一小部分，那么要显示b就要写成b了。

以上学到的我们可以综合使用：比如font size=2 color=#ff0000ib文字bifont

注意写的时候要前后一致前面b后边对应的也应该b

图像，也就是images，在html语法中用img来表示，其基本的语法是：

img src=# #=图象的URL，关于url就是指的是图像在网上的地址。

img alt=# #=在浏览器尚未完全读入图象时，在图象位置显示的文字；也是图像显示以后，当鼠标放在图片上时所显示的文字。

例子：img src=https://www.wendangku.net/doc/067187266.html,forumimagescid4u-2.jpg

图象在页面中的对齐布局：

语法：img align=# #=left, center, right，使用图像的align属性，其实这一属性布置在这里用到，以后我们在学习表格的时候也会遇到align，它的值left, center, right就是他的中文意思，left居左，center居中，right居右。

例子：img src=https://www.wendangku.net/doc/067187266.html,forumimagescid4u-2.jpg align=left 网人交流论坛欢迎您的光临！

图象和文字的对齐：

语法：img align=# #=top, middle, bottom，这里的align和上边的实现的效果不一样，大家从它的值可以看出，它所显示出来的是文字在图片的靠上边、中间、底端。大家可以对比这看看各自的效果，很容易记住哦！

图像的边框：img border=# #=value数字，指的是这个图像的边的宽度！

示例：img src=https://www.wendangku.net/doc/067187266.html,forumimagescid4u-2.jpg border=1

大家可以在自己的机子上按照我给你的语法，写下来，看看效果就行了。

缺省情况下，表格在浏览器屏幕上左对齐，你可以使用TABLE的ALIGN属性来指定表格的对齐方式。ALIGN属性可以取值“left”、“center”和“right”。例如，让一个表格在屏幕中央显示可以使用：

TABLE ALIGN=“CENTER”

注意

使用TABLE的ALIGN属性要小心，不是所有的浏览器都能识别它。如果你要让表格显示在屏幕中央，使用CENTER标识符来包含表格会更安全些。

你可以使用TR的ALIGN属性来设置表格中每行元素的水平对齐方式，这个属性也可以取值“left”、“center”和“right”。要设置某一行中所有元素的竖直对齐方式，可以使用TR的V ALIGN属性，它可以取值“top”、“middle”和“botton”（缺省情况下取值“middle”）。

要更好地控制表格中某个表头或元素的排列方式，可以使用TH和TD标识符的ALIGN和V ALIGN属性，这两个属性的取值范围与TR相同，然而TH的TDALIGN和V ALIGN属性将会覆盖任何为整个一行指定的排列方式。

控制表项的空间

当浏览器显示一个表格时，它将每一列的宽度设置为这一列中最长表项的宽度。浏览器尽可能地占用较小的屏幕空间来紧密地排列表格中的每一项。你可以使用TABLE的CELLPADDING和CELLSPACING属性来改变这一缺省值。

通过使用CELLPADDING属性，你可以为表格中的每一项安排一个更大的空间，使用CELLSPACING属性，你可以为表项之间留出一定的空间。这两个属性的值都以象素来指定。下面的例子说明了如何使用这两个属性（见图6.20）：

HTML

HEAD TITLE Cell Spacing TITLEHEAD

BODY

TABLE BORDER=1

CAPTION Normal Table CAPTION

TR

TD First Column TD

TDSecond Column TD

TR

TABLE

HR

TABLE BORDER=1 CELLSPACING=20

CAPTION Table With Cell Spacing CAPTION

TR

TD First Column TD

TDSecond Column TD

TR

TABLE

HR

TABLE BORDER=1 CELLPADDING=20

CAPTION Table With Cell Padding CAPTION

TR

TD First Column TD

TDSecond Column TD

TR

TABLE

BODY

HTML

控制表格和表项的大小

某些时候你可能想让表格显示出来大一些，你可以用TABLE的WIDTH属性来控制表格的宽度，你可以为WIDTH属性提供宽度的绝对值或相对值。

当为WIDTH属性提供宽度的绝对值时，你用象素来表示。例如，要建立一个宽为100个象素的表格，可以用TABLE WIDTH＝100。当然，并不能保证表格显示出来恰好是你指定的宽度，表项中的内容可能会迫使表格显示出来比WIDTH属性指定的值要宽。

另外，你也可以用相对值来指定表格的宽度，例如，如果你想让表格占有整个浏览器屏幕那么宽，你可以用TABLE WIDTH=“100％”，同样地，如果你在WIDTH属性中指定的百分数太小的话，浏览器显示出来的表格就不是那个宽度。

HEIGHT属性可以用来指定表格的整体高度，同样这个属性可取绝对值和相对值。但使用这个属性时要小心，即使Microsoft和Netscape的浏览器都能正确解释它，但它并不是HTML 3.2规范中的一部分。

你也可以用TD和TH标识符的WIDTH和HEIGHT属性来控制表格中某一表项的大小，你必须用绝对象素值来指定这些属性的值。你要知道当你设置这些值时，只不过是在为浏览器提供建议，浏览器尽量按你的意愿去做，但也有可能不能完全按你指定的方式来显示一个表格。

在表格中加入颜色和图象

根据HTML 3.2规范，表格不具有任何颜色属性。然而，值得庆幸的是Netscape和Microsoft 都扩展了HTML来让表格具有自己的背景色，两种浏览器都能识别TABLE标识符的BGCOLOR属性。

你可以使用颜色名或RGB值来设定BGCOLOR的值，下面的例子说明了这个属性的用法：

HTML

HEAD TITLE Table Color TITLE HEAD

BODY BGCOLOR=“white”

CENTER

TABLE BGCOLOR=“lightblue” CELLPADDING=10

TR

TD I have a blue background TD

TR

TABLE

CENTER

BODY

HTML

当这个例子中的文字在浏览器上显示时，它处于一个浅蓝色的框中，这对于突出主页上主体文字中某些特定的文本是很有用的。例如，你可以使用这种方法来突出一个引用、标题或是网页上一个简短的注释。

你也可以为表格中某一行甚至是某一个表项使用BGCOLOR属性。例如，可以用不同的颜色来区分表格中不同列的数据。

BGCOLOR属性的一个更令人兴奋的用处可能是设置你网页的整体颜色，如果你将表格的宽度设为屏幕的宽度，你可以建立一个具有多列的网页，而每一列都具有不同的颜色。下面的例子建立了一个有两列不同颜色的网页：

HTML

HEAD TITLE Two Color Columns TITLE HEAD

BODY BGCOLOR=“white”

CENTER

TABLE WIDTH=“100%” HEIGHT=“100%”

TR

TD BGCOLOR=“Olive” ALIGN=“center” I have a olive background TD

TD BGCOLOR=“Aqua” ALIGN=“center” I have a aqua background TD

TR

TABLE

CENTER

BODY

HTML

Netscape和Microsoft的浏览器都允许你为表格设定背景图片（见图 6.21），你可以通过TABLE标识符的BACKGROUND属性来指定一幅图象：

HTML

HEAD TITLE Two Color Columns TITLE HEAD

BODY BGCOLOR=“white”

CENTER

TABLE WIDTH=“50%” HEIGHT=“100%” BACKGROUND=“myimage.gif”

TR

TD ALIGN=“center” I have a checkered background TD

TR

TABLE

CENTER

BODY

HTML

Netscape Navigator 4.0和Internet Explorer 3.0及4.0还允许你在表格的某一行或某个表项使用BACKGROUND属性，通过为不同的表项使用不同的背景图象，你可以建立一个可视性非常强的网页。

表格作为子页

TABLE标识符最初被引入HTML是用来格式化地显示信息。然而，随着时间的推移，这个标识符的属性被大大地扩充了，现在可以将TABLE看成是用来在网页中建立一个子页的标识符。这个标识符被扩展出了那么多的属性，以致于现在它很象BODY标识符了。在Netscape 和Microsoft的浏览器上，TABLE具有许多和BODY相同的属性，你可以为表格指定它自己的背景色和图象。另外TABLE标识符还能包含所有能在BODY中包含的HTML标识符。

然而，TABLE具有一个比BODY更大的优势，每一个HTML文件必须有且只有一个BODY 标识符，但对于TABLE来说，则没有这种限制，你可以在HTML文件中包含任意数目的TABLE。

当你设计网页时，不要让TABLE这个名字愚弄了你。TABLE不仅仅用于建立表格，还可以在你的网页上建立子页，当你想把单个网页分成多个部分时，就用TABLE标识符。

小结

本章讲述了一些重要的HTML标识符。例如，你现在知道了如何建立HTML窗体来让你的网页具有交互性。你还学习了一些对信息进行列表的有用的HTML标识符。最后，你学习了怎样用表格来组织信息，以及怎样用表格来为你的网点进行高级网页布局。

我们讲了关于《控制表格及其表项的对齐方式》，在这里我要讲讲表格及其属性，然后大家在复习一下上一节的内容，这样就会有事半功倍的感觉。

表格，一般的用于对网页的内容进行排版，比如文字放在页面的某个位置，你就可以做个表格，然后设置一下表格的属性，它文字放在表格的某个单元个里，就行了；其实用过word 的朋友应该非常明白的。除了页面的排版外，表格还可以制作出非常好看的效果，比如按钮、变色、边线等等。大家要会灵活的运用。

看看表格的基本语法：table...table - 定义表格

tr ...tr- 定义表行

th ...th- 定义表头

td ...td- 定义表元

下面看看它的示例：

table border=1 !--border是表格的边框属性，=“1”，即边框的宽为一象素--

tr !--定义表格的行--

thFoodththDrinkththSweetth!--定义表格的表头，即标题--

tr !--行结束--

tr

tdAtdtdBtdtdCtd !--定义表格的表元--

tr

table

不带边框的表格：

table

tr

thFoodththDrinkththSweetth

tr

tr

tdAtdtdBtdtdCtd

tr

table

Food Drink Sweet

A B C

跨多行、多列的表元(Table Span)

跨多列的表元th colspan=#

table border

trth colspan=3 Morning Menuth !--colspan=3，跨三列表元-- trthFoodth thDrinkth thSweetth

trtdAtdtdBtdtdCtd

table

跨多行的表元th rowspan=#

table border

trth rowspan=3 Morning Menuth!--rowspan=3，跨三行表元-- thFoodth tdAtdtr

trthDrinkth tdBtdtr

trthSweetth tdCtdtr

table

表格尺寸设置table border=#边框尺寸设置：

table border=10

trthFoodththDrinkththSweetth trtdAtdtdBtdtdCtd

table

table border width=# height=#表格尺寸设置：

table border width=170 height=100 trthFoodththDrinkththSweetth trtdAtdtdBtdtdCtd

table

table border cellspacing=#表元间隙设置：

table border cellspacing=10 trthFoodththDrinkththSweetth trtdAtdtdBtdtdCtd

table

table border cellpadding=#表元内部空白设置：

table border cellpadding=10 trthFoodththDrinkththSweetth trtdAtdtdBtdtdCtd

table

表格内文字的对齐布局

tr align=#

th align=# #=left, center, right

td align=#

table border width=160

tr

thFoodththDrinkththSweetth

tr

td align=leftAtd

td align=centerBtd

td align=rightCtd

table

tr valign=#

th valign=# #=top, middle, bottom, baseline

td valign=#

table border height=100

tr

thFoodththDrinkth

thSweetththOtherth tr

td valign=topAtd

td valign=middleBtd

td valign=bottomCtd

td valign=baselineDtd table

HTML5基础入门教程(小编搜集辛苦啊,必看)

HTML5教程 什么是HTML5？ HTML5 将成为HTML、XHTML 以及HTML DOM 的新标准。 HTML 的上一个版本诞生于1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5 支持。 你是不是多少有了解一点，但是你却对这个不精啊！可以进群交流，⑤①④①⑥⑦⑥⑦⑧。HTML5 是如何起步的？ HTML5 是W3C 与WHATWG 合作的结果。 编者注：W3C 指World Wide Web Consortium，万维网联盟。 编者注：WHATWG 指Web Hypertext Application Technology Working Group。WHATWG 致力于web 表单和应用程序，而W3C 专注于XHTML 2.0。在2006 年，双方决定进行合作，来创建一个新版本的HTML。 为HTML5 建立的一些规则： ?新特性应该基于HTML、CSS、DOM 以及JavaScript。 ?减少对外部插件的需求（比如Flash） ?更优秀的错误处理 ?更多取代脚本的标记 ?HTML5 应该独立于设备 ?开发进程应对公众透明 新特性 HTML5 中的一些有趣的新特性： ?用于绘画的canvas 元素

?用于媒介回放的video 和audio 元素 ?对本地离线存储的更好的支持 ?新的特殊内容元素，比如article、footer、header、nav、section ?新的表单控件，比如calendar、date、time、email、url、search 浏览器支持 最新版本的Safari、Chrome、Firefox 以及Opera 支持某些HTML5 特性。Internet Explorer 9 将支持某些HTML5 特性。 HTML 5 视频 许多时髦的网站都提供视频。HTML5 提供了展示视频的标准。 Web 上的视频 直到现在，仍然不存在一项旨在网页上显示视频的标准。 今天，大多数视频是通过插件（比如Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过video 元素来包含视频的标准方法。 视频格式 当前，video 元素支持两种视频格式： Internet Explorer Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg X X X MPEG 4 X X Ogg = 带有Thedora 视频编码和Vorbis 音频编码的Ogg 文件 MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件

HTML知识点总结

HTML知识点总结 第一章知识总结 1.HTML文档结构（括号里面的是注释） （头部部分） (可写可不写) （主体部分） （页面容） 1)标签中的属性有： bgcolor=颜色（背景颜色）background=图片的绝对路径或相对路径（背景图片） 2.标题标签 n取1~6（设置文字标题）： 1)

一级标题

2)

二级标题

3)

三级标题

4)

四级标题

5)

五级标题

6)

六级标题

3.标签（设置文字属性） 要设置的文字 4.特殊符号 5.行的控制相关标签 段落标签

(段落的对其方式) 换行标签
6.图片标签

(align是用于调整图片相对于周围文本的对其方式) 7.文字布局 1)水平线

---

2)有序列表的语法

（序号类型有：1、a、A、ⅰ、I）
1. 填写信息
（必须用
将容包括起来）
3. 填写信息
4. 填写信息
……

3)无序列表语法

（序号类型有：disc(默认值,实心圆点)、circle(空心圆环)、square(空心正方形)）
• 所写容
• （必须用
将容包括起来）

4)预格式文本语法

HTML知识点汇总
HTML知识点汇总 第一章HTML基础知识 1、HTML简介 HTML(Hypertext Markup Language)，超文本标记语言，HTML利用各种标记来标识文档的结构以及标识超链接的信息。它是从SGML(Standard Generalized Markup Language，标准通用标识语言)中的一个子集演变而来的。 2、HTML的标记组成 HTML用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“<>”括起来，而且是成对出现的，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。如、 等 1)单标记：有些标记能完整的表达标记里的意思，只须在尖括号中输入标记名即可，这类标记叫 单标记。XHTML中要求单标记也必须闭合，即在标记“>”前添加斜杠。常见的单标记如
、
等。 2)双标记：双标记有头有尾，且前面的标记与后面的标记保持一致，但在后面的标记前有斜线， 语法形如：<标记>内容。例如：段落  3)XHTML要求所有标记均为小写，且所有标记属性必须添加双引号 4)标记对不能交叉 3、HTML基本结构         1) （必须放在「文头」区块内） 文头  （描述性资料，像是「主题」） 文体  （文件本体） 结构性定义（由浏览器控制的显示风格） 标题  （从1到6，有六层选择） 标题的对齐  区分 
 区分的对齐 
 引文区块 
 （通常会内缩） 强调  （通常会以斜体显示） 特别强调  （通常会以加粗显示） 引文  （通常会以斜体显示） 码  （显示原始码之用） 样本  键盘输入  变数  定义  （有些浏览器不提供） 地址 
 大字  小字  与外观相关的标签（作者自订的表现方式） 加粗  斜体  底线  （尚有些浏览器不提供） 删除线  （尚有些浏览器不提供） 下标  上标  打字机体  （用单空格字型显示） 预定格式 
 （保留文件中空格的大小） 预定格式的宽度 
（以字元计算） 向中看齐  （文字与图片都可以） 闪耀  （有史以来最被嘲弄的标签） 字体大小 （从1到7） 改变字体大小  基本字体大小  （从1到7; 内定为3） 字体颜色  链结与图形 链接 
html5教程视频教程网盘下载
html5教程入门视频网盘下载 学习HTML、CSS基础知识，实现PC端静态页面制作（例如京东商城），响应式网页布局的制作（微软中国官网）、及WebApp页面布局（淘宝、美团等）。 html5前端人才已成为IT职场的紧缺型人才，如何自学html5？如何短时间内迅速提升html5开发能力？千锋教育html5教程入门视频网盘下载（https://www.wendangku.net/doc/067187266.html,/video/html5_download.html），助力大家成为企业不可多得的贤才。 实现这些需要的知识有 1、学习HTML基本语法：双标签、单标签语法结构。 2、常用标签：标题标签、段落标签、布局标签、表格、列表、标签标签。 3、学习CSS基本语法：选择器声明。 4、学习CSS的三种样式表：内联、内部、外部 5、学习CSS的各种常用选择器 6、学习CSS的选择器、样式表的优先级和权重问题。 7、学习CSS的核心属性及属性值 8、学习CSS的元素类型的转换
9、学习CSS的定位锚地的应用 10、学习CSS中的图片整合技术的应用 11、学习CSS中常见的浏览器的兼容及解决方法 12、学习HTML5新增元素及属性 13、学习CSS3新增选择器的应用 14、学习CSS3的2D、3D、关键帧动画的相关应用 15、学习CSS3中弹性盒的应用 16、学习CSS3中媒体查询响应式的设计应用 学习JavaScript和jQuery及掌握一门后台程序语言的简单基础和一个数据库，实现PC端项目交互开发（做一个电商类型的网站开发） 需要的知识有 1、学习JavaScript的基本语法 2、学习JavaScript的循环语句 3、学习JavaScript的函数与数组 4、学习JavaScript的String和Data 5、学习JavaScript的BOM与DOM 6、学习JavaScript的相关事件 7、学习JavaScript的拖拽效果 8、学习JavaScript的cookie存储 9、学习JavaScript的正则表达式 10、学习JavaScript的Ajax的应用 11、学习JavaScript的面相对象基础
HTML语言入门教程
语言入门教程(一) ?什么是HTML语言 HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言，由W3C(World Wide Web Consortium)所制定和更新。我们可以用任何一种文本编译起来编辑HTML文件，因为它就是一总纯文本文件。 ?HTML语言的基本结构 下面我们来看一小段HTML语言的代码，来了解HTML语言的基本结构：      HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言。   将这一小段代码粘贴至文本文件中，然后选择“另存为”，将文件的后缀名改为.htm或者.html即可，然后再所在的目录下就可看到一个IE的图标，名字就是你所存的文件名称。 …… …… 这是声明HTML文件的语法格式。每一个HTML文件，都必须以开头，以结束…… …… 这是文件头声明的语法格式。在这之内的所有文字都属于文件的文件头，并不属于文件本体。
 这是声明文件标题的语法格式。在这之中写下的所有内容，都将写在网页最上面的标题栏中。 …… …… 这是声明文件主体的语法格式。在者之间写下的内容都是文件的主体，也就是说将会被显示在客户区之中。 注意：几乎每一种HTML语言的语法都是以<>开头，以结束。在编辑HTML语言过程中，也可以使用注释。语法格式为：。就好像C语言中的/* …… …… */ 一样，中间的内容只是解释说明，并不被编译器所编译。 HTML语言的基本单位 1. 长度单位 长度单位可以用来定义水平线、表格边匡、图像等对象的长、宽、高等一系列属性，同时也可以用来定义这些对象在页面上的位置等属性，用来描述页面上可能遇到的各种长度。 长度的表示方法有两种：绝对长度和相对长度。他们的单位都是像素(pixel)和百分比(%)，像素代表的是屏幕上的每个点，而百分比代表的是相对于客户区的多少。下面我们就以水平线的宽度为例，说明这两种表示方法。      HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言。 
 
    在文本编译器中编译，改变网页的大小，就会看到这两者表示长度方法的不同。
HTML基础知识
HTML 学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求一样。HTML标记语言也不例外，同样需要遵从一定的规范。接下来将具体讲解HTML文档的基本格式。 HTML文档的基本格式主要包括文档类型声明、根标记、头部标记、主体标记，具体介绍如下： （1）标记  标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML 或XHTML（可扩展超文本标记语言）标准规范，必需在开头处使用标记为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。 （2）标记 标记位于 标记之后，也称为根标记，用于告知浏览器其自身是一个HTML 文档， 标记标志着HTML文档的开始，标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。 在之后有一串代码“xmlns=""”用于声明XHTML统一的默认命名空间。 （3）标记 标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在标记之后，主要用来封装其他位于文档头部的标记，例如  (主体部分) (页面内容)   标签中的属性有: bgcolor=颜色(背景颜色) background=图片的绝对路径或相对路径(背景图片) 2. 标题标签 n取1~6(设置文字标题): 1) 
一级标题
 2) 
二级标题
 3) 
三级标题
 4) 
四级标题
 5) 
五级标题
 6) 
六级标题
 3、标签(设置文字属性) 要设置的文字
5、行的控制相关标签 段落标签  
(段落的对其方式) 换行标签
 6、图片标签  (align就是用于调整图片相对于周围文本的对其方式) 7、文字布局 1) 水平线
 2) 有序列表的语法 
(序号类型有:1、a、A、ⅰ、I) 
填写信息
(必须用
将内容包括起来) 
填写信息
 
填写信息
 …… 
 3) 无序列表语法 
(序号类型有:disc(默认值,实心圆点)、circle(空心圆环)、square(空心正方形)) 
所写内容
(必须用
将内容包括起来) 
 4) 预格式文本语法 
 (具体的文本格式,这个格式在时就是不改变的哦！) 
 8、页面链接语法 1) 链接到其她页面 连接标志 2) 链接到本页面 首先创建一个锚链接的锚记点:主题名称 然后在具体要链接到的地方设置name: (锚记点前面要加上#号) 3) 电子邮件链接 站长邮箱(注意不能忘了mailto) 9、滚动标签的语法  滚动的文字与图像 
html+css入门教程
Div+CSS布局入门教程 页面布局与规划 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局 设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思 好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现， 图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图: 根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就 会更简单了。
DIV结构如下： │body {} /*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。写入整体层结构与CSS 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两 个空的记事本文档，输入以下内容：
HTML基础设计教案
教案编写日期：20XX年11月20日授课时间：20XX年11月21日-25日授课班级：高二3-8班授课地点：高中微机教室 第六章HTML代码基础 §1.1 HTML语言 指导思想与理论依据：HTML语言基础广西科学技术出版社《信息技术高中第三册》第一单元第六章——“了解一点HTML”的入门知识，HTML语言是超文本标记语言的缩写(HyperTextMarkupLanguage) ,它是网页设计中应用最广泛的一种语言，也是网页制作中学生感到最头疼难学的一个内容。掌握html语言基础会让动态网页制作的学习事半功倍，因而本部分知识显得非常重要，因此在本节课程的教学中，结合新课标及教材的特点，采用多种教学法结合方式（启发式教学法、任务驱动法、演示法等等...），激发学生学习兴趣，尤其是注重对学生的引导，采用任务驱动方式教学，引导学生通过自主学习平台自主学习从而提高学生的学习效率，本节内容是在学生已经掌握了利用FRONTPAGE制作普通网页的基础上，对网页语言的深入学习。 学情背景分析： 本节之前，学生已经学习了如何利用FrontPage进行网页以及网站的制作，但是对于网页的认识还知识停留在页面的直观设计上，缺少对HTML代码的认识。本节课主要对学生讲述HTML的基本概念，为学生培养良好的代码结构意识打下基础。 在本节课程的教学中，结合新课改的理念，采用创设情境演示教学的方法，激发学生学习兴趣，采用任务驱动方式教学，引导学生通过自主学习平台自主学习从而提高学习效率。 教学目标 1、掌握HTML基本概念、格式，理解其与网页的关系； 2、掌握基本的HTML 标签的作用与用法； 过程与方法：通过对简单网页html代码的观察对和html语言的基本结构进行自我概括，掌握HTML文件的基本结构，能够明确HTML语言的结构和特点，并能在实验的过程中尝试自我修改。 情感态度价值观：本课主要锻炼学生分析能力，语言构成能力。在相应的实验中，还能提升学生自主探究、自我学习的能力。 教学重点：HTML标签的基本用法及其意义 教学难点：HTML主要标签属性的具体意义及使用 教学方法：任务驱动法（引导学生自主学习）、演示法（激发学生学习兴趣）、上机操作实习法（精讲多练）、联系对比法（化难为易，照葫芦画瓢） 教学媒体：教材、多媒体课件、电脑等