HTML - 图像 ¶

引用网上的图片
引用自己的图片
图片说明

作者：KK
发表日期：2016.1.26

引用网上的图片 ¶

要显示图像之前需要先得到一个网上的图像地址,先以网上的图片地址为例子,比如这个地址:http://www.kkh86.com/it/html-base/img/img-demo.jpg

然后我们用一个叫做img的标签来实现

<img src="http://www.kkh86.com/it/html-base/img/img-demo.jpg" />

这样就会呈现出这张图片了,这里需要将图片地址填到src属性中

引用自己的图片 ¶

要显示你自己的图片,先要在你的html文件所在的文件夹下面放一张图片,比如叫1.jpg,然后在html文件里写

<img src="1.jpg" />

这样把src属性换成当前html所在文件夹下的图片文件名就行了,还有,如果你在html文件的目录下建一个叫photo的文件夹,再把1.jpg放进去,那么

<img src="photo/1.jpg" />

这样也可以,因为图片太多的时候,就要建立文件夹来分门别类了,不能全部丢在一起,这样太乱太眼花了是吧

图片说明 ¶

<img src="http://www.kkh86.com/it/html-base/img/img-demo.jpg" alt="有趣的草莓" />

这里增加了一个alt属性来为这张图片添加说明,但是你刷新后会发现它并没有显示到网页上,那么它有什么用呢?

因为有时候不能保证图片是不是会存在,可能会丢失,或者引用的网络图片被删除了.而当图片丢失不能显示时,就会自动切换成这段文字了,试下将图片地址改成一个不存在的地址就可以看到alt的文字出现在页面上了

<img src="我是一张不存在的图片.jpg" alt="有趣的草莓" />

var shiftWindow = function () { scrollBy(0, -50) }; if (location.hash) setTimeout(shiftWindow, 1); window.addEventListener("hashchange", shiftWindow); var element = document.createElement("script"); element.src = "./jssearch.index.js"; document.body.appendChild(element); var searchBox = $('#searchbox'); // search when typing in search field searchBox.on("keyup", function(event) { var query = $(this).val(); if (query == '' || event.which == 27) { $('#search-resultbox').hide(); return; } else if (event.which == 13) { var selectedLink = $('#search-resultbox a.selected'); if (selectedLink.length != 0) { document.location = selectedLink.attr('href'); return; } } else if (event.which == 38 || event.which == 40) { $('#search-resultbox').show(); var selected = $('#search-resultbox a.selected'); if (selected.length == 0) { $('#search-results').find('a').first().addClass('selected'); } else { var next; if (event.which == 40) { next = selected.parent().next().find('a').first(); } else { next = selected.parent().prev().find('a').first(); } if (next.length != 0) { var resultbox = $('#search-results'); var position = next.position(); // TODO scrolling is buggy and jumps around // resultbox.scrollTop(Math.floor(position.top)); // console.log(position.top); selected.removeClass('selected'); next.addClass('selected'); } } return; } $('#search-resultbox').show(); $('#search-results').html('

No results

'); var result = jssearch.search(query); if (result.length > 0) { var i = 0; var resHtml = ''; for (var key in result) { if (i++ > 20) { break; } resHtml = resHtml + '

' + result[key].file.t + '' + '' + result[key].file.d + '

'; } $('#search-results').html(resHtml); } }); // hide the search results on ESC $(document).on("keyup", function(event) { if (event.which == 27) { $('#search-resultbox').hide(); } }); // hide search results on click to document $(document).bind('click', function (e) { $('#search-resultbox').hide(); }); // except the following: searchBox.bind('click', function(e) { e.stopPropagation(); }); $('#search-resultbox').bind('click', function(e) { e.stopPropagation(); }); });