html-mdn

html
web-front-end
发布之期:   2021-03-11
更新之期:   2021-06-15
文章字数:   9.8k
阅读时长:   37 分
阅读次数:  

HTML基础排版

[toc]

html简介和语义

<meta charset="utf-8">
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Web Docs Learning Area。。。这是搜索引擎显示的

Open Graph Data是Facebook发明的一种元数据协议，旨在为网站提供更丰富的元数据

可以通过以下方式将收藏夹图标添加到您的页面：

  1. 将其保存在与网站的索引页相同的目录中，并以.ico格式保存（大多数浏览器将以更常见的格式（例如.gif或）支持网站.png图标，但使用ICO格式将确保其可追溯至Internet Explorer6。）

  2. 将以下行添加到您的HTML

    <head>

    块中以引用它：

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

在外部示例中，我们使用一种更现代的JavaScript功能来解决问题，即defer属性，该属性告诉浏览器<script>在到达tag元素后继续下载HTML内容。

<script src="script.js" defer></script>

在这种情况下，脚本和HTML将同时加载，并且代码将起作用。

注意：在外部情况下，我们不需要使用DOMContentLoaded事件，因为该defer属性为我们解决了问题。defer对于内部JavaScript示例，我们没有使用该解决方案，因为它defer仅适用于外部脚本。

这个问题的老式解决方案曾经是将脚本元素放在正文的底部（例如，紧接在</body>标记之前），以便在解析所有HTML之后将其加载。该解决方案的问题在于，脚本的加载/解析被完全阻止，直到HTML DOM被加载为止。在具有许多JavaScript的大型网站上，这可能会导致严重的性能问题，从而降低您的网站速度。

<html lang="en-US"><!--设置文档主要语言-->zh-Hans （简体中文）zh-CN

html重要的是含义！

em强调

strong特别重要

  • i>用于传达传统上由斜体表示的含义：外来词，分类名称，技术术语，思想…
  • b>用于传达传统上由粗体表示的含义：关键字，产品名称，主句…
  • u>用于传达传统上由下划线传达的含义：专有名称，拼写错误…

关于下划线的一种警告：人们将下划线与超链接紧密关联。因此，在Web上，最好仅对链接加下划线。在<u>语义上适当时使用该元素，但请考虑使用CSS将默认下划线更改为Web上更合适的内容。

html超链接

href：’url’

title：提醒，当鼠标hover时显示

在a>标签中加入别的元素可使用区块级链接，省略url则是当前网站

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
</a>

在src后紧跟选择器可以选择链接道文件片段

 <a href="contacts.html#Mailing_address">
<!-->链接到id是Mailing_address的地方</-->

好的连结文字：下载Firefox

不好的连结文字：点这里来下载Firefox

  • 让你的连结越短越好— 太长的连结会使萤幕阅读器的使用者蒙受其害，因为他们必须从头听到尾。

  • 尽量让连结的文字不一样，太多重复的连结文字会带给萤幕阅读器的使用者麻烦，因为他们可能会从一个连结表中选择连结，因此若有许多重复的「点这里」会让他们相当困惑。

  • 尽可能使用相对连接来增强代码可读性和效率

  • 连接到非HTML资源时要说明

    <p><a href="http://www.example.com/large-report.pdf">
  下載銷售報告(PDF, 10MB)
</a></p>
<p><a href="http://www.example.com/car-game">
  遊玩賽車遊戲(需要 Flash)
</a></p>

  • 当你连结一个需要下载的资源时，你可以使用download属性来提供一个预设的储存档名。以下范例是最新版的Windows版Firefox的下载连结：

    <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
   download="firefox-latest-64bit-installer.exe">
  下載Windows上的最新版Firefox (64-bit) (English, US)
</a>

  • 你可以建立一个连结或按钮，使得它被点击之后，开启一个正在撰写中的电子邮件讯息。这可以透过``元素和mailto:URL scheme来达成。

    多数情况mailto:会填入收信人的电子邮件地址。例如：

    <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

  • 你可以建立一个连结或按钮，使得它被点击之后，开启一个正在撰写中的电子邮件讯息。这可以透过``元素和mailto:URL scheme来达成。

    多数情况mailto:会填入收信人的电子邮件地址。例如：

    <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

    它的结果会像是这样：Send email to nowhere。

    事实上，电子邮件地址是选填的。如果你将它留空(也就是说，你的href只写了”mailto:”)，使用者的mail client会开启一个寄信视窗，其中并没有指定收信人，这在使用「分享」连结时非常有用，使用者可以自行决定要寄给谁。

  • 除了电子邮件地址之外，你还可以提供其他资讯，事实上，任何标准的邮件标头栏位都能被加到 mailtoURL中，常见的有主旨(subject)、副本(cc)以及主体(body) (这个虽然不是真的标头栏位，但能让你放一条简短的讯息在新邮件的主体中)。每个栏位与它的值被定义成一组查询项(query term)。

    下面是一个包含cc、bcc(密件副本)、subject 和body 的范例：

    <a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

    **Note:**每一个栏位的值必须以URL编码，也就是将空白及不可印字元(不可见的字元如缩排(tabs)、回车(carriage return )、换页(page breaks)等等)转换成百分号编码。也请注意这里使用问号( ?)来分隔主要URL和其他栏位；以&来分隔mailto:URL中的不同的栏位，这是标准的URL查询记号(query notation)。你可以阅读GET方法来得知有那些常用的查询记号。

html高级文本

  • 说明列表使用与其他列表类型不同的包装器-

    另外，每个术语都包装在
    （描述术语）元素中，每个描述都包装在
    （描述描述）元素中。

  • Quatation（块）

    <blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

    表明引用自cite所示网页

    Browser default styling will render this as an indented paragraph, as an indicator that it is a quote;

  • Quatation（inline）

    replace blockquote with q

    Browser default styling will render this as normal text put in quotes to indicate a quotation

    由于cite属性并没有提供什么链接功能，需要我们自己最好提供链接，有效的方法是将cite标签嵌套于a标签内

  • — this is used to wrap around an abbreviation or acronym, and provide a full expansion of the term (included inside a title attribute.) 

    <abbr title="Reverend">Rev.</abbr>

  • HTML有一个用于标记联系方式的元素

    。这只是将html文档开发者的联系方式包括在内，例如：

    <address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

  • 上下标

  • code>：用于组成通用的计算机代码。

  • ：用于标记固定宽度的文本块，其中保留空白（通常是代码块）。

  • var>：用于专门标记变量名。

  • kbd>：用于标记输入到计算机中的键盘（和其他类型的）输入。

  • samp>：用于标记计算机程序的输出。

  • time>：datetime属性标记元素时间

html结构布局

信息架构

应用于网站设计和开发的信息体系结构是一种组织网站的信息/内容/功能的实践，以便它可以提供最佳的用户体验，并且信息和服务易于使用和发现。

  • HTML5中的Section元素

    • HTML导航元素《nav》定义了一个部分，其中包含经常出现在网站上的导航链接。您可以具有主菜单和辅助菜单，但是不能将一个<nav>元素嵌套在另一个 <nav>元素中。
    • HTML文章元素《article》定义了一条独立的内容。它不单指主要内容，而是可以用于注释和小部件。
    • HTML Section Element《section》定义了文档的一部分，以指示语义含义的相关分组。使用section元素为父元素提供额外的上下文是有意义的。
    • HTML Aside Element《aside》定义了一个部分，尽管该部分与main元素相关，但不属于主流，例如说明框或广告。aside元素具有自己的轮廓，但不属于主要元素。

    分区中使用的其他语义HTML元素

    • HTML正文元素《body》定义了文档的所有内容。它包含所有内容和HTML标记。
    • HTML标头元素《header》定义了一个页面区域，通常包含徽标，标题和导航。标头也可以在其他语义元素（例如<article>，<section>，《aside》，《nav》都行）可以放一些作者信息啊什么的东西，
    • HTML页脚元素《footer》定义了页脚，通常包含版权或法律声明，有时还包含一些链接。在节的上下文中，页脚可能包含节内容的发布日期，许可证信息等，同样，上述标间也均可以自己的页脚，尽管有页脚的名称，页脚也不一定位于页面或节的末尾。

  • 无语义元素：块级div 内敛span

警告：<div> 非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用， 否则文档的升级和维护工作会非常困难。

重要提示：Web浏览器中没有拟议大纲算法的实现，也没有辅助技术。它从来都不是最终的W3C规范的一部分。因此，大纲算法不应用于将文档结构传达给用户。建议作者使用标题等级（h1- h6）传达文档结构。

大纲算法是神马？？？

用法指导规定了各个部分的建议使用方法

兼容古老浏览器：

HTML5语义元素不需要特殊的DOM接口，但是在较旧的浏览器中，它们将需要特定的CSS样式，这些样式不明确支持它们。display: inline默认情况下，未知元素的样式设置为默认样式，因此您需要将其设置为display: block：

article, aside, footer, header, nav, section {
  display: block;
}

当你的受众可能用那些鬼浏览器时

The HTML <noscript> element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.

<!--[if lt IE 9]>
  <script>
    document.createElement("article");
    document.createElement("aside");
    document.createElement("footer");
    document.createElement("header");
    document.createElement("nav");
    document.createElement("section");
    document.createElement("time");
  </script>
<![endif]-->
<noscript>
  <p><strong>This web page requires JavaScript to be enabled.</strong></p>
  <p>JavaScript is an object-oriented computer programming language
    commonly used to create interactive effects within web browsers.</p>
  <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p>
</noscript>

HTML多媒体

图片

你不应该使用HTML属性来改变图片的大小。如果你把尺寸设定的太大，最终图片看起来会模糊；如果太小，会在下载远远大于你需要的图片时浪费带宽。如果你没有保持正确的宽高比，图片可能看起来会扭曲。在把图片放到你的网站页面之前，你应该使用图形编辑器使图片的尺寸正确。

善用alt属性

使用 HTML5 的 figure和figcaption元素，它正是为此而被创造出来的：为图片提供一个语义容器，在标题和图片之间建立清晰的关联。我们之前的例子可以重写为:

<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

注意：从无障碍的角度来说，说明文字和 alt 文本扮演着不同的角色。看得见图片的人们同样可以受益于说明文字，而 alt 文字只有在图片无法显示时才这样。 所以，说明文字和 alt 的内容不应该一样，因为当图片无法显示时，它们会同时出现。尝试让你的图片不显示，看看效果如何。

如果图像对您的内容里有意义，则应使用HTML图像。 如果图像纯粹是装饰，则应使用CSS背景图片

ps: 谷歌搜索引擎把连字符当作单词的分隔符， 但不会识别下划线。基于此，最好在一开始就养成习惯，文件夹和文件名使用小写，用短横线而不是空格来分隔。可以避免许多问题。

Video&Audio

<video src="rabbit320.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

当中的一些属性如下:
src同 标签使用方式相同，src 属性指向你想要嵌入网页当中的视频资源，他们的使用方式完全相同。controls用户必须能够控制视频和音频的回放功能。你可以使用 controls 来包含浏览器提供的控件界面，同时你也可以使用合适的 JavaScript API 创建自己的界面。界面中至少要包含开始、停止以及调整音量的功能。

video 标签内的内容这个叫做后备内容 — 当浏览器不支持 video标签的时候，就会显示这段内容，这使得我们能够对旧的浏览器提供回退内容。你可以添加任何后备内容，在这个例子中我们提供了一个指向这个视频文件的链接，从而使用户至少可以访问到这个文件，而不会局限于浏览器的支持。

像 MP3、MP4、WebM这些术语叫做容器格式。他们定义了构成媒体文件的音频轨道和视频轨道的储存结构，其中还包含描述这个媒体文件的元数据，以及用于编码的编码译码器等等。

刚刚所说的格式主要用于将音频和视频压缩成可管理的文件（原始的音频和视频文件非常大）。浏览器包含了不同的 Codecs,，如 Vorbis 和 H.264，它们用来将已压缩的音频和视频转化成二进制数字。不同的编码器和不同的容器都有各自的优缺点，在你更了解它们后，你可以自己选择使用哪个编码器和容器。

我们该怎么做呢？请看如下例子（你可以点击这里查看网页，或者点击这里查看源代码）：

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

现在我们将 src 属性从 <video> 标签中移除，转而将它放在几个单独的标签 `` 当中。在这个例子当中，浏览器将会检查 <source> 标签，并且播放第一个与其自身 codec 相匹配的媒体。你的视频应当包括 WebM 和 MP4 两种格式，这两种在目前已经足够支持大多数平台和浏览器。

每个 <source> 标签页含有一个 type 属性，这个属性是可选的

新的特性：

  • width 和 height

    你可以用属性控制视频的尺寸，也可以用 CSS 来控制视频尺寸。 无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。

  • autoplay

    这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。

  • loop

    这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。

  • muted

    这个属性会导致媒体播放时，默认关闭声音。

  • poster

    这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。

  • preload

    这个属性被用来缓冲较大的文件，有3个值可选："none" ：不缓冲"auto" ：页面加载后缓存媒体文件"metadata" ：仅缓冲文件的元数据

你可以点击这里查看以上的例子，也可以点击这里查看源代码。注意我们并没有使用 autoplay 属性在这个版本的例子中 — 如果当页面一加载就开始播放视频的话，就不会看到 poster 属性的效果了。

audio和video几乎完全一样，但不支持width/height和poster

嵌入iframe

以前，插件在网络上是不可或缺的。还记得你必须安装Adobe Flash Player才能在线观看电影的日子吗？并且你还会不断地收到关于更新Flash Player和Java运行环境的烦人警报。Web技术已经变得更加强大，那些日子已经结束了。对于大多数应用程序，现在是停止依赖插件传播内容，开始利用Web技术的时候了

iframe元素出现了（连同其他嵌入内容的方式，如canvas>，video>等），它提供了一种将整个web页嵌入到另一个网页的方法，看起来就像那个web页是另一个网页的一个或其他元素一样。iframe>现在经常被使用。

allowfullscreen

如果设置，<iframe>则可以通过全屏API设置为全屏模式（稍微超出本文的范围）。

frameborder

如果设置为1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0删除边框。不推荐这样设置，因为在CSS中可以更好地实现相同的效果。border: none;

src

该属性与``/<img>一样包含指向要嵌入文档的URL路径。

width` 和 `height

这些属性指定您想要的iframe的宽度和高度。

备选内容

与video & audio等其他类似元素相同，您可以在<iframe></iframe>标签之间包含备选内容，如果浏览器不支持<iframe>，将会显示备选内容，这种情况下，我们已经添加了一个到该页面的链接。现在您几乎不可能遇到任何不支持<iframe>的浏览器。

sandbox

该属性需要在已经支持其他<iframe>功能（例如IE 10及更高版本）但稍微更现代的浏览器上才能工作，该属性可以提高安全性设置; 我们将在下一节中更加详细地谈到。

注意：为了提高速度，在主内容完成加载后，使用JavaScript设置iframe的src属性是个好主意。这使您的页面可以更快地被使用，并减少您的官方页面加载时间（重要的SEO指标）。

未沙盒化(Unsandboxed)内容可以做得太多（执行JavaScript，提交表单，弹出窗口等）默认情况下，您应该使用没有参数的sandbox属性来强制执行所有可用的限制，如我们前面的示例所示。

如果绝对需要，您可以逐个添加权限（sandbox=""属性值内） - 请参阅sandbox所有可用选项的参考条目。其中重要的一点是，你永远不应该同时添加allow-scripts和allow-same-origin到你的sandbox属性中-在这种情况下，嵌入式内容可以绕过阻止站点执行脚本的同源安全策略，并使用JavaScript完全关闭沙盒。

但还有其它的有待关注，如 ``用于JavaScript生成的2D和3D图形，<svg>用于嵌入矢量图形

SVG

  • 位图使用像素网格来定义 — 一个位图文件精确得包含了每个像素的位置和它的色彩信息。流行的位图格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)
  • 矢量图使用算法来定义 — 一个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。 SVG 格式可以让我们创造用于 Web 的精彩的矢量图形。

此外，矢量图形相较于同样的位图，通常拥有更小的体积，因为它们仅需储存少量的算法，而不是逐个储存每个像素的信息。

SVG很容易手工编码。 是的，您可以在文本编辑器中手动编写简单的SVG，但是对于复杂的图像，这很快就开始变得非常困难。 为了创建SVG图像，大多数人使用矢量图形编辑器，如 Inkscape 或 Illustrator。 这些软件包允许您使用各种图形工具创建各种插图，并创建照片的近似值（例如Inkscape的跟踪位图功能）。

SVG除了迄今为止所描述的以外还有其他优点：

  • 矢量图像中的文本仍然可访问（这也有利于 SEO)）。
  • SVG 可以很好地适应样式/脚本，因为图像的每个组件都是可以通过CSS或通过JavaScript编写的样式的元素。

那么为什么会有人想使用光栅图形而不是SVG？ 其实 SVG 确实有一些缺点：

  • SVG非常容易变得复杂，这意味着文件大小会增加; 复杂的SVG也会在浏览器中占用很长的处理时间。
  • SVG可能比栅格图像更难创建，具体取决于您尝试创建哪种图像。
  • 旧版浏览器不支持SVG，因此如果您需要在网站上支持旧版本的 IE，则可能不适合（SVG从IE9开始得到支持）。

由于上述原因，光栅图形更适合照片那样复杂精密的图像

<img
    src="equilateral.svg"
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" />

优点

  • 快速，熟悉的图像语法与alt属性中提供的内置文本等效。
  • 可以通过在``元素嵌套<img>，使图像轻松地成为超链接。

缺点

  • 无法使用JavaScript操作图像。
  • 如果要使用CSS控制SVG内容，则必须在SVG代码中包含内联CSS样式。 （从SVG文件调用的外部样式表不起作用）
  • 不能用CSS伪类来重设图像样式（如:focus）。

！！你还可以在文本编辑器中打开SVG文件，复制SVG代码，并将其粘贴到HTML文档中 - 这有时称为将SVG内联或内联SVG。确保您的SVG代码在<svg></svg>标签中（不要在外面添加任何内容）。这是一个非常简单的示例，您可以粘贴到文档中：

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

优点

  • 将 SVG 内联减少 HTTP 请求，可以减少加载时间。
  • 您可以为 SVG 元素分配class和id，并使用 CSS 修改样式，无论是在SVG中，还是 HTML 文档中的 CSS 样式规则。 实际上，您可以使用任何 SVG外观属性 作为CSS属性。
  • 内联SVG是唯一可以让您在SVG图像上使用CSS交互（如:focus）和CSS动画的方法（即使在常规样式表中）。
  • 您可以通过将 SVG 标记包在``元素中，使其成为超链接。

响应式

一个改进的方法是，当网站在狭窄的屏幕上观看时，显示一幅图片的包含了重要细节的裁剪版本，第二个被裁剪的图片会在像平板电脑这样的中等宽度的屏幕设备上显示，这就是众所周知的美术设计问题（art direction problem）。

另外，如果是在小屏手机屏幕上显示网页，那么没有必要在网页上嵌入这样大的图片。这被称之为分辨率切换问题（resolution switching problem）。位图有固定数量的像素宽，固定数量的像素高，与 矢量图 外观相同，但本质不同。如果显示尺寸大于原始尺寸，一张自身较小的位图看起来会有颗粒感（矢量图则不会）。

相反，没有必要在比图片实际尺寸小的屏幕上显示一张大图，这样做会浪费带宽——当可以在设备上使用小图像时，手机用户尤其不愿意因为下载用于桌面的大图像而浪费带宽。理想的情况是当访问网站时依靠不同的设备来提供不同的分辨率图片和不同尺寸的图片。

让事情变得复杂的是，有些设备有很高的分辨率，为了显示的更出色，可能需要超出你预料的更大的图像。这从本质上是一样的问题，但在环境上有一些不同。

你可能会认为矢量图形能解决这些问题，在某种程度上是这样的——它们无论是文件大小还是比例都合适，无论在哪里你都应该尽可能的使用它们。然而，它们并不适合所有的图片类型，虽然在简单图形、图案、界面元素等方面较好，但如果是有大量的细节的照片，创建矢量图像会变得非常复杂。像JPEG格式这样的位图会更适合上面例子中的图像。

<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和sizes属性看起来很复杂，但是如果你按照上图所示进行格式化，那么他们并不是很难理解，每一行有不同的属性值。每个值都包含逗号分隔的列表。列表的每一部分由三个子部分组成。让我们来看看现在的每一个内容：

srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小。在每个逗号之前，我们写：

  1. 一个文件名 (elva-fairy-480w.jpg.)
  2. 一个空格
  3. 图像的固有宽度（以像素为单位）（480w）——注意到这里使用w单位，而不是你预计的px。这是图像的真实大小，可以通过检查你电脑上的图片文件找到（例如，在Mac上，你可以在Finder上选择这个图像，然后按 Cmd + I 来显示信息）。

**sizes**定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示。在这种情况下，在每个逗号之前，我们写：

  1. 一个媒体条件（(max-width:480px)）——你会在 CSS topic中学到更多的。但是现在我们仅仅讨论的是媒体条件描述了屏幕可能处于的状态。在这里，我们说“当可视窗口的宽度是480像素或更少”。
  2. 一个空格
  3. 当媒体条件为真时，图像将填充的槽的宽度（440px）

注意: 对于槽的宽度，你也许会提供一个固定值 (px, em) 或者是一个相对于视口的长度(vw)，但不是百分比。你也许已经注意到最后一个槽的宽度是没有媒体条件的，它是默认的，当没有任何一个媒体条件为真时，它就会生效。 当浏览器成功匹配第一个媒体条件的时候，剩下所有的东西都会被忽略，所以要注意媒体条件的顺序。

所以，有了这些属性，浏览器会：

  1. 查看设备宽度
  2. 检查sizes列表中哪个媒体条件是第一个为真
  3. 查看给予该媒体查询的槽大小
  4. 加载srcset列表中引用的最接近所选的槽大小的图像

如果你支持多种分辨率显示，但希望每个人在屏幕上看到的图片的实际尺寸是相同的，你可以让浏览器通过srcset和x语法结合——一种更简单的语法——而不用sizes，来选择适当分辨率的图片。你可以看一个例子 srcset-resolutions.html（或 the source code）：

<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">

在这种情况下，sizes并不需要——浏览器只是计算出正在显示的显示器的分辨率，然后提供srcset引用的最适合的图像。因此，如果访问页面的设备具有标准/低分辨率显示，一个设备像素表示一个CSS像素，elva-fairy-320w.jpg会被加载（1x 是默认值，所以你不需要写出来）。如果设备有高分辨率，两个或更多的设备像素表示一个CSS像素，elva-fairy-640w.jpg 会被加载。640px的图像大小为93KB，320px的图像的大小仅仅有39KB。

美术设计问题

<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>元素时，它可以作为后备方案。

为了保证效率，响应式设计最好不用JavaScript

大胆的使用现代图像格式

有很多令人激动的新图像格式（例如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中使用逗号分割的列表。

表格设计

table
tr表格行
th表格小标题
td表格基础单元

rowspan 调高度

colspan = “2” 宽度是两个单元格

为了舍弃这种做法，我们可以只定义一次，在 <col> 元素中。<col> 元素被规定包含在 <colgroup> 容器中，而 <colgroup>就在 <table> 标签的下方。我们可以通过如下的做法来创建与上面相同的效果:

<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>来定义“列的样式”，每一个<col>都会制定每列的样式，对于第一列，我们没有采取任何样式，但是我们仍然需要添加一个空的 <col> 元素，如果不这样做，那么我们的样式就会应用到第一列上，这和我们预想的不一样。

如果你想把这种样式信息应用到每一列，我们可以只使用一个 <col> 元素，不过需要包含 span 属性，像这样：

<colgroup>
  <col style="background-color: yellow" span="2">
</colgroup>

标题属性caption

<table>
  <caption>Dinosaurs in the Jurassic period</caption>

  ...
</table>
  • <thead> 需要嵌套在 table 元素中，放置在头部的位置，因为它通常代表第一行，第一行中往往都是每列的标题，但是不是每种情况都是这样的。如果你使用了 / 元素，那么 <thead>元素就需要放在它们的下面。
  • <tfoot> 需要嵌套在 table 元素中，放置在底部 (页脚)的位置，一般是最后一行，往往是对前面所有行的总结，比如，你可以按照预想的方式将<tfoot>放在表格的底部，或者就放在 <thead> 的下面。(浏览器仍将它呈现在表格的底部)
  • <tbody> 需要嵌套在 table 元素中，放置在 <thead>的下面或者是 <tfoot> 的下面，这取决于你如何设计你的结构。(<tfoot>放在<thead>下面也可以生效.)

注意: <tbody> 总是包含在每个表中，如果你没有在代码中指定它，那就是隐式的。可以来验证一下，打开一个你之前没有包含 <tbody> 的例子，然后在你的 browser developer tools 中观察你的代码，你会看到浏览器为你添加了这个标签。你也许会想问，为什么你应该在所有表中都需要这个元素，因为它可以让你更好地控制表格结构和样式。

表格可以嵌套，虽然通常不建议

为了帮助屏幕阅读器，赋予行，列标题scole属性

<th scope="col">Purchase</th>
<th scope="row">Haircut</th>

<th colspan="3" scope="colgroup">Clothes</th>

colgroup和rowgroup结合colspan和rowspan使用

也可以用这个精细但是很麻烦的id+headers

<thead>
  <tr>
    <th id="purchase">Purchase</th>
    <th id="location">Location</th>
    <th id="date">Date</th>
    <th id="evaluation">Evaluation</th>
    <th id="cost">Cost (€)</th>
  </tr>
</thead>
<tbody>
<tr>
  <th id="haircut">Haircut</th>
  <td headers="location haircut">Hairdresser</td>
  <td headers="date haircut">12/09</td>
  <td headers="evaluation haircut">Great idea</td>
  <td headers="cost haircut">30</td>
</tr>

  ...

</tbody>

以后再看

这些内容有一丢丢难

配置CSP指令

CSP代表**内容安全策略*，它提供一组HTTP标头（由web服务器发送时与元数据一起发送的元数据），旨在提高HTML文档的安全性。在<iframe>s安全性方面，您可以将服务器配置为发送适当的X-Frame-Options 标题。*这样做可以防止其他网站在其网页中嵌入您的内容（这将导致点击和一系列其他攻击），正如我们之前看到的那样，MDN开发人员已经做了这些工作。

添加字幕

添加字幕操作

嵌入

object>元素的功能不同于iframe>`—— 这些元素是用来嵌入多种类型的外部内容的通用嵌入工具，其中包括像Java小程序和Flash，PDF（可在浏览器中显示为一个PDF插件）这样的插件技术，甚至像视频，SVG和图像的内容！

注意：插件是一种对浏览器原生无法读取的内容提供访问权限的软件。

然而，您不太可能使用这些元素 - Applet几年来一直没有被使用；由于许多原因，Flash不再受欢迎（见下面的插件案例）；PDF更倾向于被链接而不是被嵌入；其他内容，如图像和视频都有更优秀、更容易元素来处理。插件和这些嵌入方法真的是一种传统技术，我们提及它们主要是为了以防您在某些情况下遇到问题，比如内部网或企业项目等。

如果您发现自己需要嵌入插件内容，那么您至少需要一些这样的信息：

| | `` | `` |
| :———————————————————– | :———————————————————– |
| 嵌入内容的网址 | src |
| 嵌入内容的准确媒体类型 | type |
| 由插件控制的框的高度和宽度（以CSS像素为单位） | height width |
| 名称和值，将插件作为参数提供 | 具有这些名称和值的ad hoc属性 |
| 独立的HTML内容作为不可用资源的回退 | 不支持（<noembed>已过时） |

注意：<object>需要data属性，type属性或两者。如果您同时使用这两个，您也可以使用该typemustmatch属性（仅在Firefox中实现，在本文中）。typemustmatch保持嵌入文件不运行，除非type属性提供正确的媒体类型。typemustmatch因此，当您嵌入来自不同来源的内容（可以防止攻击者通过插件运行任意脚本）时，可以赋予重要的安全优势。

SVG元素参考

See also

响应者适应模式

文章作者: Darren
文章链接: https://darren-dong.com/2021/03/11/html-mdn/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Darren !
html
赏
评论
  目录