什么是 HTML?

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

  • HTML 指的是超文本标记语言: H yperT ext M arkup 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><body>

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

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

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

</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 或 GBK。

HTML 实例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 页面标题</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>

相关推荐
喝拿铁写前端23 分钟前
一套面向 Web、H5、小程序与 Flutter 的多端一致性技术方案
前端·架构
yaaakaaang28 分钟前
(一)前端,如此简单!---下载Nginx
前端·nginx
牛奶34 分钟前
为什么全国人民都能秒开同一个视频?
前端·http·cdn
KongHen021 小时前
uniapp-x实现自定义tabbar
前端·javascript·uni-app·unix
汪子熙1 小时前
TS2320 错误的本质、触发场景与在 Angular / RxJS 项目中的系统化应对
前端·javascript·angular.js
我命由我123451 小时前
React - BrowserRouter 与 HashRouter、push 模式与 replace 模式、编程式导航、withRouter
开发语言·前端·javascript·react.js·前端框架·html·ecmascript
Younglina1 小时前
用AI全自动生成连环画?我试了,效果惊艳!
前端·ai编程·claude
Devin_chen1 小时前
ES6 Class 渐进式详解
前端·javascript
小番茄夫斯基2 小时前
前端开发的过程中,需要mock 数据,但是走的原来的接口,要怎么做
前端·javascript
peachSoda72 小时前
前端想转AI全栈-初步练习记录
前端·人工智能