收藏
博客已迁移至自建网站,此博客已废弃.
请移步至: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>运行实例 »
点击 "运行实例" 按钮查看在线实例
