HTML5 标准

超文本标记语言（英语：HyperText Markup Language，简称：HTML）

是一种用于创建网页的标准标记语言。

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

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

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>简单的教程(Zkcops)

</title>

</head>

<body>    <h1>标题</h1>    <p>段落。</p>

</body>

</html>

HTML文档的后缀名

  • .html

  • .htm

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

HTML 简介

实例解析

  • <!DOCTYPE html> 声明为 HTML5 文档

  • <html> 元素是 HTML 页面的根元素

  • <head> 元素包含了文档的元（meta）数据，

  • 如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

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

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

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

中文编码

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

欢迎关注：Zkcops

资源共享：择喀普斯

时间记录：2018-07-06

本文来源：菜鸟教程

 

HTML 教程的更多相关文章

  1. Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  2. Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  3. Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  4. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  5. Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境

    一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...

  6. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  7. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  8. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  9. Virtual Box配置CentOS7网络（图文教程）

    之前很多次安装CentOS7虚拟机,每次配置网络在网上找教程,今天总结一下,全图文配置,方便以后查看. Virtual Box可选的网络接入方式包括: NAT 网络地址转换模式(NAT,Network ...

  10. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

随机推荐

  1. push到github报错解决方法

    在push代码到远程仓库时,报了如下的错误: $ git push -u origin master To https://github.com/11pdg/group-buy.git ! [reje ...

  2. 【C#】RGB转CMYK

    由于目前印兔项目中的在线设计功能设计出来的产品颜色模式不确定,但是客户设计出来的产品需要发送到印厂的客户端去下载并且印刷,只有CMYK颜色模式的产品才能正确印刷,所以需要判断产品的颜色模式是否为CMY ...

  3. 数据结构（三）--- B树（B-Tree）

       文章图片代码来自邓俊辉老师的课件 概述 上图就是 B-Tree 的结构,可以看到这棵树和二叉树有点不同---"又矮又肥".同时子节点可以有若干个小的子节点构成.那么这样一棵树 ...

  4. Echarts 使用asp.net +ashx+ajax 实现 饼图、柱形图后台交互

    向上效果图 前端code /* * ------------------------------------------------------------------ * module-inform ...

  5. [PHP] 从 PHP 5.3.X 迁移到 PHP 5.6.X不兼容点

    从 PHP 5.3.X 迁移到 PHP 5.4.X不兼容点: 1.不再支持 安全模式 2.移除 魔术引号,设置 magic_quotes_gpc 系列将不会生效 3.Salsa10 和 Salsa20 ...

  6. 【C++并发实战】（三） std::future和std::promise

    std::future和std::promise std::future std::future期待一个返回,从一个异步调用的角度来说,future更像是执行函数的返回值,C++标准库使用std::f ...

  7. HTML5之新增的元素和废除的元素 （声明：内容节选自《HTML 5从入门到精通》）

    新增结构元素: section元素 section元素定义文档或应用程序中的一个区段,比如章节.页眉.页脚或文档中的其他部分.它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构. ...

  8. 测试canvas绘制旋转文字的性能

    canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果. 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一 ...

  9. jquery操作select(选中，取值)

    最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料 一.基础取值问题 例如<select class="selector"></ ...

  10. C# 求百分比并保留2位小数

    , b = ; decimal c = (decimal)a / b; , ); , )).ToString() + "%"; Console.WriteLine( - resul ...