简单的后台管理页面
16lz
2022-07-06
博客已迁移至自建网站,此博客已废弃.
请移步至:https://blog.ours1984.top/posts/ddsh/欢迎大家访问
1. 元素属性
| 类型 | 描述 |
|---|---|
| 通用属性 | id,class,style,title 等,几乎可用于所有元素 |
| 预置属性 | 除通用属性外,w3c 还为每个不同功能的元预置一些属性,来区别他们 |
| 事件属性 | 它是预置属性的一个子集,根据元素特征,所支持的事件属性也各不相同 |
| 自定义属性 | 为方便编程,由用户为元素添加的属性,以data-为前缀 |
2. 常用元素
| 类型 | 描述 |
|---|---|
| 布局元素 | <header><footer><main><aside><article><nav><section><h1...><div> |
| 文本元素 | <span><p><time><code><strong><q>... |
| 链接元素 | <a href="xxx" target="_self/_blank/name"> |
| 图像元素 | <figure><figcaption><img src="xxx" alt="xxx"><picture><source> |
| 列表元素 | 无序<ul>+<li> ,有序<ol>+<li>,自定义<dl>+<dt>+<dd> |
| 表格元素 | <table><caption><thead><tbody><tfoot><tr><td><col>... |
| 表单元素 | <form><label><input><datalist><select><textarea><button> |
| 内联框架 | <iframe src="xxx" name="xxx">,常用于后台布局或前端跨域 |
| 音/视频 | <video src="xxx" controls><audio src="xxx" controls> |
更多 html 元素: https://developer.mozilla.org/zh-CN/docs/Web/HTML
简单的注册页面
实例
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>现在的一片天</title></head><body><h2>是肮脏的一片天</h2><formaction="check.php"method="post"><div><labelfor="uname">天名</label><inputtype="text"id="uname"name="username"placeholder="苍天已死"autofocus></div><div><labelfor="pwd">天密</label><inputtype="password"id="pwd"name="password"placeholder="黄天当立"autofocus></div><div><labelfor="secret">天型</label><inputtype="radio"id="male"name="sex"value="male"><labelfor="male">天1</label><inputtype="radio"id="female"name="sex"value="female"><labelfor="female">天2</label><inputtype="radio"id="secret"name="sex"value="secret"checked><labelfor="secret">晴天</label></div><div><labelfor="game">天眼</label><inputtype="checkbox"id="game"name="hobby[]"value="game"><labelfor="game">风</label><inputtype="checkbox"id="trave"name="hobby[]"value="trave"checked><labelfor="trave">雨</label><inputtype="checkbox"id="shoot"name="hobby[]"value="shoot"checked><labelfor="shoot">雷电</label></div><div><buttontype="submit">通天</button></div></form></body></html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
简单的后台管理页面
实例
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>复杂的大后台</title><style>body{height:100vh;width:100vw;display:grid;grid-template-columns:10em1fr;grid-template-rows:6em1fr;margin:0;}body.header{grid-column-end:span2;border-bottom:1pxsolidcurrentColor;background-color:#efe;padding:2em;display:flex;align-items:center;}body.headerdiv{margin-left:auto;}body.nav{background-color:#efc;margin:0;padding-top:1em;list-style:none;}bodyiframe{width:calc(100vw-10em);height:calc(100vh-6em);border-left:1pxsolidcurrentColor;}</style></head><body><!--后台顶部--><divclass="header"><h1>后台管理系统</h1><div><em>admin</em><ahref="">退出</a></div></div><!--左侧导航--><ulclass="nav"><li><ahref="https://j.map.baidu.com/c6/1klf"target="content">故宫博物院</a></li><li><ahref="https://blog.ours1984.top/"target="content">我们的1984</a></li><li><ahref="https://blog.ours1984.top/test/rigister.html"target="content">开心一下</a></li><li><ahref="https://cn.bing.com/search?q=%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B&go=%E6%90%9C%E7%B4%A2&qs=ds&form=QBRE"target="content">百度一下</a></li></ul><!--右侧内容区--><iframesrcdoc="<ahref=''>这是一条神奇的天路</a>"frameborder="1"name="content"></iframe></body></html>运行实例 »
点击 "运行实例" 按钮查看在线实例
更多相关文章
- 使用HTML标签制作简单的导航和课程表
- HTML常用标签属性以及应用场景/怎么用表格做一个课程表
- HTML课堂笔记-0704
- Android简单自定义布局介绍
- Android(安卓)自定义属性时TypedArray的使用方法
- Android(安卓)View动画——Alpha、scale等属性用法
- Android(安卓)属性动画（Property Animation） 完全解析 （上）
- android:name 的秘密
- android RelativeLayout常用属性