1500字范文 > html 列表表格 form表单文本域 label

html 列表表格 form表单文本域 label

时间：2020-04-13 07:00:06

1.无序列表(常用)

ul li(没有顺序，默认li会有圆点)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><h2>无序列表</h2><ul><li>榴莲</li><li>香蕉</li><li>苹果</li><li>臭豆腐</li><li><p>圣女果</p><ul><li>123</li></ul></li></ul></body></html>

2.有序列表(不常用)

ol li(默认li会有数字排序)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><ol><li>张三</li><li>张三</li><li>张三</li></ol></body></html>

3.自定义列表

dl dt dd(dt相当于核心，dd相当于对核心的拆分)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><dl><dt>服务支持</dt><dd>售后服务</dd><dd>上门服务</dd><dd>包换服务</dd></dl></body></html>

4.表格

table caption(表格标题) thead(表头) tbody(身体) tr(列) th(第一行标题单元格) td(单元格)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><table border="10" width="400" hight="120"><caption>学生成绩单</caption><thead><tr><th>姓名</th><th>成绩</th><th>评语</th></tr></thead><tbody><tr><td>张三</td><td>100</td><td>Fighting</td></tr><tr><td>李四</td><td>100</td><td rowspan="2">加油</td></tr><tr><td>123</td><td>100</td></tr></tbody></table></body></html>

5.form表单

input中type设置样式，text:‘文本’，password:‘密码框’,radio:‘单选框’,checkbox:‘复选框’

6.button

<button type="submit" value="提交所填"></button><button type="reset" value="重置"></button><button type="button" value="按钮"></button>

7.select下拉

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><select name="" id=""><option value="">北京</option><option value="">上海</option><option value="" selected>广东</option><option value="">深圳</option></select></body></html>

8.textarea文本域

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><textarea name="" id="" cols="30" rows="10" maxlength="10"></textarea></body></html>

9.label标签

设置当点击radio时，也可以通过点击文字实现效果

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><input type="radio" name="sex" id="female" /><label for="female">女</label><input type="radio" name="sex" id="male" /><label for="male">男</label>婚否<label><input type="radio" name="marry" /> 未婚</label><label><input type="radio" name="marry" />已婚</label></body></html>

10.综合案例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><table border="1" width="600" height="200"><h1>就业榜</h1><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>操作</th></tr><tr><td>1001</td><td>1</td><td>5</td><td>3</td><td>4</td><td>5</td><td><a href="#">删除</a></td></tr></table></body></html>

11.综合案例2

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><form action=""><h1>青春不常在，抓紧谈恋爱</h1><hr />昵称：<input type="text" placeholder="请输入昵称" /> <br><br>性别：<label><input type="radio" name="sex" /> 男</label> <label> <input type="radio" name="sex" /> 女</label> <br><br>所在城市：<select name="" id=""><option value="">北京</option><option value="" selected>上海</option><option value="">天津</option><option value="">广东</option><option value="">深圳</option></select><br><br>婚姻状况: <label><input type="radio" name="marry"> 未婚</label> <label><input type="radio" name="marry"> 已婚</label> <label><input type="radio" name="marry"> 保密</label> <br><br>喜欢的类型: <input type="checkbox"> 可爱<input type="checkbox"> 性感<input type="checkbox"> 御姐<input type="checkbox"> 萝莉<input type="checkbox"> 小鲜肉<input type="checkbox"> 大叔<br><br>个人介绍: <br><textarea name="" id="" cols="30" rows="10"></textarea><h3>我承诺</h3><ul><li>年满18岁、单身</li><li>抱着严肃的态度</li><li>真诚寻找另一半</li></ul><input type="checkbox"> 我同意所有条款<br><br><input type="submit" value="免费注册"> <input type="reset"></form></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。