从头到脚认识HTML

IanLew
218 阅读7分钟

HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。

HTML首个公开描述提及18个元素，包括HTML初始的、相对简单的设计。除了超链接标签外，其他设计都深受CERN内部一个以SGML为基础的文件格式SGMLguid的影响。这些元素仍有11个存在于HTML 4中。

HTML

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

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。

<!-- 文件类型声明 -->
<!DOCTYPE html>
<!-- 主根元素 -->
<html lang="en">
	<!-- 文档元数据 -->
	<head>
		<base target="_top" href="http://www.example.com/">
		<link href="example.css" rel="stylesheet">
		<meta http-equiv="refresh" content="3;url=http://www.example.com/">
		<title>文档的标题</title>
		<script src="example.js"></script>
		<script>
			/* 嵌入脚本 */
		</script>
		<style>
			/* 内联样式 */
		</style>
	</head>
	<!-- 分区根元素 -->
	<body>
		<!--
			内容分区
			文本内容
			内联文本语义
			图片和多媒体
			内嵌内容
			编辑标识
			表格内容
			表单元素
			SVG 和 MathML
			交互元素
			Web 组件
			脚本元素
		-->
	</body>
</html>

文件类型声明

!DOCTYPE，一个文档类型标记是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

本标签有三种写法：

  1. 私有的外联文档类型定义（使用系统标识符）：
<!DOCTYPE 根元素
SYSTEM "文档类型定义位置"
[< !--内部子集声明，可选项目-->]
>
  1. 公共的外联文档类型定义（使用公共标识符）：
<!DOCTYPE 根元素
PUBLIC "注册//组织//类型 标签//定义 语言"
"文档类型定义位置"
[< !--内部子集声明，可选项目-->]
>
  1. 内联的文档类型定义：
<!DOCTYPE　根元素
[
文档类型定义里头的内容：
元素/属性/实体/符号
处理指令/批注/引用
]
>

<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

排版引擎使用模式

目前浏览器的排版引擎使用三种模式：怪异模式（Quirks mode）、接近标准模式（Almost standards mode）、以及标准模式（Standards mode）。

  • 在怪异模式下，排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。为了支持在网络标准被广泛采用前，就已经建好的网站，这么做是必要的。
  • 在标准模式下，行为即（但愿如此）由 HTML 与 CSS 的规范描述的行为。
  • 在接近标准模式下，只有少数的怪异行为被实现。

对 HTML 文件来说，浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。

常见的 DOCTYPE 声明

<!-- 常见的 DOCTYPE 声明 -->
<!DOCTYPE html>

<!-- 
	HTML 4.01 Strict
	这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素
	框架集是不允许的
-->
<!DOCTYPE HTML 
PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"
>

<!-- 
	HTML 4.01 Transitional
	这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素
	框架集是不允许的
-->
<!DOCTYPE HTML 
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"
>

<!-- 
	HTML 4.01 Frameset
	这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容
-->
<!DOCTYPE HTML 
PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"
>

元数据元素

<meta> 元素表示那些不能由其他 HTML 元相关（meta-related）元素表示的元数据信息，不会显示在客户端，但是会被浏览器解析。通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

<meta> 元素定义的元数据的类型包括以下几种：

  • 如果设置了 name 属性，<meta> 元素提供的是文档级别（document-level）的元数据，应用于整个页面。
  • 如果设置了 http-equiv 属性，<meta> 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。
  • 如果设置了 charset 属性，<meta> 元素是一个字符集声明，告诉文档使用哪种字符编码。
  • 如果设置了 itemprop 属性，<meta> 元素提供用户定义的元数据。

viewport meta 标记

浏览器的视口是一个在其中查看 Web 内容的窗口区域。这通常与渲染的页面大小不同，在这种情况下，浏览器为用户提供滚动条以滚动和访问所有内容。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

"viewport" <meta> 标签的基本属性如下所示：

  • width：控制视口的大小。这可以设置为特定像素数（如'width=600'），也可以设置为特殊值device-width，即 100vw，100% 的视口宽度。最小值为 1。最大值为 10000。负值会被忽略。
  • height：控制视口的大小。 这可以设置为特定像素数（如 width=600），也可以设置为特殊值 device-height，即 100vh，100% 的视口高度。最小值为 1。最大值为 10000。负值会被忽略。
  • initial-scale：控制页面首次加载时显示的缩放倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。
  • minimum-scale：控制页面允许缩小的倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。
  • maximum-scale：控制页面允许放大的倍数。设置一个低于 3 的值将不具备无障碍访问性。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。
  • user-scalable：控制是否允许页面上的放大和缩小操作。有效值为 0、1、yes 或 no。默认值为 1，与 yes 相同。将值设置为 0（即与 no 相同）将违反 Web 内容无障碍指南（WCAG）。
  • interactive-widget：指定交互式 UI 组件（如虚拟键盘）对页面视口的影响。有效值：resizes-visual、resizes-content 或 overlays-content。默认值：resizes-visual。

常见 meta 标记

<!-- 强制Chromium内核，作用于360浏览器、QQ浏览器等国产双核浏览器 -->
<meta name="renderer" content="webkit"/>
<!-- 强制Chromium内核，作用于其他双核浏览器 -->
<meta name="force-rendering" content="webkit"/>
<!-- 
	如果有安装 Google Chrome Frame 插件则强制为Chromium内核，
	否则强制本机支持的最高版本IE内核，作用于IE浏览器 
-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content=""/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com"/>
<!-- 
	搜索引擎抓取
	all：文件将被检索，且页面上的链接可以被查询； 
	none：文件将不被检索，且页面上的链接不可以被查询；
	index：文件将被检索； 
	follow：页面上的链接可以被查询； 
	noindex：文件将不被检索； 
	nofollow：页面上的链接不可以被查询。 
-->
<meta name="robots" content="index,follow"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别-->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 
	当网站添加到主屏幕快速启动方式，可隐藏地址栏，
	仅针对ios的safari (ios7.0版本以后，safari上已看不到效果) 
-->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-touch-fullscreen" content="yes"/>
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-itunes-app" 
content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 
	设置苹果工具栏颜色:默认值为 default（白色），
	可以定为 black（黑色）和 black-translucent（灰色半透明） 
-->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴图标 -->
<meta name="msapplication-TileImage" content="icon.png"/>

内容分类

以下是三种类型的内容分类：

  • 主内容类，描述了很多元素共享的内容规范；
  • 表单相关的内容类，描述了表单相关元素共有的内容规范；
  • 特殊内容类，描述了仅仅在某些特殊元素上才需要遵守的内容规范，通常这些元素都有特殊的上下文关系。

content_categories_venn.png

主内容分类

  • 元数据内容（Metadata content）的元素可以修改文档其余部分的呈现或行为，建立与其他文档的链接，或者传达其他外带信息。
  • 流式内容（Flow content）是一个广泛的类别，包括大多数可以包含在 <body> 元素之内的元素，包括标题元素、分段元素、措辞元素、嵌入元素、互动元素和表单相关元素。它还包括文本节点（但不包括那些只由空白字符组成的节点）。
    • 分段内容（Sectioning content）是流式内容的一个子集，可以在任何可以使用流式内容的地方出现。属于分段内容模型的元素创建了一个当前大纲中的分段，它定义了 <header> 元素、<footer> 元素和标题内容的范围。
    • 标题内容（Heading content）是流式内容的一个子集，定义了分段的标题，而这个分段可能由一个明确的分段内容元素直接标记，也可能由标题本身隐式地定义。标题内容可以在任何可以使用流式内容的地方出现。
    • 短语内容（Phrasing content）是流式内容的一个子集，定义了文本和它包含的标记，且可以在任何可以使用流式内容的地方出现。一些短语内容就构成了段落。
    • 嵌入内容（Embedded content）是流式内容的一个子集，它将来自另一种标记语言或命名空间的内容插入到文档中，且可以在任何可以使用流式内容的地方出现。
    • 交互式内容（Interactive content）是流式内容的一个子集，包含为用户交互而特别设计的元素，且可以在任何可以使用流式内容的地方出现。
    • 可感知内容：当内容既不是空的也不是隐藏的时候，它就是可感知（palpable）的；它是被渲染的内容，是实质性的。模型为流动内容的元素应该至少有一个节点是可感知的。
    • 与表单相关的内容（Form-associated content）是流式内容的一个子集，包括有表单所有者的元素，通过 form 属性暴露出来，可以在预期有流式内容的地方使用。
      • 可列举的元素（listed）：在 form.elements 和 fieldset.elements IDL collection 中列举出的元素。
      • 可标记的元素（labelable）：和 <label> 相关联的元素。
      • 可提交的元素（submittable）：包括当表单提交时可以用来组成表单数据的元素。
      • 可重置的元素（resettable）：当表单重置时会被重置的元素。

二级分类

支持脚本的元素（Script-supporting elements）不会直接渲染输出在页面文档中。相反，它们的作用是支持脚本，或者直接包含或指定脚本代码，或者指定将被脚本使用的数据。

透明内容模型

如果一个元素拥有透明内容模型（Transparent content model），即使将透明内容移除并使用子元素取代，其内容也必须由合法的 HTML5 元素组成。

avatar
文章
阅读
粉丝