博客已迁移至自建网站,此博客已废弃.请移步至: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> <labelfor="">天格</label> <selectname="edu"id=""> <optionvalue="0"selecteddisabled>--请选择--</option> <optionvalue="1">大天</option> <optionvalue="2">中天</option> <optionvalue="3">小天</option> <optionvalue="4">天骑士</option> <optionvalue="5">其它</option> </select> </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>点击 "运行实例" 按钮查看在线实例