内容提纲
- 图像
- 媒体嵌入与资源地址
- Sublime text创建新的Snippet
元素概述
元素分类 w3school
| 类型 | 标签 |
|---|---|
| 根元素 The root element |
html |
| 文档元数据 Document metadata |
head, title, base, meta, link, style |
| 节点 Sections | body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, header, footer, address |
| 组合内容 Grouping content |
div, p, main, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption |
| 文本级 Text-level semantics |
span, a, em, strong, q, cite, mark, i, b, u, s, sup, sub, big, small, var, code, samp, kbd, data, time, ruby, rb, rp, rt, rtc, bdi, bdo, dfn, br, wbr |
| 编辑 Edits | ins, del |
| 嵌入内容 Embedded content |
img, iframe, embed, object, param, vedio, audio, surce, track, map, area |
| 表格 Tabular data | table, caption, tr, th, td, thead, tbody, tfoot, col, colgroup |
| 表单 Forms | form, label, input, button, select, datalist, optgroup, option, textarea, keygen, output, progress, meter, fieldset, legend |
| 脚本 Scripting | script, noscript, template, canvas |
图像元素img
| 类型 | 取值 |
|---|---|
| 分类 | 流内容-Flow content 短句内容-Phrasing content 嵌入内容-Embedded content 表单相关元素-Form-associated element |
| 元素上下文 | 需要嵌入内容的地方 |
| 内容模型 | 空，空元素，无结束标签 |
| 属性 |
全局属性 alt属性，图像不可见时的替代文本 src属性，资源地址 crossorigin属性，如何处理交叉请求 width和height属性，宽和高，只设置其中一个，另一个自动缩放。 usemap属性, 使用的热区名称 ismap属性，图像是否是服务器端的热区地图 |
img元素示例
<img src="img/02/HTML5_sticker.png" alt="html5 sticker" width="600">
img元素位于Figure元素中
html5 推荐方式
<figure>
<img src="img/02/HTML5_sticker.png" alt="html5 sticker" width="600">
<figcaption>html5 is coming</figcaption>
</figure>
媒体嵌入与资源地址
- 图像、视频等媒体嵌入网页中使用
- 资源地址是嵌入媒体最终的依据
- Uniform Resource Locator（URL）
绝对地址与相对地址
<!-- 绝对地址 -->
<img src="file:///E:/zptcsoft.github.io/ppt/img/09/url.png" alt="">
<img src="http://zptc.github.io/ppt/img/09/url.png" alt="">
<img src="//zptc.github.io/ppt/img/09/url.png" alt="">
<!-- 相对地址 -->
<img src="img/09/url.png" alt="">
<img src="./img/09/url.png" alt="">
<!-- 资源地址相对地址、绝对地址均可。
可以使用http协议、https协议，但不能采用file协议。
建议采用省略协议的方式
<img src="//zptc.github.io/ppt/img/09/url.png" alt="">
-->
Sublime text 新建Snippet
- emmet对figure支持不佳
- Snippet方式支持figure
创建步骤
- 选择菜单Tools/New Snippet…，跳出Snippet编辑窗口
- 根据您的需要修改Snippet文件，figure代码修改如下
- 命名为figure.sublime-snippet, 存到Packages下的user文件夹
- 重启sublime text，使用mfig+tab即可激活
<snippet>
<content><![CDATA[
<figure>
<figcaption>${1:图像标题}</figcaption>
<img src="${2:图像地址}" alt="${3:替代文本}">
</figure>
]]></content>
<!-- 可选: 设置如何激活该代码段 -->
<tabTrigger>mfig</tabTrigger>
<!-- 可选：设置作用域，默认为所有文档有效。 ctrl+alt+shift+p 状态栏获取文件作用域-->
<scope>text.html.basic</scope>
<!-- 可选，设置描述信息 -->
<!-- <description>My figure Snippet</description> -->
</snippet>
了解如何获取作用域