导图社区 前端HTMLl MDN文档学习大纲
- 469
- 39
- 6
- 举报
前端HTMLl MDN文档学习大纲
这是本人在MDN上学习整理的大纲，并根据理解做了整理，内容全面，包括基本概念、基本架构、文字排版、文字处理、超链接、嵌入多媒体等方面的知识要点。仅供同学们学习参考。
编辑于2019-09-01 09:54:48
- 相似推荐
- 大纲
HTML
基本概念
标记语言
html5
xml
基本组成
元素
常规元素
标签（不区分大小写）
开始标签
结束标签
内容
属性
作用
属性包含元素的额外信息，这些信息不会出现在实际的内容中
分类
按值类型分
值属性
必须包含的内容
1.在元素和属性之间有个空格space (如果有一个或多个已存在的属性，就与前一个属性之间有一个空格.) 2.属性后面紧跟着一个“=”符号. 3.有一个属性值,由一对引号“ ”引起来.
eg

实例

布尔属性
包含内容（同常规对比）
1.同上 2.只能有属性名一样的属性值 3.通常省略属性值
eg

实例

按语义分
？？？第一次学习理解： 语义元素本身就有其功能和目的 非语义元素本身没有任何功能和目的，但是可以通过CSS或者JS来赋予其功能（理解错误） 第二次修正理解： 所有元素都可以用css和js来赋予功能，和语义无关。语义主要体现在初始功能作用上。
语义元素
如<p>、<h1>等等
无语义元素
<span>......</span>、<div>......</div>、<i></>（H5中有语义了）、<b></>
警告： <div> 非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用， 否则文档的升级和维护工作会非常困难。
按格式分
块级元素
无论元素大小，占用一行 作用：布局
eg

<div>
内联元素
只占自身大小的元素，不会占用一行 作用：设置文本样式
eg

<span>
<a>
按作用域分
全局属性
元素属性
按继承性分
继承属性
非继承属性
(HTML5)数据属性——自定义数据

eg

空元素
开始标签
eg
<img src="">
嵌套元素
eg
<p>我的猫咪脾气<strong>爆</strong>:)</p>
特殊字符输入（转义字符）

注释
<!-- 注释内容 --> 注意
不能嵌套
自定义图标
https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#%E5%9C%A8%E4%BD%A0%E7%9A%84%E7%AB%99%E7%82%B9%E5%A2%9E%E5%8A%A0%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%BE%E6%A0%87
基本架构
网页结构
<!DOCTYPE html>
声明文档类型
<html>......</html>
根元素
<head>......</head>
所有包含在HTML页面中但不想再HTML中显示的内容
<meta>
元数据（metadata）
<meta charset="utf-8">
<meta name="" content="">
name指定meta元素的类型；说明包含了什么类型的信息
content指定了实际的元数据内容
eg
name=”author“ content=“名字“ description 描述 keywords 关键词 目的：给搜索引擎看 
<meta http-equiv="" content='5';url=http://">
重定向 5秒后从第一个网站自动转到第二个
<title>......</title>
网页标题
<body>......</body>
包含所有显示在页面上的内容、文本、图片、音频、游戏等等
留空白
注重可读性和美观
文档结构
<header> 页眉 <nav> 导航栏 <main> 主内容 <article>、<section>等内容 <aside> 侧边栏，经常嵌套在<main>中 <footer> 页脚
<main> 存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body>中。最好不要把它嵌套进其它元素。 <article> 包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）。 <section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以 标题 作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。 <aside> 包含一些间接信息（术语条目、作者简介、相关链接，等等）。 <header> 是简介形式的内容。如果它是 <body> 的子元素，那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素，那么它是这些部分特有的页眉（此 <header> 非彼 标题）。 <nav> 包含页面主导航功能。其中不应包含二级链接等内容。 <footer> 包含了页面的页脚部分 
换行
<br>
<p>从前有个人叫小高<br> 他说写 HTML 感觉最好<br> 但他写的代码结构语义一团糟<br> 他写的标签谁也懂不了。</p> 从前有个人叫小高 他说写 HTML 感觉最好 但他写的代码结构语义一团糟 他写的标签谁也懂不了。
分隔线
<hr>
代码示例： <p>原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。</p> <hr> <p>却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”</p> 输出结果： 原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。 一条分割线------------------------------------------------------------------------------------------- 却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”
文字排版
标题
<h1>......</h1>
共六级标题
段落
<p>......</p>
<p>标签内不能包含块元素
列表
无序
<ul>...<li>...</li>...</ul>
属性
type
一般都不用这些样式，用css修改 disc (默认) square circle
有序
<ol>...<li>...</li>...</ol>
属性
type
值： 1 默认值，阿拉伯数字 a/A 小写/大写字母 i/I 小写/大写罗马数字
value

定义列表
用途：项目及其描述、问题及其答案、术语及其定义等 功能：产生缩进
格式
<dl> <dt>术语</dt> <dd>定义</dd> </dl>
列表嵌套
优化结构
最佳实践
最佳实践： 通常，应该只对每个页面使用一次<h1> — 这是顶级标题，所有其他标题位于层次结构中的下方。 请确保在层次结构中以正确的顺序使用标题。不要使用<h3>来表示副标题，后面跟<h2>来表示副副标题—这是没有意义的，会导致奇怪的结果。 在可用的六个标题级别中，您应该旨在每页使用不超过三个，除非您认为有必要使用更多。具有许多级别的文档（即，较深的标题层次结构）变得难以操作并且难以导航。在这种情况下，如果可能，建议将内容分散在多个页面上。
目的
为什么要优化： 没有编码段落，浏览器不能识别内容结构和格式，呈现的内容就一块板 用户在阅读网页时，往往会快速浏览以查找相关内容，经常只是阅读开头的标题（我们通常在一个网页上会花费很少的时间)。如果用户不能在几秒内看到一些有用的内容，他们很可能会感到沮丧并离开。 对您的网页建立索引的搜索引擎将标题的内容视为影响网页搜索排名的重要关键字。没有标题，您的网页在SEO（搜索引擎优化）方面效果不佳。 严重视力障碍者通常不会阅读网页；他们用听力来代替。完成这项工作的软件叫做屏幕阅读器（screen reader）。该软件提供了快速访问给定文本内容的方法。在使用的各种技术中，它们通过朗读标题来提供文档的概述，让用户能快速找到他们需要的信息。如果标题不可用，用户将被迫听到整个文档的大声朗读。 使用CSS样式化内容，或者使用JavaScript做一些有趣的事情，你需要包含相关内容的元素，所以CSS / JavaScript可以有效地定位它。
文字处理
装饰
上下标
上标：<sup></sup> 下标：<sub></sub>
删除线
<del>...</>
强调
有语义
无语义
注：以前没语义的元素如<i>等都新添加了语义含义
区别
斜体、加粗、变小、下划线
效果： 语义： <em> 斜体 着重点和重读点 <i> 斜体 原：无 现：技术术语、外文短语或是小说中人物的思想活动等 <strong> 粗体 重要性 <b> 粗体 无（推荐在css中使用加粗） <small> 字体变小 版权、声明之类的小字内容 <big> 字体变大 无 <mark> 高亮 上下文相关性 <>
<em>和<i>、<strong>和<b>、<u>等区别？
插入线
文字下方的下划线，表示插入的内容 
<ins>...</>
居中文字
<center></> 不推荐使用
缩略语
<abbr title="">...缩略词...</abbr>
eg

引用
效果引用
变成斜体
<cite>...</>
语义引用
块引用
<blockquote cite="">...引用内容...</blockquote>
cite属性在浏览器中没有视觉效果，屏幕阅读器中可以使用
有视觉效果的引用方式
<p>两千年前，<a href=引文链接"><cite>孔子</cite></a>就说过：</p> <blockquote cite="引文链接"> <p>譬如为山，未成一篑，止，吾止也。譬如平地，虽覆一篑，进，吾往也。</p> </blockquote> <p>要保持乐观<q cite="引文链接">不要说气馁的话</q>。（源自<a href="论语解读链接"><cite>论语解读</cite></a>。）</p>  注意：<blockquote cite="">和<q cite="">中的cite属性在浏览器中是没有视觉效果的
行内引用
<q cite="">...引用内容...<q>
标记联系方式
最好放在<footer>标签中
<address>......</address>

标记编程代码
<code>: 用于标记计算机通用代码。 <pre>: 对保留的空格（通常是代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在<pre></pre>标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。 <var>: 用于标记具体变量名。 <kbd>: 用于标记输入电脑的键盘（或其他类型）输入。 <samp>: 用于标记计算机程序的输出。
预格式
可以保留文字的格式 
<pre>...</>
标记日期和时间
作用：使电脑识别日期和时间
<time datetime="">日期时间</time>
元素datetime基本格式

超链接
URL(Uniform Resource Locator 统一资源定位符)
指向当前目录
指向子目录
指向上级目录
”../../文件夹/文件夹/文件“
..就是返回上级目录，返回多少个上级就有多少了..
绝对URL和相对URL
尽可能使用相对链接
原因
1.检查更容易 2.效率高：绝对链接工作方式 URL→DNS→服务器 相对链接工作方式 URL→DNS→本地服务器 （此处不确定是否也会用到DNS，但是可以肯定的 是本地服务器的响应速度快于其他服务器）
<a href="">...文本、图片等...</a>
常用属性
title 鼠标悬停时的提示
target=""
值： 作用： _self (默认值)当前窗口直接打开 _blank 在新的窗口打开链接 一个内联框架<frame>的name值 在那个内联框架中打开
链接文档片段
方法
回到同文档顶部
链接直接为 # 即可
对不同文档的链接
对被链接的文档
分配id属性
eg：<h2 id="标记">题目</2>
标记名称自定，但一致
对被操作的文档
使用哈希符号#指向它
eg：<a href="被链接文档.html#标记">......</a>
对同一文档的链接
同样用 id标记 与 #标记 的方式完成
下载链接
方法
直接添加下载的链接即可
添加download属性可以提供一个默认的保存文件名
邮件地址
直接点击链接打开邮件客户端发送的方法
mailto:link

额外信息（主题、抄送、主体）

嵌入多媒体
音视频格式知识： 容器格式：MP3、MP4、WebM等，这些容器用不同的音频轨道、视频轨道、元数据来呈现媒体文件的。 视频和音频都有不同的格式，如下: WebM 容器通常包括了 Ogg Vorbis 音频 和 VP8/VP9 视频。主要在 FireFox 和 Chrome 当中支持。 MP4 容器通常包括 AAC 以及 MP3 音频 和 H.264 视频。主要在 Internet Explorer 和 Safari 当中支持。 老式的 Ogg 容器往往支持 Ogg Vorbis 音频和 Ogg Theora 视频。主要在 Firefox 和 Chrome 当中支持，不过这个容器已经被更强大的 WebM 容器所取代。 音频播放器将会直接播放音频文件，例如 MP3 和 Ogg 文件。这些不需要容器。 以上的格式主要用于将音频和视频压缩成可管理的文件（原始的音频和视频文件非常大）。浏览器包含了不同的 Codecs,如 Vorbis 和 H.264,，它们用来将已压缩的音频和视频转化成二进制数字。正如刚才所说，浏览器并不全支持相同的 codecs，所以你得使用几个不同格式的文件来兼容不同的浏览器。如果你使用的格式都得不到浏览器的支持，那么媒体文件将不会播放。 Codec：就是编码-解码器“Coder-Decoder”的缩写。说得通俗一点，对于音频就是A/D和D/A转换。A/D就是将人耳能听到的模拟信号（Analog）转换为电脑能够处理的数字（Digital）信号的编码过程；D/A就是将处理后的数字信号转换为人耳能够听到的模拟信号的解码过程。 注意：mp3、MP4/H.264格式是广泛支持的格式，但是因为专利原因，有些浏览器不支持。所以需要准备多个不同的格式来兼容不同的浏览器。
图片
一般图片
<img>
属性
（必要属性）src="路径"
（图片无法正常加载时显示的说明）alt="图片描述"
添加alt属性的原因： 用户有视力障碍，通过屏幕阅读器来浏览网页 。 图片的路径或文件名出错。 浏览器不支持该图片类型。某些用户仍在使用纯文本的浏览器，例如 Lynx，这些浏览器会把图片替换为描述文本。 你会想提供一些文字描述来给搜索引擎使用，例如搜索引擎可能会将图片的文字描述和查询条件进行匹配。 用户关闭的图片显示以减少数据的传输，这在手机上是十分普遍的，并且在一些国家带宽是有限且昂贵。 你到底应该在 alt 里写点什么呢？这首先取决于为什么这张图片会在这儿，换句话说，如果这张图片没显示出来，会少了什么： 装饰：如果图片只是用于装饰，而不是内容的一部分，可以写一个空的alt="" 。例如，屏幕阅读器不会浪费时间对用户读出不是核心需要的内容。实际上装饰性图片就不应该放在HTML文件里， CSS background images才应该用于插入装饰图片，但如果这种情况无法避免， alt=""会是最佳处理方案。 内容：如果你的图片提供了重要的信息，就要在alt文本中简要的提供相同的信息，甚至更近一步，把这些信息写在主要的文本内容里，这样所有人都能看见。不要写冗余的备选文本（如果在主要文本中将所有的段落都重复两遍，对于没有失明的用户来说多烦啊！），如果在主要文本中已经对图片进行了充分的描述，写alt=""就好。 链接：如果你把图片嵌套在<a>标签里，来把图片变成链接，那你还必须提供无障碍的链接文本。在这种情况下，你可以写在同一个<a>元素里，或者写在图片的alt属性里，随你喜欢。 文本：你不应该将文本放到图像里。例如，如果你的主标题需要有阴影，你可以用CSS来达到这个目的，而不是把文本放到图片里。如果真的必须这么做，那就把文本也放到alt里。
（鼠标悬停说明）title=""
（尺寸）width="" height=""
通常使用CSS来改变尺寸，而不是在HEML中
图文搭配的方法
<figure>图片</figure>和<figcaption>文字</figcaption>
代码示例： <figure> <img src="链接" alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。" width="400" height="341"> <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption> </figure> 说明： 1.这个<figcaption>元素告诉浏览器和其他辅助的技术工具这段说明文字描述了 <figure> 元素的内容. 2.注意 <figure> 里不一定要是一张图片，只要是一个这样的独立内容单元： 用简洁、易懂的方式表达意图。 可以置于页面线性流的某处。 为主要内容提供重要的补充说明。 <figure> 可以是几张图片、一段代码、音视频、方程、表格或别的。
CSS
方法
p { background-image: url("images/dinosaur.jpg"); } 对比HTML直接插入方式的区别： CSS插入无语义，不能被屏幕阅读器识别。 所以，装饰图片选CSS，意义图片选HTML
矢量图片
概念
位图使用像素网格来定义 — 一个位图文件精确得包含了每个像素的位置和它的色彩信息。流行的位图格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.) 矢量图使用算法来定义 — 一个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。 SVG 格式可以让我们创造用于 Web 的精彩的矢量图形。 对比： 当你放大网页的时候，区别就会变得明显起来 — 随着你的放大， 位图变得像素化了，因为它存储是每个像素的颜色和位置信息 — 当它被放大时，每个像素就被放大以填满屏幕上更多的像素，所以图像就会开始变得马赛克感觉。 矢量图像看起来仍然效果很好且清晰，因为无论它的尺寸如何，都使用算法来计算出图像的形状，仅仅是根据放大的倍数来调整算法中的值。 此外，矢量图形相较于同样的位图，通常拥有更小的体积，因为它们仅需储存少量的算法，而不是逐个储存每个像素的信息。
SVG
SVG 是用于描述矢量图像的XML语言。 它基本上是像HTML一样的标记，只是你有许多不同的元素来定义要显示在图像中的形状，以及要应用于这些形状的效果。 SVG用于标记图形，而不是内容。 使用绘制方式： 1.属性 width、height等 2.利用元素来创建简单图形，如<circle> 和<rect>。更高级的SVG功能包括 <feColorMatrix>（使用变换矩阵转换颜色）<animate> （矢量图形的动画部分）和 <mask>（在图像顶部应用模板） SVG还有其他优点： 矢量图像中的文本仍然可访问（这也有利于 SEO)）。 SVG 可以很好地适应样式/脚本，因为图像的每个组件都是可以通过CSS或通过JavaScript编写的样式的元素。 SVG 缺点： SVG非常容易变得复杂，这意味着文件大小会增加; 复杂的SVG也会在浏览器中占用很长的处理时间。 SVG可能比栅格图像更难创建，具体取决于您尝试创建哪种图像。 旧版浏览器不支持SVG，因此如果您需要在网站上支持旧版本的 IE，则可能不适合（SVG从IE9开始得到支持）。 由于上述原因，光栅图形更适合照片那样复杂精密的图像。
添加到网页的方式
<img>
优点 快速，熟悉的图像语法与alt属性中提供的内置文本等效。 可以通过在<a>元素嵌套<img>，使图像轻松地成为超链接。 缺点 无法使用JavaScript操作图像。 如果要使用CSS控制SVG内容，则必须在SVG代码中包含内联CSS样式。 （从SVG文件调用的外部样式表不起作用） 不能用CSS伪类来重设图像样式（如:focus）。
示例
<img src="equilateral.svg" alt="triangle with all three sides equal" height="87px" width="100px" />
跨浏览器支持
对于不支持SVG（IE 8及更低版本，Android 2.3及更低版本）的浏览器，您可以从src属性引用PNG或JPG，并使用srcset属性让支持浏览器识别）来引用SVG。 在这种情况下，仅支持浏览器将加载SVG - 较旧的浏览器将加载PNG。
在html中
srcset属性
代码示例： <img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
在CSS中
示例
使用SVG作为CSS背景图像，如下所示。 在下面的代码中，旧版浏览器会坚持他们理解的PNG，而较新的浏览器将加载SVG：  像<img>方法一样，使用 CSS 背景图像插入SVG 意味着它不能被 JavaScript 操作，并且也受到相同的 CSS 限制。 如果 SVG 根本没有显示，可能是因为服务器设置不正确。 如果是这个问题，这篇文章将告诉你正确方向。 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers
引入SVG代码（SVG内联）
示例

优缺点
优点 将 SVG 内联减少 HTTP 请求，可以减少加载时间。 您可以为 SVG 元素分配class和id，并使用 CSS 修改样式，无论是在SVG中，还是 HTML 文档中的 CSS 样式规则。 实际上，您可以使用任何 SVG外观属性 作为CSS属性。 内联SVG是唯一可以让您在SVG图像上使用CSS交互（如:focus）和CSS动画的方法（即使在常规样式表中）。 您可以通过将 SVG 标记包在<a>元素中，使其成为超链接。 缺点 这种方法只适用于在一个地方使用的SVG。多次使用会导致资源密集型维护（resource-intensive maintenance）。 额外的 SVG 代码会增加HTML文件的大小。 浏览器不能像缓存普通图片一样缓存内联SVG。 您可能会在<foreignObject> 元素中包含回退，但支持 SVG 的浏览器仍然会下载任何后备图像。你需要考虑仅仅为支持过时的浏览器，而增加额外开销是否真的值得。
使用<iframe>嵌入
示例

缺点
缺点 如你所知， iframe有一个回退机制，如果浏览器不支持iframe，则只会显示回退。 此外，除非 SVG 和您当前的网页具有相同的 origin，否则你不能在主页面上使用 JavaScript 来操纵 SVG。 origin（起源）：Web content's origin is defined by the scheme (protocol), host (domain), and port of the URLused to access it. Two objects have the same origin only when the scheme, host, and port all match. Web内容的源由用于访问它的URL 的方案(协议)，主机(域名)和端口定义。只有当方案，主机和端口都匹配时，两个对象具有相同的起源。 同源的例子： http://example.com/app1/index.html http://example.com/app2/index.html same origin because same scheme (http) and host (example.com) http://Example.com:80 http://example.com same origin because a server delivers HTTP content through port 80 by default 不同源的例子： http://example.com/app1 https://example.com/app2 different schemes http://example.com http://www.example.com http://myapp.example.com different hosts http://example.com http://example.com:8080 different ports
自适应图片
分辨率切换
不同尺寸
srcset、sizes
示例
<img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
解析
属性每一部分由三个子部分组成： srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小。在每个逗号之前，我们写： 1.一个文件名 (elva-fairy-480w.jpg.) 2.一个空格 3.图像的固有宽度（以像素为单位）（480w）——注意到这里使用w单位，而不是你预计的px。这是图像的真实大小，可以通过检查你电脑上的图片文件找到。 sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示。在这种情况下，在每个逗号之前，我们写： 1.一个媒体条件（(max-width:480px)）——你会在 CSS topic中学到更多的。在这里，我们说“当可视窗口的宽度是480像素或更少”。 2.一个空格 3.当媒体条件为真时，图像将填充的槽的宽度（440px） 注意: 对于槽的宽度，你也许会提供一个固定值 (px, em) 或者是一个相对于视口的长度(vw)，但不是百分比。你也许以及注意到最后一个槽的宽度是没有媒体条件的，它是默认的，当没有任何一个媒体条件为真时，它就会生效。 当浏览器成功匹配第一个媒体条件的时候，剩下所有的东西都会被忽略，所以要注意媒体条件的顺序。 于是，有了这些属性，浏览器会： 1.查看设备宽度 2.检查sizes列表中哪个媒体条件是第一个为真 3.查看给予该媒体查询的槽大小 4.加载srcset列表中引用的最接近所选的槽大小的图像 所以在这里，如果支持浏览器以视窗宽度为480px来加载页面，那么(max-width: 480px)的媒体条件为真，因此440px的槽会被选择，所以elva-fairy-480w.jpg将加载，因为它的的固定宽度（480w）最接近于440px。800px的照片大小为128KB而480px版本仅有63KB大小—节省了65KB。现在想象一下，如果这是一个有很多图片的页面。使用这种技术会节省移动端用户的大量带宽。 src的作用：老旧的浏览器不支持这些特性，它会忽略这些特征。并继续正常加载 src属性引用的图像文件。
相同尺寸，不同分辨率
srcset、x语法
示例
html中： <img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x" src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"> CSS中： img { width: 320px; } CSS会应用在图片上，所以它的宽度在屏幕上是320像素（也称作CSS像素）。 在这种情况下，sizes并不需要——浏览器只是计算出正在显示的显示器的分辨率，然后提供srcset引用的最适合的图像。因此，如果访问页面的设备具有标准/低分辨率显示，一个设备像素表示一个CSS像素，elva-fairy-320w.jpg会被加载（1x 是默认值，所以你不需要写出来）。如果设备有高分辨率，两个或更多的设备像素表示一个CSS像素，elva-fairy-640w.jpg 会被加载。
焦点切换
前面只是变更不同屏幕下的图片尺寸，但是有些图片依据屏幕等比例缩小会失去焦点，比如人物肖像等，小屏幕看起来人物就太小了。 所以相当于不同尺寸下的图片不一样。
<picture...</picture>
示例
代码示例： <picture> <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> </picture> 解析： <source>元素包含一个media属性，这一属性包含一个媒体条件——就像srcset例子，这些条件来决定哪张图片会显示——第一个条件返回真，那么就会显示这张图片。在这种情况下，如果视窗的宽度为799px或更少，第一个<source>元素的图片就会显示。如果视窗的宽度是800px或更大，就显示第二张图片。 srcset属性包含要显示图片的路径。请注意，正如我们在<img>上面看到的那样，<source>可以使用引用多个图像的srcset属性，还有sizes属性。所以你可以通过一个 <picture>元素提供多个图片，不过也可以给每个图片提供多分辨率的图片。实际上，你可能不想经常做这样的事情。 在任何情况下，你都必须在 </picture>之前正确提供一个<img>元素以及它的src和alt属性，否则不会有图片显示。当媒体条件都不返回真的时候（你可以在这个例子中删除第二个<source> 元素），它会提供图片；如果浏览器不支持 <picture>元素时，它可以作为后备方案。 f
不能用CSS和JavaScript的原因
浏览器加载一个页面时，主解析器开始解析CSS和JavaScript之前，先下载任意的图片。 所以若加载好<img>元素后，再用JavaScript检测可视窗口的宽度，大小不合适再动态调整已经加载好的图片会影响用户体验。
调试方法
chrome自带的开发者工具——响应式设计视图
新图像格式
用<picture>...</>可以拒绝不支持类型
示例
有很多令人激动的新图像格式（例如WebP和JPEG-2000）可以在有高质量的同时有较低的文件大小。然而，浏览器对其的支持参差不齐。 <picture>让我们能继续满足老式浏览器的需要。你可以在type属性中提供MIME类型，这样浏览器就能立即拒绝其不支持的文件类型： <picture> <source type="image/svg+xml" srcset="pyramid.svg"> <source type="image/webp" srcset="pyramid.webp"> <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> </picture> 不要使用media属性，除非你也需要美术设计。 在<source> 元素中，你只可以引用在type中声明的文件类型。 像之前一样，如果必要，你可以在srcset和sizes中使用逗号分割的列表。 MIME类型：Multipurpose Internet Mail Extensions 多用途因特网邮件扩展，也称为媒体类型（media type），告诉网页接收到的是何种类型的数据。 通用结构：type/subtype 例如：  等等。详见https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types
视频
单格式添加
<video>...</video>
属性
src=""
controls
标签间内容
提供不支持<video>标签的访问处理
代码示例： <video src="rabbit320.webm" controls> <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p> </video> 说明： <video> 标签内的段落 这个叫做后备内容 — 当浏览器不支持 <video> 标签的时候，它将会显示出来，它使我们能够对旧的浏览器做一些兼容处理。你可以添加任何后备内容，在这个例子中我们提供了一个指向这个视频文件的链接，从而使用户可以至少访问到这个文件，而不会局限于浏览器的支持。
多格式支持
上述单格式可能不支持，需要备选多个格式的视频。
<video>...<source>...<source>...</video>
示例
代码示例： <video controls> <source src="视频1.mp4" type="video/mp4"> <source src="视频1.webm" type="video/webm"> <p>你的浏览器不支持 HTML5 视频。可点击<a href="视频1.mp4">此链接</a>观看</p> </video> type属性： 注意：每个 <source> 标签页含有一个 type 属性，这个属性是可选的，但是建议你添加上这个属性 — 它包含了视频文件的 MIME types ，同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。
其他属性
<width>、<height>、<autoplay>、<loop>、<muted>、<poster>、<preload>
代码示例： <video controls width="400" height="400" autoplay loop muted poster="poster.png"> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p> </video> 说明： width 和 height 你可以用属性控制视频的尺寸，也可以用 CSS 来控制视频尺寸。 无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。 autoplay 这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。 loop 这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。 muted 这个属性会导致媒体播放时，默认关闭声音。 poster 这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。 preload 这个属性被用来缓冲较大的文件，有3个值可选： "none" ：不缓冲 "auto" ：页面加载后缓存媒体文件 "metadata" ：仅缓冲文件的元数据 注意： autoplay 属性 poster 属性效果互斥。
音频
单格式添加
<audio>...<audio>
同<video>
多格式支持
同<video>
其他属性
无<width>、<height>、<poster>属性
字幕文本
<track>标签链接WebVTT格式文本
WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做 cues ，你可以根据不同的需求来显示不同的样式，最常见的如下： subtitle 通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容。（就是平常加载的字幕） captions 同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容。（应该就是以前看到过的杂音也会翻译的字幕） 注：subtitle和captions的区别应该是语义上。 timed descriptions 将文字转换为音频，用于服务那些有视觉障碍的人。 一个典型的 WebVTT 文件如下：  你需要做如下工作： 以 .vtt 后缀名保存文件。 用 <track> 标签链接 .vtt 文件， <track> 标签需放在 <audio> 或 <video> 标签当中，同时需要放在所有 <source> 标签之后。使用 kind 属性来指明是哪一种类型，如 subtitles 、 captions 、 descriptions。然后，使用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。 代码示例： 
其他嵌入技术
<iframe>...</iframe>
不推荐使用，因为不被搜索引擎所检索 但是一些特殊情况除外 比如公司内网
属性
allowfullscreen、frameborder、src、width、height、sandbox
代码示例：  属性详解： allowfullscreen 如果设置，<iframe>则可以通过全屏API设置为全屏模式（稍微超出本文的范围）。 frameborder 如果设置为1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0删除边框。不推荐这样设置，因为在CSS中可以更好地实现相同的效果。border: none; src 该属性与<video>/<img>一样包含指向要嵌入文档的URL路径。 width 和 height 这些属性指定您想要的iframe的宽度和高度。 备选内容 与<video>等其他类似元素相同，您可以在<iframe></iframe>标签之间包含备选内容，如果浏览器不支持<iframe>，将会显示备选内容，这种情况下，我们已经添加了一个到该页面的链接。现在您几乎不可能遇到任何不支持<iframe>的浏览器。 sandbox 该属性需要在已经支持其他<iframe>功能（例如IE 10及更高版本）但稍微更现代的浏览器上才能工作，该属性可以提高安全性设置 安全性设置：黑客常常把iframe作为共同的攻击目标（攻击向量），例如显示用户名和密码等敏感信息。想尽可能减少黑客的机会，那么你应该给嵌入的内容仅能完成自己工作的权限。当然，这也适用于你自己的内容。一个允许包含在其里的代码以适当的方式执行或者用于测试，但不能对其他代码库（意外或恶意）造成任何损害的容器称为沙盒。 未沙盒化(Unsandboxed)内容可以做得太多（执行JavaScript，提交表单，弹出窗口等）默认情况下，您应该使用没有参数的sandbox属性来强制执行所有可用的限制，如我们前面的示例所示。 如果绝对需要，您可以逐个添加权限（sandbox=""属性值内） - 请参阅sandbox所有可用选项的参考条目。其中重要的一点是，你永远不应该同时添加allow-scripts和allow-same-origin到你的sandbox属性中-在这种情况下，嵌入式内容可以绕过阻止站点执行脚本的同源安全策略，并使用JavaScript完全关闭沙盒。 配置CSP指令 详见： https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/%E5%85%B6%E4%BB%96%E5%B5%8C%E5%85%A5%E6%8A%80%E6%9C%AF
标签间内容
同上
<embed>和<object>
嵌入多种类型的外部内容的通用嵌入工具，包括JAVA小程序和Flash、pdf等插件技术
制作表格
基本元素
<table>...</> 表格根元素
<caption>...</> 标题，放在<table>下
<th>...</> 标题table header
属性
colspan="列数" 合并列
rowspan="行数" 合并行
<td>...</> 单元格table data
属性（同<th>）
<tr>...</> 行table row
<col>和<colgroup> 列组操作
在有些时候，需要对一列的所有元素都进行相同的操作，比如对三行三列的表格的第二行的单元格进行操作： <td style="backgroud-color: yellow">data1</td> <td style="backgroud-color: yellow">data2</td> ... <td style="backgroud-color: yellow">dataN</td> 这样操作会比较繁琐，所以需要可以同时对一行一列进行操作的元素。
示例
<table> <colgroup> <col> <col style="background-color: yellow"> </colgroup> <tr> <th>Data 1</th> <th>Data 2</th> </tr> <tr> <td>Calcutta</td> <td>Orange</td> </tr> <tr> <td>Robots</td> <td>Jazz</td> </tr> </table> 注意：<col>的作用——因为是对第二列更改，所以需要“占位列”。
语义结构化
元素
<thead>...</> 表头
<thead> 需要嵌套在 table 元素中，放置在头部的位置，因为它通常代表第一行，第一行中往往都是每列的标题，但是不是每种情况都是这样的。如果你使用了 <col>/<colgroup> 元素，那么 <thead>元素就需要放在它们的下面。
<tbody>...</> 正文
<tfoot> 需要嵌套在 table 元素中，放置在底部 (页脚)的位置，一般是最后一行，往往是对前面所有行的总结，比如，你可以按照预想的方式将<tfoot>放在表格的底部，或者就放在 <thead> 的下面。(浏览器仍将它呈现在表格的底部)
<tfoot>...</> 页脚
<tbody> 需要嵌套在 table 元素中，放置在 <thead>的下面或者是 <tfoot> 的下面，这取决于你如何设计你的结构。(<tfoot>放在<thead>下面也可以生效.)
作用
这些元素不会使表格更易于屏幕阅读器用户访问，也不会造成任何视觉上的改变。 然而，它们在应用样式和布局上会起到作用，可以更好地让 CSS 应用到表格上。例如，在长表格的情况下，你可以在每个打印页面上使表格页眉和页脚重复，你也可以让表格的正文部分显示在一个单独的页面上，并通过上下滚动来获得内容。
实例
代码示例： <table> <caption>How I chose to spend my money</caption> <thead> <tr> <th>Purchase</th> <th>Location</th> <th>Date</th> <th>Evaluation</th> <th>Cost (€)</th> </tr> </thead> <tfoot> <tr> <th colspan="4">SUM</th> <td>118</td> </tfoot> <tbody> <tr> <td>Haircut</td> <td>Hairdresser</td> ... </tbody>
几种不同表格的绘制思路
均是从上往下，从左往右依次绘制
基本型

列中多列型

其他型：思路一致，参考练习（行星表）
表格嵌套
对视听障碍者提高访问性
在<th>中添加属性scope
scope="col"或scope="row"表明列或行
scope="colgroup"或scope="rowgroup"在多级标题使用
Items Sold August 2016 Clothes Accessories Trousers Skirts Dresses Bracelets Rings Belgium Antwerp 56 22 43 72 23 Gent 46 18 50 61 15 Brussels 51 27 38 69 28 The Netherlands Amsterdam 89 34 69 85 38 Utrecht 80 12 43 36 19 clothes相对Trousers、Skirts、Dresses是一级标题，所以用colgroup，其余三个用col
id和headers标记所有内容
<th>添加唯一id
<td>添加headers包含从属的所有id，空格隔开

结合CSS制作表格样式
制作表单
概念
交互工具
设计
设计理念见网站
基本元素
<form>...</> 表单根元素
属性
action
action 属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理。
method

<label>...</> 文本标签
属性
for="ID"
链接<label>和id=ID的小部件
作用
1.可以点击标签来激活小部件，例如 
一般不同时使用多个标签和多个相同的ID
原因：屏幕阅读器会困惑
<input> 交互手段

属性
type=""
单行文本框
text
tpye的默认值是text，接受任何类型文本输入。（若其他属性值未被浏览器接受，则会启用text作为备用）。 最基本的单行文本框
属性 multiple
通过包括multiple属性，它还可以让用户将多个电子邮件地址输入相同的输入(以逗号分隔)。
password
search
文本框和搜索框之间的主要区别是浏览器的样式——通常，搜索框是渲染成圆角的，并且/可能给定一个“x”来清除输入的值。然而，还有另外一个值得注意的特性:它们的值可以被自动保存用来在同一站点上的多个页面上自动补全。
tel
目的：语义区分
URL
它为字段添加了特殊的验证约束，如果输入无效的url，浏览器就会报告错误。 注意：URL格式良好并不一定意味着它引用了一个实际存在的位置。
选中项
单选项
radio
 单选按钮用name来区别一组
复选项
checkbox
同radio，单选按钮变复选按钮
按钮
button
其他
number

range
见wdn https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/The_native_form_widgets  
时间选择器
见wdn
color

文件选择器
隐藏内容

图像按钮

value="输入默认值及提交返回值"
与<textarea>对比：<input>是空元素，要用value来设定默认值。而<textarea>在标签间设置默认值。
placeholder="底层暗字，用于提示内容"
readonly 只读
name="数据块名"（数据块与服务器关联）

list="LIST"
<textarea>...</> 多行文本框
属性
属性名 默认值 描述 cols 20 文本控件的可见宽度，平均字符宽度。 rows 控制的可见文本行数。 wrap soft 表示控件是如何包装文本的。可能的值：hard 或 soft
cols
rows
wrap？
注意：只接受文本内容，任何内容放进去都是纯文本内容
<select>...</> 选择框
<option>有属性value，可以设置提交表单时该属性发送的值，若忽略则使用选择框中选择的值。 猜想：这种值可以作为js或者其他使用时候的值，在一个选择框中有三个名字，小明=1，小红=2，小方=3，则value就分别设置为1,2,3。
单选选择框
<select></>和<option></>

<select></>和<optgroup></>和<option></>

多选选择框
属性multiple

<datalist>...</> 备选项
作用：可以使用<datalist>元素来为表单小部件提供建议的、自动完成的值，并使用一些<option>子元素来指定要显示的值。 然后使用list属性将数据列表绑定到一个文本框(通常是一个 <input> 元素)。 一旦数据列表与表单小部件相关联，它的选项用于自动完成用户输入的文本;通常，这是作为一个下拉框提供给用户的，匹配在输入框中输入了的内容。
<datalist>...<option></>,,,</>；<input>加list属性
兼容性后备
<datalist>元素是HTML表单的最新补充，因此浏览器的支持比我们之前看到的要少一些。所以要保证当不显示<datalist>时有其他的备选方案。
示例

<button>...</> 按钮
属性
type=""
它接受submit, reset或者 button 三个值中的任一个。 单击 type 属性定义为 submit 值(也是默认值)的按钮会发送表单的数据到<form>元素的action属性所定义的网页。 单击 type 属性定义为 reset 值的按钮 将所有表单小部件重新设置为它们的默认值。从用户体验的角度来看，这被认为是一种糟糕的做法。 单击 type 属性定义为 button 值的按钮……不会发生任何事！这听起来很傻，但是用JavaScript构建定制按钮非常有用。 
submit 提交
与<input type="button">的区别： 从示例中可以看到，<button>元素允许您在它们的标签中使用HTML内容，这些内容被插入到打开和关闭<button> 标签中。另一方面，<input>元素是空元素;它们的标签插入在value属性中，因此只接受纯文本内容。 使用<button>元素，可以有一个不同于按钮标签的值(通过设置value中的属性值)。这在IE 8之前的版本中是不可靠的。 技术上讲，并没有区别。
reset 重置
button 自定义
进度条和仪表条
见wdn
<fieldset>...</>和<legend>...</> 归纳器？
作用
1.小样式 2.语义——屏幕阅读器
示例

通用属性
属性名称 默认值 描述 autofocus (false) 这个布尔属性允许您指定当页面加载时元素应该自动具有输入焦点，除非用户覆盖它，例如通过键入不同的控件。文档中只有一个与表单相关的元素可以指定这个属性。 disabled (false) 这个布尔属性表示用户不能与元素交互。如果没有指定这个属性，元素将从包含它的元素继承设置，例如<fieldset>;如果没有包含在设定了disabled属性的元素里，那么这个元素就是可用的。 form 小部件与之相关联的表单元素。属性值必需是同个文档中的<form> 元素的 id属性。理论上，它允许您在<form>元素之外设置一个表单小部件。然而，在实践中，没有任何支持该特性的浏览器。 name 元素的名称;这是跟表单数据一起提交的。 value 元素的初始值。
自定义控件
CSS美化表单
兼容性列表
兼容性表格尝试总结 HTML 表单的 CSS 支持状况。由于 CSS 和 HTML 表单的复杂性，不能把这些表格当作完善的参考。但是，它们可以让你很好地洞察什么能做什么不能做，这将会对你学习使用有很好地帮助。
高级表单设计
发送表单数据？
HTML发送表单
<form>属性
action="URL" 定义了发送数据的去处

method 定义发送的方法
GET方法
GET 方法 GET方法是浏览器使用的方法，请求服务器返回给定的资源:“嘿，服务器，我想要得到这个资源。”在这种情况下，浏览器发送一个空的主体。由于主体是空的，如果使用该方法发送一个表单，那么发送到服务器的数据将被追加到URL。 考虑下面这个表单： <form action="http://foo.com" method="get"> <div> <label for="say">What greeting do you want to say?</label> <input name="say" id="say" value="Hi"> </div> <div> <label for="to">Who do you want to say it to?</label> <input name="to" id="to" value="Mom"> </div> <div> <button>Send my greetings</button> </div> </form> 由于已经使用了GET方法，当你提交表单的时候，您将看到www.foo.com/?say=Hi&to=Mom在浏览器地址栏里。 数据作为一系列的名称/值对被附加到URL。在URL web地址结束之后，我们得到一个问号(?)，后面跟着由一个与符号(&)互相分隔开的名称/值对。在本例中，我们将两个数据传递给服务器。 say, 它有一个 Hi的值。 to, 它有一个 Mom的值。 HTTP请求如下： GET /?say=Hi&to=Mom HTTP/2.0 Host: foo.com
作用？
POST方法
POST 方法 POST方法略有不同。这是浏览器在询问响应时使用与服务器通信的方法，该响应考虑了HTTP请求正文中提供的数据:“嘿，服务器，看一下这些数据，然后给我回一个适当的结果。”如果使用该方法发送表单，则将数据追加到HTTP请求的主体中。 让我们来看一个例子，这是我们在上面的GET部分中所看到的相同的形式，但是使用method属性设置为post。 <form action="http://foo.com" method="post"> <div> <label for="say">What greeting do you want to say?</label> <input name="say" id="say" value="Hi"> </div> <div> <label for="to">Who do you want to say it to?</label> <input name="to" id="to" value="Mom"> </div> <div> <button>Send my greetings</button> </div> </form> 当使用POST方法提交表单时，没有数据会附加到URL，HTTP请求看起来是这样的，而请求主体中包含的数据是这样的： POST / HTTP/2.0 Host: foo.com Content-Type: application/x-www-form-urlencoded Content-Length: 13 say=Hi&to=Mom
区别
使用GET请求用户将在他们的URL栏中看到数据，但是使用POST请求用户将不会看到。这一点很重要，有两个原因： 如果您需要发送一个密码(或其他敏感数据)，永远不要使用GET方法否则数据会在URL栏中显示，这将非常不安全。 如果您需要发送大量的数据，那么POST方法是首选的，因为一些浏览器限制了URL的大小。此外，许多服务器限制它们接受的URL的长度。
在服务器端检索数据
发送文件
enctype属性
使用JavaScript发送表单
表单数据校验
内置表单数据校验
required属性

正则表达式校验
pattern属性

自定义错误信息
JavaScript校验表单
兼容旧式浏览器问题
调试
在线工具 W3C
引用CSS和JavaScript
CSS
方法：<link>
属性
rel="stylesheet"表面是文档的样式表
href=“”包含了样式表文件的路径
href:Hypertext Reference(超文本引用)，用于建立这个标签和外部资源之间的关系 src:Source(源)，用于替代这个元素
注：常放在文档头部
JavaScript
方法：<script>......</script>
属性
src=“”
注：不必要放在文档头部，放在文档尾部（</body>之前）更好
可以确保加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）