HTML标簽筆記整理（自理）

 bilibili前端學習Pink老師HTML筆記整理（自理）

強烈推薦Pink老師前端教程，為便于查找，本人自理HTML标簽筆記。

内圖檔連結為空，運作将無法顯示，讀者同級相同命名即可檢視

<h1>依次減小</h1>
<h2>依次減小</h2>
<h3>依次減小</h3>
<h4>依次減小</h4>
<h5>依次減小</h5>
<h6>依次減小</h6>
<p>段落，<br />換行</p>
<strong>加粗（強烈）</strong>、
<b>加粗</b>
<em>加粗（強烈）</em>
<i>加粗</i>
<del>删除線（強烈）</del>
<s>删除線</s>
<ins>下劃線（強烈）</ins>
<u>下劃線</u>


<div>沒有語義 超大盒子 一人單獨占一行</div>
<div>一人單獨占一行</div>
<span>沒有語義 小盒子 一行可以有好多個</span>
<span>一行可以有好多個</span>


<p>圖像标簽 單标簽</p><img />
<p>scr 圖檔路徑</p><img src="Img.jpeg" /> 同一級路徑
<p>alt 替換文本</p><img src="Img1.jpeg" alt="兔子" />
<p>title 提示文本</p><img src="Img.jpeg" title="兔子" />
<p>width 給圖像設定高度</p><img src="Img.jpeg" alt="兔子" title="兔子" widle="500" />
<p>height 給圖像設定高度</p><img src="Img.jpeg" alt="兔子" title="兔子" widle="500" height="100" />
<p>border 給圖像設定寬度</p><img src="Img.jpeg" alt="兔子" title="兔子" widle="500"  />
<p>scr 圖檔路徑</p><img src="images/Img.jpeg" /> 上一級路徑
<p>scr 圖檔路徑</p><img src="../Img.jpeg" /> 上一級路徑
<p>scr 圖檔路徑</p><img src="D:\VS code\筆記\Img.jpeg" /> 絕對路徑、網絡連結


<p>超連結标簽</p><a href="跳轉目标" target="_blank" rel="external nofollow"  target="目标視窗的彈出方式">文本或圖像</a>
<p>超連結标簽 外部連結</p><a href="http://www.qq.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_self">騰訊</a> 同一個頁面
<p>超連結标簽 外部連結</p><a href="http://www.qq.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank">騰訊</a> 新的頁面
<p>超連結标簽 内部連結：網站内部頁面的轉換</p><a href="頁面一.html" target="_blank" rel="external nofollow"  target="_blank">内部</a>
<p>超連結标簽 空連結：#</p><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >空連結</a>
<p>超連結标簽 下載下傳連結：位址連結的是檔案 .exe .zip 等形式</p><a href="Img.zip" target="_blank" rel="external nofollow" >下載下傳檔案</a>
<p>超連結标簽 網頁元素連結</p><a href="http://www.baidu.com" target="_blank" rel="external nofollow"  target="_blank"><img src="Img.jpeg"></a>

<p>錨點連結</p> <a href="#tiaozhuan" target="_blank" rel="external nofollow"  id="fanhui">3</a><br />
<h3>1</h3><br />
<h3>2</h3><br />
<h3>1</h3><br />
<h3>2</h3><br />
<h3>1</h3><br />
<h3>2</h3><br />
<h3>1</h3><br />
<h3>2</h3><br />
<h3>1</h3><br />
<h3>2</h3><br />
<h3 id="tiaozhuan">3</h3><br />
<a href="#fanhui" target="_blank" rel="external nofollow" >傳回頂部</a>
<h3>1</h3><br />
<h3>2</h3><br />
<h3>1</h3><br />
<h3>2</h3><br />
<h3>1</h3><br />
<h3>2</h3><br />
<h3>1</h3><br />
<h3>2</h3><br />
<h3>1</h3><br />
<h3>2</h3><br />
<h3>1</h3><br />
<h3>2</h3><br />
<h3>1</h3><br />
<h3>2</h3><br />
<h3>1</h3><br />
<h3>2</h3><br />


<p>注釋标簽 Ctrl+/</p><!-- 注釋标簽 -->
<p>特殊字元 空格</p> 空&nbsp;格&nbsp;&nbsp;&nbsp;空格
<p>特殊字元 大于号，小于号</p> &lt;小于 &gt;大于号
<p>特殊字元 和号</p> &amp;
<p>特殊字元 人民币</p> &yen;
<p>特殊字元 版權</p> &copy;
<p>特殊字元 注冊商标</p> &reg;
<p>特殊字元 攝氏度</p> &deg;
<p>特殊字元 正負号</p> &plusmn;
<p>特殊字元 乘号</p> &times;
<p>特殊字元 除号</p> &divide;
<p>特殊字元 平方二</p> &sup2;
<p>特殊字元 平方三</p> &sup3;


<p>表格标簽(展示資料)</p>
<!-- <table>大方格     -->
<!-- <tr>一行 -->
<!-- <td>單元格 </td> -->
<!-- </tr> -->
<!-- </table> -->
<table>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年齡</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

<P>表頭單元格标簽</P>
<!-- <th>居中且加粗 -->
<table>
    <th>
    <td>姓名</td>
    <td>性别</td>
    <td>年齡</td>
    </th>
</table>

<p>表格屬性 正常用css達成</p>
<!-- 表格屬性要寫在<table>裡面 -->
<!-- align   對齊 left center right -->
<!-- border 邊框 1 （有） 0  （沒有） -->
<!-- cellpadding 像素值 （文字與單元格之間的距離） -->
<!-- cellspacing 像素值  （單元格之間的空格）-->
<!-- width 寬度  height 高度 -->
<table align="center"  cellpadding="20" cellspacing="0">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年齡</td>
    </tr>
</table>

<p>案例</p>
<table align="center" width="100" height="100"  cellspacing="0">
    <thead>
        <tr>
            <th>排名</th>
            <th>趨勢</th>
            <th>相關連結</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td><img src="Img.jpeg"></td>
            <td><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >貼吧</a></td>
        </tr>
    </tbody>
</table>

<p>表格結構标簽</p>
<!-- <thead> 頭部标簽
    <tboby> 主體 -->
<p>合并單元格 </p>
<!-- 跨行 rowspan="合并單元格個數" -->
<!-- 跨列 colspan="合并單元格個數" -->
<!-- 跨行 最上側單元格為目标單元格 -->
<!-- 跨列 最左側單元格為目标單元格 -->
<table  cellspacing="0">
    <tr>
        <td></td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

<p>清單标簽 (用來布局)</p>
<p>無序清單</p>
<!-- <ul>
    <li></li>
</ul>   沒有順序
<ul>裡面隻能放<li>
    <li>裡面放啥都可以-->
<ul>
    <li>橙子</li>
</ul>
<p>有序清單</p>
<!-- <ol>
    <li></li>
</ol> 同上，有序-->
<ol>
    <li>a1</li>
    <li>a2</li>
</ol>
<p>自定義清單</p>
<!-- 三組标簽-->
<dl>
    <dt>名詞1</dt>
    <dd>名詞1 解釋1</dd>
    <dd>名詞1 解釋2</dd>
</dl>

<p>表單标簽 收集使用者資訊</p>
<!-- 表單域 表單控件（表單元素） 提示資訊 -->
<p>表單域 包含表單元素</p>
<!-- <form> 把它範圍内的元素送去處理 -->
<!-- <form action="demo.php" method="POST" name="name1"></form> -->
<p>表單元素</p>
<!-- <input> 輸入表單元素 -->
<form>
    <!-- text 文本框 使用者可以裡面輸入任何文字 -->
    <!-- value規定輸入的值 -->
    <!-- maxlength 輸入字元的最大值 -->
    使用者名：<input type="text" name="username" value="請輸入使用者名" maxlength="6"> <br>
    <!-- password 密碼框 使用者看不見輸入内容 -->
    密碼：<input type="password" name="pwd" value="請輸入密碼"> <br>
    <!-- radio 單選按鈕 可以實作多選一 -->
    <!-- name 是表單元素的名字 這裡性别應同一name實作多選一 -->
    <!-- 單選按鈕和複選框可以設定checked屬性，當頁面打開的時候可以預設選中這個按鈕 -->
    性别：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女" checked="checked"> <br>
    <!-- checkbox 複選框 可以實作多選 -->
    愛好: 吃飯<input type="checkbox" name="hobby" value="吃飯"> 睡覺<input type="checkbox" name="hobby" value="睡覺"> 打豆豆<input
        type="checkbox" name="hobby" value="打豆豆"> <br>
    <!-- 點選的送出按鈕可以把表單域 form 裡面的表單元素裡面的值 送出給背景伺服器 -->
    <input type="submit" value="免費注冊"> <br>
    <!-- 重置按鈕可以還原表單元素的預設狀态 -->
    <input type="reset" value="重新填寫"> <br>
    <!-- 普通按鈕 button  後期結合js搭配使用-->
    <input type="button" value="擷取短信驗證碼"> <br>
    <!-- 上傳頭像 -->
    上傳頭像：<input type="file"> <br>
</form>

<p>lable标簽</p> <br>
<lable for="text">使用者名：</lable><input type="text" id="text"> <br>
<input type="radio" name="sex" id="nan">
<lable for="nan">男</lable>
<input type="radio" name="sex" id="nv">
<lable for="nv">女</lable>
<!-- <select>下拉表單元素 -->
籍貫：
<select>
    <!-- select中至少包含一對<option> -->
    <!-- selected="selected"預設選項 -->
    <option>山東</option>
    <option selected="selected">安徽</option>
</select>
<p>texrarea 表單元素</p>
<!-- <textater>标簽是用于定義多行文本輸入的控件 -->
<form>
    今日回報：
    <textarea cols="50" rows="5">
        <!-- cols一行，rows多少行 不用記，用css 實作 -->
        pink老師我知道,這個回報是textarea做的。
    </textarea>
</form>


<!-- 綜合案例 -->
<h4>青春不常在，抓緊談戀愛</h4>
<table weidth="600" >
    <!-- 第一行 -->
    <tr>
        <td>性别：</td>
        <td>
            <input type="radio" name="sex" id="nan">
            <lable for="nan">男</lable>
            <input type="radio" name="sex" id="nv">
            <lable for="nv">女</lable>
        </td>
    </tr>
    <!-- 第二行 -->
    <tr>
        <td>生日：</td>
        <td>
            <select>
                <option>--請選擇年份</option>
                <option>2000</option>
                <option>2001</option>
                <option>2002</option>
            </select>
            <select>
                <option>--請選擇月份</option>
                <option>一</option>
                <option>二</option>
                <option>三</option>
            </select>
            <select>
                <option>--請選擇日</option>
                <option>14</option>
                <option>15</option>
                <option>16</option>
            </select>
        </td>
    </tr>
    <!-- 第三行 -->
    <tr>
        <td>所在地區</td>
        <td><input type="text" value="安徽"></td>
    </tr>
    <!-- 第四行 -->
    <tr>
        <td>婚姻狀況：</td>
        <td>
            <input type="radio" name="marry"> 已婚 <input type="radio" name="marry" checked="checked"> 未婚 <input
                type="radio" name="marry"> 離婚
        </td>
    </tr>
    <!-- 第五行 -->
    <tr>
        <td>學曆：</td>
        <td><input type="text" value="大學"></td>
    </tr>
    <!-- 第六行 -->
    <tr>
        <td> 喜歡的類型：</td>
        <td>
            <input type="checkbox" name="love">可愛的
            <input type="checkbox" name="love">帥氣的
            <input type="checkbox" name="love" checked="checked">都喜歡
        </td>
    </tr>
    <!-- 第七行 -->
    <tr>
        <td>個人介紹</td>
        <td>
            <textarea>個人簡介</textarea>
        </td>
    </tr>
    <!-- 第八行 -->
    <tr>
        <td></td>
        <td>
            <input type="submit" value="免費注冊">
        </td>
    </tr>
    <!-- 第九行 -->
    <tr>
        <td></td>
        <td>
            <input type="checkbox" checked="checked">
        </td>
    </tr>
    <!-- 第十行 -->
    <tr>
        <td></td>
        <td>
            <a herf="#">我是會員，立即注冊</a>
        </td>
    </tr>
    <!-- 第十一行 -->
    <tr>
        <td></td>
        <td>
            <h5>我承諾</h5>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </td>
    </tr>
</table>