进阶知识
1. 图片自适应
问题1：艺术方向问题，即当网站在狭窄的屏幕上观看时，显示一幅图片的包含了重要细节的裁剪版本
解决方法：采用<picture></picture>标签——<picture>素包含了一些<source>元素，它使浏览器在不同资源间做出选择，紧跟着的是最重要的<img>元素。
<picture>
<source media="(max-width: 799px)" srcset="test-480w.jpg">
<source media="(min-width: 800px)" srcset="test-800w.jpg">
<img src="test.jpg" alt="this is test">
</picture><picture>标签中必须提供一个<img>元素以及它的 src 和 alt 属性，否则不会有图片显示
注意，img 图片自适应还可以利用 css 属性 object-fit 来基于父容器进行自适应！
**问题2：**分辨率切换问题，即不同分辨率的设备，选择适合分辨率的图片进行显示
**解决方法：**利用srcset 和 sizes属性来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。
srcset格式为文件名 + 空格 + 图像固有宽度（或x语法）
sizes 格式为媒体条件 + 空格 + 当媒体条件为真时，图像将填充的“槽的宽度”（或选择“图像固有宽度”最接近的“槽的宽度”的图片）
<!-- srcset 中为图像固有宽度 -->
<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 中和x语法结合的方式（更加常用） -->
<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"
/>2. URL地址
scheme://host.domain:port/path/filename
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
目前主流的 schemes 主要有：
3. 图像区域映射
图像映射（image-map）指带有可点击区域的一幅图像。<map> 标签定义一个客户端图像映射。area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。建议：同时向 <map> 添加 id 和 name 属性。
area 的 coords 定义可点击区域（对鼠标敏感的区域）的坐标：
圆形：
shape="circle"，coords="x,y,z"，x 和 y 定义了圆心，z 是以像素为单位的半径多边形：
shape="polygon"，coords="x1,y1,x2,y2,..."，每对 "x,y" 定义多边形一个点矩形：
shape="rectangle"，coords="x1,y1,x2,y2"，x1,y1,x2,y2 表示两个对角顶点
4. 表单验证
主要分为两种形式：
Html5 通过表单元素的校验属性实现表单校验
JS 校验表单
5. 元标签
meta 标签提供关于 HTML 文档的元数据，元数据将服务于浏览器（如何布局或重载页面），搜索引擎 SEO 和其它网络服务等，主要分为两种：
最后更新于
这有帮助吗？