Web前端工程师修炼之道（第五版）HTML

小七_雪球
305 阅读45分钟
  • 书籍名称：Web前端工程师修炼之道（第五版）
  • 配套学习网站：learningwebdesign.com

第一部分 开始起步

第1章 Web设计入门

1. 网站建设服务

提供模板和拖放界面，可以很容易地建构一个不需要任何代码知识的网站

2. 万维网联盟（简称W3C）

W3C网站：www.w3.org

3. 文件管理和传输工具

FTP程序，例如：

第2章 Web是如何工作的

1. 网页地址（URL）

  • 完整的URL通常由三部分组成：协议、网站名称以及文档或资源的绝对路径
  • W3C和开发社区正在把术语URL（统一资源定位符）转为更通用和技术上更准确的URI（统一资源标识符）。
  • 这是URL和URI之间的细微差别：URL是URI的一种类型，其通过位置（URL中的L）来标识资源。另一种类型的URI是URN，其通过名称或命名空间（URN中的N）来标识资源。

2. HTTP状态码

  • 200　OK
  • 301　Moved Permanently
  • 302　Moved Temporarily
  • 404　Not Found
  • 410　Gone（no longer available）
  • 500　Internal Server Error

第3章 Web设计基本概念

1. 逐步提高是一种应对未知浏览器功能的策略

2. 自适应Web设计是一种处理未知屏幕大小的策略

3. 提高网站的性能的办法

可以分为两大类：限制文件大小、减少服务器的请求数量

4. 测试网站性能工具：

第二部分 HTML结构

第4章 创建简单网页

1. HTML文档结构化

HTML的目的是给内容增添意义和结构

2. 文档验证器 html5.validator.nu

3. 文档基本结构元素

元素描述
body指明文档中包含内容的主体部分
head确认文档的头部，包含文档本身的信息
html根元素，包含所有其他元素
meta提供文档的信息
title设置网页标题

第5章 标记文本

1. 块级元素

元素描述
p段落元素，拒绝裸文本
h1~h6标题元素
hr主题中断，一个水平规则
列表
---
ul li(列表项)无序列表，信息无序显示
ol li有序列表，信息按重要程度显示，ol元素中的start属性可以指定列表的起始数值，reversed属性按相反的顺序给列表编号；li里的value属性表明该元素在列表中的序号，对ul、dl无效
dl dt(名称) dd(值)定义列表，信息由名/值对组成
blockquote长引用，冗长的块级引用
pre预格式化文本，保留源文档中的空格回车等
figure figcaption独立的流内容，用于给文本添加图像，或者阐明某些内容，为figure提供文本标题，使用figcaption比p在语义上更丰富

1.1. 对老版浏览器不识别HTML5的处理

  • 当前几乎所有的浏览器都支持HTML5的新语义元素，对于无法支持的浏览器，就需要创建一个样式表规则来告诉它把这些元素当作一个块级的元素来处理，这样浏览器便会支持 section, article, nav, aside, header, footer, main{ display: block; }
  • IE8及更早版本的浏览器不仅无法识别HTML5元素，包括figure和figcaption元素，也无法使用任何样式，解决办法是使用JavaScript来创建每个元素，使IE浏览器知道它的存在并允许嵌套和样式，如创建section元素：documentcreateElement("section");
  • 幸运的是，Remy Sharp创建了一个脚本，可以在自己文档中指向这个脚本，这个脚本也是Modernizr polyfill脚本的一部分，Modernizr polyfill脚本可以将HTML5和CSS3功能添加到老版的浏览器中。
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

1.2. HTML5规范中的注意事项

  • W3C HTML5规范规定，页面应该只有一个main区段，并且不应该嵌套在article、aside、header、footer或nav中，这样做会导致文档无效。
  • 对于IE11及更早版本，需要使用JavaScript创建元素，并使用样式表将其显示设置成块，MS Edge支持main
  • header和footer元素不允许包含嵌套的header和footer元素
  • section和article元素很容易混淆，尤其是因为它们可以互相嵌套，但要记住，如果内容是独立于文档的其他部分，可以在其他地方使用，最好标记为article
  • HTML5规范建议，如果对元素进行分组的目的只是提供一个样式挂钩，那么应该使用泛型div元素

1.3. HTML5新增元素

元素描述
main主内容，页面或应用程序的主要内容区域
header页眉，页面、章节或文章的介绍材料
footer页脚，页面、章节或文章的页脚
section区段，主题内容组
article文章，独立的、可重复使用的组合
aside无关或者互补元素，主要在侧栏使用
nav导航，主要的导航链接
address地址，联系信息

2. 文档大纲

  • 浏览器查看文档中的标记，并根据内容中的标题生成层次结构大纲，遇到新的标题级别时，会向大纲添加一个新的区段，这是旧的HTML版本中创建大纲的唯一方法。
  • HTML5引入一个新的大纲算法，通过插入一个section元素，作者可以明确的向大纲添加一个新的区段。除了article、section、aside、nav四个区段元素，规范还将一些元素（blockquote、filedset、figure、dialog、details、td）定义为区段根，这些元素中的标题不会称为整个文档大纲的一部分，但目前为止没有浏览器能实现它，并不太可能实现。W3C保留了区段元素及其规范中的预期行为，但现在建议坚持使用旧的分层标题方法。

3. 内联元素

元素描述
em强调文本、强调重点
strong重要文本
a超链接
abbr缩写
b引起视觉注意，如关键字（粗体）
bdi指示可能有方向性需求的文本
bdo双向重写，显示指示文本方向（由左到右ltr、从右到左rtl）
br换行
cite引用，可以引用某个标题
code计算机代码示例
data机器可读的日期、时间、权重和其他测量值
del删除文本，表明是对文档的编辑
dfn术语的定义示例或者第一次出现
i替代语音（斜体）或替代语言
ins插入文本
kbd键盘，由用户输入的文本（技术文档使用）
mark前后相关的文本
q短的内联引用
ruby、rt、rq使用东亚文本和文字提供解释或发音帮助
s不正确的文本（加删除线）
samp程序的示例输出
small小字显示，如法律或者版权提示
span泛型分段内容
sub下标
sup上标
time机器可读的时间数据
u表示要加下划线的正式名称、拼错的单词或文本
var变量或程序参数（技术文档使用）
wbr单词换行

3.1. b、i、u、s、small（粗体、斜体、下划线、删除线、较小的文字）有新的语义

它们帮助我们思考屏幕阅读器如何阅读文本，如果不想让这个词以一种响亮、强调的预期读，但它确实应该是粗体的，那么b可能比strong更合适

  • <b></b> 关键字、产品名称和其他短语，需要在不增加重要性文字的情况下突出显示。CSS属性：font-weight: bold;
  • <i></i> 表示该文本与周围的文本不同，存在不同的声音或语气，比如，其他语言的一个短语，一个技术术语，或者一种思想。CSS属性：font-style: italic;
  • <s></s> 表示该文本不正确。CSS属性：text-decoration: line-through;
  • <u></u> 在某些实例中，下划线是有语义含义的，比如，在中文的正式名字下加下划线，或者拼写检查后，在拼写错的词下加下划线。注意，下划线文本容易与链接地址混淆，除了一些必要情况，应该避免使用。CSS属性：text-decoration: underline;
  • <small></small> 表示是主内容的附录或者侧栏提示，比如，文档底部合法的“小字显示”。CSS属性：font-size: 80%;

3.2. 短引用

<q></q> 标记短引用，比如，文本流中的“To be or not to be”。根据HTML规范，浏览器应该在q元素两侧自动添加引号，这样就不需要在源文档中使用引号了。有些浏览器（比如Firefox）会显示弯曲的引号，这是首选。其他的（Safari和Chrome）则将它们显示为直引号。

3.3. 缩写和首字母简写

  • <abbr></abbr> 可以给搜索引擎、屏幕阅读器和其他设备提供有用的信息。title属性可以用于缩写。
  • 缩写是将以句点结束的单词（如将“Connecticut”简写为“Conn.”）缩短。<abbr title="Points">pts.</abbr>
  • 首字母简写是由短语中单词的首字母组成的缩写形式（如NASA或者USA）。<abbr title="American Type Founders">ATF</abbr>

3.4. 引用

<cite></cite> 用于表示对其他文档的引用，如书、杂志、文章标题等。引用默认以斜体显示。

3.5. 定义术语

<dfn></dfn> 在出版界，单词或术语的第一次出现和定义实例，经常会以特殊的风格标示。在HTML中，可以用dfn元素标识它们，使用样式表在视觉上格式化它们。

3.6. 程序代码元素，用于描述技术文档中的一部分

  • <code></code> 代码，通常默认显示为等宽字体
  • <var></var> 变量，通常显示为斜体
  • <samp></samp> 程序示例，通常默认显示为等宽字体
  • <kbd></kbd> 用户键盘输入，通常默认显示为等宽字体

3.7. 下标和上标

可以将选中的文字以小一点的尺寸显示在基线下方或者上方。这些元素对于指明化学式或者数学式是很有用的。

  • <sub></sub> 下标
  • <sup></sup> 上标

3.8. 突出显示的文本

<mark></mark> 前后相关的文本，表示一个字可能被认为与读者特别有关。有人可能会使用它在结果页面中动态突出搜索项，或者引起对文本的注意，或者表明当前页面都属于一个系列。一些设计师（和浏览器）会给标记文本浅色背景，就像是用荧光笔标记的。

3.9. 日期和时间

  • <time></time> 时间数据
  • time元素可以用方便人舒适阅读的格式来标记日期和时间，而且也会用方便计算机使用的标准化的方式来进行编码。元素的内容给人提供信息，datetime属性会以机器可读的方式呈现相同的信息。
  • time元素不可用来标记那些无法确定精确时间或日期的时间，例如“去年年底”或“世纪之交”。
  • time元素显示日期、时间或日期-时间组合。它可能用来传递日期和时间信息到应用程序，比如，把日期和时间信息保存到个人日历事件中。它可能会被搜索引擎用于查找近期公布的文章。或者，它可能用来重新设计时间信息的格式（例如，将18：00改成6 p.m.）。
  • datetime属性以标准时间格式来指定日期或时间的信息，如图5-14所示。完整的时间格式以日期开始（年-月-日）。时间部分以字母“T”开头，并列出小时（24小时制）、分钟、秒（可选）以及毫秒（也可选）。最后，对于时区，由符号-或+后的数字来表示落后或领先格林尼治标准时间（GMT）多少小时。例如，“-05：00”表示，这是东部标准时区，比GMT落后5小时。当只识别日期和时间时，可以省略其他部分。 image.png
  • 你也可以使用不带datetime属性的time元素，但其内容必须是有效的日期/时间字符串：<time>2016-06-19</time>
  • 几个datetime有效值的例子:
    • 仅时间 <time datetime="21:30">9:30p.m.</time>
    • 仅日期 <time datetime="2016-06-19">June 19, 2016</time>
    • 日期和时间 <time datetime="1970-09-05T01:11:00">Sept. 5, 1970, 1:11a.m.</time>
    • 带有时区信息的日期和时间 <time datetime="2015-07-19T08:00:00-05:00">July 19, 2015, 8am,Providence RI</time>

3.10. 机器可读的信息

<data></data> 机器可读的数据，另一个帮助计算机理解内容的工具，它可以用于各种类型的数据，包括日期、时间、计量、权重、微数据等。它使用value属性提供机器可读的信息<data value="12">Twelve</data> <data value="978-1-449-39319-9">CSS: The Definitive Guide</data>

3.11. 插入和删除文本

  • <ins></ins> 插入的文本
  • <del></del> 删除的文本
  • 用来标记一个文档的编辑部分，即那些插入或者删除的部分。这两个元素依靠样式规则来显示（即，默认情况下没有可依赖的浏览器）。ins和del元素都可以包含内联或者块元素，这取决于它们包含的是什么样的内容。Chief Executive Officer: <del title="retired">Peter Pan</del><ins>Pippi Longstocking</ins>

3.12. 单词换行

<wbr> 单词换行，标记一个单词合适的换行位置（规范里说的是“单词换行时机”），其通常用在没有足够的空间来容纳整个单词的时候。它消除了浏览器的一些猜测，并允许作者控制将单词分成两行的最佳位置。如果有足够的空间，那么这个单词就会保持完整。如果没有足够的空间，整个单词就会换行。注意，当单词分为两行时，浏览器不会添加连字符。

<p>The biggest word you've ever heard and this is how it goes: 
<em>supercali<wbr>fragilistic<wbr>expialidocious</em>!</p>

image.png

  • 任何版本的Internet Explorer都不支持wbr元素；而MS Edge支持。

4. 泛型元素div和span

  • 使用div分区，来创建页面元素或者内容的逻辑分组。它表明它们同属于一个概念单元或应被CSS或JavaScript视为一个单元。
  • 使用span定义短语，用于不引入换行的短语元素。因为span是内联元素，所以可能只包含文本和其他内联元素（换句话说，不能将标题、列表、内容分组元素等放入span）。

5. id和class属性

  • id和class值，在HTML5中必须包含一个字符（也就是说，它们不能为空），也可能不包含任何空白字符。你可以在值中使用几乎任何字符。
  • id标识符，用于给文档中的元素指派一个唯一的标识符。换句话说，id的值在文档中必须只能使用一次。
  • class分类符，用于组合相似的元素；因此，不同于id属性，多个元素可以共用一个class名。

6. 全局属性

HTML5定义了一组可用于每个HTML元素的属性。它们被称为全局属性：

属性值描述
accesskey单个文本字符给链接分配访问密钥（快捷键命令）。也用于表单字段
class文本字符串为元素分配一个或多个分类名称
contenteditabletrue｜false用户是否可编辑元素，默认继承父元素
dirltr｜rtl｜auto制定元素的内联文本方向，设置为auto，则使用第一个字母来确定方向
draggabletrue｜false元素在UI中是否可拖拽
hidden隐藏部分中的任何脚本或表单控件仍将执行，但不会呈现给用户
id文本字符串，可能不包含空格为元素分配唯一的标识名称
langISO语言代码制定元素内容及其属性的主要语言，若省略则与父元素相同
spellchecktrue｜false指示是否要检查元素的拼写和语法，如省略，可能继承
style分号分隔的样式规则列表将样式信息与元素关联
tabindex数字指示元素是可聚焦的，并指定其在当前文档的制表顺序中的位置。
title文本字符串提供关于元素的标题或咨询信息，通常显示为工具提示。若为指定，则继承自最近的带有标题的祖先
translateyes｜no指定是否对元素的属性值及其text节点子节点的值进行翻译，或者是否保持这些值不变。若未指定，则继承自父元素

7. 区段元素与ARIA路标角色的配对方式如下：

  • <nav role="navigation">
  • <header role="banner"> 当header只应用于整个页面，而不只是一个区段或文章时，将使用banner角色
  • <main role="main">
  • <aside role="complementary">
  • <footer role="contentinfo">

8. 字符转义，有两种方法可用于引用（转义）特殊字符：

  • 使用预定义的字符名简写（称为命名实体）
  • 使用指派的数值，该值对应于其在编码字符集（数值实体）中的位置。数值可以是十进制或十六进制格式
字符实体名十进制数十六进制数
<&lt;&#060;&#x3C;
>&gt;&#062;&#x3E;
"&quot;&#034;&#x22;
'&apos;&#039;&#x27;
&&amp;&#038;&#x26;

9. 不可见字符及其字符引用

  • 不中断空格 &nbsp;的用途
    • 用于确保行不会在两个单词之间中断。比如：Jennifer&nbsp;Robbins姓名将始终保持在一行上
    • 另一个用途是将一长串数字分开，比如32 000 000
描述实体名十进制数十六进制数
不中断空格&nbsp;&#160;&#xA0;
En空格&ensp;&#8194;&#x2002;
Em空格&emsp;&#8195;&#x2003;
零宽度空格&#8203;&#x200B;
零宽度非连接符&zwnj;&#8204;&#x200C;
零宽度连接符&zwj;&#8205;&#x200D;

10. 特殊字符及其字符引用

字符描述实体名十进制数十六进制数
‘左单引号&lsquo;&#8216;&#x2018;
’右单引号&rsquo;&#8217;&#x2019;
“左双引号&ldquo;&#8220;&#x201C;
”右双引号&rdquo;&#8221;&#x201D;
…水平省略号&hellip;&#8230;&#x2026;
©️版权&copy;&#169;&#xA9;
®️注册商标&reg;&#174;&#xAE;
™️商标&trade;&#8482;&#x2026;
£英镑&pound;&#163;&#xA3;
¥元&yen;&#165;&#xA5;
€欧元&euro;&#8364;&#x20AC;
–段破折号&ndash;&#8211;&#x2013;
—长破折号&mdash;&#8212;&#x2014;

第6章 添加链接

1. 超文本链接，锚元素，anchor

  • <a href="url"></a> 可以将任意HTML内容元素放在锚中，使其成为链接
  • href 超文本引用

2. 两种指定url的方法

  • 绝对URL 当指向外部Web时使用，完整URL，包括协议、域名、路径名
  • 相对URL 当指向自己站点的另一个文档时使用，仅需要文件路径
    • 一般表示从当前文件所在目录出发
      • 直接写“文件名”，就是当前目录中的文件
      • 写“目录/文件名”就代表当前目录中的下一级目录里的文件
    • 写“../文件名”就代表上一级目录中的文件
    • 站点根目录相对路径名，在路径名开头使用“/”，表示根目录

3. 链接到网页中的指定点（有时称为链接到文档片段）

  1. 命名目的地 使用id属性给文档中的目标元素赋予唯一的名称，叫片段标识符
  2. 链接到目的地，设置href属性值为“#片段标识符” （#也叫哈希、英镑或编号符号，目的是标识链接目的地是文档片段而不是文件名）
  3. 在URL（绝对或相对）的结尾添加片段名称，就可以链接到另一文档中的片段

4. 使用HTML标记打开新窗口的办法

在a元素中使用target属性

  • <a href="url" target="_blank">内容</a> 为每个设置了target的链接都打开一个全新窗口
  • <a href="url" target="起个名字">内容</a> 每个链接都在名为“起个名字”的新窗口中打开，相当于重用这个新窗口，名字任意，不以下划线开头就可以

5. 邮件链接

在链接中使用mailto协议可以链接到一个电子邮件地址。点击链接，浏览器将打开一个新的邮件信息，并将地址改为mailto指定的地址，例如：<a href="mailto:alklecker@example.com">Contact Al Klecker</a>

  • <a href="mailto:name@address.com">Contact us</a>
  • 浏览器必须事先进行启动邮件程序的配置，所以这个效果并不是100%的用户都能体验到

请注意，将电子邮件地址放在文档源文件中会使其容易收到未经请求的垃圾邮件

  • 生成垃圾邮件列表的人有时使用自动搜索程序（称为机器人）在Web上搜索电子邮件地址。
  • 如果想让电子邮件地址显示在页面上，这样人类就能发现它，而机器人却不能，可以用一种人类仍然可以理解的方式，例如you[-at-]example[dot]com
  • 这个技巧在mailto链接中不起作用，因为必须将准确的电子邮件地址作为属性值提供。一种解决方案是使用JavaScript加密电子邮件地址。

6. 电话链接

在链接中使用tel协议，例如：<a href="tel:+01-800-555-1212">Call us free at (800) 555-1212</a>

  • 当手机用户点击链接时，会发生什么取决于具体设备。桌面浏览器可能会启动一个对话框来切换应用程序，也可能会忽略这个链接。
  • 如果不希望在桌面浏览器上出现任何中断，可以使用CSS规则来为非移动设备隐藏链接。

使用电话链接有一些非常好的实践经验：

  • 推荐包括完整的国际通用拨号形式，建议为tel：加上国际区号，包括国家代码。
  • 在内容链接里添加电话号码，如果链接不起作用，电话号码仍然可用。
  • Android和iPhone有一个电话号码功能，可检测电话号码并自动把它们变成链接。但是一些不是电话号码的10位数字也可能会变成链接。如果你的文档中存在可能被误认为电话号码的字符串，那么你可以通过在你的文档的头部包含如下所示的meta元素来关闭自动检测。这也将防止它们覆盖你应用于电话链接的任何样式。<meta name="format-detection" content="telephone=no">

第7章 添加图像

1. 图像格式简介(Web支持的格式)

  • 位图/光栅图 PNG、JPEG、GIF、WebP、JPEG-XR
  • 矢量图像 SVG

如果源图像是其他常见格式，如TIFF、BMP、EPS等，在使用之前必须将其转换成一种网页认可的形式。如果必须保持原有形式，则可以使用文件链接，将它作为可用的外部图像，如：<a href="architecture.eps">Get the drawing</a>

1.1. 使用正确的后缀来命名图像文件

  • .png、.jpg(或.jpeg)、.gif、.webp、.jxr
  • 此外，必须将服务器配置为能正确识别和服务这些不同的图像类型，现在所有的Web服务器软件都被配置为可以即时处理PNG、JPEG和GIF图像；但是如果要使用SVG或者较新的格式之一，可能需要将该媒体类型添加到服务器的官方列表中。
  • 图像文件以及任何可能驻留在服务器上的媒体文件，都有一个官方媒体类型（也称MIME类型）和后缀。例如：SVG的MIME类型为image/svg+xml，后缀为.svg、.svgz

2. img元素 需要src和alt属性

  • 图像会在文本流中，与文本的基准线对齐，而不会引起换行
  • 每个img引入的图像，浏览器都会发出独立的请求
  • src属性提供图像文件的位置（URL）
  • alt属性在图像无法显示时，提供显示用的替换文本，缺失alt属性的话，HTML文档不再是有效的。在不可访问或不可读的情况下，alt通过提供图像的描述信息提高易用性。
  • width属性，图像宽度尺寸，height属性，图像高度尺寸。可以用于在所有设备上以相同的固定尺寸显示的图像，例如徽标或图标，从而给浏览器一个布局提示

性能提示 利用缓存

  • 当浏览器下载图像时，会将文件存储在磁盘缓存中。当需要重新显示页面时，只需调出图像的本地副本。所以如果重复使用相同图像，确保每个img元素的src都指向相同URL，图像只下载一次，然后从缓存中调用以供后续使用，这意味着与服务器的通信量更少，而对用户显示速度更快。

3. 添加SVG图像

  • SVG是存储矢量图形的合适格式，矢量图形由数学上定义的形状和路径组成。所有的形状和路径及其属性都是用标准的SVG标记语言编写的。
  • SVG是XML（eXtensible Markup Language）的一个示例或应用程序
  • 对于某些位图图像类型，SVG具有显著的优势：
    • 通常需要更少的数据，意味着更快的下载速度和更好的性能
    • 可以根据需要在自适应布局中调整大小而不会损失质量
    • 能很好地与HTML/XML集成，并可以像HTML文件一样使用Gzip和Brotli等工具进行压缩
    • 可以是动画的
    • 可以使用层叠样式表更改它们的外观
    • 可以使用JavaScript添加交互性

3.1. 如何将SVG放入Web流中

  1. 嵌入img元素

    • 用.svg后缀保存的SVG文本文件（有时称为独立的SVG）可以被视为任何其他图像<img src="/images/circle.svg" alt="">
    • 优点：
      • 支持SVG的浏览器普遍支持它，出色的浏览器支持
      • 可以很好的作为GIF或PNG的简单替代品，简单和熟悉的标记
      • 图像缓存和可用的备份
    • 缺点：
      • 不能通过使用外部样式表将样式应用于SVG中的项目，但是.svg文件可以使用style元素包含自己的内部样式表，也可以将样式应用于img元素本身
      • 不能使用JavaScript操纵SVG中的元素，失去了交互性选项。web文档的脚本中不能看到svg的内容，svg文件中的脚本根本不能运行
      • 不能在svg中使用任何外部文件，如嵌入式图像或web字体
    • SVG服务器配置
      • 以Apache服务器上配置为例
      • 除了IE8及更早版本、Android3之前的版本外， 当代浏览器都支持嵌入img元素的SVG。

  2. HTML源代码中的内联

    • 示例：

      • image.png

    • 优点：

      • 允许开发人员充分利用SVG的特性（动画、脚本和应用CSS样式）。SVG的所有元素都是主DOM树的一部分。意味着可以使用JavaScript访问和操作SVG对象，以使其响应交互。
      • 可以很容易的对页面上和SVG图形中的元素应用相同样式
      • 良好的浏览器支持
      • 更少的服务器请求

    • 缺点：

      • SVG插图的代码可能会变得非常长和笨拙，导致HTML文档很大并难以阅读
      • 使网站的图像更难维护，因为它们隐藏在HTML文档中
      • 浏览器不会将内联SVG与HTML分开缓存，因此对于在许多HTML页面上重复使用的大型图像，要避免使用这种方法。

    • 浏览器支持

      • 除了IE8及更早版本、Safari5及更早版本、Android3之前的版本、iOS5之前的版本外，所有当代浏览器都支持了嵌入svg内联元素的SVG图像

  3. 嵌入object元素

    • 是img和内联SVG之间的一个很好的折中方案，允许一个功能完整的SVG仍然封装在一个单独的、可缓存的文件中

    • object元素具有自己的回退机制：如果无法显示用data指定的媒体，object中的任何内容都会显现。下面的例子中，如果.svg不被支持或加载失败，png图像将与img一起放置

      • image.png

    • 然而，有些浏览器会下载回退图像，即使它们支持SVG并且不需要该图像。解决方法是使回退图像称为一个空div容器中的css背景图像。

      • image.png

    • 优点：

      • SVG可以编写脚本并加载外部文件
      • SVG还可以使用脚本访问父HTML文档（带有一些安全限制）

    • 缺点：

      • 由于它是独立的文件，并且不是页面DOM的一部分，所以不能在HTML文档中使用样式表对SVG中的元素设置样式
      • 在浏览器中也可能有一些古怪行为，一定要进行彻底的测试

  4. 用作CSS的背景图像

    • 示例：
      • image.png
    • SVG回退：
      • 当需要兼容老版本的浏览器时，除了使用object元素中显示的回退内容特性外，另一个选项是使用picture元素代替使用SVG作为img元素的图像。
      • picutre元素可用于提供一个图像的不同格式的多个版本。每个版本都建议使用source元素
        • image.png
      • 如果浏览器不支持建议的源文件，或者不支持picture元素，用户将会看到通过原来的img元素提供的PNG图像

4. 自适应图像标记

  • 自适应图像的工作方式：你提供了多个图像，为不同的屏幕进行了尺寸的改变或裁剪，浏览器根据它对当前观看环境的了解选择最合适的图像。屏幕尺寸是一个因素、但分辨率、网络速度、缓存中已有的内容、用户首选项和其他考虑因素也可能涉及。自适应图像技术可以防止小屏幕上的浏览器下载超过其所需的图像数据，还包括在快速网络上提供高分辨率显示、为开发人员提供利用新的更有效的图像格式的方法等机制。
  • 自适应图像属性和元素处理以下四个基本场景：
    • 提供在高分辨率屏幕上看起来很清晰的超大图像
    • 提供一组不同尺寸的图像，用于不同的屏幕大小
    • 根据设备大小和方向提供不同细节的图像版本
    • 提供以更小的文件存储相同图像的替换图像格式

4.1. 高清显示器（x描述符）

  • 设备像素：也叫硬件像素/物理像素，组成屏幕本身的像素，是构成屏幕显示的彩色光方块
  • 屏幕分辨率：每英寸像素数（ppi），现在通常是109～160，之前是72～96
  • 设备像素比（dpr）：设备像素数与css像素数的比值，手持设备上常见的设备像素比为1.325x、1.5x、1.7x、2x、2.4x、3x、4x（x表示设备像素比的约定）
    • 由于设备像素越来越小，图像像素以及样式表中的像素如果一一对应，图像和文本会小的难以辨认，为了进行补偿，设备使用参考像素的测量法来进行布局。参考像素作为在样式表中使用的计量单位。
    • 参考像素：在iOS中也称为点（PT），在Android中称为设备独立像素（DP或DiP）或CSS像素。参考像素构成一个网格，设备使用它来布局屏幕上显示的内容，CSS像素可以由多个设备像素组成
  • srcset介绍
    • 为了只向有需要的浏览器提供更大的图像，可以使用srcset属性和img元素来实现
    • 该属性允许开发人员指定一个图像源选项列表，供浏览器选择。
    • srcset的值是一个以逗号分隔的选项列表，列表中的每一项都有两部分：图像的URL和指定目标设备像素比的x描述符。srcset="image-URL #x, image-URL #x"
    • src属性仍然是必须的，用于为不支持srcset的浏览器指定默认的1x图像<img src="image-URL" alt="" srcset="image-URL #x, image-URL #x">识别srcset属性的浏览器会检查屏幕分辨率，并下载其认为最合适的图像
  • 何时使用x描述符
    • x描述符告诉浏览器只根据屏幕分辨率进行选择，不考虑屏幕或视图的大小。因此x选择器最适用于保持相同像素尺寸的图像，例如徽标、社交媒体图标或其他固定宽度的图像。
    • x描述符用于定位高分辨率监视器的屏幕分辨率

4.2. 可变宽度图像（w描述符）

  • 希望图像大小根据浏览器视窗的大小而改变，可以使用img元素带有的srcset和sizes属性
  • w描述符提供了图像文件的实际大小，浏览器使用该文件根据视窗宽度作出最佳选择。
  • srcset属性提供的选项列表中每一项使用w描述符来提供每个图像的实际像素宽度
    • image.png
  • sizes属性，使用宽度描述符时，sizes属性是必须的
    • sizes属性最常用的单位是视窗宽度（vw），还可以使用em、px和其他一些CSS单位，但不能使用百分比。下例中，不管设备尺寸如何，图像都将以100%的视窗宽度填充。image.png
    • sizes属性也可以为不同的设备宽度调整图像的大小。sizes值是一个逗号分隔的列表，其中每项都有两部分：第一部分是媒体条件，用圆括号括起来；第二部分表示如果满足媒体条件，图像在布局中所占的宽度。image.png
    • sizes属性将调整图像的大小，即使没有应用CSS。如果指定图像大小的CSS规则与sizes属性的值冲突，则样式规则获胜。
  • 不支持srcset和sizes的浏览器只使用src属性中指定的图像

4.3. 艺术方向（picture元素）

  • 当仅调整图像的大小还不够时，使用picture元素，这个场景称为基于艺术方向的选择。
  • picture元素没有属性，只是一些source元素和一个img元素的包装器。
  • img元素是必须的，并且必须是列表中的最后一个元素，因为它实际上是页面上放置图像的那部分。
  • image.png
  • img元素中指定的图片将用于不能识别picture和source的浏览器
  • 每个source元素都包含了一个media属性和一个srcset属性，还可以使用sizes属性。
    • media：提供了一个用于检查当前浏览器条件的媒体查询。指定了一个功能完整的CSS媒体查询
    • srcset：如果媒体查询匹配，srcset提供图像的URL，可以是一个图像，也可以是用逗号分隔的列表，根据需要使用x描述符或w描述符提供多个选项
  • 浏览器从第一个匹配当前条件的source下载图像，srcset属性中提供的URL将传递给img元素中的src属性，所以img元素是必须的，同时其中的alt属性也是必须的，但是source元素不允许有alt属性。

4.4. 替换图像格式（type属性）

  • 为了减小图像文件的大小，出现了更有效的图像格式，如果WebP、JPEG 2000、JPEG XR等，但有些浏览器支持，有些不支持这些新格式。我们可以使用picture元素向支持的浏览器提供新格式，向不支持的提供标准格式
  • image.png
  • 对于图像格式的选择，每个source元素都有两个属性：srcset、type
    • type：用于指定文件类型（也称为其MIME类型）
  • 同样，浏览器使用与浏览器的图像支持相匹配的第一个源文件中的图像，因此按照文件尺寸寸小到大的顺序排序它们是有意义的。

5. 文件（MIME）类型

  • 每个文件格式都有一个标准化类型、标识特定格式的子类型、一个或多个文件扩展名。
    • image/WebP (.webp)
    • image/jpeg (.jpg、.jpeg)
    • video/mpeg (.mpg、.mpe、.mpeg、.m1v、.mp2、.mp3、.mpa)
    • application/pdf (.pdf)
  • 已注册的MIME类型的完整列表 www.iana.org/assignments…

6. 浏览器支持提示

CanIUse.com 是一个很好的工具，可以用来检查浏览器对HTML、CSS和其他前端Web技术的支持情况

第8章 表格标记

1. 最小表结构

  • table表格元素
  • tr行元素
  • th td单元格元素，th代表表头信息，td代表表格数据

2. 列合并

使用th或td元素中的colspan属性

3. 行合并

使用th或td元素中的rowspan属性

4. 表格可访问性

caption元素描述表的内容，使用时，必须是table元素中的第一个元素，对于较长的描述，可以考虑将该表放在一个figure元素中，并使用figcaption元素进行描述。

5. 连接单元格和表头

  • th元素的scope属性，将表头与其用row、column、rowgroup、colgroup表示的行、列、行组或列组明确地关联在一起。image.png
  • td/th元素的headers属性搭配th元素的id属性，可以明确的将td绑定到一个表头中。解决合并单元格信息不明确的情况。image.png
  • 不幸的是，对id/headers特性的支持是不可靠的，推荐最佳实践是使用简单的scope属性创建表

6. 行组元素，只能包含一个或多个tr元素

  • thead标题行组，应该首先出现
  • tbody体行组，然后是任意数量的tbody
  • tfoot页脚行组，最后是一个可选的tfoot
  • 一些用户代理（浏览器的另一个称呼）可能会在跨多个页面的表上重复页眉和页脚行，作者还可以使用这些元素将样式应用于表的不同区域

7. 列组元素

  • colgroup元素，可以对列进行语义分组，并分配id和class值。其中的span属性指定colgroup表示的列数。注意：colgroup元素不包含任何内容，它们只提供语义相关的列结构的标识。image.png
  • col元素，也可以有span属性，如果需要访问colgroup中各个列以进行脚本编写或样式化，使用col元素可以标识它们，当colgroup元素包含col元素时，colgroup不能有span属性。空col元素用作脚本或样式的句柄，但不是必须的。image.png

8. HTML5表格规范

根据HTML5规范，一个table元素可能包含以下顺序:

  • 一个可选的caption元素
  • 0个或多个colgroup元素
  • 可选的thead元素
  • 0个或多个tbod元素/1个或多个tr元素
  • 可选的tfoot元素

第9章 表单

1. 表单元素

  • form元素，用来将表单添加到网页中，是所有表单内容的容器，包括很多表单控件，如文本输入域、按钮。可能还包含块元素，如h1、p、列表。但不能包含其他的form元素
  • from元素的一些属性，在与服务器上表单处理程序交互时很有必要
    • action 属性，提供用于处理表单的程序或脚本的位置（URL）；有时在HTML文件中有嵌入的PHP表单处理代码，这时如果将action设为空，那么表单将自己展示在网页上。
      • 网页表单可能使用以下某种技术处理：
      • .php一种开源的脚本语言，最常用于Apache Web服务器
      • .asp微软的一种编程环境，在微软互联网信息服务器（IIS）上运行
      • .aspx一种新的微软语言，旨在与PHP竞争
      • Ruby编程语言，用于Rails平台
      • .jsp一种基于Java的技术，与ASP类似
      • Python一个用于Web和服务器程序的流行的脚本语言
    • method属性，指定信息将如何发送到服务器，只有两种方法可以用method来指定（POST、GET），如果省略该属性，将默认为GET
      • GET使用GET方法，编码后的表单数据附加到URL中，并发送到服务器，?标记符将URL和后面的数据分开：http://www.bandname.com/mailinglist.php?name=Sally+Strongarm&email=strongarm%40example.com
      • POST当使用POST方法时，浏览器发送独立的服务器请求，请求包括一些特殊的报头和后面的数据。理论上只有服务器才能看到请求的内容，因此，POST是发送保护信息的最好方法。发送大量数据时，POST方法也是更好的，因为没有GET中的字符长度限制问题

2. 表单控件

  • 所有表单控件（submit和reset按钮除外）都必须包含一个name属性
  • name属性表示表单控件的变量名，表单控件收集的内容就是该变量的值。所有的表单控件元素必须包含一个name属性，这样表单处理程序可以将信息分门别类。submit和reset按钮中name属性不是必须的，因为它们有特殊的功能，与数据收集无关。

2.1. 文本输入控件

  • 单行文本域<input type="text">
    • name属性用来识别变量名
    • value属性的值作为变量值提交给服务器
    • placeholder提示该处输入什么，该值不随表单一起提交，纯粹是用户界面增强。IE11前的版本、较旧的Android都不支持placeholder
    • maxlength minlength设置输入的最大和最小字符数
    • size使用可见字符的数量指定输入字段的长度，然而，更应该使用样式表设置输入区域的大小。默认情况下，可显示长度为20个字符
  • 多行文本输入域<textarea></textarea>
    • textarea元素的开始和结束标签之间的内容在表单显示时会显示在文本框中，表单被提交时也将作为变量值被发送到服务器
    • disabled readonly禁用和只读属性，最重要的区别是表单提交时，会提交readonly字段，不会提交disabled字段
    • rows cols提供一种用于限定textarea大小的方法，虽然常用CSS来指定区域的宽度。如果用户输入的文本超出所分配的空间，那么就会出现滚动条。
    • wrap指定在提交表单时是否保留软换行符（文本在框的边缘自然换行），默认值为“soft”，表示不保留。“hard”表示保留
    • maxlength minlength
    • placeholder
  • 专用的文本输入域
    • 密码输入域<input type="password">
    • 查找输入域<input type="search">
    • 电子邮件输入域<input type="email">
    • 电话号码输入域<input type="tel">
    • URL输入域<input type="url">
  • 下拉建议，浏览器的支持较差，但即使不支持，也只会显示一个简单的文本输入
    • 为任何类型的文本输入都可以提供一个包含建议值的下拉菜单，使用datalist元素实现，建议值包含在option元素中，使用input元素中的list属性与相应的datalist的id关联起来image.png 效果就是下面这样image.png

2.2. 提交和重置按钮，可以使用value属性来更改按钮上的默认文字

  • 提交按钮<input type="submit">，点击时，立即将收集到的表单数据发送给服务器处理
  • 重置按钮<input type="reset">，将所有表单控件返回到它们刚载入时的状态

2.3. 还有几个不太常见的按钮

  • image按钮<input type="image">，允许用自己选择的图像替换“提交”按钮，图像显示为平面，不过这种类型的按钮存在访问性的问题，需要包含一个精心的选择alt值
  • 自定义输入按钮<input type="button">，创建一个可以用JavaScript自定义的按钮，与submit或reset按钮不同，它本身没有预定义的功能；
  • <button></button>button元素是一个灵活的元素，用于创建类似于自定义输入按钮的按钮，button元素的内容（文本或图像）将显示在按钮上。

2.4. 单选和复选框按钮

  • 单选按钮<input type="radio">
    • name属性是必须的，而且在绑定多个单选输入中扮演很重要的角色，当一些单选按钮有相同的name值时，它们就形成了一群互斥的选项
    • checked属性添加到其中时，表示该选项默认被选中
  • 复选框按钮<input type="checkbox">
    • name当一些复选框有相同的name值时，就创建了一个复选框组
    • checked属性，使用checked属性使它们在加载表单时预先选中。

2.5. 菜单

  • select option optgroup
  • 下拉菜单
    • 当select元素没有指定size属性，或者size属性设置为1时，默认显示为下拉菜单，这个菜单中只能选择一项。
    • select元素中包含一系列的option元素，当表单提交时，被选中的option元素的值将被传递到Web程序，如果提供了value属性，则传递的是value中的值，如果没有则传递的是option标签之间的内容
  • 滚动菜单
    • 使用size属性，指定想看到的行数，就可以使用菜单显示为滚动列表
    • multiple属性允许用户从滚动列表中选中多项。注意：下拉菜单不允许选中多个。当使用multiple属性时，就会默认自动显示一个小的滚动菜单
    • 其中的option元素使用selected属性时，这个选项称为菜单控件的默认值，被选中的选项会高亮显示
  • 组合菜单选项
    • 可以使用optgroup元素创建概念上的选项组，元素中必须使用label属性为选项组提供标题

2.6. 文件选择控件

  • <input type="file">使用户能够选择硬盘中的文档，并随数据一起提交
  • 如果表单包含一个文件选择输入元素，那么必须指定表单的编码方式(enctype)为multipart/form-data，而且使用POST方法。<form action="" enctype="multipart/form-data" method="POST">
  • 文件输入类型有几个属性。
    • accept向浏览器提示可以接受哪些文件类型
    • multiple允许选择多个文件进行上传
    • required要求必须选择一个文件

2.7. 隐藏控件

<input type="hidden">在表单提交时会发送name/value数据，在表单显示于浏览器上时不可见

2.8. 日期和时间控件（h5新引进的6个输入类型）

  • 日期输入控件<input type="date">
  • 时间输入控件<input type="time">
  • 日期/时间控件<input type="datetimelocal">
  • 指定一年中的一个月<input type="month">
  • 指定一年中的特定一周<input type="week">

2.9. 数字输入

  • 数字输入<input type="number">
  • 滑块输入<input type="range">
  • 这两种类型接受min和max属性来指定最小和最大允许值，允许使用负值；step属性允许开发人员指定数字输入时可接受的增量，默认值是1，可以设置为0.5、10等任何数值增量

2.10. 颜色选择器

<input type="color">

2.11. html5还引入了以下元素

  • <progress></progress>为用户提供了持续状态的进展信息，需要脚本才能运行
  • <meter></meter>代表在一个已知范围内的测量值，有一些属性min：默认0、max：默认100、low、high：可以在不希望的水平触发警告、optimum：指定首选值
  • <output></output>表示脚本或程序的计算结果

3. 表单可访问性功能

  • <label></label>将信息附加到表单控件，使用label元素将标签与相应表单域联系在一起，为使用基于语音的浏览器用户提供了重要环境。而且，更重要的是，用户可以单击或点击label上面的任何位置来选择或聚焦表单控件。使用它有两种方式：
    • 隐式关联：在一个label元素中嵌套表单控件和它的描述<label><input type="radio" name="agree" value="yes">yes</label>
    • 显示关联：将标签与控件的id引用相匹配，for属性指明标签属于哪个控件<label for="form-pwd">Password:</label> <input type="password" name="pwd" id="form-pwd">
  • <fieldset></fieldset>字段集，该元素表示表单控件的逻辑组，一个fieldset可能还包括legend元素，用其提供一些说明
  • <legend></legend>图例，独特之处在于它们的文本不会自动换行，解决方案是在其中放入一个span或b元素，并在不牺牲可访问性的情况下控制所包含元素的表示

第10章 嵌入式媒体

1. iframe

用于查看外部HTML源代码的窗口，窗口中的窗口

  • iframe又叫内联框架，允许你在文档中嵌入单独的HTML文档或其他Web资源。

2. object、embed，多用途嵌入元素，多用途嵌入器

  • object元素是一个多用途的对象放置器，可以用来放置图像，创建嵌套的浏览上下文，或者嵌入必须由插件处理的资源。object元素使用data属性指向资源，type属性提供其MIME类型，而object元素标签中的任何内容都将作为不支持嵌入式资源类型的浏览器的备份。object的其他属性是可选的，根据它放置的媒体类型而变化，param属性用于设置特定于该类型媒体的参数。image.png
  • embed元素只用于插件，通常被用作支持非常旧的浏览器版本时的一种备份

3. video、audio，视频和音频播放器

各浏览器对视频音频的支持格式没有统一

  • API（应用程序编程接口）
    • 是一组标准化的命令、数据名、属性、操作等，它允许一个软件应用程序与另一个软件应用程序通信。HTML5引入了许多API，为浏览器提供了可编程的特性，而这些特性以前只能通过第三方插件才能实现
  • 在页面中添加视频
    • 如果你确切地知道用户将使用什么浏览器，这种情况下可以使用video标签中的src属性提供一种视频格式image.png
    • 不支持视频的浏览器显示video元素中提供的任何内容
    • width、height属性指定嵌入式媒体播放器在屏幕上占用的框的大小
    • poster属性提供播放前显示在视频位置的图像的位置
    • controls属性会提示浏览器显示其内置的媒体控件、播放/暂停按钮、允许移动到视频中某个位置的“搜索器”和音量控件
    • autoplay使视频在下载了足够多的媒体文件后自动开始播放。
    • loop属性使视频在完成后再次播放
  • 提供视频格式选项
    • video元素中一系列source元素指向每个视频文件。浏览器向下查看列表，直到找到支持的版本，并只下载该版本。image.png
  • 向页面添加音频
    • audio元素使用与video元素相同的属性，但没有widht、height、poster等属性。也可以使用source元素提供音频格式选项的堆栈
  • 添加文本曲目<track></track>
    • track元素提供了一种添加与视频或音频曲目的时间线同步的文本的方法
    • track元素必须在所有source元素之后，并且可能包含以下属性：
    • src指向文本文件
    • kind指向要提供的文本注释的类型
    • label提供可在界面中用于选定特定曲目的名称
    • default将特定的曲目标记为默认曲目

4. canvas

可编写脚本的绘图区域，可用于动画或类似游戏的交互性

  • canvas绘制区域是基于栅格的，这意味着它是由像素网格组成的。
  • <canvas></canvas>添加一个二维动态绘图区域，并可以指定width和height属性。对于不支持canvas元素的浏览器，可以给标签提供一些备用内容。画布的所有内容都是通过脚本生成的，不能使用CSS选择样式
  • 用JavaScript绘图，Canvas API包括创建形状的函数
    • strokeRect(x1,y1,x2,y2)从点(x1,y1)到点(x2,y2)绘制矩形轮廓
    • beginPath()开始画线closePath()结束以beginPath()开始的画线
    • 用于移动 rotate()、scale()
    • arc(x,y,arc_radius,angle_radians_beg,angle_radians_end)以(x,y)为圆心画一个圆弧，arc_radius是圆的半径，angle_radians_beg和angle_radians_end表示圆弧角度的开头和结尾
    • stroke()画线定义的路径，如果不使用这个函数，路径将不会出现在画布上
    • fill()填充beginPath和closePath指定的路径
    • fillText(your_text,x1,y1)在画布(x1,y1)坐标添加指定的文本
    • 应用样式属性 lineWidth路径边框的宽度、font文本的字体和大小、strokeStyle边框的颜色、fillStyle创建路径所形成形状的内部填充颜色
avatar
文章
阅读
粉丝