html基础教程复习

开头部分

  1. <!DOCTYPE html>文档类型声明标签，最新版本
  2. <html lang="en">声明网页的语言，zh-CN
  3. <meta charset="UTF-8">字符集，utf-8表示万国码

常用标签

  1. h1-h6标题标签
  2. p,br段落换行标签
  3. strong,em,del,ins,u文本格式化标签，加粗，倾斜，删除，下划线
  4. 盒子标签div,span块级(独占一行)和行级
  5. align位置，border边框,cellspacing单元格之间的距离，cellpadding文本与边框之间的距离
  6. 表格属性 table，thead定义头部，tr行标签，th表示表头，tbady表示表格的主体部分,td单元格标签,colspan跨列合并，rowspan跨行合并

列表标签

  1. ul表示无序列表li
  2. ol表示有序列表li
  3. 自定义列表dl ,dt,dd,一环套一环

表单标签

  1. 表单由表单域，表单信息，表单提示
  2. <form>发送给服务器，表单域
  3. form属性 action提交位置 method方法

input标签

type

  1. input单标签，type(password密码属性)
  2. type属性radio单选，checkbox多选,加入相同的name属性，value值预选显示
  3. 单选按钮可加入checkd="checked"属性，maxlength约束最大字符
  4. submit提交按钮，reset重置按钮，button普通按钮，file上传文件

label标签

  1. <lable for="1">联系input标签<input id="1">

select标签

1
2
3
<select>
<option select="selected"></option>
</select>//表示默认选中

textarea标签

查看测试代码

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>

<body>
    <h4>青春不常在</h4>
    <form action="xx.php" method="post">
    <table width="600" border="1" cellspacing="0">
        <thead>
            <tr>
                <th>属性</th>
                <th>内容</th>
            </tr>
        </thead>
        <tbady>
            <!-- 第一行 -->
            <tr>
                <td>性别</td>
                <td>
                    <label for="nan"><input type="radio" name="sex" id="nv">男</label>
                    <label for="nv"><input type="radio" name="sex" id="nv">女</label>
                </td>
            </tr>
            <!-- 第二行 -->
            <tr>
                <td>生日</td>
                <td>
                    <select>
                        <option select="selected">==请选择年==</option>
                        <option>2000年</option>
                        <option>2001年</option>
                        <option>2002年</option>
                        <option>2003年</option>
                    </select>
                    <select>
                        <option select="selected">==请选择月==</option>
                        <option>1月</option>
                        <option>2月</option>
                        <option>3月</option>
                        <option>4月</option>
                    </select>
                    <select>
                        <option select="selected">==请选择日==</option>
                        <option>1日</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                </td>
            </tr>
            <!-- 第三行 -->
            <tr>
                <td>所在地区</td>
                <td>
                    <input type="text" value="请填写地区例如"/>
                </td>
            </tr>
            <!-- 第四行 -->
            <tr>
                <td>婚姻状况</td>
                <td>
                    <label for="m1"><input type="radio" name="marry" id="m1"/>未婚</label>
                    <label for="m2"><input type="radio" name="marry" id="m2"/>已婚</label>
                    <label for="m3"><input type="radio" name="marry" id="m3"/>离婚</label>
                </td>
            </tr>
            <!-- 第五行 -->
            <tr>
                <td>学历</td>
                <td>
                    <input type="text" value="填写学历"/>
                </td>
            </tr>
            <!-- 第六行 -->
            <tr>
                <td>喜欢的类型</td>
                <td>
                    <label for="type1"><input type="checkbox" name="like" id="type1"/>妩媚的</label>
                    <label for="type2"><input type="checkbox" name="like" id="type2"/>可爱的</label>
                    <label for="type3"><input type="checkbox" name="like" id="type3"/>小鲜肉</label>
                    <label for="type4"><input type="checkbox" name="like" id="type4"/>老腊肉</label>
                    <label for="type5"><input type="checkbox" name="like" id="type5"/>都喜欢</label>
                </td>
            </tr>
            <!-- 第七行 -->
            <tr>
                <td>自我介绍</td>
                <td>
                    <textarea>个人简介</textarea>
                </td>
            </tr>
            <!-- 第八行 -->
            <tr>
                <td></td>
                <td>
                    <button type="submit">免费注册</button>
                </td>
            </tr>
            </tdaby>

    </table>
    </form>
</body>

</html>

Emmet语法

  1. 生成标签直接tab或者回车
  2. 生成多个标签 div*3
  3. 生成父子关系ul>li 或者 tr>td*5或者(td>tr)*5或者(tr>td*2)*3或者(tr>td2>lable2)*4`
  4. 生成兄弟标签div+p
  5. 生成代类名或者id的，.demo或者#demo tab键
  6. 生成有顺序的div 自增符号 $ .demo$*5

css emmet输入开头字母回车也可快速生成代码