HTML照片愛心墻是一種用HTML代碼編寫的特殊效果，可以展示出網友們的照片和留言，達到互動的效果。今天，我們來了解一下如何制作一個HTML照片愛心墻。 首先，在HTML代碼中，我們需要使用以下標簽元素來構建出照片愛心墻：div、img、p、input。其中，div用于定位照片和留言，img用于顯示照片，p用于顯示留言，input用于輸入照片和留言的信息。 接下來，我們來看一段示范代碼：

<div class="love_wall">
<input type="text" class="img_url" placeholder="請輸入圖片地址">
<input type="text" class="text_input" placeholder="請輸入留言">
<input type="button" class="love_btn" value="我愛你">
</div>
<script type="text/javascript">
var loveBtn = document.querySelector('.love_btn');
var imgDiv = document.querySelector('.love_wall');
loveBtn.onclick = function() {
var url = document.querySelector('.img_url').value;
var text = document.querySelector('.text_input').value;
var img = document.createElement('img');
img.src = url;
img.alt = text;
var p = document.createElement('p');
p.innerHTML = text;
imgDiv.appendChild(img);
imgDiv.appendChild(p);
}
</script>

在上述代碼中，class屬性為love_wall的div元素是照片愛心墻的容器，它可以用CSS樣式進行定位、排版和美化。 class屬性為img_url的輸入框用于輸入圖片的地址，class屬性為text_input的輸入框用于輸入留言。class屬性為love_btn的按鈕用于提交照片和留言。 在JavaScript腳本中，我們通過querySelector函數選擇了幾個元素，其中loveBtn、imgDiv、url和text分別代表按鈕、照片愛心墻容器、圖片地址和留言。 當按鈕被點擊時，我們首先獲取了輸入框中的圖片地址和留言，然后用createElement函數創建了一個img元素和一個p元素，并為它們分別設置了src和innerHTML屬性，最后將它們添加到照片愛心墻容器中，完成了照片愛心墻的制作。 以上就是HTML照片愛心墻的制作方法，希望能對你有所幫助，快來試試編寫自己的照片愛心墻吧！