HTML简介

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

HTML文档的后缀名：.html和.htm，这两种后缀名没有区别，都可以使用。

HTML 实例

<!DOCTYPE html>

<html>

<head>

　　<meta charset="utf-8">

　　<title>HTML 实例</title> 
</head> 
<body> 
　　<h1>我的第一个标题</h1> 
　　<p>我的第一个段落。</p> 
</body> 
</html>

实例解析

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

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页面结构：

注意：只有 <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">

查看完整网页声明类型 DOCTYPE 参考手册。

中文编码

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

HTML 实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>页面标题</title>

</head>

<body>

    <h1>我的第一个标题</h1>

    <p>我的第一个段落。</p>

</body>

</html>

HTML 编辑器推荐

可以使用专业的 HTML 编辑器来编辑 HTML，个人推荐几款常用的编辑器：

Web前端基础（一）--HTML简介的更多相关文章

  1. 进击的Python【第十五章】：Web前端基础之DOM

    进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...

  2. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  3. 进击的Python【第十六章】：Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  4. 进击的Python【第十四章】：Web前端基础之Javascript

    进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...

  5. 进击的Python【第十三章】：Web前端基础之HTML与CSS样式

    进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...

  6. web前端基础知识总结

    上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 ...

  7. web前端基础学习路线

    1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...

  8. web前端基础知识学习网站推介

    内容:一．基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.co ...

  9. Web前端基础怎么学？ JavaScript、html、css知识架构图

    以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...

  10. “1+X”证书Web前端开发等级考试简介

    考试简介 “1+X”证书制度是为了深入贯彻党的十九大精神和全国教育大会精神,教育部会同国家发展改革委.财政部.市场监管总局制定了<关于在院校实施“学历证书+若干职业技能等级证书”制度试点方案&g ...

随机推荐

  1. 参数类型 （@Controller层）

    @RequestMapping(path = "/listPage")@SuppressWarnings("unchecked")@BussinessLog(v ...

  2. docker 1.12

    curl https://releases.rancher.com/install-docker/1.12.sh | sh http://rancher.com/docs/rancher/v1.6/e ...

  3. 关于matlab GUI 的一些总结

    最近在 用matlab做一个GUI的用户界面 大多都是百度出来 摸索的学习 总结一下遇到的一些问题和解决方法 一: 在文本框动态显示文本 (保留之前的文本并显示当前文本内容): 在文本框显示文本 基本 ...

  4. 检查Object是否存在某个属性

    1. in 和 hasOwnProperty in会检查对象和它的整条原型链,hasOwnProperty只会检查对象本身,不会检查原型链 let a = {name: 'rick'} let b = ...

  5. 2019.7.9 校内测试 T2 极值问题

    这一次是交流测试?边交流边测试(滑稽 极值问题 乍一看这是一道数学题,因为1e9的数据让我暴力的心退却. 数学又不好,不会化简式子嘞,咋办? 不怕,咱会打表找规律.(考场上真的是打表找出了规律,打表打 ...

  6. spring-boot 定时任务需要注意的地方

    spring-boot 跑定时任务非常容易 启动类上添加两个注解基本OK @EnableScheduling @EnableAsync 当然要记录的肯定不是这里的问题了 首先, fixedDelayf ...

  7. Consul CAP理论纠错

    Consul CAP理论纠错 随便搜索Consul.zookeeper.etcd.eureka注册中心比较相关博客文章,你都会发现千篇一律的是以下这幅对比图:但是我对Consul使用的是CA架构还是C ...

  8. java安全学习-环境准备/基础知识

    补java的坑,开始! 1.Intellij一些快捷键 intell常用快捷键: ctrl+n 快速查找定位类的位置 ctrl+q 快速查看某个类的文档信息 shift + F6 快速类.变量重命名 ...

  9. Oracle impdp导入数据报错：无法读取要读取的存储文件(Linux)

    当向Linux下的Oracle11g通过数据泵impdp导入数据库时,出现如图所示错误. 错误原因:bdck.dmp该为大写. 切记:Linux系统严格区分大小写.

  10. 怎样在VMware虚拟机中使用安装并设置Ubuntu系统

    1 2 3 4 5 6 7 分步阅读 Ubuntu 系统是一款优秀的.基于GNU/Linux 的平台的桌面系统. 当然,目前为止很多应用程序还完全不能允许运行在 Ubuntu 系统上,而且 Ubunt ...