这篇博客详细介绍了HTML的基础知识，从HTML的起源、作用到HTML的语法结构，包括标记、属性、文本标签、表格、表单、超链接等核心概念。作者通过实例演示了如何创建和理解HTML页面，帮助读者掌握网页制作的基础技能。
1. HTML简介
1.1. HTML超文本标记语言
HTML能用来做什么
如果你要制作网站的话，学习HTML是不可避免的。HTML是用来制作网站的
HTML是Internet上用于设计网页的主要语言,网页可以由文本,图片,动画等内容组成,基础架构都是HTML. 从事网页制作或者相关工作,就要学习HTML
HTML是“HyperText Mark-up Language（超文本标记语言）”的缩写
要制作网页,就需要使用超文本标记语言编写以.html 或者.htm结尾的文件
1.2. 人物简介
Tim Berners-Lee蒂姆·伯纳斯·李是HTML创始人，www之父，w3c创始人
HTML
HTML是由一名叫蒂姆·伯纳斯·李的科学家发明的。他发明HTML的目的，是为了方便世界各地的物理学家们可以更容易地获取彼此的研究文档。
蒂姆·伯纳斯-李为使世界各地的物理学家能够方便的进行合作研究，在1982年发明了HTML。HTML取得了的巨大成功，大大超出了蒂姆·伯纳斯-李的原本预计,后来成为国际标准，由万维网联盟（W3C）维护。
HTML是一门语言, 它令我们可以在因特网上展示信息（例如科学研究信息）。
浏览器
在1990年, 蒂姆·伯纳斯·李在日内瓦的欧洲粒子物理实验室里开发出了世界上第一个网页浏览器。我们所看到的网页，是浏览器对HTML进行解释的结果。
WWW(万维网)
也叫做“Web”、“WWW” 中文叫做万维网。也叫环球信息网.
有了网页,有了显示网页的浏览器,如何获取网页,如何发布网页. 蒂姆·伯纳斯·李在瑞士的欧洲粒子物理实验室发明了World Wide Web，即我们熟悉的WWW 简单来说: 它允许用户在一台计算机上通过互联网存取另一台计算机上的信息(网页)。
万维网
WWW是一个资料空间。在这个空间中一样有用的事物，称为一样“资源”；并且由一个叫做“统一资源标识符”（URI）来标识。这些资源通过超文本传输协议(Hypertext Transfer Protocol）传送给使用者，而后者通过点击链接来获得资源。
简单的说WWW就是一个世界性的信息库。在这个信息库中，信息不仅能被全球的人们存取，而且能轻松地链接到其他地方的信息，使用户可以方便快捷地获得重要的信息。
W3C
万维网联盟（World Wide Web Consortium，简称W3C），又称W3C理事会。1994年10月蒂姆·伯纳斯·李在麻省理工学院计算机科学实验室成立了该组织。
万维网联盟是国际著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。
备注：www.w3c.org
1.3. HTML体验
打开浏览器：输入www.baidu.com
在页面处鼠标右键查看页面源代码
1.4. HTML运行原理
使用记事本编写一个简单的页面进行体验。
运行原理
本地运行：直接通过浏览器打开本地以.Html后缀的文件。
远程访问（Tomcat）通过浏览器，输入打开web服务器上的文件。
1.5. 开发HTML
需要使用HTML编辑工具开发HTML页面：
一:基本文本编辑软件： 如记事本、Editplus等
二:所见即所得软件：如dreamweaver Aptana 等
2. HTML的语法
HTML是一门标记语言,用于控制页面结构,HTML 通过标记告诉了浏览器以什么方式或者结构显示内容,作为初学者掌握HTML的一些常用标记是必要的.
2.1. 标记（标签）
2.1.1. <> </>
HTML用于描述功能的符号称为“标记”。如“HTML”、“BODY”、“TABLE”等。
标记是由W3C组织定义好的并具有特定的含义的符号.
格式：
标记在使用时必须用尖括号“<>”括起来，而且是成对出现，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。
所以应当遵循：<开始标签> 标签体 </结束标签>
特点
标签的特点：不区分大小写，标签名是固定的。
例如<TABLE>表示一个表格的开始，</TABLE>表标一个表格的结束。如<TABLE>和<table>都是表示一个表格的开始。不区分大小写。
2.1.2. 标签分类
带标签体的标签 如： <p> XX </p>
不带标签体的标签 如： <br/>
2.1.3. 标签属性
写在开始标签上的 名=“值”对代表该标签的属性 <font color=“red”></font>。
一个标签可以有多个属性，多个属性之间使用空格隔开。
注意：属性值最好使用单引号或者双引号引起来。
<font color="red">你好</font>
注意事项：
1:所有标记都要用<> 尖括号括起来
2:成对出现的标记,最好开始和结束标记同时写完.
3:HTML中不区分大小写
4: 5:标记中不要有空格.
错误的例子：
| <html> <head> <title>这是我的第一个网页</title> </head> <body> < a href="http://gz.itcast.cn" target="_blank">广州传智播客</a> </body> </html> |
标签 <a> 开头多了空格。
2.2. HTML注释
<!-- 我是注释 -->
2.3. HTML正文
HTML正文分为文档头和文档体两部分。文档头<head> 可以定义标题,关键字等等.文档体<body> 定义要将要显示在浏览器中的各种信息。
案例：
| <html> <head> <title>这是我的第一个html</title> </head> <body> <p>HelloWorld</p> <body> </html>
|
注释：
<html> 与 </html> 之间的文本描述网页
<head> 与 </head> 之间的用于定义文档的头部
<title> 与 </title> 定义文档的标题
<body> 与 </body> 之间的文本是可见的页面内容
<p> 与 </p> 之间的文本被显示为段落
2.3.1. 文件头<head>
一个完整的html文件包括头部文件(head)和文件主体(body),头部标记是<head></head>。在这对标记中的内容为头部内容,HTML中的头部内容不直接在网页上显示。
可以用在 head 部分的标签：<title>,<base>, <link>, <meta>, <script>, <style>, 以及文本标签
例如: title
代码：
| <html> <head> <title>这是网页的标题</title> </head> <body> </body> </html> |
本例中：在<head><head>标签中中包含了<title></title> 标签。<title>中的内容是网页的标题,没有显示在网页中,显示在了网页的标题栏上。
2.3.2. 文件体<body>
我们可以可以直接在body中添加文件并编辑内容
| <html> <head> <title>这是网页的标题</title> </head> <body> hello,world </body> </html>
|
可以改变颜色的背景
| <html> <head> </head> <body bgcolor="yellow"> 请看: 改变了颜色的背景。 </body> </html> |
可以添加背景图片
| <html> <body background="c:\\a.jpg"> 有了背景图片 </body> </html> |
style="background-repeat:no-repeat;(不平铺)
background-position:center;(定位居中)
background-attachment:fixed" (绝对定位)
但是这样的文本内容是用浏览器打开后没有任何的效果，想要换行，想要段落，等等怎么办？就需要学习文本标签了。
2.4. 文本标签
2.4.1. 标题(h1~h6)
<h1> - <h6> 标签可定义标题<h1> 定义最大的标题。<h6> 定义最小的标题。
| <html> <body> <h1>广州传智播客 1</h1> <h2>广州传智播客 2</h2> <h3>广州传智播客 3</h3> <h4>广州传智播客 4</h4> <h5>广州传智播客 5</h5> <h6>广州传智播客 6</h6> </body> </html> |
注意：标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。
2.4.2. 段落(p)
<p> 标签定义段落。p 元素会自动在其前后创建一些空白。
| <html> <body> <p>这是段落一。</p> <p>这是段落二。</p> <p>这是段落三。</p> <p>段落元素由 p 标签定义。</p> </body> </html>
|
属性:title
例如: <p title="段落的说明">这是一个段落</p
2.4.3. 段落缩进(blockquote)
| <html> <body> 这是长的引用： <blockquote> 孙子曰:兵者，国之大事，死生之地，存亡之道，不可不察也。故经之以五事，校之以计，而索其情：一曰道，二曰天，三曰地，四曰将，五曰法。兵者，诡道也。 故能而示之不能，用而示之不用，近而示之远，远而示之近。</blockquote>
这是短的引用： 孔子曰: <q>三人行必有我师</q> <p>使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。</p>
</body> </html> |
使用 blockquote 元素的话，浏览器会插入换行(两个br)和外边距( )，而 q 元素不会有任何特殊的呈现。
关于：q
| <html> <body> 孔子曰: <q>三人行必有我师</q> |
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
