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页面的内容给用户:
HTML 网页结构
下面是一个可视化的HTML页面结构:
<html>
<head>
<title>页面标题</title>
</head>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
</body>
</body>
</html>
只有 <body> 区域 (白色部分) 才会在浏览器中显示。
HTML版本
从初期的网络诞生后,已经出现了许多HTML版本:
版本 | 发布时间 |
---|---|
HTML | 1991 |
HTML+ | 1993 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.01 | 1999 |
XHTML 1.0 | 2000 |
HTML5 | 2012 |
XHTML5 | 2013 |
<!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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文 ×
发布评论
需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
评论(3)
后缀名选择:用 htm 还是用 html ?
推荐使用长后缀名 html 。
命名应该遵从含义清晰、简洁、一致性原则。含义清晰指见名知义,比如这里的 htm(hypertext markup) 和 html (hypertext markup language) 均采用的是英文单词首字母缩写,含义清晰。简洁要求变量命名尽量简短,比如此处后缀名使用首字母缩写而不使用全单词。一致性原则要求同环境下的大量变量命名符合同样的规则,比如有的朋友习惯于Linux文件夹命名规则后,使用win系统时新建文件夹命名仍拒绝使用空格,这便造成了新文件夹名与旧文件夹名命名规则不一致。
一致性原则往往更为重要。比如合作开发时,不能各守其是,人为提高开发难度。
从一路风尘的笔记中,我们了解到 htm 是历史遗留的8.3字符限制命名方式,而现在我们在命名时并未遵守8.3规则。因此,从 htm 和 html 中选择时,也应该选择无限制长度命名方式的 html 。
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文件格式也支持。
在使用中常常遇到 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:
奇怪了:Content-Type 用冒号,Chatset却是等号。
静态文件使用:
总结:【只有在MySQL中可以使用"utf-8"的别名"utf8",但是在其他地方一律使用大写"UTF-8"。】
具体为:除了在命令 "mysql_query(set names utf8)" 外一律用大写"UTF-8"。