HTML 教程-?(HTML5 标准)

 

　　超文本标记语言(英语：HyperText Markup Language，简称：HTML)是一种用于创建网页的标准标记语言。

 

　　您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

 

　　在本教程中，您将学习如何使用 HTML 来创建站点。

 

　　HTML 很容易学习！相信您能很快学会它！

 

　　HTML 实例

 

　　本教程包含了数百个 HTML 实例。

 

　　使用本站的编辑器，您可以轻松实现在线修改 HTML，并查看实例运行结果。注意：对于中文网页需要使用声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为?。

 

　　实例

 

　　HTML文档的后缀名.html

 

　　.htm

 

　　以上两种后缀名没有区别，都可以使用。

 

　　注意:HTML中不支持 空格、回车、制表符，它们都会被解析成一个空白字符。

 

　　utf-8 和 utf8 有什么区别。

 

　　"UTF-8" 是标准写法，php 在 Windows 下边英文不区分大小写，所以也可以写成 "utf-8"。"UTF-8" 也可以把中间的"-"省略，写成 "UTF8"。一般程序都能识别，但也有例外(如下文)，为了严格一点，最好用标准的大写"UTF-8"。

 

　　在数据库中只能使用"utf8"(MySQL) 在MySQL的命令模式中只能使用"utf8"，不能使用"utf-8"，也就是说在PHP程序中只能使用 "set names utf8(不加小横杠)"，如果你加了"-"此行命令将不会生效，但是在 PHP 中 header 时却要加上"-"，因为 IE 不认识没杠的"utf8"，原因见下文。

 

　　PHP 中的 header：<?php ?header('Content-Type:?text/html;?charset=UTF-8');>?//奇怪了：Content-Type?用冒号，Chatset却是等号。

 

　　静态文件使用：

 

　　总结：【只有在MySQL中可以使用"utf-8"的别名"utf8"，但是在其他地方一律使用大写"UTF-8"。】

 

　　具体为：

 

　　除了在命令?"mysql_query(set names utf8)"?外一律用大写"UTF-8"。

 

　　htm 与 html 的区别

 

　　前者是超文本标记(Hypertext Markup)

 

　　后者是超文本标记语言(Hypertext Markup Language)

 

　　可以说 htm = html

 

　　同时，这两种都是静态网页文件的扩展名，扩展名可以互相更换而不会引起错误(这是指打开而言，但是对于一个链接来说，如果它指向的是一个htm文件，而那个htm文件被更改为html文件，那么是找不到这个链接的)

 

　　那为什么出现两种文件格式呢？

 

　　htm 是来源于老的 8.3 文件格式，DOS 操作系统只能支持长度为三位的后缀名，所以是 htm,但在 windows 下无所谓 HTM 与 HTML，html 是为长文件名的格式命名的。所以 htm 是为了兼容过去的DOS命名格式存在的，在效果上没有区别的。以前 htm 和 html 作为不同的服务器上的超文本文件，但现在通用。

 

　　什么是8.3文件格式？ 这是一种在老的16位Win95或Win98文件系统的短文件名文件格式，扩展名只限于3位，文件名只限于8位。 如果要与16位系统交互，比如说，要把一个路径传给一个16位的程序，你就不能用长文件名，而必须对它进行转换。例如把"C ： /MyLongestPath/MyLongerPath/MyFilename.txt"转换成"C ： /Mylong——1/MyLong——2/Myfile——1.txt"

 

　　了解这个有什么用？ 在FAT磁盘格式下的DOS中只支持8.3文件格式，如果你要在这个环境下做应用，应该要注意这个文件格式问题。在NTFS下，默认可以兼容这种文件格式，同时也支持长文件名，你也可以通过调整注册表来取消对8.3文件格式也支持。

 

　　后缀名选择：用 htm 还是用 html ?

 

　　推荐使用长后缀名?html?。

 

　　命名应该遵从含义清晰、简洁、一致性原则。含义清晰指见名知义，比如这里的 htm(hypertext markup) 和 html (hypertext markup language) 均采用的是英文单词首字母缩写，含义清晰。简洁要求变量命名尽量简短，比如此处后缀名使用首字母缩写而不使用全单词。一致性原则要求同环境下的大量变量命名符合同样的规则，比如有的朋友习惯于Linux文件夹命名规则后，使用win系统时新建文件夹命名仍拒绝使用空格，这便造成了新文件夹名与旧文件夹名命名规则不一致。

 

　　一致性原则往往更为重要。比如合作开发时，不能各守其是，人为提高开发难度。

 

　　从一路风尘的笔记中，我们了解到 htm 是历史遗留的8.3字符限制命名方式，而现在我们在命名时并未遵守8.3规则。因此，从 htm 和 html 中选择时，也应该选择无限制长度命名方式的 html 。

 

　　HTML?简介

 

　　实例解析?声明为 HTML5 文档

 

　　?元素是 HTML 页面的根元素

 

　　?元素描述了文档的标题?元素包含了可见的页面内容

 

　　?元素定义一个段落

 

　　什么是HTML?

 

　　HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言:?HyperText?Markup?Language

 

　　HTML 不是一种编程语言，而是一种标记语言

 

　　标记语言是一套标记标签?(markup tag)

 

　　HTML 使用标记标签来描述网页

 

　　HTML 文档包含了HTML标签及文本内容

 

　　HTML文档也叫做web 页面

 

　　HTML 标签

 

　　HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词，比如

 

　　HTML 标签通常是成对出现的，比如  和

 

　　标签对中的第一个标签是开始标签，第二个标签是结束标签

 

　　开始和结束标签也被称为开放标签和闭合标签

 

　　内容标签>

 

　　HTML 元素

 

　　"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

 

　　但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

 

　　HTML 元素:

 

　　这是一个段落。

 

　　Web 浏览器

 

　　Web浏览器(如谷歌浏览器，Internet Explorer，Firefox，Safari)是用于读取HTML文件，并将其作为网页显示。

 

　　浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

 

　　HTML 网页结构

 

　　下面是一个可视化的HTML页面结构：

 

　　只有

 

　　区域 (白色部分) 才会在浏览器中显示。

 

　　HTML版本

 

　　从初期的网络诞生后，已经出现了许多HTML版本:版本发布时间

 

　　HTML1991

 

　　HTML+1993

 

　　HTML 2.01995

 

　　HTML 3.21997

 

　　HTML 4.011999

 

　　XHTML 1.02000

 

　　HTML52012

 

　　XHTML52013

 

　　声明

 

　　声明有助于浏览器中正确显示网页。

 

　　网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

 

　　doctype 声明是不区分大小写的，以下方式均可：

 

　　通用声明

 

　　HTML5

 

　　HTML 4.01

 

　　XHTML 1.0

 

　　中文编码

 

　　目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。

 

　　HTML 实例

 

　　HTML?编辑器

 

　　HTML 编辑器推荐

 

　　可以使用专业的 HTML 编辑器来编辑 HTML，菜鸟教程为大家推荐几款常用的编辑器：Notepad++：

 

　　Sublime Text：

 

　　HBuilder：

 

　　你可以从以上软件的官网中下载对应的软件，按步骤安装即可。

 

　　接下来我们将为大家演示如何使用Notepad++工具来创建 HTML 文件，其他两个工具操作步骤类似。

 

　　Notepad++

 

　　Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。

 

　　步骤 1: 新建 HTML 文件

 

　　在 Notepad++ 安装完成后，选择" 文件(F)->新建(N) "，在新建的文件中输入以下代码：

 

　　步骤 2: 另存为 HTML 文件

 

　　然后选择" 文件(F)->另存为(A) "，文件名为 runoob.html:

 

　　当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好。

 

　　在一个容易记忆的文件夹中保存这个文件，比如?runoob

 

　　步骤 3: 在浏览器中运行这个 HTML 文件

 

　　启动您的浏览器，然后选择"文件"菜单的"打开文件"命令，或者直接在文件夹中双击您的 HTML 文件,

 

　　运行显示结果类似如下:

 

　　Notepad++ 和 Sublime Text 还可以配合 Emmet 插件来提高编码速度。

 

　　Emmet 官网：

 

　　注意：

 

　　每一种操作系统都带有简单的文本编辑器：Windows 用户可以使用记事本；

 

　　Linux 用户可以选择几种不同的文本编辑器，如 vi、vim 或者 emacs ；

 

　　Mac 用户可以使用 OS X 预装的 TextEdit。

 

　　HTML 基础-?4个实例

 

　　不要担心本章中您还没有学过的例子，

 

　　您将在下面的章节中学到它们。

 

　　HTML 标题

 

　　HTML 标题(Heading)是通过

 

　　标签来定义的.

 

　　实例

 

　　HTML 段落

 

　　HTML 段落是通过标签

 

　　来定义的.

 

　　实例

 

　　HTML 链接

 

　　HTML 链接是通过标签  来定义的.

 

　　实例

 

　　提示:在 href 属性中指定链接的地址。

 

　　(您将在本教程稍后的章节中学习更多有关属性的知识).

 

　　HTML 图像

 

　　HTML 图像是通过标签 来定义的.

 

　　实例

 

　　注意：?图像的名称和尺寸是以属性的形式提供的。