资讯专栏INFORMATION COLUMN

HTML的简介

cncoder / 553人阅读

摘要:教程标准超文本标记语言英语,简称是一种用于创建网页的标准标记语言。版本从初期的网络诞生后,已经出现了许多版本版本发布时间声明声明有助于浏览器中正确显示网页。声明是不区分大小写的,以下方式均可通用声明查看完整网页声明类型参考手册。

HTML 教程- (HTML5 标准)

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

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

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

HTML 很容易学习!相信您能很快学会它!

HTML 实例

本教程包含了数百个 HTML 实例。

使用本站的编辑器,您可以轻松实现在线修改 HTML,并查看实例运行结果。

注意:对于中文网页需要使用  声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 

实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)title> head> <body> <h1>我的第一个标题h1> <p>我的第一个段落。p> body> html>
尝试一下 »

点击 "尝试一下" 按钮查看在线实例


HTML文档的后缀名

  • .html
  • .htm

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

开始学习HTML!

HTML 实例

在 HTML 手册中包含了数百个在线实例,您可以在线编辑并查看运行结果。

查看 HTML 实例!

HTML 参考手册

在菜鸟教程中,我们提供了完整的 HTML 参考手册,其中包括标签、属性、颜色、实体等等。

HTML 标签参考手册

HTML/CSS/JS 在线工具

HTML/CSS/JS 在线工具可以在线编辑 HTML、CSS、JS 代码,并实时查看效果,你也可以将优质代码保存分享:https://c.runoob.com/front-end/61

HTML 简介

HTML 实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)title> head> <body> <h1>我的第一个标题h1> <p>我的第一个段落。p> body> html>
尝试一下 »

实例解析

  •  声明为 HTML5 文档
  •  元素是 HTML 页面的根元素
  •  元素包含了文档的元(meta)数据,如  定义网页编码格式为 utf-8
  • </strong> 元素描述了文档的标题</li> <li><strong><body></strong> 元素包含了可见的页面内容</li> <li><strong><h1></strong> 元素定义一个大标题</li> <li><strong><p></strong> 元素定义一个段落</li> </ul> <p> </p> <hr /> <h2>什么是HTML?</h2> <p>HTML 是用来描述网页的一种语言。</p> <ul> <li>HTML 指的是超文本标记语言: <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage</li> <li>HTML 不是一种编程语言,而是一种<strong>标记</strong>语言</li> <li>标记语言是一套<strong>标记标签</strong> (markup tag)</li> <li>HTML 使用标记标签来<strong>描述</strong>网页</li> <li>HTML 文档包含了HTML<strong> 标签</strong>及<strong>文本</strong>内容</li> <li>HTML文档也叫做<strong> web 页面</strong></li> </ul> <hr /> <h2>HTML 标签</h2> <p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</p> <ul> <li>HTML 标签是由<em>尖括号</em>包围的关键词,比如 <html></li> <li>HTML 标签通常是<em>成对出现</em>的,比如 <b> 和 </b></li> <li>标签对中的第一个标签是<em>开始标签</em>,第二个标签是<em>结束标签</em></li> <li>开始和结束标签也被称为<em>开放标签</em>和<em>闭合标签</em></li> </ul> <标签>内容</标签> <p> </p> <hr /> <h2>HTML 元素</h2> <p>"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.</p> <p>但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:</p> <p>HTML 元素:</p> <p>这是一个段落。</p> <p> </p> <hr /> <h2>Web 浏览器</h2> <p>Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。</p> <p>浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户:</p> <p></p> <hr /> <h2>HTML 网页结构</h2> <p>下面是一个可视化的HTML页面结构:</p> <html> <head> <title>页面标题

    这是一个标题

    这是一个段落。

    这是另外一个段落。

     

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

     


    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

     


    声明

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

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

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

     

     

     


    通用声明

    HTML5

    HTML 4.01

    "http://www.w3.org/TR/html4/loose.dtd">

    XHTML 1.0

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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


    中文编码

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

    HTML 实例

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

     

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1606.html

相关文章

  • 前端技术之_CSS详解第一天

    摘要:前端技术之详解第一天一部分略。。。。中国主要城市北京上海广州美国主要城市纽约洛杉矶华盛顿西雅图在浏览器中,默认是不会增加任何的效果改变的,但是语义变了,中的所有元素是一个小区域。前端技术之_CSS详解第一天一html部分略。。。。二、列表列表有3种2.1 无序列表无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的。ul就是英语unordered list,无序列表的意...

    番茄西红柿 评论0 收藏0
  • 关于HTML5,最牛逼10本书!

    摘要:学武如此,学习移动开发又何尝不是呢最近微信推出小程序内测,未来方向的专业人才必定水涨船高。上半部分涵盖了能使各类网站,特别是移动网站变快的基本概念。   金庸小说中涉及到剑法98种,刀法33种,鞭法12种,棍法及枪法23种,掌法及腿法206种,无属性功法20种。学会任何一种都能让你成为称霸一方的武林高手。但是,要成为威震天下笑傲江湖的绝顶高手,等闲武学是做不到的。最明显的例子就是慕容复...

    niuxiaowei111 评论0 收藏0
  • HTML简介

    摘要:简介,万维网联盟是万维网之父于年成立的。为解决网络应用中不同平台技术和开发者带来的不兼容问题,保障网络信息的顺利和完整流通,万维网联盟制定了一系列标准并督促网络应用开发者和内容提供者遵循这些标准。 想要制作出好看又高大上的网页,第一步就是要编写HTML文件。HTML英文全称HyperText Markup Language,即超文本标记语言。顾名思义,HTML是一种标记语言,它的作用是...

    Alex 评论0 收藏0
  • 大前端2018现在上车还还得及么

    摘要:面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象,,,事件驱动,事件发射器加密解密,路径操作,序列化和反序列化文件流操作服务端与客户端。 第一阶段: HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础:Js基础教程、js内置对...

    livem 评论0 收藏0
  • 大前端2018现在上车还还得及么

    摘要:面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象,,,事件驱动,事件发射器加密解密,路径操作,序列化和反序列化文件流操作服务端与客户端。 第一阶段: HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础:Js基础教程、js内置对...

    stormgens 评论0 收藏0

发表评论

0条评论

cncoder

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<