Html-經常使用標籤

時間  2019-11-20
標籤 html 經常 使用 標籤 欄目 HTML 简体版
原文   原文鏈接

經常使用標籤

基礎

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>經常使用標籤</title>
</head>
<body>
正本文本

<!--一、標題：加粗-->
<!--h1標籤的語義：是該頁面的主標題-->
<h1 title="這是一級標題">一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>

<!--二、段落: 自帶換行，有段落間距-->
<p>段落標籤</p>

<!--三、換行標籤-->
正文文本1<br>
正文文本2<br>

<!--自帶換行的文本標籤：h1~h6 p -->
<!--四、文本類型標籤：不自帶換行的文本標籤 - span i b -->
<span>通常用來嵌套其它文本類標籤,上<sup>角標</sup>,下<sub>角標</sub></span><br>
<b>加粗標籤</b><br>
<strong>以加粗做爲強調的強調標籤</strong><br>
<i>斜體標籤</i><br>
<em>以斜體做爲強調的強調標籤</em><br>

<!--五、超連接標籤,能夠寫相對路徑或絕對路徑-->
<a href="http://www.baidu.com" target="_self">百度一下</a><br>  <!-- 在當前頁面跳轉連接，target="_self"可省略-->
<a href="http://www.baidu.com" target="_blank">百度一下</a><br>  <!-- 新建空白頁面跳轉連接-->
<a href="http://www.baidu.com" title="點擊一下，瞭解更多">百度一下</a><br>  <!--鼠標移到該連接顯示title-->
<a href="mailto:863652104@qq.com">發送郵件</a><br>  <!--鼠標移到該連接顯示title-->
<a href="#top">回到頂部</a>

<!--六、圖片標籤-->
<!--title:鼠標懸浮的文本提示，alt：img標籤資源加載失敗時顯示-->
<img title="萌寵" alt="圖片加載失敗"
     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564997741&di=519b1746c53dc7cd2cc5bc0e59960ff6&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.51ztzj.com%2Fupload%2Fimage%2F20150213%2Fdn201502034005_670x419.jpg"><br>

<!--七、列表標籤: 無序ul>li 有序ol>li 自定義dl>dt+dd-->
<!--ul>li{第$列}*5-->
<ul>
    <li>無序列表</li>
    <li>無序列表</li>
    <li>無序列表</li>
    <li>無序列表</li>
</ul>

<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

<dl>
    <dt>自定義列表標題</dt>
    <dd>自定義列表1</dd>
    <dd>自定義列表2</dd>
    <dd>自定義列表3</dd>
    <dd>自定義列表4</dd>
</dl>

<!--八、表格標籤 table>tr>th|td -->
<!--tr:行 th:標題單元格 td:普通單元格 -->
<!--border:邊框-->
<!--cellspacing:單元格的間距，最小爲0，可是單元格之間是兩條線，能夠用rules="all" 處理成一條線 -->
<!--cellpadding：單元格的內邊距（文本與標籤的間距）-->
<table border="1" width="500" height="300" rules="all" cellspacing="0" cellpadding="10">
    <caption>表格標題</caption>
    <thead>
    <tr>
        <th>ID</th>
        <th>用戶名</th>
        <th>密碼</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <!--(tr>td{單元格}*3)*2-->
        <!--rowspan:合併行-->
        <!--colspan:合併列-->
        <td rowspan="2">001</td>
        <td colspan="2">nick</td>
    </tr>
    <tr>
        <td>002</td>
        <td>jerry</td>
        <td>123</td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td>表尾</td>
        <td>表尾</td>
        <td>表尾</td>
    </tr>
    </tfoot>
</table>
    
    <!--九、分割線 -->
    <hr>
    
</body>
</html>

表單標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單標籤</title>
</head>
<body>
    <!--一、form的做用：完成先後臺數據的交互的 - 將用戶錄入的信息提交給後臺 | 文件上傳 -->
    <form action="">
        <!--lable做爲input的文本解釋標籤，for綁定id-->
        <!--value屬性是表單標籤的內容，就是提交給後臺的-->
        <!--name是提交給後臺的key，value是值-->
        <!--placeholder是文本佔位符-->
        <!--type是決定標籤的類型本質(input|button)-->
        <!--multiple,checked布爾類型屬性，不須要寫值，multiple多選，checked默認激活-->
        <p>
            <lable for="username">帳號:</lable>
            <input id="username" type="text" value="Owen" name="user">
        </p>
        <p>
            <lable for="password">密碼:</lable>
            <input id="password" type="password" placeholder="請輸入密碼" name="pwd">
        </p>
        <p>
            <input type="hidden" value="sdsad2323" name="pk">
        </p>
        <p>
            <input type="file" name="file" multiple>
        </p>
        <p>
            男 <input type="radio" value="male" name="hobby" checked>
            女<input type="checkbox" value="female" name="hobby" checked>
            哇塞<input type="checkbox" value="other" name="hobby">
        </p>
        <p>
            <input type="button" value="按鈕" />
            <input type="reset" value="重置" />
            <input type="submit" value="登陸" />
        </p>
        <p>
            <button type="button">普通按鈕</button>
            <button type="reset">重置按鈕</button>
            <button type="submit">提交按鈕</button>
        </p>
        <p>
            <textarea cols="30" rows="10"></textarea>
        </p>
</form>
</body>
</html>

標籤的分類

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>標籤的分類</title>
</head>
<body>
    <h1>標籤的分類</h1>
    <hr>
    <!-- 一、是否自帶換行 -->
    <!--帶換行：h1 p div table form tr ul li -->
    <!--不帶換行：span i b a img input button label textarea-->

    <!-- 二、單雙標籤 -->
    <!--單標籤（主功能）：br hr input img link -->
    <!--雙標籤（主內容）：html head body h1 p span div a label button -->
    <!-- / 表明標籤的結尾，可是單標籤能夠省略 -->
    <div></div>
    <hr />

    <!--三、簡單和組合標籤-->
    <!--組合：ul>li table>tr>td|th form>input -->
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程