溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表始于 <ul> 標簽。每個列表項始于 <li>。
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
<html> <body> <ul> <li>Dog<br/>and<br/>Person</li> <li><img src="bw.jpg" alt="bw"></li> <li>Pig<br/>and<br/>Person</li> </ul> </body> </html>
同樣，有序列表也是一列項目，列表項目使用數字進行標記。
有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
<html> <body> <ol> <li>This is <br/>a big mouse</li> <li><img src="bw.jpg" alt="bw" href="http:www.baidu.com">Black Widow</li> <li><a href="http:www.baidu.com" target="_blank"><img src="bw.jpg" alt="bw" href="http:www.baidu.com"></a></li> </ol> </body> </html>
自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
定義列表的列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
<html> <body> <dl><!-- 自定義列表開始標簽 --> <dt>Program</dt><!-- 類目 --> <dd>JAVA PHP C#</dd><!-- 內容 --> <dt>Animal</dt> <dd>Bird Bull Taiger</dd> </dl> </body> </html>
不同類型的無序列表
<html> <body> <ul> <li>BULL</li> <li>NASA</li> <li>IBM</li> </ul> <ul type="disc"> <li>BULL</li> <li>NASA</li> <li>IBM</li> </ul> <ul type="circle"> <li>BULL</li> <li>NASA</li> <li>IBM</li> </ul> <ul type="square"> <li>BULL</li> <li>NASA</li> <li>IBM</li> </ul> </body> </html>
不同類型的有序列表
<html> <body> <ol ><!-- 如果給出的類型無法識別，則按默認1,2,3顯示 --> <li>GOOGLE</li> <li>MICRO</li> <li>APPLE</li> </ol> <ol type="A"> <li>GOOGLE</li> <li>MICRO</li> <li>APPLE</li> </ol> <ol type="a"> <li>GOOGLE</li> <li>MICRO</li> <li>APPLE</li> </ol> <ol type="I"><!-- 大寫羅馬數字 --> <li>GOOGLE</li> <li>MICRO</li> <li>APPLE</li> </ol> <ol type="i"> <!-- 小寫羅馬數字 --> <li>GOOGLE</li> <li>MICRO</li> <li>APPLE</li> </ol> </body> </html>
列表嵌套
<html> <body> <ul>Big <ol>small <li>A</li> <li>B</li> <li>C</li> </ol> </ul> <ul>Big <dl>small <dt>A</dt> <dd>abc ABC 123</dd> </dl> </ul> <ul>Big <ul>small <li>1</li> <li>2</li> <li>3</li> </ul> </ul> </body> </html>
大多數 HTML 元素被定義為塊級元素或內聯元素。
編者注：“塊級元素”譯為 block level element，“內聯元素”譯為 inline element。
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。
例子：<h2>, <p>, <ul>, <table>
內聯元素在顯示時通常不會以新行開始。
例子：<b>, <td>, <a>, <img>
HTML <div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。
如果與 CSS 一同使用，<div> 元素可用于對大的內容塊設置樣式屬性。
<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。
HTML <span> 元素是內聯元素，可用作文本的容器。
<span> 元素也沒有特定的含義。
當與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性。
簡單的div布局
<!DOCTYPE html>
<html>
<head>
<style>
#big{
width: 1000px;
background: gray;
}
#head{
height: 100px;
background: pink;
}
#left{
height: 400px;
width: 400px;
float: left;
}
#right{
height: 400px;
width: 600px;
background: url(bw.jpg);
float: right;
}
#foot{
height: 50px;
background: blue;
clear: both;
text-align: center;
}
</style>
</head>
<body>
<div id="big">
<div id="head">我是頭</div>
<div id="left">我是左邊
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Yellow</li>
</ul>
</div>
<div id="right">我是右邊</div>
<div id="foot">我是腳</div>
</div>
</body>
</html>使用 HTML <table> 標簽是創建布局的一種簡單的方式。
可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。
提示：即使可以使用 HTML 表格來創建漂亮的布局，但設計表格的目的是呈現表格化數據 - 表格不是布局工具！
<html> <body> <!-- 設置表格總寬度和邊框厚度 --> <table width="500" border="1"> <tr><!--第一行 --> <!-- 設置橫跨兩列 --> <td colspan="2" bgcolor="red"> <h>Hello World</h> </td> </tr> <tr valign="top"><!--第二行 --> <!--設置背景色，寬度及文字靠上 --> <td > <!--主標題加粗 --> <b>Menu</b><br/> GOOGLE<br/> Apple<br/> Microsoft </td> <td > Just try </td> </tr> <tr ><!--第三行 --> <!--設置內容居中顯示，橫跨兩列 --> <td align="center" colspan="2">Bye!</td> </tr> </table> </body> </html>
表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復選框等等）輸入信息的元素。
表單使用表單標簽（<form>）定義。
多數情況下被用到的表單標簽是輸入標簽（<input>）。輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。
表單本身并不可見。同時，在大多數瀏覽器中，文本域的缺省寬度是20個字符。
當用戶從若干給定的的選擇中選取其一時，就會用到單選框。
當用戶需要從若干給定的選擇中選取一個或若干選項時，就會用到復選框。
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。
<html><!-- --> <body> <!-- 設置表單提交地址 --> <form action="001.html"> Chinese name: <!-- 文本框，類型為text，賦值給chName --> <input type="text" name="chName"/> <br/> <br/> English name: <input type="text" name="enName"/> <br/> <br/> <!-- 單選框類型 元素名稱sex 選項之一為male --> <input type="radio" name="sex" value="male"/>Male <br/> <input type="radio" name="sex" value="female"/>Female <br/> <br/> <!-- 多選框 選項之一名字為 football --> <input type="checkbox" name="football"/> I love Football <br/> <input type="checkbox" name="basketball"/> I love Basketball <br/> <input type="checkbox" name="pingpang"/> I love Pingpang </form> <br/> <br/> <form name="input"action="002.html" method="get"> Username: <!-- text類型，賦值給user --> <input type="text" name="user"/> <!-- submit 提交類型 按鈕顯示文字Go --> <input type="submit" value="Go"> </form> <br/> <br/> <form action="003.html"> <!-- 下拉菜單，name為組件名稱 id為標示 --> <select name="cars" id="car"> <!-- 各個選項 value是選項元素名稱 --> <option value="Volvo">Volvo</option> <option value="Benz">Benz</option> <option value="BMW">BMW</option> <!-- 默認顯示最上面的，如果加上selected即將次選項作為默認顯示 --> <option value="Farrari" selected="selected">Farrari</option> </select> <br/> <br/> <!-- 文本框 cols可見寬度 rows 可見行數 --> <textarea name="" id="" cols="30" rows="10"> This is a textarea </textarea> <br/> <br/> <!-- 創建一個顯示Hello的按鈕 --> <input type="button" value="Hello"> <br/> <br/> <!-- 自定義文字段 ，控件組 --> <fieldset> <!-- 標題，說明 --> <legend>Sum</legend> A: <input type="text"/> B: <input type="text"/> </fieldset> </form> </body> </html><!-- -->
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
