溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

HTML基礎（二）

發(fā)布時間：2020-07-03 06:09:50 來源：網(wǎng)絡 閱讀：325 作者：呆頭陳 欄目：開發(fā)技術

圖像標簽（<img>）和源屬性（Src）

在 HTML 中，圖像由 <img> 標簽定義。

<img> 是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。

要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。

定義圖像的語法是：

<img src="url" />

URL 指存儲圖像的位置。如果名為 "boat.gif" 的圖像位于 www.w3school.com.cn 的 p_w_picpaths 目錄中，那么其 URL 為 https://cache.yisu.com/upload/information/20200312/65/247498.jpg。

瀏覽器將圖像顯示在文檔中圖像標簽出現(xiàn)的地方。如果你將圖像標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。

替換文本屬性（Alt）

alt 屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。

<img src="boat.gif" alt="Big Boat">

在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。

<html>
	<!--背景色定義為粉色-->
	<body bgcolor="pink" height="500">
		<a >BaiDu</a>
		<img src="1.jpg" alt="Black Widow">
		<img src="3.jpg" alt="Black Widow">
	</body>
</html>

基本的注意事項 - 有用的提示：

假如某個 HTML 文件包含十個圖像，那么為了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以我們的建議是：慎用圖片。


設置網(wǎng)頁圖片背景

<html>
	<!--添加背景圖片，gif和jpg皆可，如果圖片小于頁面會重復-->
	<body background="1.jpg">
		<a >BaiDu</a>
		
		<img src="3.jpg" alt="Black Widow">
	</body>
</html>


排列圖片

<html>
	<!--添加背景圖片，gif和jpg皆可，如果圖片小于頁面會重復-->
	<body background="1.jpg">
		<a >BaiDu</a>
		<!-- 分段添加圖片使其自動排列對齊 -->
		<p><img src="bw.jpg" alt="bw"></p>
		<p><img src="bw.jpg" alt="bw"></p>
		<p><img src="bw.jpg" alt="bw"></p>
	</body>
</html>

圖片浮動：

<html>
	<!--添加背景圖片，gif和jpg皆可，如果圖片小于頁面會重復-->
	<body background="1.jpg">
		<a >BaiDu</a>
		<!-- 圖片跟隨段落靠左 -->
		<p><img src="bw.jpg" alt="bw" align="left">帶有圖像的一個段落。</p>

		<!--圖片跟隨段落靠右-->
		<p><img src="bw.jpg" alt="bw" align="right">帶有圖像的一個段落。</p>
		
	</body>
</html>

調(diào)整圖片尺寸

<html>
	<!--添加背景圖片，gif和jpg皆可，如果圖片小于頁面會重復-->
	<body background="1.jpg">		
		<!-- 調(diào)整圖片尺寸 -->
		<p><img src="bw.jpg" height="200" width="200">帶有圖像的一個段落。</p>
		
	</body>
</html>

設置圖片為鏈接

<html>
	<!--添加背景圖片，gif和jpg皆可，如果圖片小于頁面會重復-->
	<body background="1.jpg">		
		<!-- 調(diào)整圖片尺寸 -->
		<p><img src="bw.jpg" height="200" width="200">帶有圖像的一個段落。</p>
		<!-- 將圖片設置成鏈接點 -->
		<a >
		</a>
	</body>
</html>


表格

表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

表格和邊框?qū)傩?/h3>

如果不定義邊框?qū)傩?，表格將不顯示邊框。有時這很有用，但是大多數(shù)時候，我們希望顯示邊框。

使用邊框?qū)傩詠盹@示一個帶有邊框的表格

表格的表頭

表格的表頭使用 <th> 標簽進行定義。

大多數(shù)瀏覽器會把表頭顯示為粗體居中的文本：

表格中的空單元格

在一些瀏覽器中，沒有內(nèi)容的表格單元顯示得不太好。如果某個單元格是空的（沒有內(nèi)容），瀏覽器可能無法顯示出這個單元格的邊框。

為了避免這種情況，在空單元格中添加一個空格占位符，就可以將邊框顯示出來。

<html>
	<body >
		<!-- 設置表格邊框厚度為1  -->
		<table border="1">
			<!-- 行 -->
			<tr>
				<!-- 表格標題 -->
				<th>Heading</th>
				<th>Another</th>
			</tr>
			<tr>
				<!-- 列 -->
				<td>AAA</td>
				<td>BBB</td>
			</tr>
			<tr>
				<td> </td><!-- 空表格-->
				<td>DDD</td>
			</tr>
		</table>				
	</body>
</html>

占用多格的表格

<html>

    <body>

        <h5>橫跨兩列的單元格：</h5>
        <table border="1">
            <tr>
                  <th>姓名</th>
                   <th colspan="2">電話</th>
             </tr>
             <tr>
                  <td>Bill Gates</td>
                  <td>555 77 854</td>
                  <td>555 77 855</td>
              </tr>
        </table>
    
        <h5>橫跨兩行的單元格：</h5>
        <table border="1">
            <tr>
              <th>姓名</th>
              <td>Bill Gates</td>
            </tr>
            <tr>
              <th rowspan="2">電話</th>
              <td>555 77 854</td>
            </tr>
            <tr>
              <td>555 77 855</td>
            </tr>
        </table>

    </body>
</html>

表格嵌套：

<html>
	<body>
		<table border="1">
			<tr>
				<td>
					<p>One</p>
				<p>Two</p>
				</td>
				<td>
					<table border="2">
						<tr>
							<td>A</td>
							<td>B</td>
						</tr>
						<tr>
							<td>C</td>
							<td>D</td>
						</tr>
					</table>
				</td>
				
			</tr>
			<tr>
				<td>
					<list>Cat</list>
					<list>gou</list>
					<list>豬</list>
					<list>牛</list>
				</td>
				<td>Hello</td>
			</tr>
		</table>
	</body>
</html>


使用 Cell padding 來創(chuàng)建單元格內(nèi)容與其邊框之間的空白。

<html>
	<body>
		<table border="3" cellpadding="10">
			<tr>
				<td>AAA</td>
				<td>BBB</td>
			</tr>
			<tr>
				<td>CCC</td>
				<td>DDD</td>
			</tr>
		</table>
	</body>
</html>

使用 Cell spacing 增加單元格之間的距離。

<html>
	<body>
		<table border="1" cellpadding="10" cellspacing="20">
			<tr>
				<td>AAA</td>
				<td>BBB</td>
			</tr>
			<tr>
				<td>CCC</td>
				<td>DDD</td>
			</tr>
		</table>
	</body>
</html>

單元格添加背景色和背景圖片

<html>
	<body>
		<table border="1" cellpadding="100" cellspacing="20">
			<tr>
				<td bgcolor="green">AAAAAAAAAAAA</td>
				<td>BBBBBBBBBBBB</td>
			</tr>
			<tr>
				<td background="bw.jpg">CCCCCCCCCCC</td>
				<td>DDDDDDDDDDD</td>
			</tr>
		</table>
	</body>
</html>

控制單元格內(nèi)容靠邊排列

<html>
	<body>
		<table border="1" cellpadding="10" cellspacing="20" width="800" height="800">
			<tr align="left">
				<td bgcolor="green">AAAAAAAAAAAA</td>
				<td>BBBBBB</td>
			</tr>
			<tr align="right">
				<td background="bw.jpg">CCCCCCCCCCC</td>
				<td>DDDDDD</td>
			</tr>
		</table>
	</body>
</html>

使用 "frame" 屬性來控制圍繞表格的邊框

<html>
	<body>
		<p>外圍一圈</p>
		<table  frame="box">
			<tr>
				<td>AAA</td>
				<td>BBB</td>
			</tr>
			<tr>
				<td>CCC</td>
				<td>DDD</td>
			</tr>
		</table>
		<p></p>

		<p>只加上面</p>	
		<table frame="above">
			<tr>
				<td>AAA</td>
				<td>BBB</td>
			</tr>
			<tr>
				<td>CCC</td>
				<td>DDD</td>
			</tr>
		</table>
		<p></p>

		<p>只加下面</p>	
		<table frame="below">
			<tr>
				<td>AAA</td>
				<td>BBB</td>
			</tr>
			<tr>
				<td>CCC</td>
				<td>DDD</td>
			</tr>
		</table>
		<p></p>

		<p>只加上下</p>	
		<table  frame="hsides">
			<tr>
				<td>AAA</td>
				<td>BBB</td>
			</tr>
			<tr>
				<td>CCC</td>
				<td>DDD</td>
			</tr>
		</table>
		<p></p>
		
		<p>只加左右</p>	
		<table frame="vsides">
			<tr>
				<td>AAA</td>
				<td>BBB</td>
			</tr>
			<tr>
				<td>CCC</td>
				<td>DDD</td>
			</tr>
		</table>
	</body>
</html>


向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

AI
助
手