1 登录表单
![登录表单]()
<!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> <!-- method: 提交类型,提交数据以?k=y&k=y查询字符串添加到url中 --> <!-- 1 get提交 --> <form action="" method="post"> <div> <!-- type, name, value --> <label for="username">用户名：</label> <!-- label.for = input.id --> <!-- autofocus: 布尔属性 --> <input type="text" id="username" name="username" value="" placeholder="至少8位" autofocus required > </div> <div> <label for="psw">密码：</label> <input type="password" id="psw" name="password" value="" placeholder="字母+数字" required > </div> <div> <label for="my-email">邮箱：</label> <input type="email" id="my-email" name="email" value="" placeholder="字母+数字" required > <!-- !单选按钮 --> </div> <label for="male">性别:</label> <!-- 所有input，name必须相同 --> <input type="radio" name="gender" id="male" checked> <label for="male">男</label> <input type="radio" name="gender" id="female"> <label for="female">女</label> <div> <!-- !复选框 --> </div> <label for="">爱好:</label> <!-- 所有input，name必须相同 --> <input type="checkbox" name="hobbies" id="game" checked> <label for="game">游戏</label> <input type="checkbox" name="hobbies" id="programmer" checked> <label for="placeholder">编程</label> <input type="checkbox" name="hobbies" id="shoot"> <label for="shoot">摄影</label> </div> <div> <!-- !下拉列表 --> <!-- select.name, option.value , name,value属性不在同一个标签中 --> <label for="user">会员:</label> <select name="user" id="user"> <option value="1" >铜牌会员</option> <option value="2">银牌会员</option> <option value="3" selected>金牌会员</option> </select> </div> <div> <!-- !多行文本框 --> <textarea name="" id="" cols="30" rows="10"></textarea> </div> <div> <button>提交</button> </div> </form></body></html>
2 <a> + <iframe>
<!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>iframe小后台</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> <span>admin</span> <a href="">退出</a> </div> </div> <!-- 左侧导航 --> <ul class="nav"> <li><a href="demo1.html" target="content">菜单项1</a></li> <li><a href="demo2.html" target="content">菜单项2</a></li> <li><a href="demo1.html" target="content">菜单项3</a></li> <li><a href="demo2.html" target="content">菜单项4</a></li> <li><a href="demo1.html" target="content">菜单项5</a></li> </ul> <!-- 右侧内容区 --> <iframe src="" frameborder="2" name="content"></iframe></body></html>
3：元素样式来源与优先级
<!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> <!-- <link rel="stylesheet" href="static/style.css" /> --> <style> @import url('static/style.css'); </style></head><body> <!-- 1. 默认样式: 继承自html --> <!-- 2. 自定义样式1: 行内样式, style属性 --> <!-- <h1 style="color: blue">晚上好</h1> <h1 style="color: blue">吃了吗?</h1> --> <!-- 3. 自定义样式2: 文档样式/内部样式, style标签 --> <h1>晚上好</h1> <h1>吃了吗?</h1> <h1>xxx</h1> <!-- <style> /* 分二步: 1. 找到它: 选择器 2. 设置它: 样式声明 */ h1 { color: blue; } </style> --> <!-- 4. 自定义样式3: 外部样式, css文档 --></body></html>
