如何用html标签来显示gif图片
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用html标签来显示gif图片相关的知识，希望对你有一定的参考价值。
1、html插入图片要用到img标签。具体的用法，首先新建一个html文件，写入基本的html结构，导入一张gif格式的图片：
2、接着给img标签一个class属性，命名为img，在head标签中设置style标签，在style标签设置“.img”的属性，这里设置图片的长度和高度，并且设置图片的对齐方式为中心对齐，最后按下crtl＋S键保存文件：
3、打开浏览器，可以看到网页中的gif图片的内容。以上就是使用html标签显示gif图片的方法：
第一：下载 .gif格式的图片放置项目里img文件夹中
第二：添加在标签中，举例如下(HBuilder写的)：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试.gif格式图片</title>
</head>
<body>
<img src="img/aa.gif"/>
</body>
</html>
具体：
如何用 Vim 折叠/展开 HTML 标签
【中文标题】如何用 Vim 折叠/展开 HTML 标签【英文标题】：How to fold/unfold HTML tags with Vim 【发布时间】：2011-11-01 04:09:45 【问题描述】：是否有一些插件可以在 Vim 中折叠 HTML 标签？ 或者还有另一种方法来设置折叠或展开 html 标签的快捷方式？ 我想像缩进折叠一样折叠/展开 html 标签。
【问题讨论】：
set foldmethod=syntax 适用于 HTML
@HaiFengKao 设置后如何使用？
@nilon zc 关闭折叠。 zo 打开折叠。
【参考方案1】：
我发现zfat（或者，同样，zfit）非常适合折叠 HTML 文档。 za 将切换（打开或关闭）现有折叠。 zR 打开当前文档中的所有折叠，zM 有效地重新启用文档中标记的所有现有折叠。
如果您发现自己大量使用折叠，您可以在 .vimrc. 中为自己制作一些方便的键绑定
【讨论】：
你的答案只适用于manual的foldmethod，不能适用于其他foldmethod。 一旦我打开文件，所有这些都可以工作。一旦关闭并重新打开，我必须重新开始。无论如何要避免这种情况？也就是说：文件记录了折叠的行，因此视图从关闭到重新打开都是相等的。 来自 vim-wiki 的双重回答：Folding 和 Make views automatic。【参考方案2】：如果你缩进你的 HTML，以下应该可以工作：
set foldmethod=indent
我发现这个问题是太多折叠。为了解决这个问题，我使用zO 和zc 分别打开和关闭嵌套折叠。
更多信息请见help fold-indent：
The folds are automatically defined by the indent of the lines.
The foldlevel is computed from the indent of the line, divided by the
'shiftwidth' (rounded down). A sequence of lines with the same or higher fold
level form a fold, with the lines with a higher level forming a nested fold.
The nesting of folds is limited with 'foldnestmax'.
Some lines are ignored and get the fold level of the line above or below it,
whichever is lower. These are empty or white lines and lines starting
with a character in 'foldignore'. White space is skipped before checking for
characters in 'foldignore'. For C use "#" to ignore preprocessor lines.
When you want to ignore lines in another way, use the 'expr' method. The
indent() function can be used in 'foldexpr' to get the indent of a line.
【讨论】：
尝试设置 fdl=3 默认关闭三级及更高的折叠； zc 仍然关闭打开的折叠。【参考方案3】：安装js-beautify 命令（JavaScript 版本）
npm -g install js-beautify
wget --no-check-certificate https://www.google.com.hk/ -O google.index.html
js-beautify -f google.index.html -o google.index.bt.html
http://www.google.com.hk原始html：
js-beautify 和 vim 折叠：
【讨论】：
【参考方案4】：加入 James Lai 的回答。 最初我的 foldmethod=syntax 所以 zfat 不起作用。 解决方法是将foldemethod设置为手动
:setlocal foldmethod=manual
检查正在使用的折叠方法，
:setlocal foldmethod?
【讨论】：
【参考方案5】：用 foldmethod 语法折叠 html，更简单。
此答案基于HTML syntax folding in vim。作者是@Ingo Karcat。
将您的折叠方法设置为以下语法：
vim 命令行:set foldmethod=syntax
或将设置放入~/.vim/after/ftplugin/html.vim
setlocal foldmethod=syntax
另外注意到目前为止，默认的语法脚本只折叠一个多行 标签本身，而不是开始和结束标签之间的文本。
So, this gets folded:
<div
class="foo"
id="bar"
>
And this doesn't
<div>
<b>text between here</b>
</div>
要在标签之间折叠，您需要扩展语法脚本，通过
以下，最好进入~/.vim/after/syntax/html.vim
语法折叠在除 void html 元素之外的所有元素之间执行
（那些没有关闭兄弟的，比如<br>）
syntax region htmlFold start="<\z(\<\(area\|base\|br\|col\|command\|embed\|hr\|img\|input\|keygen\|link\|meta\|para\|source\|track\|wbr\>\)\@![a-z-]\+\>\)\%(\_s*\_[^/]\?>\|\_s\_[^>]*\_[^>/]>\)" end="</\z1\_s*>" fold transparent keepend extend containedin=htmlHead,htmlH\d
【讨论】：
【参考方案6】：首先set foldmethod=syntax 并尝试zfit 折叠开始标签和zo 展开标签，它在我的vim 上运行良好。
【讨论】：
以上是关于如何用html标签来显示gif图片的主要内容，如果未能解决你的问题，请参考以下文章
如何用正则表达式匹配除了img标签的所有其他标签 匹配所有html标签我知道： /<[^>]+>/g 关键排除img标签