本文介绍了HTML的基础知识，包括文档结构、基本标签使用、文本格式化、链接创建等，并提供了多个实例帮助初学者快速掌握HTML。
推荐一个非常好的网址：
http://www.runoob.com
本文非原创，是通过这个网址学习HTML的笔记，非常多的信息出自于此网址。
第一章、简介以及Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Triose's first html</title>
</head>
<body>
<h1>Hello world</h1>
<p>This is Triose's first HTML</p>
</body>
</html>与
作为一个标题使用 位于标签与
作为一个段落显示 什么是HTML? HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML 标签及文本内容 HTML文档也叫做 web 页面 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成对出现的，比如 和 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签<标签>内容</标签><!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html> HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta charset = "utf-8">-
“`标签来定义的. 代码:
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>这是一个标题
这是一个标题
这是一个标题
********************************* 2、HTML 段落 HTML 段落是通过标签“`“` 来定义的. 代码：
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>这是一个段落。
这是一个段落。
这是一个段落。
************ 3、HTML 链接 HTML 链接是通过标签 “` “` 来定义的. 代码：<a href="http://www.runoob.com">这是一个链接</a><img src="w3cschool.png" width="104" height="142"><p> <!--开始标签-->
这是一个段落 <!--元素内容-->
</p> <!--结束标签-->“`就是没有关闭标签的空元素（“`
“`标签定义换行）。 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。 在开始标签中添加斜杠，比如 “`
“`，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。 即使 “`
“`在所有浏览器中都是有效的，但使用“`
“`其实是更长远的保障。 **五、HTML 属性** HTML 属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现，比如：name=”value”。 HTML 属性常用引用属性值 属性值应该始终被包括在引号内。 双引号是最常用的，不过使用单引号也没有问题。 Remark提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=’John “ShotGun” Nelson’ HTML 属性参考手册： HTML标签参考手册 HTML标准属性参考手册 note：这个暂时还没有实践、以后补上 **六、HTML标题** HTML 标题 标题（Heading）是通过“`
-
“`标签进行定义的. “`
“` 定义最大的标题。“`
“`定义最小的标题。 例如:
<h1>这是1号标题</h1>
<h2>这是2号标题</h2>
<h3>这是3号标题</h3>
<h4>这是4号标题</h4>
<h5>这是5号标题</h5>
<h6>这是6号标题</h6>这是1号标题
这是2号标题
这是3号标题
这是4号标题
这是5号标题
这是6号标题
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。 HTML 水平线 “`“`标签在 HTML 页面中创建水平线。（用于分隔） 例如：
这是一个段落。
这是一个段落。
这是一个段落。
HTML 注释 可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。 注释写法如下:“` “` 总结：  本图片截自菜鸟教程网页。传送门： 菜鸟教程 **七、HTML段落** 1、HTML 段落 段落是通过 “`“`标签定义的。 例如：
<p>这是一个段落 </p>
<p>这是另一个段落</p>这是一个段落
这是另一个段落
2、HTML 折行 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 “`“` 标签： 例如：
<p>这个<br>段落<br>演示了分行的效果</p>这个
段落
演示了分行的效果
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>春眠不觉晓， 处处闻啼鸟。 夜来风雨声， 花落知多少。
注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。
八、HTML文本格式化
1、文本格式化：
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>结果：
加粗文本
斜体文本
电脑自动输出
这是 下标 和 上标
还有一些东西请参照网页上写的，传送门：
传送门
九、HTML链接
1、HTML链接：
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>结果：
本文本 是一个指向本网站中的一个页面的链接。
本文本 是一个指向万维网上的页面的链接。
2、HTML超链接
HTML使用标签<a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a>中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
例如：
<a href="http://www.runoob.com/">访问菜鸟教程</a> 结果：
访问菜鸟教程
3、HTML 链接 - target 属性
使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
例如：
<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>结果1:
访问菜鸟教程!
如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。
结果2：
访问菜鸟教程!
如果你未设置target属性, 链接将在本窗口打开。
4、HTML 链接- id 属性
id属性可用于创建在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。
实例：
<a id = "trips">有用的提示部分</a>
<a href="#tips">访问有用的提示部分</a>
<a href="http://www.runoob.com/html/html-links.html#tips" target="_blank">访问有用的提示部分</a>结果：
有用的提示部分
访问有用的提示部分
访问有用的提示部分
另外附上图片链接创建方法：
<p>创建图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>无边框的图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>结果:(这里没有图片，随便看看就行。。。)
创建图片链接: 
无边框的图片链接:
十、HTML头部
传送门
十一、HTML CSS
传送门
例子1：
<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color: #40B3DF"></div>
<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">
<div style="opacity:0.3;position:absolute;left:120px;width:100px;height: 200px;background-color:#8AC007"></div>
<h3>LOOK! Styles and colors</h3>
<div style="letter-spacing:12px;">Manipulate Text</div>
<div style="color: #40b3df;">Colors
<span style="background-color:#B4009E;color:#ffffff;">Boxes</span>
</div>
</div>
<div style="color:#000000;">and more...</div>
例子2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Triose's first page</title>
<style type = "text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>例子3：
<a href = "http://www.runoob.com/" style="text-decoration: none;" target="_blank">访问网页</a>1、如何使用CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。
2、内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color:blue;margin-left:20px;">This is a paragraph.</p> 3、HTML样式实例 - 背景颜色
背景色属性（background-color）定义一个元素的背景颜色：
例如：
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>特别丑。。。
4、HTML 样式实例 - 字体, 字体颜色 ，字体大小
我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>5、HTML 样式实例 - 文本对齐方式
使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>6、内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 部分通过
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head> 外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> 
扫一扫
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
