一、表单知识
<!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提交类型：默认get提交以?k=y&k=y查询字符串提交到URL --> <!-- post提交更安全，在浏览器 网络-》载荷 中可查看 --> <form action="login.php" method="post"> <div> <!-- type：类型、name:传值变量、value:值 --> <label for="username">用户名：</label> <!-- label中的for和input中的id绑定，值必须一样：label.for = input.id，点击“用户名”会将鼠标焦点落入输入框 --> <!-- autofocus 打开页面自动获取鼠标焦点落入输入框，默认true,值是它本身autofocus --> <!-- required 必填项 --> <input type="text" id="username" name="username" value="" placeholder="请输入用户名" autofocus required /> </div> <div> <!-- password密码类型 --> <label for="password">密 码：</label> <input type="password" id="password" name="password" value="" placeholder="大小写字母加数字" required /> </div> <div> <label for="email">邮 箱：</label> <!-- email类型会自动校验邮箱 --> <input type="email" id="email" name="email" value="" placeholder="找回密码使用" required /> </div> <div> <!-- 单选按钮 --> <label for="male">性别：</label> <!-- 所有input.name必须相同 --> <!-- checked 默认选择 label.for = input.id --> <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> <!-- 复选框 input.name必须是一个数组 --> <label id="">爱好:</label> <input type="checkbox" name="hobbies[]" id="programmer" checked /> <label for="programmer">编程</label> <input type="checkbox" name="hobbies[]" id="read" checked /> <label for="read">阅读</label> <input type="checkbox" name="hobbies[]" id="painting" /> <label for="painting">绘画</label> <input type="checkbox" name="hobbies[]" id="football" /> <label for="football">足球</label> </div> <!-- 下拉列表 --> <label for="user">会员:</label> <select name="level" id="user"> <option value="1">普通会员</option> <option value="2">金牌会员</option> <option value="3" selected>钻石会员</option> </select> <div> <button>提交</button> </div> </form> </body></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> <div> <!--设置a标签中href在iframe框架中打开， a.target = iframe.name --> <a href="https://www.yejuzhi.com/" target="yejuzhi">业聚质</a> <a href="https://www.zaikun.cn" target="yejuzhi">载鲲软件</a> <iframe srcdoc="<h3 style='color:blue'>请点击左侧按钮</h3>" frameboder="1" width="300" height="200" name="yejuzhi" ></iframe> <!-- 视频文件，必须加入播放按钮: controls--> <!-- autoplay自动播放 --> <video src="xxx.mp4" controls width="500" autoplay></video> </div> <hr /> <h1>后台管理系统</h1> <!-- 后台顶部 --> <div class="header"> <h2>某某后台管理系统</h2> <div> <span>xxx,欢迎您!</span> <a href="">退出</a> </div> </div> <!-- 左侧导航 一键生成：ul.nav>li*6>a[href="demo$.html" target="content"]{栏目$} --> <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="demo3.html" target="content">栏目3</a></li> <li><a href="demo4.html" target="content">栏目4</a></li> <li><a href="demo5.html" target="content">栏目5</a></li> <li><a href="demo6.html" target="content">栏目6</a></li> </ul> <!-- 右侧内容显示区 --> <iframe src="" frameborder="2" name="content"></iframe> </body></html>
三、自定义CSS样式
<!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> <!-- 引入外部样式 --> <link rel="stylesheet" href="style.css" /> <!-- 模块化组件引入样式 --> <!-- <style> @import url(style.css); </style> --> </head> <body> <!-- 1.默认样式：继承自html --> <!-- 2.自定义样式：行内样式，style属性定义 --> <h1 style="color: blue">自定义样式</h1> <h1 style="color: blue">没法复用</h1> <hr /> <!-- 3.自定义样式2：内部样式，style标签 --> <h1>自定义样式</h1> <h1>没法复用</h1> <h1>所有h1都定义了</h1> <style> h1 { color: red; } </style> <hr /> <!-- 4.自定义样式3：文档样式 --> <h2>自定义样式</h2> <h2>复用演示</h2> <h2>所有h2都定义了</h2> </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> </head> <body> <form action="login.php" method="post" style="text-align: center; margin: 60px" > <div> <label for="username">用户名：</label> <input type="text" id="username" name="username" value="" placeholder="请输入用户名" autofocus required /> </div> <div> <label for="pws">密 码：</label> <input type="password" id="pws" name="password" value="" placeholder="大小写字母加数字组合" required /> </div> <div> <button>提交</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> </head> <body> <div> <!--设置a标签中href在iframe框架中打开， a.target = iframe.name --> <a href="https://www.yejuzhi.com/" target="yejuzhi">业聚质</a> <a href="https://www.zaikun.cn" target="yejuzhi">载鲲软件</a> <iframe srcdoc="<h3 style='color:blue'>请点击左侧按钮</h3>" frameboder="1" width="300" height="200" name="yejuzhi" > </iframe> </div> </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> h1 { color: red; } h2 { color: aqua; } </style> </head> <body> <h2>自定义样式</h2> <h2 style="color: red">改变演示</h2> <h2>所有h2都定义了</h2> </body></html>
