HTML標籤

時間 2020-10-31

標籤 css html 服務器網絡編碼 url spa code orm 欄目 HTML 简体版

原文原文鏈接

HTML標籤
一、圖像標籤

img標籤能夠在網頁中插入一幅圖像,例如：
<img src="img/meinv01.jpg" width="40%"/>
其中,src屬性: 用於指向圖片的路徑(相對路徑,網絡路徑)
width屬性: 指定圖片的寬度
height屬性: 指定圖片的高度

關於路徑問題:
1)不建議寫帶盤符的絕對路徑,由於未來換一個發佈環境,這個路徑極可能是錯的,因此不建議
	<img src="D:/JavaDevelop/HBuilderProjects/CGB-HTMLCSS-01/img/meinv02.jpg" width="40%"/>
2)建議寫相對路徑
	./: 表示當前文件所在的位置,能夠省略不寫
	../: 表示當前文件所在目錄的上一級目錄

	<img src="./img/meinv01.jpg" width="40%"/>
	表示在當前文件(html)所在的目錄找img目錄,在img目錄下找meinv01.jpg文件

<html>
    <head>
        <meta charset="utf-8">
        <!-- 通知網頁當前使用的編碼 -->
        <title>直男的快樂</title>
    </head>
    <body>
        <h1>Hello World!!</h1>
        <h2>女友都是大豬蹄子</h2>
        <h3>女友有點可愛</h3>
        <h4>但有點矮</h4>
        
        <!-- <h4>註釋內容  ctrl+/</h4> -->
        <!-- 生成一條水平線 -->
        <!-- 
        soldi:實線   double：雙線
        dashed：虛線   dotted：點狀線
         -->
        <hr style="border:5px solid red" />
        hello&nbsp;&nbsp;&nbsp;world<br/>
        <!-- br 換行 
            &nbsp 空格 -->
        My love
    </body>
</html>


二、超連接標籤
a標籤用於在網頁中實現一個超連接
點擊超連接後,會跳轉到另一個位置(網頁、圖片、下載地址等),例如:
<a href="http://www.baidu.com" target="_blank">
	百度一下,你就不知道
</a>
其中href屬性,用於指向所跳轉到的url地址
target屬性,用於指向以何種方式打開超連接
	_self: 在當前窗口打開超連接
	_blank: 在新窗口中打開超連接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>圖片和超連接</title>
    </head>
    <body>
        <!-- 引入一副圖像 -->
        <img src="img/meinv01.jpg" width="40%"/>
        <a href = "https://www.baidu.com" target="_blank">
            <img src="./img/meinv02.jpg" width="40%"/>
        </a>
        <!-- 不建議 使用絕對路徑 -->
        
        <hr/>
        <a href = "http://www.baidu.com" target="_blank">
            <!-- 新窗口打開 -->
            你須要百娘~
        </a><br>
        <a href = "http://tmooc.cn"target="_self">
            <!-- _self當前窗口打開 -->
            tmooc一下~
        </a>
        
    </body>
</html>


三、表格標籤
table: 用於定義一個表格,其中能夠包含tr標籤
tr(table row): 用於定義表格中的行, tr中能夠包含td/th
td/th(table data cell): 用於定義表格中的單元格
	th(table header cell): 用於定義表頭中的單元格，其中的文本默認會加粗而且居中。
	
colspan屬性：設置單元格橫跨的列數,例如:
	<th colspan="2">11</th>
	colspan="2": 設置當前單元格橫跨兩列
rowspan屬性：設置單元格豎跨的行數
	<td rowspan="2">21</td>
	rowspan="2": 設置當前單元格豎跨兩行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格標籤</title>
        <!-- style標籤內部用於書寫css樣式，css註釋 -->
        <style>
            table,td,th{/* 選中全部名字爲table 和 td的元素  實現複用*/
                border:2px solid skyblue;
                border-collapse: collapse;
            }
            table{
                /*設置背景*/
                background-color: pink;
                /*設置寬度*/
                width: 60%;
                /*設置左右外邊距自適應*/
                margin-left:auto;
                margin-right:auto;
                text-align: center;
            }
            td,th{
                /*內邊距*/
                padding: 5px;
            }
            h4{
                /* border: 4px aqua;
                margin-left:auto;
                margin-right:auto;
                width: 40% */;
                /* 元素居中 */
                text-align: center;
            }
            
        </style>
    </head>
    <body>
        <h4>標題</h4>
        <table>
        <!-- 建立一個 3*3的表格 -->
            <tr>
                <!-- 11和12 橫向合併 -->
                <th colspan ="2">11</th>
                
                <th>13</th>
            </tr>
            <tr>
                <!-- 21和31單元格合併  行合併 -->
                <td rowspan="2" colspan ="2">21</td>
                
                <td>23</td>
            </tr>
            <tr>
                <td>33</td>
            </tr>

        </table>
    </body>
</html>

四、表單標籤
表單的做用: 用於向服務器發送數據
向服務器發送數據的兩種方式:
1)使用表單向服務器發送數據
	表單中每每存在表單項標籤(用戶名、密碼、暱稱、郵箱、驗證碼等)，在表單項中能夠輸入數據，再提交表單就能夠將輸入的數據提交給相應的服務器。
2)使用超連接也能夠向服務器發送數據
	http://www.baidu.com?user=張三&age=20&like=籃球
	在URL地址後面能夠拼接問號,問號以前是url地址,問號以後能夠拼接參數,參數包括參數名(user，age，like)，和參數值（張三，20，籃球）,多個參數之間用&分隔。在輸入地址後訪問服務器,就能夠將地址後面拼接的參數一併帶給服務器
		
<form action="http://www.baidu.com" method="">
	...
</form>
其中action屬性:用於指定表單中的數據將會提交到哪一個地址。
	例如：action屬性指向百度服務器的網址，就意味着，表單中的全部數據都會提交到百度服務器。
method屬性:指定提交方式,經常使用提交方式爲GET和POST(區別後面會講到)
	若是不指定method,默認是GET提交。