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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容