参考文章：MDN
HTML总结
HTML（HyperText Markup Language）是一种用来告诉浏览器如何组织页面的标记语言。它由一系列元素组成。
基本概念
1）块级元素与内联元素
块级元素通常用于包裹结构化内容，独占一行，不会被内联元素包裹，但可以被其他块级元素包裹。内联元素则通常出现在块级元素中包裹一小部分内容，内联元素不会导致文本换行。
2）空元素
只有一个标签，插入/嵌入一些东西。
3）属性/布尔属性 " " ' '
<! DOCTYPE html>声明文档类型 <meta charset="utf-8">设置文档使用utf-8字符集编码
<html></html> <head></head> <title></title> <body></body>
*对于HTML文档中的空白，HTML解释器会将其通通解释为一个空字符。
4）特殊字符
& ;
图1 HTML知识架构图（来自重学前端）
一、元素
1）文档元信息
指包含在<head></head>标签中的元素，用于描述文档自身的一些信息。
<meta> 描述数据的数据，为文档添加元数据。
- charset="utf-8" | "ISO-8859-1" 指定字符集
- name 指定meta元素的类型
- content 指定实际的元数据内容
- 还有其他类型的metadata，通常为某些（社交）网站提供可使用的特定信息。例如使用了相应metadata的文档，其在Facebook上的链接会呈现图像和描述。Facebook和Twitter都拥有自己专有的元数据协议。
- 一些meta例子：<meta name="viewport" content="width=device-width">
<link> 引入图标、CSS、脚本
<html lang="en-US"> 为文档设置主语言
2）语义相关内容 表达文章结构、不同语言要素的标签
- <h1-6>
- 列表<ul><ol><li>
- 重点强调<em><strong>
- 表象元素<b><i><u>
- 描述列表<dl><dt><dd>
- 引用 块引用<blockquote cite="URL"> 行内引用<q cite="URL"> 引文<cite>默认字体样式为斜体
- 缩略语<abbr title="缩写的解释"> 当光标悬停在缩略语上时会出现提示
- 标记联系方式<address>
- 上标<sup>和下标<sub>
- 标记计算机代码<code><pre><var><kbd>键盘（或其他）输入<samp>标记程序输出
- 标记时间和日期<time datatime=""> 可供机器识别
- 换行<br> 水平分割线<hr>
- 完整HTML元素参考
网站结构
- <header> 页眉
- <nav> 主导航
- <main> 每个页面特有的内容 <article><section><div>
- <aside> 间接信息
- <footer> 页脚
无语义元素
- <div>
- <span>
3）链接 在文档中链接到任何其他文档
<a>
- href 目标，包含网址
- title 关于链接的补充有用信息，当鼠标悬停在链接上时会显示
统一资源定位器（URL）是一个定义了在网络上的位置的一个文本字符串。可理解为URI标准的子集，表示资源定位。URL使用路径查找文件，路径指定文件系统中文件所在位置。
同级路径：直接写文件名；子目录：进入子目录/文件名；上级目录：../上级目录/文件名。
文档片段：链接到html文档的特定部分。首先给该部分分配一个id，链接时href="URL#id名" | "#id名"。
电子邮件链接：href="mailto: nowhere@mozilla.org?(cc)&(cc)&(subject=x%x)&(body)"。更多细节。
绝对URL&相对URL：绝对URL包含协议、域名等完整URL信息；相对URL定位取决于当前文档所在的位置。
注意
- 清晰的链接措辞
- 尽可能使用相对链接
- 当链接到非html文档时进行标注
4）替换型标签 元素的内容和尺寸由外部资源所定义，而不是元素本身
图片 <img src="图片的路径" alt="对图片的文字描述，备选文本"> ←→ <a>
- 若图片起到装饰作用，应使用CSS来插入；如果要设定图片高宽，应使用CSS。
- 图片版权问题
- title="图片标题" 当鼠标悬停在图片上时显示，不推荐
- <figure> 一个独立单元，为主要内容提供补充说明，可包含图片、音视频、代码、方程、表格等。
- <figure><img><figcaption> 搭配图片的说明文字
视频和音频
<video>
- src="01.webm" 视频资源路径
- controls 控制回放功能
- width/height
- autoplay 自动播放 | loop 循环播放 | muted 默认关闭声音
- poster="图像URL" 封面
- preload="none | auto | metadata" 缓冲较大的文件，不缓冲|页面加载后缓冲|尽缓冲文件元数据
- <video>标签内的段落<p> 后备内容
- 嵌入多个媒体资源 <video/audio><source type="MIME types">
<audio>
- 几乎完全同上
- 不支持width/height，不支持poster
- 显示音轨文本（字幕）<track kind（指定cues类型）="subtitle | caption | timed description" src="01.vtt" srclang="en">
嵌入元素
历史上程序员喜欢使用frames搭建网站，但现在已不再使用了。90年代末二十一世纪初，开始使用插件技术给网页嵌入更丰富的内容，例如Video，Flash等。在HTML文档中通过<object>或<emded>标签使用插件。现在，<iframe>标签（<video><audio><img><svg><canvas>等）的出现，使得嵌入内容更加便捷。
<object><embed> 嵌入插件丰富网页（flash | PDF | 视频 | SVG | 图像）
<iframe>
- src="URL路径"
页面加载完成后，使用JavaScript设置能提高速度？？？？ - allowfullscreen 通过全屏API设置全屏模式
- frameborder="1" 0，不推荐 ，应使用CSS
- width/height
- 备选内容
- 安全隐患问题
矢量图像
位图和矢量图是常见的两种类型。位图使用像素网格来定义，包含精确的像素位置和色彩信息。流行的位图格式包括Bitmap（.bmp），PNG（.png），JPEG（.jpg），GIF（.gif）；矢量图使用算法定义，包含图形和路径的定义，SVG格式，拥有较小的文件尺寸，却高度可缩放。
添加方式：
- <img src="01.svg" /> 快速，可嵌套进<a> | 无法使用JS操作图像，内联CSS样式，无法使用CSS伪类
- 使用<svg></svg>插入HTML 减少HTTP请求，使用外联CSS样式 | 只适用于在一个地方使用SVG
- 使用<iframe>嵌入SVG
iframe回退机制？？？？ - 跨浏览器支持
<svg>
- SVG是用于描述矢量图像的XML语言，通过在<svg>中包含图形元素可绘制矢量图形。
- <circle><rect> 简单图形
- <feColorMatrix> 使用变换矩阵转换颜色
- <animate> 矢量图形的动画
- <mask> 在图像顶部应用蒙版
在不同的屏幕尺寸和分辨率的设备上都能工作得很好的图片（响应式web设计的一部分）。
两个问题：艺术方向问题（art direction problem） 使用不同的图片以适应不同的空间分配<picture><source media>；分辨率切换问题（resolution switching problem） 使用相同显示效果的图片但包含多个不同的分辨率<img srcset sizes>。
5）表单
6）表格
HTML表格应该用于表格数据，但许多人习惯用表格进行网页布局，这是很糟糕的。应该使用CSS layout技术。
<table>
- <tr> 表格行
- <th> 表格标题，加粗和居中
- <td> 单元格
- colspan="2" 设置一个单元格的宽度是两个单元格
- rowspan="2" 设置一个单元格的高度是两个单元格
- <colgroup> <col> 指定表格中的某一列；如果想要为每一列设置样式信息，<col span="2">
- <caption> 为表格添加一个标题
- <thead><tfoot><tbody> 隐式包含
- 嵌套表格是可行的，但不建议。
- 使用scope属性（"row" | "col" | "rowgroup"）标记行标题和列标题，有利于实现无障碍阅读。
- scope的替代方法，id和headers属性。给标题添加id，单元格添加headers（包含行标题id和列标题id）。
二、语言
三、补充标准
XHTML 是使用XML编写的HTML，编写规范更严格。
XML（Extensible Markup Language） 被设计用于传输和存储数据。是对HTML语言的一种补充。
- XML声明 <?xml version="1.0" encoding="ISO-8859-1"?>
- 树结构；XML属性 v.s. 子元素；一些严格的语法，命名（数据库名称）
- 不中断应用程序的情况下进行扩展
- XSLT 首选的 XML 样式表语言
2462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
