Web的标准

LC_WEB
248 阅读6分钟

Web 标准

通过上面我们了解到浏览器内核的不同，可以知道他们的工作原理、解析方式肯定也是不尽相 同的，这样我们开发出来的网站显示就会有差别。

WEB标准不是某一个标准，而是一系列标准的集合。网⻚主要由三部分组成:结构 (St ruct ure)、表现(Present at ion)和行为(Behavior)。对应的标准也分三方面:结构 化标准语言主要包括XHT ML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模 型(如W3C DOM)、ECMAScript等。

明确一点遵循Web标准的目的不是为了标准而标准，不是因为它是这么要求的我们才去这么 做。一名优秀的Web前端，应该是Write less，do more。就是用更少的代码，做更多的事。 所以我觉得我们遵循Web标准的目的应该是让我们的代码效率更高更好，只有本着这个态度去 理解Web标准才能体会其深入的内涵。

基本概念:

  • Web 标准不是指某一个标准，而是一系列标准的集合
  • 网⻚三部分:结构(st ruct ure)、表现(present at ion)、行为(behavior)
  • 网⻚三部分对应的标准:结构化标准语言: XHT ML 和 XML、表现标准语言: CSS、行 为主要标准: 对象模型(W3C DOM)EXMAScript
  • 万维网联盟(W3C)

结构化标准

  • 可扩展标记语言(XML)
  • 可扩展超文本标记语言(XHT ML)

表现标准

  • 层叠样式表 (CSS)目的:分离外观结构

行为标准

  • 文档对象模型(DOM) 一种与浏览器、平台、语言的接口。
  • ECMAScript ECMAScript 262

Web 标准的好处

  • 让 Web 的发展前景更为的广阔
  • 内容可以被更加广泛的设备访问  有益让搜索引擎搜索
  • 降低网站的流量费用
  • 网的维护性更高
  • 提高⻚面的浏览速度

HTML 基本结构

HTML

HTML:(Hypertext Marked Language)超文本标记语言。和一般文本的不同的是，一个 HT ML文件不仅包含文本内容，还包含一些T ag，中文称“标记”。一个HT ML文件的后缀名 是.htm或者是.html。 用文本编辑器就可以编写HTML文件。 所谓超文本，HT ML通过标记对网⻚中的文本、图片、声音等内容进行描述。HT ML提供了许 多标记，如段落标记、标题标记、超链接标记、图片标记等，网⻚中需要定义什么内容，就用 相应的HT ML标记描述即可。不仅他能通过标记描述网⻚内容，同时也由于文本中包含了所谓 的“超级链接”点。通过超链接将网站与网⻚以及各种网⻚元素链接起来，构成了丰富多彩的 Web⻚面。

总结:

  • HT ML 指的是超文本标记语言 (Hyper T ext Markup Language)
  • HT ML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markuptag)

HTML 骨架结构

<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

总结一下格式:

成对出现，有开有闭合，尖括号括住了标签名，结束标签内增加了斜线。

语法:<标签名> 标签内容</标签名>

  • 标签成对出现
  • 结束标签内部用/开头  标签可以嵌套

解释下出现的标签:

  • HTML标签

作用所有 HTML 中标签的一个根节点，最大的标签(根标签)。

  • head 标签

文档的头部，描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他 文档的关系等。绝大多数的文档头部包含的数据都不会真正的展示给用户。这里注意一点: head 标签中我们必须要设置的标签是 title。

  • title标签

让⻚面拥有一个属于自己的标题。

  • body 标签

body 元素包含文档的所有内容，例如文本、超链接、图像、表格和列表等等。

HTML 标签分类

在 HTML 文档中， 带有 “<>”符号的元素被称为 HTML 标签，比如上面的 、 、等等都是 HTML ⻣架结构标签。所以所谓的标签就是放在“<>”标签符号中 表示某个功能的编码命令，也称为 HTML 标签或者元素。

  • 双标签

<标签名> 内容 </标签名>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签(start tag)”，“</标签 名>” 表示该标签的作用结束，一般称为“结束标签(end tag)”。和开始标签相比，结束标 签只是在前面加了一个关闭符“/”。

  • 单标签

<标签名 />

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。比如

HTML 标签的关系

HTML 标签的关系可以分为两种:

  • 嵌套关系
<head> <title> </title> </head>
  • 并列关系
 <head></head> <body></body>

HTML 文档类型<!DOCTYPE>

这句话就是告诉我们使用哪个html版本? 我们使用的是 html 5 的版本。 html有很多版本， 那我们应该告诉用户和浏览器我们使用的版本号。

标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版 本和类型，只有这样浏览器才能按指定的文档类型进行解析。

注意: 一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是 HT ML5,而且HT ML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HT ML5的 文档类型就好了。

总结一下:
  • 声明帮助浏览器正确地显示网⻚。
  • web世界中存在着很多不同的文档，只有了解了文档类型，浏览器才能正确的显示文档。这就是<!DOCTYPE>的用处。
  • 并不是html标签，它为浏览器提供一项信息(声明)，即HTML是什么版本编写的。
  • 所有浏览器都支持 声明。
  • 声明对大小写不敏感。

HTML 标签语义化

HTMl标签语义化，简单来说，就是让标签有含义，它指明了一段代码的含义，运行这段代码 有什么影响，HTML 元素有什么作用。给某块内容用上一个最恰当最合适的标签，使⻚面有 良好的结构，⻚面元素有含义，不论是谁都能够看懂这块内容是什么。

标签语义化的好处:
  • HTML结构清晰
  • 代码可读性较好
  • 无障碍阅读
  • 搜索引擎可以根据标签的语言确定上下文和权重问题
  • 移动设备能够更完美的展现网⻚(对css支持较弱的设备)
  • 便于团队维护和开发
avatar
文章
阅读
粉丝