博客已迁移至自建网站,此博客已废弃.
请移步至: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
简单的注册页面
实例
<!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>现在的一片天</title> </head> <body> <h2>是肮脏的一片天</h2> <form action="check.php" method="post"> <div> <label for="uname">天名</label> <input type="text" id="uname" name="username" placeholder="苍天已死" autofocus> </div> <div> <label for="pwd">天密</label> <input type="password" id="pwd" name="password" placeholder="黄天当立" autofocus> </div> <div> <label for="secret">天型</label> <input type="radio" id="male" name="sex" value="male"><label for="male">天1</label> <input type="radio" id="female" name="sex" value="female"><label for="female">天2</label> <input type="radio" id="secret" name="sex" value="secret" checked><label for="secret">晴天</label> </div> <div> <label for="game">天眼</label> <input type="checkbox" id="game" name="hobby[]" value="game"><label for="game">风</label> <input type="checkbox" id="trave" name="hobby[]" value="trave" checked><label for="trave">雨</label> <input type="checkbox" id="shoot" name="hobby[]" value="shoot" checked><label for="shoot">雷电</label> </div> <div> <label for="">天格</label> <select name="edu" id=""> <option value="0" selected disabled>--请选择--</option> <option value="1">大天</option> <option value="2">中天</option> <option value="3">小天</option> <option value="4">天骑士</option> <option value="5">其它</option> </select> </div> <div> <button type="submit">通天</button> </div> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
简单的后台管理页面
实例
<!DOCTYPE html> <html lang="zh-CN"> <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>复杂的大后台</title> <style> body { height: 100vh; width: 100vw; display: grid; grid-template-columns: 10em 1fr; grid-template-rows: 6em 1fr; margin: 0; } body .header { grid-column-end: span 2; border-bottom: 1px solid currentColor; background-color: #efe; padding: 2em; display: flex; align-items: center; } body .header div { margin-left: auto; } body .nav { background-color: #efc; margin: 0; padding-top: 1em; list-style: none; } body iframe { width: calc(100vw - 10em); height: calc(100vh - 6em); border-left: 1px solid currentColor; } </style> </head> <body> <!-- 后台顶部 --> <div class="header"> <h1>后台管理系统</h1> <div> <em>admin</em> <a href="">退出</a> </div> </div> <!-- 左侧导航 --> <ul class="nav"> <li><a href="https://j.map.baidu.com/c6/1klf" target="content">故宫博物院</a></li> <li><a href="https://blog.ours1984.top/" target="content">我们的1984</a></li> <li><a href="https://blog.ours1984.top/test/rigister.html" target="content">开心一下</a></li> <li><a href="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> <!-- 右侧内容区 --> <iframe srcdoc="<a href=''>这是一条神奇的天路</a>" frameborder="1" name="content"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例