html 標(biāo)簽

  1. 標(biāo)簽說明

    http://www.html5star.com/manual/html5label-meaning/

  2. 格式

    <標(biāo)簽 屬性="值" 屬性2="值2">

  3. 生成模板

    !+tab

  4. 文檔模板

    <!-- <!DOCTYPE html>  告訴瀏覽器這是一個(gè)html文件 -->
<!-- <html lang="en"> 包裹所有html代碼，lang='en' lang='zh-CN' 中文網(wǎng)站-->
<head>
    <!-- <meta charset="UTF-8"> 元信息 編寫網(wǎng)頁中的一些輔助信息 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

  5. 語義化標(biāo)簽，編譯seo

    1. 每個(gè)頁面只有一個(gè)h1標(biāo)簽，h2可以多個(gè)
2.<strong></strong>強(qiáng)調(diào)性更強(qiáng)
  <em></em> 斜體強(qiáng)調(diào)
  <sub> 下標(biāo)
  <sup> 上標(biāo)
  <del> 刪除
  <ins> 插入

  6. 圖片標(biāo)簽與屬性

    <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=968859261,3896020000&fm=26&gp=0.jpg" alt="圖片顯示不出來的時(shí)候的提示信息" title="200" width="200" height="200">

  7. 超鏈接

    <base> 標(biāo)簽為頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <base target="_blank">
    <base  />
</head>
<body>
    <a href="www.baidu.com" target="">dafdff</a>
</body>
</html>

錨點(diǎn)：
# + id屬性
# + name屬性

 <a href="#miao" target="">miao</a>
 <h1 id="miao">dfkajf</h1>

  8. 特殊符號(hào)

    &nbsp;
&copy;
&reg;
&lt;
&gt;
&amp;
&yen;
&deg;

  9. 列表

    <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
ul {list-style-type:lower-alpha;}
ul 
{
 list-style-image:url('sqpurple.gif');
}

定義列表
<dl>
    <dt>html</dt>
    <dd>超文本標(biāo)記語言</dd>    
</dl>

  10. 表格

    table
cation
thead
tbody
tfoot

Cell padding 來創(chuàng)建單元格內(nèi)容與其邊框之間的空白。
Cell spacing 增加單元格之間的距離
<colgroup> 標(biāo)簽用于對(duì)表格中的列進(jìn)行組合，以便對(duì)其進(jìn)行格式化。
# span  number  規(guī)定列組應(yīng)該橫跨的列數(shù)。

 <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
 </colgroup>
  
<table border="1">
        <caption>Monthly savings</caption>
        <thead>
            <tr>
              <th>Month</th>
              <th>Savings</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Name</th>
                <th colspan="2">Telephone</th>
            </tr>
            <tr>
                <td>Bill Gates</td>
                <td>555 77 854</td>
                <td>555 77 855</td>
            </tr>
        </tbody>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
        <tfoot>
            <tr>
              <td>Sum</td>
              <td>$180</td>
            </tr>
        </tfoot>
    </table>

  11. 表單

    <form id="form1" action="/test" method="GET" onsubmit="return checkForm()">
        <select id="myselect"  name="myselect" onchange="handleChange()">
            <option selected disabled>請選擇</option>
            <option value="1" >1</option>
            <option value="2" >2</option>
            <option value="3" >3</option>
        </select>

        <input type="text" name="user" id="user" value=""/>
        <input type="password" name="psd" id="psd" value="">

        <input type="checkbox" name="mycheckbox" value="1"/>1
        <input type="checkbox" name="mycheckbox" value="2"/>2
        <input type="checkbox" name="mycheckbox" value="3"/>3
        <input type="checkbox" name="mycheckbox" value="4"/>4
        <input type="checkbox" name="mycheckbox" value="5"/>5

        <input type="radio" name="myradio" value="1" id="girl"/><label for="girl">girl</label>
        <input type="radio" name="myradio" value="2" id="boy"/><label for="boy">boy</label>

        <input type="submit" value="提交">        
        <button type="submit">提交</button>
    </form>    
    
    <script type="text/javascript">
            function checkForm(){
//text password
                var user= document.getElementById('user').value;
                var psw= document.getElementById('psd').value;
                console.log(user,psw);
                console.log($('#user').val(),$('#psd').val());

//checkbox
                var obj = document.getElementsByName("mycheckbox");
                var check_arr = [];
                for (var i = 0; i < obj.length; i++) {
                    if (obj[i].checked)
                        check_arr.push(obj[i].value);
                }
                console.log(check_arr);

                //將hobby復(fù)選框的值 總和成 ,, 的形式
                var hobbies='';
                $("[name='mycheckbox']:checked").each(function(index, element) {
                    hobbies += $(this).val()+",";
                });                 
                hobbies = hobbies.slice(0,-1);
                console.log(hobbies);

//radio
                var a = document.getElementsByName("myradio");
                var n;
                for(var i=0;i<a.length;i++) {
                if(a[i].checked) {n = a[i].value;break;}
                }
                console.log(n);

                var radioJquery = $("input[type='radio'][name='myradio']:checked").val();
                $("input[type='radio'][name='radio']:checked").html()
                console.log(radioJquery);

//selectbox
                var myselect=document.getElementById("myselect");
                var index=myselect.selectedIndex;
                console.log(myselect.options[index].value)

                var options=$("#myselect option:selected");
                console.log(options.val());//獲取value
                console.log(options.text());//獲取文本
            }
        </script>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容