HTML(Hyper Text Marked Language)称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

1. HTML文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
    </head>
    <body>
        <h1>英雄联盟（电子竞技类游戏）</h1>
        <p>
            <strong>《英雄联盟》</strong>（简称lol）是由美国<i>Riot Games</i>开发，
            中国大陆地区由腾讯游戏运营的网络游戏。
        </p>
        <p>
            <strong>《英雄联盟》</strong>除了即时战略、团队作战外，还拥有一百多位特色各异的英雄、
            丰富的地图及玩法、自动匹配的战网平台，包括天赋树、召唤师系统、符文等元素。[<ins>1</ins>]
        </p>
        <p>
            2016年1月，根据官方数据显示，LOL全球最高同时在线已突破<del>750</del> 900万，全球日活跃高达
            2700万，全球月活跃已达6700万，注册用户亿计，LOL已经成为当今世界最具人气和影响力的网络游戏之一。
            [<ins>2</ins>]
        </p>
    </body>
</html>
  1. 一个html网页的结构应该包括html标签 head标签和body标签
  2. head标签中语句解决中文编码问题。
  3. h1, h2, h3, h4标签代表不同大小的标题，其中h1最大。
  4. p(paragraph)标签表示段落，会空一行。
  5. strong标签——加粗
  6. i标签——斜体
  7. ins标签——下划线
  8. del标签——删除效果

2. HTML非文本元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
    </head>

    <h1>英雄技能</h1>
    <table border="1">
        <tr bgcolor="#ccc">
            <td width="120"><strong>技能名</strong></td>
            <td width="48"><strong>触发</strong></td>
            <td width="105"><strong>技能属性</strong></td>
            <td width="445"><strong>技能效果</strong></td>
            <td width="65"><strong>图标</strong></td>
        </tr>
        <tr>
            <td><strong>坚韧</strong></td>
            <td><strong>被动</strong></td>
            <td colspan="2">
                盖伦如果在9秒内不受到任何伤害，之后的每秒都会回复自己最大生命值的0.4%。
                小兵的伤害不会中断坚韧效果。
            </td>
            <td><img src="./images/skill1.png" alt=""></td>
        </tr>
        <tr>
            <td><strong>致残打击</strong></td>
            <td align="center"><strong>Q</strong></td>
            <td>冷却时间：8</td>
            <td>
                盖伦移除身上的所有减速效果，并获得30%移动速度加成，持续1.5/2/2.5/3/3.5秒。<br />
                在接下来的4.5秒内，他的下次普通攻击会造成30/55/80/105/130(+1.4AD)物理伤害，并沉默目标1.5秒。
            </td>
            <td><img src="./images/skill2.png" alt=""></td>
        </tr>
        <tr>
            <td><strong>勇气</strong></td>
            <td align="center"><strong>W</strong></td>
            <td>冷却：24/33/22/21/20</td>
            <td>
                <strong>被动：</strong>击杀一个单位会永久提供0.25护甲和魔法抗性加成，最大值：30 <br />
                <strong>主动：</strong>盖伦获得一个持续2/3/4/5/6秒的防御护盾，减少即将到来的30%伤害。
            </td>
            <td><img src="./images/skill3.png" alt=""></td>
        </tr>
        <tr>
            <td><strong>审判</strong></td>
            <td align="center"><strong>E</strong></td>
            <td>冷却：9</td>
            <td>
                盖伦快速地旋舞大剑，持续3秒，在持续期间对周围敌人总共造成物理伤害——14/18/22/26/30
                加上他总攻击力的34/35/36/37/38%，5次(英雄每升3级加1次)。<br />
                E【审判】会在攻击单个敌人时造成33%额外伤害。<br />
                取消E【审判】会返还相当于剩余持续时长的冷却时间。<br />
                E【审判】可以暴击，并造成额外伤害。
            </td>
            <td><img src="./images/skill4.png" alt=""></td>
        </tr>
        <tr>
            <td><strong>德玛西亚正义</strong></td>
            <td align="center"><strong>R</strong></td>
            <td>冷却：120/100/80</td>
            <td>
                <strong>被动：</strong>最近获得最多击杀数的敌人会成为<strong>大反派</strong>。
                盖伦的E【审判】和普攻会对<strong>大反派</strong>造成额外真实伤害，
                伤害值为<strong>大反派</strong>1%的最大生命值。<br />
                <strong>主动：</strong>盖伦召唤德玛西亚之力，试图斩杀一名敌方英雄，目标损失的生命越多，
                则此技能造成的伤害越高。造成175/350/525魔法伤害加上目标已损失生命值的28/33/40%。
                对<strong>大反派</strong>造成真实伤害。
            </td>
            <td><img src="./images/skill5.png" alt=""></td>
        </tr>
    </table>
</html>
  1. table标签表示在html中插入表格，tr(table row)表示行元素，td(table data)表示列元素，一个tr中有两个td表示一行两列。
    • bgcolor属性——单元背景颜色(#RGB 16进制表示)
    • border——是否有边框以及边框宽度
    • align——内容按什么位置对齐(left center right 更细化的还有margin-left: 50px等)
    • width——单元宽度
    • height——单元高度
    • colspan——合并列单元格
    • rowspan——合并行单元格
  2. <br />换行标签
  3. img标签表示插入图片，在src属性中填入图片的相对路径，width和height设置图片尺寸，alt属性有值时，当图片无法显示，即显示alt的值。.表示当前目录 ..表示上级目录

3. HTML表单元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
    </head>
    <body>
        <table align="center">
            <tr>
                <td><font color="#F00">*</font>用户名：</td>
                <td><input type="text"><font color="#F00">用户名不得小于三个字符</font></td>
            </tr>
            <tr>
                <td><font color="#F00">*</font>密码：</td>
                <td><input type="password"></td>
            </tr>
            <tr>
                <td><font color="#F00">*</font>确认密码：</td>
                <td><input type="password"></td>
            </tr>
            <tr>
                <td><font color="#F00">*</font>Email：</td>
                <td><input type="email"></td>
            </tr>
            <tr>
                <td><font color="#F00">*</font>真实姓名：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td><font color="#F00">*</font>性别：</td>
                <td>
                    <select>
                        <option value="man">男</option>
                        <option value="woman">女</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><font color="#F00">*</font>生日：</td>
                <td>
                    <select name="" id="">
                        <option value="">1990</option>
                        <option value="">1991</option>
                        <option value="">1992</option>
                        <option value="">1993</option>
                        <option value="">1994</option>
                        <option value="">1995</option>
                        <option value="">1996</option>
                        <option value="">1997</option>
                        <option value="">1998</option>
                        <option value="">1999</option>
                    </select>
                    <select name="" id="">
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="">6</option>
                        <option value="">7</option>
                        <option value="">8</option>
                        <option value="">9</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                    </select>
                    <select name="" id="">
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="">6</option>
                        <option value="">7</option>
                        <option value="">8</option>
                        <option value="">9</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><font color="#F00">*</font>手机：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td><font color="#F00">*</font>居住地：</td>
                <td>
                    <select>
                        <option value="">陕西省</option>
                        <option value="">广东省</option>
                    </select>
                    <select>
                        <option value="">西安市</option>
                        <option value="">广州市</option>
                    </select>
                    <select>
                        <option value="">雁塔区</option>
                        <option value="">碑林区</option>
                    </select>
                    <select>
                        <option value="">西影路</option>
                        <option value="">环城路</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td rowspan="2"><font color="#F00">*</font>QQ：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td><font color="#00F">设置我的QQ在线状态</font></td>
            </tr>
        </table>
    </body>
</html>
  1. input标签在网页中插入输入框
    • type=text——文本输入框
    • type=password——密码输入框(会遮盖密码)
  2. select标签添加下拉选择框，option添加选项
  3. div和span标签用于布局，其中div会自动换行，span不会。
  4. font标签设置字体格式（字体，颜色，大小）

  5. form标签用于提交表单，向服务器提交数据。method属性有get和post两种方式。

     区别：
     - get是form默认的提交方式
     如果通过一个超链访问某个地址，是get方式
     如果在地址栏直接输入某个地址，是get方式
     提交数据会在浏览器显示出来
     不可以用于提交二进制数据，比如上传文件
     - post必须在form上通过 method="post" 显示指定提交数据不会在浏览器显示出来
     可以用于提交二进制数据，比如上传文件

4. 参考