开头部分
<!DOCTYPE html>
文档类型声明标签,最新版本<html lang="en">
声明网页的语言,zh-CN
<meta charset="UTF-8">
字符集,utf-8表示万国码
常用标签
h1-h6
标题标签p,br
段落换行标签strong,em,del,ins,u
文本格式化标签,加粗,倾斜,删除,下划线- 盒子标签
div,span
块级(独占一行)和行级 align
位置,border
边框,cellspacing
单元格之间的距离,cellpadding
文本与边框之间的距离- 表格属性
table
,thead
定义头部,tr
行标签,th
表示表头,tbady
表示表格的主体部分,td
单元格标签,colspan
跨列合并,rowspan
跨行合并
列表标签
ul
表示无序列表li
ol
表示有序列表li
- 自定义列表
dl
,dt
,dd
,一环套一环
表单标签
- 表单由表单域,表单信息,表单提示
<form>
发送给服务器,表单域- form属性 action提交位置 method方法
type
input
单标签,type(password密码属性)- type属性
radio
单选,checkbox
多选,加入相同的name属性,value值预选显示 - 单选按钮可加入
checkd="checked"
属性,maxlength
约束最大字符 submit
提交按钮,reset
重置按钮,button
普通按钮,file
上传文件
label标签
<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语法
- 生成标签直接tab或者回车
- 生成多个标签
div*3
- 生成父子关系
ul>li
或者 tr>td*5
或者(td>tr)*5
或者(tr>td*2)*3或者
(tr>td2>lable2)*4` - 生成兄弟标签
div+p
- 生成代类名或者id的,
.demo
或者#demo
tab键 - 生成有顺序的div 自增符号 $
.demo$*5
css emmet输入开头字母回车也可快速生成代码