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. 表格属性 tablethead定义头部,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输入开头字母回车也可快速生成代码