HTML教程 - html实例和调试

来源:互联网 发布:淘宝团队管理权限 编辑:程序博客网 时间:2024/06/04 17:53

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


1 0