您的位置：首页 > Web前端 > HTML

HTML教程 - html实例和调试

2017-08-14 00:00 337 查看

http://blog.csdn.net/pipisorry/article/details/37726999

Introduction

HTML 指的是超文本标记语言: Hyper Text Markup Language
HTML 不是一种编程语言，而是一种标记语言,标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容,HTML文档也叫做 web 页面

HTML 实例

<!DOCTYPE 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 代码的窗口。

可视化的HTML页面结构

<html>

<body>

<h1>This a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>
</body>
</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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航