HTML教程 - html实例和调试
http://blog.csdn.net/pipisorry/article/details/37726999
Introduction
HTML 指的是超文本标记语言: Hyper Text Markup Language
HTML 不是一种编程语言，而是一种标记语言,标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容,HTML文档也叫做 web 页面
HTML 实例
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
声明
<标签>内容 </标签>
DOCTYPE 声明了文档类型
位于标签 <html> 与 </html> 描述了文档类型,定义了整个 HTML 文档。<!DOCTYPE html> 在HTML5中也是描述了文档类型。
位于标签 <body> 与 </body> 为可视化网页内容。定义了 HTML 文档的主体。
位于标签 <h1> 与 </h1> 作为一个标题heading使用
位于标签 <p> 与 </p> 作为一个段落paragraph显示
<!DOCTYPE> 声明
<!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">
Web浏览器
（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容是给用户。HTML输出提醒
我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
输出：
春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
Note:<pre>标签可以对空行和空格进行控制，见
HTML - 元素/标签。
浏览器中查看网页源代码
查看网页如何实现的。单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"。这么做会打开一个包含页面 HTML 代码的窗口。
在pycharm中调试html
在pycharm中运行时先选择要运行的浏览器
将运行时的地址http://localhost:0/pythonworkspace/HTML/test.html改为file:///E:/mine/pythonworkspace/HTML/test.html
按F10快捷键就可以调用浏览器看到刚才编写的html界面了。
或者打开用浏览器打开html文件后，按F5快捷键刷新。
html在线测试
html在线测试器
HTML 基础
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.
HTML 段落是通过标签 <p> 来定义的.
HTML 链接是通过标签 <a> 来定义的.
Note:上面两个都会自动换行，a标签要放在p标签中才会自动换行。
HTML 图像是通过标签 <img> 来定义的.
<br> 标签定义换行
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>皮皮</h1>
<h2>pipi heading2</h2>
<h3>pipi heading3</h3>
<h4>pipi heading4</h4>
<h5>pipi heading5</h5>
<h6>pipi heading6</h6>
<p>pipi paragraph</p>
<a href="http://blog.csdn.net/pipisorry">pipi blog link</a>
<br/>
<img src="皮皮.png" width="300" height="300">
<br/>
<a href="http://blog.csdn.net/pipisorry"><img src="皮皮.png" width="30" height="30"></a>
</body>
</html>
Note:
1. 加上heading声明编码，否则中文“皮皮”显示乱码。
2. img图像放在a标签中，点击图像就可以跳转到链接中。
from:http://blog.csdn.net/pipisorry/article/details/37726999
ref:http://www.w3cschool.cc/html/html-tutorial.html