HTML5是一種用于創建網頁和Web應用程序的標準。其中,有一個很有用的功能是可以在圖片的左邊添加文字。以下是HTML5中文字在圖片左邊的代碼示例:
<figure> <img src="image.jpg" alt="Image"> <figcaption>這是一張圖片的說明文字</figcaption> </figure>
如上代碼所示,<figure>標簽用于定義一個自包含的獨立內容,該內容包括圖片和文字說明。其中,<img>標簽用于插入圖片,<figcaption>標簽用于插入圖片的說明文字。在樣式表中,可以使用如下CSS屬性控制文字在圖片左側的位置:
figure { display: table; margin: 0; padding: 0; } figcaption { display: table-caption; caption-side: left; width: 200px; text-align: left; font-size: 14px; }
上述CSS代碼使用了display、caption-side、text-align和font-size等屬性,其中display屬性用于定義表格的顯示方式,表格的caption-side屬性用于定義說明文字的位置,width屬性用于定義文字的寬度,text-align屬性用于定義文字的對齊方式,font-size屬性用于定義文字的字體大小。
總之,HTML5中的文字在圖片左邊功能是非常有意義的,通過上述代碼和CSS樣式的設置,可以很容易地實現此功能。