初學html總結

2019-08-17 17:58:49

html：超文本標記語言，用於網頁結構的搭建

html語言構成：由標簽、屬性、屬性值構成

標簽：" < "後面第一個單詞

屬性：標簽後面用空格隔開的單詞

屬性值：屬性後用“ = ”連接併在“雙引號”裡面的叫做屬性值

<!-- eg -->
    <div class="box" id="box-1"> </div>

<!-- eg -->
    <img src="" alt="">

html常用標簽：

<!-- eg -->
　　 <h1 align="center">holle word</h1>
    <!-- h1 具有唯一性！ 在同一頁面只能出現一次，放網站LOGO -->
    <h2>2號標題sad</h2>
    <h3>3號標題</h3>
    <h4>4號標題</h4>
    <h5>5號標題</h5>
    <h6>6號標題</h6>

    <strong>加粗</strong><br>
    <hr><!-- br換行 hr線條 -->
    <b>加粗</b>
    <i>傾斜</i>
    <em>傾斜</em>
    <u>下劃線</u><sup>上行標簽</sup><sub>下行標簽</sub>
    <p>段落</p>
    <div>盒子</div>
    <span>少量字元</span>
    &lt;&nbsp;br&nbsp;&gt;&copy;

列表：無序列表、有序列表、自定義列表

   <!-- 無序列表 -->
    <ul>
        <li>無序列表</li>
        <li>無序列表</li>
        <li>無序列表</li>
        <li>無序列表</li>
        <li>無序列表</li>
        <li>無序列表</li>
    </ul>
    <!-- 有序列表 -->
    <ol type="A" start="4">
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
    <!-- 自定義列表 -->
    <dl>
        <dt>名詞</dt>
        <dd>對名詞的解釋</dd>
    </dl>
    <dl>
        <dt>自定義列表</dt>
        <dd>按組寫，每組&lt;dt&gt;&lt;dd&gt;寫一個&lt;dl&gt;</dd>
    </dl>

<a href="http://www.baidu.com">超鏈接</a><br>
<a href="http://www.baidu.com" target="_blank" title="打開新頁面">超鏈接</a><br>
<a href="#">空連接，本網頁跳轉</a><br>
<a href="##">空連接，不做跳轉</a><br>
<a href="javascript:void(0)">空連接，不做跳轉</a>

例：  <img src="./images/img1.png" alt="未找到此圖片" title="提示信息"><br>
     <img src="./img2.png" alt="">
     <img src="./img/img3.png" alt="">
     <img src="../../../img.png" alt=""><br>

<table width="300" height="300" border="2" bordercolor="red" cellspacing="0" cellpadding="0">
        <tr align="center">
            <td>1</td>
            <td valign="bottom">2</td>
            <td>3</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>

 <table width="300" heigh="400" border="1" bordercolor="blue" cellspacing="0" cellpadding="0">
        <form action="">
            <tr>
                <td rowspan="4">總體信息</td>
                <td colspan="2" align="center">用戶註冊</td>                
            </tr>
            <tr>                
                <td>用戶名：</td>
                <td><input type="text" value="填寫用戶名"></td>
            </tr>
            <tr>
                <td>密碼：</td>
                <td><input type="password"></td>
            </tr>
            <tr>                
            　　 <td colspan="2" align="center"><input type="submit">&nbsp;<input type="reset"></td>  <br>
            </tr>
        </form>
    </table>
    <form action="" name="" method="">
        <br>
        <input type="text" value="請輸入..." name="" size="9" maxlength="7">
        <br>
        <br>
        <input type="password">
        <br>
        <input type="submit" value="註冊">
        <input type="reset">
        <input type="button" value="換膚">
    </form>