亿企邦
  • 首页
    •
  • 解决方案&服务
    •
  • 客户&案例
    •
  • 营销资讯
    •
  • 关于我们
    •
    15158846557 或 在线咨询 在线咨询
    亿企邦
    15158846557 或 在线咨询
    亿企邦

    快捷入口

    所在位置： 首页 > 营销资讯 > 网站运营 > HTML5网页文档结构

    HTML5网页文档结构

    时间：2023-07-18 20:27:02 | 来源：网站运营

    时间：2023-07-18 20:27:02 来源：网站运营

    HTML5网页文档结构：






    前言

    当互联网和Web逐渐成为主流时，Web技术也发生了巨大的变化。W3C和其他的标准化组织共同制定了一些规范，用来创建和解释基于Web的内容，其目的就是解决日益增多的浏览器的类型和版本所带来的网页兼容问题。通过上次的文章，相信大家已经对HTML5有了一个整体上的认识。本文主要讨论Web标准和HTML基本标记。

    Web标准
    HTML基本标记



    Web标准

    我们知道制作出来的网页需要在浏览器中运行。由于目前存在不同的浏览器版本，为了让各种浏览器都能正常显示网页，Web开发者通常需要为此耗费时间，特别是当有新的硬件（比如移动电话）和软件的出现。这种情况就更严重了。为了让Web更好的发展，在开发新的应用程序的时候，浏览器开发商和站点开发商应遵守共同的标准。
    有一套大家都遵守的Web标准，不仅可以实现Web的全部潜力，更能缩短开发时间，为用户提供更好的服务。
    因此，Web标准在开发中是十分重要的，使用Web标准有如下优点：

    对于访问者

    对于网站所用者

    Web标准规定的内容：

    WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由万维网联盟（外语缩写：W3C）起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

    1. 结构标准语言
    XML
    可扩展标记语言（标准通用标记语言下的一个子集、外语缩写：XML）。和HTML一样，XML同样来源于标准通用标记语言，可扩展标记语言和标准通用标记语言都是能定义其他语言的语言。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。
    XHML
    可扩展超文本标识语言（外语全称：The Extensible HyperText Markup Language、外语缩写：XHTML）。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0。XML数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。



    1. 表现标准语言
    CSS
    层叠样式表（外语缩写：CSS）。目前推荐遵循的是万维网联盟（外语缩写：W3C）于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易
    1. 行为标准
    DOM
    文档对象模型（外语全称：Document Object Model、外语缩写：DOM）。根据W3C DOM规范（http://www.w3.org/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象。
    ECMAScript
    ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JavaScript）。目前推荐遵循的是ECMAScript-262。



    HTML基本标记

    HTML文档最基本的结构主要包括文档类型说明、HTML文档开始标记、元信息、主体标记和页面注释标记。在这里先说明下，在HTML5中是不区分大小写的，在某些渲染的情况下不同的浏览器可能存在着差别，小编主要以Google Chrome浏览器进行演示。

    文档类型说明

    HTML5文档类型说明，代码如下，需要出现在HTML文件的第一行，其主要作用是告诉浏览器要处理的文档类型，如果你不写的话，浏览器一般也能识别，个人建议还是写上。

    <!DOCTYPE html>

    HTML标记

    HTML的标记有很多，我们接下来一段时间将会学习一些标记。HTML5主要用来写一个网页的大概结构，至于排版，渲染之类的交给CSS来处理。下面是一张HTML5元素周期表。


    HTML标记代表文档的开始，由于HTML语言语法的松散特性，该标记可以省略，，但是为了使之符合Web标准和文档的完整性，我们要养成良好的编写习惯，建议不要省略。这也是许多程序员笔试HTML语言的地方，语法松散。
    HTML标记以<html>开头，以</html>结尾，文档的所有内容书写在开头和结尾的中间部分。语法格式如下：

    <html>.....</html>

    头标记head

    头标记head用于说明文档头部相关信息，一般包括标题信息、元信息、定义CSS样式和脚本代码等。以<head>开始，以</head>结尾，语法格式如下：

    <head>.....</head> <head>元素的作用范围是整篇文档，定义在HTML文档头部的内容往往不会再网页上直接显示。

    1. 标题标记title
      HTML页面的标题一般是用来说明页面的用途，它显示在浏览器的标题栏中。以<title>开始，以`</title>结尾，语法格式如下：
    <title>.....</title>
    1. 元信息标记meta
      <meta>标记可以提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键字。<meta>标记位于文档的头部，不包含任何内容。<meta>标记的属性定义了与文档相关联的名称/值。在这里我们主要提两个与<meta>标记的属性。
    <meta charset="utf-8"> 在这里说明一下，如果你要显示中文，一般设置为“GB2312”（简体中文）或者“UTF-8”两种，如果没有标注，可能有些浏览器会出现乱码现象。英文的是用“ISO-8859-1”。个人建议用“UTF-8”完全就够了，英文和中文都能显示。

    <meta http-equiv="refresh" content="秒;[url=页面地址]" />







    网页的主体标记body

    网页所要显示的内容都放在网页的主体标记内，它是HTML文件的重点所在，我们以后要讨论的HTML标记都将放在这个标记内。然而它并不是一个形式上的标记，它本身有可以控制网页的背景颜色和背景图像，这在以后会提到。主体标记以<body>开始，以</body>结束，语法格式如下：

    <body>.....</body> 注意：在构建HTML结构时，标记不允许出现交错出现，否则会造成错误，可能会得到需要的结果这要看具体浏览器的处理方式。

    页面注释标记<!-- -->

    注释是在HTML代码中插入的带描述性的文本，用来解释代码或者提示其他信息。注释只出现在代码中，浏览器对注释代码不进行解释，并且在浏览器的页面不显示。在代码中适当的插入注释语句是一种非常好的习惯，希望大家在写代码的时候注意这一点。语法格式如下：

    <!--注释的内容--> 在Dreamweaver中可以使用Ctrl+/对一行进行注释，Shift+Ctrl+/对所选内容进行注释。

    好说了这么多，我们来看一个综合例子。
    制作一个符合W3C标准的HTML5网页。
    代码如下：

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> 我的第一个网页 </title> </head> <body> 今天，我写了我的第一个网页，十分的开心 </body> </html> 浏览器打开如下：





    注：在代码中不同颜色间是有空格的，因平台所限没有渲染出来。




    编辑不易，欢迎推广







    关键词：结构

    推荐文章

    新闻资讯

    整合营销 网络营销 网络推广 信息时代 建站知识 网站运营 电子商务 营销百科 公司新闻 行业动态 品牌营销

    推荐资讯

    74
    73
    25
    news

    微信公众号

    版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

    为了最佳展示效果，本站不支持IE9及以下版本的浏览器，建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
    关闭