html:(12):pre和ul-li
生活随笔
收集整理的這篇文章主要介紹了
html:(12):pre和ul-li
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用<pre>標簽為你的網頁加入大段代碼
在上節中介紹加入一行代碼的標簽為<code>，但是在大多數情況下是需要加入大段代碼的，如下圖：
怎么辦？不會是每一代碼都加入一個<code>標簽吧，沒有這么復雜，這時候就可以使用<pre>標簽。
語法：
<pre>語言代碼段</pre>
<pre> 標簽的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。
如下代碼：
<pre>var message="歡迎";for(var i=1;i<=10;i++){alert(message);} </pre>在瀏覽器中的顯示結果為：
在上面的例子中可以看到代碼中的空格，換行符都保留下來。如果用以前的方法，回車需要輸入<br>簽，空格需要輸入
注意：<pre> 標簽不只是為顯示計算機的源代碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是<pre>標簽的一個常見應用就是用來展示計算機的源代碼。
<!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>pre標簽的使用</title> </head><body><pre> var message="歡迎"; for(var i=1;i<=10;i++)<br> {<br>alert(message); <br> }<br></pre> </body> </html>運行結果
使用ul，添加新聞信息列表
在瀏覽網頁時，你會發現網頁上有很多信息的列表，如新聞列表、圖片列表，如下圖所示。
新聞列表
圖片列表
這些列表就可以使用ul-li標簽來完成。ul-li是沒有前后順序的信息列表。
語法：
<ul><li>信息</li><li>信息</li>...... </ul>舉例：
<ul><li>精彩少年</li><li>美麗突然出現</li><li>觸動心靈的旋律</li> </ul>ul-li在網頁中顯示的默認樣式一般為：每項li前都自帶一個圓點，如下圖所示：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> p標簽</title> </head> <body> <ul><li>我的第一個列表信息</li></ul></body> </html>運行結果
總結
以上是生活随笔為你收集整理的html:(12):pre和ul-li的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： windows重装系统或者苹果重装系统
- 下一篇： Dubbo开源