当前位置: 首页 > 文档资料 > HTML 基础教程 >

HTML 简介

优质
小牛编辑
139浏览
2023-12-01

我们每天都要阅读无数个网页,不管是 PC 的还是 APP 的,其实他们都是由 HTML 标记语言写出来的,可以说网页已经攻陷了 80% 的程序,简单方便的编写方式,入门门槛极低,网络上随便看一些文档就能够编写网页,当然这和高级的开发者写出来的肯定不一样,不过也是网页。

我们先来看一个实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小牛知识库</title>
</head>
<body>
 <h1>我的第一个标题</h1>
 <p>我的第一个段落。</p>
</body>
</html>

实例解析

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

什么是HTML?

HTML 是用来描述网页的一种语言。

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

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>

HTML 元素

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

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

HTML 元素:

<p>这是一个段落。</p>

Web 浏览器

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

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

Web 浏览器


HTML 网页结构

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

<html>

<head>

<title>页面标题</title>
</head>

<body>

<h1>这是一个标题</h1>

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>
</body>

</html>

只有 <body> 区域 (白色部分) 才会在浏览器中显示。


HTML版本

从初期的网络诞生后,已经出现了许多HTML版本:

版本发布时间
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013

<!DOCTYPE> 声明

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

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

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

  • <!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">

中文编码

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

HTML文档的后缀名

  • .html
  • .htm

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

Jsmile 2017-12-19 14:12:02

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

推荐使用长后缀名 html

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

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

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

灵芸 2017-12-19 14:11:37

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文件格式也支持。

晚风撩人 2017-12-19 14:11:03

在使用中常常遇到 utf-8 和 utf8,现在终于弄明白他们的使用不同之处了,现在来和大家分享一下,下面我们看一下 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:

header('Content-Type: text/html; charset=UTF-8');

奇怪了:Content-Type 用冒号,Chatset却是等号。

静态文件使用:

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

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

~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文