html 标签

  1. 标签说明

    http://www.html5star.com/manual/html5label-meaning/
    
  2. 格式

    <标签 属性="值" 属性2="值2">
    
  3. 生成模板

    !+tab
    
  4. 文档模板

    <!-- <!DOCTYPE html>  告诉浏览器这是一个html文件 -->
    <!-- <html lang="en"> 包裹所有html代码,lang='en' lang='zh-CN' 中文网站-->
    <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>
    </head>
    <body>
        
    </body>
    </html>
    
  5. 语义化标签,编译seo

    1. 每个页面只有一个h1标签,h2可以多个
    2.<strong></strong>强调性更强
      <em></em> 斜体强调
      <sub> 下标
      <sup> 上标
      <del> 删除
      <ins> 插入
      
      
    
  6. 图片标签与属性

    <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=968859261,3896020000&fm=26&gp=0.jpg" alt="图片显示不出来的时候的提示信息" title="200" width="200" height="200">
    
  7. 超链接

    <base> 标签为页面上的所有链接规定默认地址或默认目标。
    <!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 href="http://www.w3school.com.cn/i/" />
    </head>
    <body>
        <a href="www.baidu.com" target="">dafdff</a>
    </body>
    </html>
    
    锚点:
    # + id属性
    # + name属性
    
     <a href="#miao" target="">miao</a>
     <h1 id="miao">dfkajf</h1>
    
  8. 特殊符号

    &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>超文本标记语言</dd>    
    </dl>
    
  10. 表格

    table
    cation
    thead
    tbody
    tfoot
    
    Cell padding 来创建单元格内容与其边框之间的空白。
    Cell spacing 增加单元格之间的距离
    <colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化。
    # span  number  规定列组应该横跨的列数。
    
     <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复选框的值 总和成 ,, 的形式
                    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>
    

推荐阅读更多精彩内容