1、如圖，在代碼工具中，先建好幾個(gè)圖片，如圖這里的img圖片被div盒子包含；然后將盒子設(shè)置寬度，然后浮動(dòng)；圖片填充整個(gè)盒子大小。
2、效果就是這樣的，如圖。
3、添加圖片的描邊效果有兩種方法，對(duì)圖片添加描邊或者是給外面的盒子套個(gè)描邊，先看給圖片添加描邊，如圖；就是直接在img圖片標(biāo)簽里添加上描邊border。
4、如圖，添加了描邊后的圖片效果。
5、想要改變圖片的描邊大小以及顏色，在這里修改。
6、然后如果是在div盒子添加描邊效果時(shí)，和跟在img上添加方法一樣，也是border屬性。7、兩種方法都能夠成功，看你習(xí)慣使用哪種方法了。
擴(kuò)展資料：
超文本標(biāo)記語言（Hyper Text Markup Language），縮寫為HTML，標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用。HTML不是一種編程語言，而是一種標(biāo)記語言 （markup language），是網(wǎng)頁制作所必備的工具。“超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
超文本標(biāo)記語言(或超文本標(biāo)簽語言)的結(jié)構(gòu)包括“頭”部分和“主體”部分，其中“頭”部提供關(guān)于網(wǎng)頁的信息，“主體”部分提供網(wǎng)頁的具體內(nèi)容。
html中的單標(biāo)記：
1、<area>：用于圖像映射內(nèi)的區(qū)域。
2、<base>：文檔中所有相對(duì)URL的基本URL。每個(gè)文檔只能有一個(gè)，它必須位于頁面的
<head>中。
3、<br>：換行符，通常用于文本內(nèi)容以創(chuàng)建單個(gè)換行符而不是段落。它不應(yīng)該用于通過堆疊
許多<br>標(biāo)簽在頁面上創(chuàng)建視覺分離，因?yàn)樵摵瘮?shù)是視覺需求，因此是CSS的域而不是
HTML。
4、<col>：指定<colgroup>元素中每列的列屬性。
5、<command>：指定用戶可以調(diào)用的命令。
6、<embed>：與外部應(yīng)用程序和交互式內(nèi)容一起使用以進(jìn)行集成。
7、<hr>：水平規(guī)則，是頁面上的一條直線。在許多情況下，CSS邊框用于創(chuàng)建分隔線而不是
此HTML元素。
8、<img>：HTML的主要元素之一，這是圖像標(biāo)記。它用于將圖形圖像添加到網(wǎng)頁。
9、<input>：用于從訪問者捕獲信息的表單元素。有許多有效的輸入類型，從多年來在表單
中使用的常見“文本”輸入到屬于HTML5的一些新輸入類型。
10、<keygen>：此標(biāo)記創(chuàng)建用于表單的密鑰對(duì)生成器字段。
11、<link>：不要與“超鏈接”或錨點(diǎn)（<a>）標(biāo)簽混淆，此鏈接用于設(shè)置文檔與外部資源之
間的鏈接。例如，您可以使用它鏈接到外部CSS文件。
12、<meta>：元標(biāo)記是“有關(guān)內(nèi)容的信息”。它們位于文檔的<head>中，用于將頁面信息
傳遞給瀏覽器。有許多不同的meta標(biāo)簽，你可以在網(wǎng)頁上使用。
13、<param>：用于定義插件的參數(shù)。
14、<source>：此標(biāo)記允許您為頁面上的媒體指定備用文件路徑，包括視頻或圖像或音頻文件。
15、<track>：此標(biāo)記設(shè)置要與媒體文件，視頻或音頻一起使用的軌道，這些軌道通常與
<video>或<audio>標(biāo)記一起添加。
16、<wbr>：這代表斷言機(jī)會(huì)。它指定添加換行符可以接受的文本塊中的位置。
擴(kuò)展資料：
在HTML5的版本中<command />、<command />、<menuitem />這三個(gè)單標(biāo)記是已經(jīng)
報(bào)廢無效了，而在HTML4中是可以繼續(xù)使用的。
使用單標(biāo)記時(shí)不同的HTML版本對(duì)是否需要帶斜桿是有不同的要求的。
HTML5：斜杠是可選的。
HTML4：斜杠不可選的。但是，它被W3C的HTML驗(yàn)證器接受了。
XHTML：斜線是必需的。
主要學(xué)習(xí)HTML語法 元素 和屬性
當(dāng)然也要學(xué)習(xí)和HTML密切相關(guān)的CSS
HTML5中的很多新特性比如canvas和svg等 還需要掌握javascript語言。
HTML除了標(biāo)簽以外還有一點(diǎn)要記住的就是標(biāo)簽的屬性，不多常用的也就那些，如<a href=''>鏈接名</a>鏈接標(biāo)簽里面的href屬性，鏈接的地址就是放在 '' 里面，<img src='' /> 圖片標(biāo)簽的src屬性 圖片路徑放在 '' 里面。