参考文章: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 样式表语言