本篇文章给大家谈谈html文档标准教程，以及html设计文档对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
最好的html教程
课程设置中都有项目实战，
第一阶段移动前端制作基础（HTML5+CSS3基础）
第二阶段移动前端交互基础（JS+JQ+Ajax）
第三阶段移动前端综合开发（H5+C3+jQ Mobile+bootstrap+zepto）
第四阶段项目实训
课程的安排和讲课老师占很大部门的。
兄弟连软件学院毕备
HTML 教程
HTML 教程
阅读(17962.4k) 收藏 赞(1524) 分享
手册简介
HTML 指超文本标签语言。 HTML 是通向 WEB 技术世界的钥匙。 在 W3Cschool 的 HTML 教程中，您将学习如何使用 HTML 来创建站点。 HTML 非常容易学习！html文档标准教程你会喜欢它的！
手册说明
HTML是现在世界通用的超文本标记语言，通过它，可以实现图片、链接、音乐以及程序等等多种元素。现如今，HTML已经是程序员必须掌握的一项基本功。
如果您想要更快、更系统地学会HTML，您最好采用边学边练的学习模式：HTML微课
如果您觉得HTML的学习难度较高，不易理解，建议您采用视频教程进行学习：HTML视频课程
学完本教程之后，W3Cschool推荐您进行实战练习：HTML实战
1477036444719391
HTML发展史
HTML没有1.0，因为关于它的初版存在争议，1995年HTML 2.0面世，1997年由国际官方组织W3C推出html文档标准教程了HTML 3.2以及HTML 4.0标准，后面W3C(万维网联盟)也渐渐变成Web技术领域的权威，经过漫长的演变，2014年，HTML 5标准最终面世。
HTML 2.0——1995年11月，RFC 1866发布
HTML 3.2——1997年1月14日，W3C发布推荐标准
HTML 4.0——1997年12月18日，W3C发布推荐标准
HTML 4.01——1999年12月24日，W3C发布推荐标准
HTML 5——2014年10月28日，W3C发布推荐标准
HTML结构
HTML的结构一般包括head标签和body标签，head和body这2个标记符分别表示网页的头部和正文。头部中可包含页面的标题、关键词、描述说明等内容，它本身不作为内容来显示，但影响网页显示的效果。body/body当中是网页实际显示的内容，正文标记符又被称为实体标记。页面当中通常包含有很多指向其html文档标准教程他相关页面或其他节点的指针，通过点击，可以很方便地获取新的网页，这是HTML获得广泛推广运用最重要的原因之一，而由这些相互之间存在关联的页面组成的有机集合便是网站。
究竟HTML为什么会被普及?这就要归功于互联网的高速发展，对于编程语言的需求直线上升。而HTML5具有超集方式的简易性、运用广泛的可拓展性、灵活应变的平台适应性以及简单的通用性。凭借着这些特性，HTML越来越受到人们的喜爱。
HTML5编辑规范
1、文件拓展名默认使用htm或者html，便于操作系统或者程序辨认文件，而图片则基本上存为gif或jpg
2、浏览器默认忽视回车符，不过为了方便阅览，人们还是会习惯地在写完一段代码后进行回车
3、标记符号用尖括号括起来，带斜杠的元素表示该标记说明结束，大多数标记符必须成对使用，用以说明起始和结束。
4、必须使用半角而不是全角字符
5、HTML注释!–注释内容–的内容不给予显示。
除了这本手册，你还可以参考
《HTML验证》
《HTML实例》
《HTML测验》
《HTML实战》
《HTML参考手册》
开始学习HTML
接下来，你可以打开这本教程，先了解html的基本概念，然后一个一个地掌握HTML标签、HTML注释、HTML框架的用法，并且参考借鉴一些优秀的网站，通过浏览器的“查看源代码”功能来了解别人写的HTML代码结构。
HTML对于系统环境配置要求一点也不高，基本上，你只需要有一台电脑就够了。
网页设计制作教程
网页制作教程如下
(1) HTML：超文本编辑语言hyper text markup language(编写网页)
文本：用来描述数据，特别单调，只能输文字，不能变彩色，不能插入图片。超文本：丰富多彩的的展示文件
(2)www 【w(world)w(wide)w(web)万维网，因特网】
含义：建立在Internet上面的，全球的，交互的，多平台的，分布式的信息资源网络多平台的：操作系统 【window linux(Android) unix(iOS)】交互的：阅读、发表【CSDN】分布式的：有多台服务器为网络进行服务。
(3)万维网的组成：URL 【Uniform Resource Locator(统一资源定位符)网站】
HTTP【hypertext transfer protocal超文本传输语言】
(4)W3C 【HTML的标准制定者和维护者】
二、标签：【以尖括号开始，尖括号之间描述信息，就叫标签】列子： 对 错 对，分类：开始标签 结束标签
三、HTML文档结构
人=头(head)+身体(body）头身体人
四、记事本开发网页步骤
(1)新建文件.txt
(2)更改后缀【.hmtl】或【.htm】——[选中文件，点击f2–快捷方式]
(3)后缀名作用：告诉Windows系统，用什么样的程序打开文件。
(4)源代码：记事本打开 执行结果：网页打开
五、HTML注意事项
(1)标签成对出现。
(2)标签具有嵌套型
(3)排版问题：子标签的父标签之间应该有8个空格：一个tab键
(4)html不区分大小写，最好全部用小写
(5)标签有属性
tips:注意事项a：h1 align 中间要有空格；b：属性名：align 属性列：center 属性列要加””,之间要加 =
(6)注释
(7)换行和空格不管用【如何换行】
六、网页的基本标签
(1)头部标签：
(2)text 设定文字颜色
[或者使用颜色代码]：使用#和十六进制数据组成
(3)【背景颜色】：bgcolor 【背景图片】：
(4)文字标记：hello world
(5)hfbasbhgdshbfshp标签前后自动换行 且有align 三个属性【left center right】
(6)标题——-可以一直到6，并且自动换行也有align属性【left center right】
(7)空格： 版权符号
(8)文字修饰标记：加粗 加斜体 加下划线 删除线
(9)支持的图片：常用.jpg .gif .png
(10)如何引入图片 单个标签
(11)超级链接【从一个网络跳到另外一个网页】： 【非常重要的属性 href 要链接到的地址】
hmlt 教程
Q: 【HTML】教程–一般概念
A: ■ HTML 一般概念：
这节将简单介绍 HTML。
全称：HyperText Mark-up Language
译称：超文本标记语言。
简意：一种为普通文件中某些字句加上标识的语言，其目的在于运用标记（tag）合文件 达到预期的效果。
HTML 是在 SGML 定义下的一个描述性的语言，或可说 HTML 是 SGML 的一个应用程式。HTML 不是程式语言，如 C++ 和 Java 之类，它只是标记语言，基本上你只要明白了各种 标记的用法便算学懂了 HTML，HTML 的格式非常简单，只是由文字及标记组合而成，于 编辑部方面，任何文字编辑器都是可以，只要能将档案存为文本格式即可， 用专门的网页编辑工具当然更好。
■ 标记写法：
·任何标记皆由””及””所围住，如 P
·标记名与小于号之间不能留有空白字元。
·有些标记需要加上参数，有些不要。如 font size=”+2″Hello
·参数只可加于起始标记中。
·在起始标记的标记名前加上符号”/”便是终结标记，如
·标记字母大小写皆可。
■ 围堵标记与空标记：
标记按型态分为围堵标记与空标记
1、围堵标记
顾名思义，它以起始标记及终结标记将文字围住，令其达到预期要显示的效果。
例如 HTML Source ： Creation of Webpage is my favourite.
显示成： Creation of Webpage is my favourite.
其中 便称为围堵标记。它以起始标记及终结标记标示文字 Creation of webpage ，令它显示成粗体，两者失其一都会发生错误显示。
2、空标记
是指标记单独出现，只有起始标记没有终结标记。
例如 HTML Source：
I love Creation of Webpage.brIt’s a wonderful place.
显示成：
I love Creation of Webpage.
It’s a wonderful place.
其中换行标记br便属于空标记。
它的作用是将标记后的所有东西显示于下一行，可同终结标记对它是没有意义的， 但有些人为空标记加上终结标记，这是为方便阅读而已，对 HTML 没有影响。
文章来源:Goeway
Q: 【HTML】教程–文件标记
A:■ 文件标记
HTML ； HEAD ； TITLE ； BODY
欲明白本篇【HTML彻底剖析】之标记分类，请看 【标记一览】。
也请先明白围堵标记与空标记的分别，请看 【HTML概念】。
■ HTML 基本架构：
以下 HTML Source Code 便是一份 HTML 文件的基本架构 ：
HTML
HEAD
TITLE 网页的标题 /TITLE
/HEAD
BODY
网页的内容，很多标记都作用于此
/BODY
/HTML
特点解说：
整份文件处于标记HTML与/HTML之间。
HTML用以宣告这是 HTML 文件，让浏览器认出并正确处理此 HTML 文件。
文件分两部份，由HEAD至/HEAD称为开头，BODY至/BODY称本文。
基本上两者各有适用的标记，如TITLE只可出现于开部分。
开头部分用以存载重要信息，而只有本文部分会被显示。
所以大部分标记会应用于本文部分。
TITLE所标示的是文件的标题。
会出现于浏览器顶部及为别人 Bookmark 时的名称，所以每页有不同面明确的标题是需要的。
上述标记中只有BODY具参数设定。
■ BODY 的参数设定：
例子：
BODY text=”#000000″ link=”#0000FF” alink=”#FF0000″ vlink=”#0000FF” background=”bg1.gif” bgcolor=”#FFFFFF” leftmargin=2 topmargin=2 bgproperties=”fixed”
text=”#000000″
用以设定文字颜色。 #000000 代表黑色，也可以采用颜色名称，即 text=”black” 。各种颜色的值及名称可参考【调色原理】一节。
link=”#0000FF”
设定一般文字链接的颜色。
alink=”#FF0000″
设定刚按下时文字链结颜色。
vlink=”#0000FF”
设定被按过后的链接的颜色。
background=”bg1.gif”
设定背景图片。GIF 或 JPEG 皆可，可以是绝对路径或相对路径。
bgcolor=”#FFFFFF”
设定背景颜色，当已设定背景图片时会失去作用，除非透明部分。
leftmargin=2
设定整份文件显示画面的左方边沿空间，单位为像素。 （只适用于IE）
topmargin=2
设定整份文件显示画面的上方边沿空间。 （只适用于IE）
bgproperties=”fixed”
固定背景图片，当卷轴卷动时不会跟着卷动。 （只适用于IE）
标记及参数的字母大小写都可以。其他如 onload 等事件请参看有关 Java Script的介绍。
文章来源：Goeway
Q: 【HTML】教程–排版标记
A:■ 排版标记
!–注解– ； P ；
； HR ； CENTER ； PRE ； DIV ； NOBR ； WBR ；
欲明白本篇【HTML彻底剖析】之标记分类，请看 【标记一览】。
也请先明白围堵标记与空标记的分别，请看 【HTML概念】。
■!–注解–： ▲Top
像很多电脑语言一样，HTML 也提供注解功能。浏览器将忽略此标记中的文字（可以是 很多行）而不作显示，一般使用目的：
为文中不同的部分加上说明，方便日后修改。
这对较复杂或非私人网页尤其重要，它不单提醒自己也提醒其他同事这部分 做什么、那部份做什么。
例子：
!–由这里开始是产品订购表格–
用作版权声明。
假如你不希望别人使用或复制你的网页，可加上警告字句。
例子：
!–本文版权为 2000, FortuneAge 所有，未经许可，请勿抄摘–
■ P ： ▲Top
P 称为段落标记。作用：留一空白行。
本来P是一个围堵标记，标于一段落的头尾，但从 HTML 2.0 开始已不需要/P作结尾。
P 的常用参数： 如：p align=”center”
align=”center”
可选值：right, left, center。
默认值： align=”left”
例子： 原代码 Here is the text for my paragraph. It does’t matter how long it is,
how many space are between the words or when I decide to hit the return key.
It will create a new paragraph only when I begin the tag with another one.
PHere’s the next paragraph.
显示结果 Here is the text for my paragraph. It does’t matter how long it is, how
manyspace are between the words or when I decide to hit the return key. It
will create a new paragraph only when I begin the tag with another one.
Here’s the next paragraph.
■
： ▲Top
称为换行标记。作用：令其后的内容在下一行显示。
由于浏览器会自动忽略原代码中的空白和换行的部分，这使得
成为最常用的标记之一 。 因为无论你在原代码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记， 浏览器只会将它显示成一大段。
错误示范： 原代码 566 E Boston Post RD
Mamaroneck NY 10543-9982
United States of America
显示结果 566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America
正确例子： 原代码 566 E Boston Post RD
Mamaroneck NY 10543-9982
United States of America
显示结果 566 E Boston Post RD
Mamaroneck NY 10543-9982
United States of America
■ HR ： ▲Top
HR称为水平线。作用：插入一条水平线。
HR 的参数修改：
以： HR align=”LEFT” size=”2″ width=”70%” color=”#0000FF” noshade 为例。
align=”LEFT”
设定线条摆放位置，可选择：left；right；center 三种设定值。
size=”2″
设定线条的厚度，以像素作单位，内定为 2。
width=”70%”
设定线条长度，以像素作单位，可以是绝对或相对值，内定为 100%。
color=”#0000FF” （只适用于IE）
设定线条颜色，内定为黑色。 #0000FF 代表蓝色，也可以采用颜色的名称，即 text=”blue” 。各种颜色的值及名称请参考【调色原理】一节。
noshade
设定线条为平面显示，若删去则具阴影，这是内定值。
例子： 原代码 HR
HR align=”LEFT” size=”4″
HR align=”LEFT” size=”2″ width=”70%” color=”#0000FF” noshade
HR align=”LEFT” size=”4″ width=”70″ color=”#008000″
■ CENTER ： ▲Top
CENTER称为居中标记。作用：令置中对齐。
你会发现很多的标记已有 align=”CENTER” 的参数，CENTER似乎是多余了，事实上它还是常用的标记之一，其简单易用 ，常用于文字，对于已加有 align=”CENTER” 参数的 TABLE 标记也不要厌其烦 地加上居中标记，因为很多浏览器不支持TABLE 标记中的 align=”CENTER” 参数。
例子： 原代码 CENTERChris’s First Homepage/CENTER
CENTERWhat’s new/CENTER
CENTERMy profile/CENTER
结果 Chris’s First Homepage
What’s new
My profile
■ PRE ： ▲Top
PRE称为预设格式标记。作用：令文字按照原代码的方式显示。
这标记允许保留你在原代码中输入的空白和回车。细看以下例子你便可体会到此标记的 威力。除了运用一大堆表格标记之外你只有采用这标记才能有此效果。
能以PRE标记产生对齐效果，或产生多于一行的空白才算上乘！
例子： 原代码 pre Creation of Webpage Log Analysis I
Composer Learning 459 407 480 522 547 586 673
HTML Advanced 200 268 296 358 385 453 506/pre
显示结果 Creation of Webpage Log Analysis I
Composer Learning 459 407 480 522 547 586 673
HTML Advanced 200 268 296 358 385 453 506
■ DIV ： ▲Top
DIV称为定位标记。作用：设定文字表格等摆放位置。
DIV应用在 Style Sheet（样式表）方面更显威力，它最终目的是给设计者另一种组织 能力，有 Class ; Style ; title ; ID 等属性，将于【Style Sheet】一节才作详述，这里只作一个 属性设定。
以 DIV align=”center” 为例：
align=”center”
可选值：center ; left ; right 。决定对齐方向。
DIV align=”center” 的作用和居中标记 CENTER一样，前者是由 HTML3.0 开始 的标准，后者是通用已久的标示法。
例子： 原代码 DIV align=”center”Chris’s First Homepage
brWhat’s new
brMy profile/DIV
显示结果 Chris’s First Homepage
What’s new
My profile
■ NOBR ： ▲Top
NOBR称为不换行标记。作用：令文字不能因太长而换行 。它对住址、数学公式、一行数字等尤其有用。
例子：（其中 Chris’s Creation of Webpage 将不被分开而显示于同一行。） 原代码 If you want to know how to create you own homepage quickly, don’t miss
NOBR
Chris’s Creation of Webpage/NOBR which will help you a lot.
显示结果 If you want to know how to create you own homepage quickly, don’t miss
Chris’s
Creation of Webpage which will help you a lot.
■ WBR ： ▲Top
WBR称为建议换行标记。作用：预设换行部位。
它没有侵犯到
的责任，只是作建议而已，若浏览者的显示器分辨率够高的话，那么它是 不会换行的。
例子：（若不加WBR标记，整个网址会显示下一行。） 原代码 Please visit my other homepage which locate at
Silicon
Valley/WBRSector/8234/index.html There are many softwares for download.
I think you will really love that place.
显示结果 Please visit my other homepage which locate at
Silicon
Valley/Sector/8234/index.html There are many softwares for download. I
think you will really love that place.
文章来源：Goeway
Q: 【HTML】教程–字体标记
A: ■ 字体标记
STRONG
EM VAR CITE DFN ADDRESS
TT SAMP CODE KBD U STRIKE BIG SMALL SUP SUB
H1 H2 H3 H4 H5 H6
BASEFONT
欲明白本篇【HTML彻底剖析】之标记分类，请看 【标记一览】。
也请先明白围堵标记与空标记的分别，请看 【HTML概念】。
■实体标记与逻辑标记 ： ▲Top
这一节【字体标记】你必须先明白实体标记与逻辑标记的分别，否则你会迷惑于为何不同 的标记却有相同的效果。两者分别有以下两处：
1、实体标记有固定的显示效果，逻辑标记标记则依不同浏览器而不同。
例如逻辑标记的 EM 由于浏览器的不同它所标示的文字不一定出现斜体效果， 它可能是加底线、粗体或反白等，所以这一节是以它们在 IE 和 NC 中的效果作介绍。
2、多个实体标记也可有效标示同一字句，逻辑标记则通常于浏览器不能有效显示多 重的标示。
例如两个逻辑标记 EM 及 STRONG 同时标示一字句于旧浏览器常失去作用。
实体标记有：
U
逻辑标记有：
STRONG EM VAR CITE DFN ADDRESS CODE KBO SAMP TT
若要求真确的效果当然以实体标记为佳。
■STRONG ： ▲Top
两者皆能产生字体加粗效果，但必须注意的是当文件编码被设为汉字时，两者所标示的中文字不会在 Netscape Netvigator 显示粗体效果。
例子： （第一行是没有任何字体标记的，作参照用） HTML Source Code （原代码） 浏览器显示结果
Creation of Webpage
brSTRONGCreation of Webpage/STRONG
brCreation of Webpage Creation of Webpage
Creation of Webpage
Creation of Webpage
■ EM VAR CITE DFN ADDRESS： ▲Top
这些标记在 Internet Explorer 里都会产生斜体效果，而只有 /DFN 于 Netscape Netvigator 失去作用。这些标记中只有 ADDRESS 较为特别，因为它包括换行效果所以不必在它前面加上
标记。
例子： HTML Source Code （原代码） 浏览器显示结果
Creation of Webpage
brEMCreation of Webpage/EM
brVARCreation of Webpage/VAR
brCITECreation of Webpage/CITE
brDFNCreation of Webpage/DFN
ADDRESSCreation of Webpage/ADDRESS Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
■TT SAMP CODE KBD U STRIKE BIG SMALL SUP SUB ▲Top
为方便对照及记认，所以把十个标记放在一起介绍。
TT SAMP CODE KBD 可令每字母有相等宽度且每个字母之间的距离稍微加宽。但于 NC 不见得如此。
U 是加底线的标记，一些特别的浏览器并不支持，因顾虑到与链接混淆。
STRIKE 加上删除线的标记。
BIG 令字体加大。
SMALL 令字体变细。
SUB 为下标字， SUP 则为上标字，仅剩的数学标记。
例子： （第一行是没有任何字体标记的，作参照用） HTML Source Code （原代码） 浏览器显示结果
Creation of Webpage
brTTCreation of Webpage/TT
brSAMPCreation of Webpage/SAMP
brCODECreation of Webpage/CODE
brKBDCreation of Webpage/KBD
brCreation of Webpage
brSTRIKECreation of Webpage/STRIKE
brBIGCreation of Webpage/BIG
brSMALLCreation of Webpage/SMALL
br12345SUB7/SUB 6789SUP9/SUP Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
123457 67899
■H1 H2 H3 H4 H5 H6： ▲Top
这些标记是标题标记，由 H1 到 H6 逐渐变小。每个标题标记所标示的字句将独占一行且上下留一空白行。
例子： 原代码 H1Header Level 1/H1
H2Header Level 2/H2
H3Header Level 3/H3
H4Header Level 4/H4
H5Header Level 5/H5
H6Header Level 6/H6
显示结果 Header Level 1
Header Level 2
Header Level 3
Header Level 4
Header Level 5
Header Level 6
■ BASEFONT： ▲Top
这一节只有这两个标记具参数设定，且两者的参数设定是一样的，都是负责设定文字的大小、 字型及颜色，但各有用处，且看以下比较：
BASEFONT 可以用于文件开头部分，即 HEAD 与 /HEAD 之间的位置，将 影响全文字句，是一个空标记，用以改变字体显示的内定值。
是应用于文件的内文部分，即 BODY 与 /BODY 之间的位置，只影响 所标示的字句，是一个围堵标记。
两标记可同时存在，唯没被 所标示的字句才直接受 BASEFONT 所影 响，而 本身也受 BASEFONT 的影响。
的参数设定：
例子： font face=”Arial” size=”+2″ color=”#008000″Creation of Webpage
face=”Arial”
设定文字的字形。Arial 是常用的一种，请不要使用 Window 附带字 体以外的字体。对于没有设定为中文代码的中文网页，Netscape Netvigator 不会显示此标记 所指明的任何中文字体。
size=”+2″
设定文字的大小。其值可以是绝对或相对，
绝对的意思是标记自己决定文字的大小，不受 BASEFONT 的影响，如
size=”5″ 表示其大小便是 5， 而html内定值为 3，即 size=”3″和没设定是一样的。
相对的意思是在默认值 3 基础上增大或缩小的级数，如 size=”+2″ 便等同绝 对表示法的 size=”5″，蓝天若已设定 BASEFONT size=”n” 则其实际大小便是 n+2 不 再是 3+2 了。BASEFONT只有绝对表示法。
color=”#008000″
设定文字的颜色。#008000 表示绿色，各类颜色值及调色法请参考【调色原理】
例子： 原代码 font size=”+1″I love Creation of Webpage
brfont size=”+2″ color=”#800080″I love Creation of Webpage
brfont face=”Times New Roman” size=”5″ color=”#008000″I love Creation of Webpage
显示结果 I love Creation of Webpage
I love Creation of Webpage
I love Creation of Webpage
文章来源：Goewa
关于html文档标准教程和html设计文档的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。