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>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,794评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,050评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,587评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,861评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,901评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,898评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,832评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,617评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,077评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,349评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,483评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,199评论 5赞 341
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,824评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,442评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,632评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,474评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,393评论 2赞 352

推荐阅读更多精彩内容