tml由element組成。element分兩種,正常element和空element。
<p class=“wd”>world</p>
element由tag和content構成
<ul>
<li>first</li>
<li>second</li>
</ul>
沒有content和結束tag的element。比如
<div>
<h1>title</h1>
<p>p1</p>
<p>p<strong>2</strong ></p>
</div>
div和h1,div和p,p和strong是父子關系。
div和strong是祖孫關系。
h1和p是兄弟關系。
構建現代網頁時,圖片是不可或缺的元素之一。它們能夠增強視覺吸引力,幫助傳達信息,并提升用戶體驗。然而,如果圖片沒有得到適當的優化,它們可能會顯著拖慢網站的加載速度,影響用戶體驗和搜索引擎優化(SEO)。在本文中,我們將探討不同的圖片格式,并提供優化這些格式的策略和示例。
根據圖片內容和用途選擇最合適的格式。例如,對于網頁上的照片,JPEG可能是最佳選擇,因為它在保持相對較小的文件大小的同時提供了良好的圖像質量。對于需要透明背景的圖標,PNG可能更合適。
使用工具或服務壓縮圖片,減少文件大小。例如,使用在線工具如 TinyPNG 來壓縮PNG文件,或者使用 Adobe Photoshop 的“存儲為Web所用格式”功能來減小JPEG文件的大小。
根據需要在網頁中顯示的大小調整圖片尺寸。不要上傳超大的圖片然后依賴瀏覽器縮放,因為這會導致不必要的加載時間。
通過 HTML5 的 <picture> 元素或 srcset 和 sizes 屬性,可以為不同屏幕尺寸提供不同大小的圖片。
對于非視口內的圖片,可以使用延遲加載(lazy loading)技術。這樣,只有當用戶滾動到圖片位置時,圖片才會加載。
使用內容分發網絡(CDN)來分發圖片,可以減少加載時間,因為圖片會從離用戶最近的服務器加載。
假設你有一個高分辨率的照片,原始尺寸為4000x3000像素,文件大小為5MB。如果這張照片要在網頁上以800x600像素的尺寸展示,那么:
優化后的圖片可能只有100KB左右,大大減少了加載時間。
如果你有一個圖標,需要在網頁上以多種尺寸展示,并且需要透明背景:
圖片優化對于提高網頁加載速度至關重要。通過選擇合適的圖片格式,壓縮文件大小,調整尺寸,使用響應式圖片技術,實現延遲加載,以及利用CDN,可以確保圖片在不犧牲質量的情況下快速加載。這不僅能提升用戶體驗,還能對SEO產生積極影響。
lt;hr>水平線
<hr size="9" /> 水平線(設定大小,單位:像素)
<hr width="80%" /> 水平線(設定寬度,單位:像素或百分比)
<hr color="#ff0000" /> 水平線對齊方式
<hr align="left" /> 水平線水平位置
<hr noshade /> 去掉水平線的陰影
align屬性值:center(默認值) left right
<hr width="30%" color="blue" size="9" align="left"/>
<center></center>水平居中.
<br/> 換行
<p></p> 標簽定義段落
<p align=""></p>將段落按左、中、右對齊;
align屬性值:left(默認值) right center justify
注意:
<h1>...<h6>標題標記與<p>段落標記都只有一個屬性align
<pre></pre> 定義預格式化的文本
<blockquote></blockquote> 設置段落縮進(可以縮進5個字符)
手冊上沒有的標記
<xmp></xmp> 忽略HTML標記
<nobr>…</nobr> 禁止換行
<wbr> 指定軟換行(或單詞換行),用在nobr標記中,即使用 <nobr> 禁止了換行,使用 <wbr> 仍然可以換行
<nobr>中華人民共和國上海市<wbr>黃浦區</wbr></nobr>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。